:root{
    --bg:#000000;
    --panel:#0A0A0A;
    --panel-2:#111110;
    --border:#242422;
    --border-strong:#333330;
    --text:#F2F0EA;
    --text-dim:#8C8A82;
    --text-faint:#54524A;
    --gold:#D9A441;
    --gold-dim:#8A6B2E;
    --green:#3ECF8E;
    --red:#E5484D;
    --font-serif:'Newsreader', serif;
    --font-sans:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html, body{height:100%;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-sans);
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  .screen{
    min-height:100vh;
    min-height:100dvh;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem;
    position:relative;
    touch-action:manipulation;
  }
  .screen.active{display:flex;}

  /* Global news ticker at the very top of every page */
  .news-ticker{
    position:fixed; top:0; left:0; right:0; height:38px; z-index:200;
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(180deg, rgba(20,24,29,0.98), rgba(13,16,20,0.98));
    border-bottom:0.5px solid var(--border); padding:0 16px; backdrop-filter:blur(10px);
    padding-top:env(safe-area-inset-top);
  }
  .nt-live{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.14em;color:var(--gold);flex-shrink:0;}
  .nt-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);animation:ntpulse 2s ease-in-out infinite;}
  @keyframes ntpulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
  .nt-viewport{flex:1;overflow:hidden;height:38px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);}
  .nt-headline{position:absolute;white-space:nowrap;top:50%;left:0;transform:translateY(-50%);transition:opacity .5s ease, transform .5s ease;display:flex;align-items:center;gap:10px;}
  .nt-cat{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:2px 7px;border-radius:3px;flex-shrink:0;}
  .nt-cat.crypto{background:rgba(143,210,232,0.14);color:#8fd2e8;}
  .nt-cat.stock{background:rgba(169,185,220,0.14);color:#a9b9dc;}
  .nt-cat.forex{background:rgba(143,214,194,0.14);color:#8fd6c2;}
  .nt-cat.macro{background:rgba(160,178,196,0.12);color:#9aa7b4;}
  .nt-text{font-size:13.5px;color:var(--text);letter-spacing:0.01em;}
  .nt-src{color:var(--text-faint);font-family:var(--font-mono);font-size:10px;}
  .nt-demo{font-family:var(--font-mono);font-size:9px;color:var(--text-faint);flex-shrink:0;letter-spacing:0.04em;opacity:0.7;}
  body{padding-top:38px;}

  .ticker-bg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:6px;
    opacity:0.10;
    pointer-events:none;
    overflow:hidden;
  }
  .ticker-bg .bar{width:5px;background:var(--gold);}

  .welcome-kicker{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1.25rem;
    z-index:1;
  }
  .welcome-title{
    font-family:var(--font-serif);
    font-style:italic;
    font-weight:400;
    font-size:clamp(28px,5vw,44px);
    text-align:center;
    max-width:600px;
    line-height:1.3;
    color:var(--text);
    z-index:1;
  }
  .btn{
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:500;
    color:var(--text);
    background:transparent;
    border:0.5px solid var(--border-strong);
    border-radius:6px;
    padding:14px 26px;
    cursor:pointer;
    transition:all .15s ease;
    position:relative;
    z-index:2;
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
  }
  .btn:hover{background:rgba(160,178,196,0.10);border-color:rgba(160,178,196,0.55);}
  .btn.primary{background:var(--gold);border-color:var(--gold);color:#1A1204;}
  .btn.primary:hover{background:var(--gold);filter:brightness(1.18);}
  .btn:active{transform:scale(0.97);}
  .btn-row{display:flex;gap:12px;margin-top:2.5rem;z-index:1;}

  .auth-corner{position:absolute;top:24px;right:24px;display:flex;gap:16px;z-index:3;}
  .auth-link{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);cursor:pointer;touch-action:manipulation;}
  .auth-link:hover{color:var(--text);}
  .auth-signup{color:var(--gold);}
  .auth-signup:hover{color:var(--gold);filter:brightness(1.18);}

  .global-search-wrap{position:relative;width:100%;max-width:440px;margin-top:2rem;z-index:2;}
  #globalSearch{
    width:100%;background:var(--panel-2);border:0.5px solid var(--border-strong);border-radius:8px;
    color:var(--text);font-family:var(--font-mono);font-size:16px;padding:13px 14px;outline:none;
  }
  #globalSearch:focus{border-color:var(--gold-dim);}
  .global-results{
    position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
    border:0.5px solid var(--border);border-radius:8px;max-height:260px;overflow-y:auto;display:none;z-index:5;
  }
  .global-results.show{display:block;}
  .global-row{
    display:flex;justify-content:space-between;align-items:center;padding:11px 14px;cursor:pointer;
    border-bottom:0.5px solid var(--border);font-family:var(--font-mono);font-size:13px;
  }
  .global-row:last-child{border-bottom:none;}
  .global-row:hover{background:var(--panel-2);}
  .global-row .g-cat{color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;}
  .global-row .g-status{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;font-family:var(--font-mono);}
  .global-row .g-status.open{color:var(--green);}
  .global-row .g-status.closed{color:var(--text-faint);}
  /* closed markets are still viewable (chart only) - dimmed, not disabled */
  .global-row.disabled{opacity:0.62;}
  .global-row.disabled:hover{background:var(--panel-2);}

  .form-title{font-family:var(--font-serif);font-style:italic;font-size:24px;margin-bottom:1.5rem;}
  .auth-success{color:var(--green);font-size:13px;min-height:16px;margin-top:6px;}
  .mock-note{font-size:11px;color:var(--text-faint);margin-top:1rem;line-height:1.5;}

  .profile-wrap{width:100%;max-width:960px;padding:3.5rem 0 2rem;}
  .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:14px;}
  .pgrid .pcard{margin-bottom:0;}
  .pcard-wide{grid-column:1 / -1;}
  .profile-welcome{font-family:var(--font-serif);font-style:italic;font-size:26px;margin-bottom:1rem;}
  .profile-header{display:flex;align-items:center;gap:14px;margin-bottom:1.5rem;position:relative;}
  .profile-avatar{
    width:52px;height:52px;border-radius:50%;background:var(--gold);color:#1A1204;
    display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:22px;font-weight:500;flex-shrink:0;
    background-size:cover;background-position:center;
  }
  .avatar-wrap{position:relative;width:52px;height:52px;flex-shrink:0;cursor:pointer;}
  .avatar-cam{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--panel-2);border:0.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:9px;}
  .avatar-wrap:hover .avatar-cam{border-color:var(--gold);}
  .avatar-remove{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);cursor:pointer;text-decoration:underline;}
  .avatar-remove:hover{color:var(--red);}
  .profile-name{font-size:18px;font-weight:500;}
  .profile-email{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);}
  .demo-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--gold);border:0.5px solid var(--gold-dim);border-radius:4px;padding:3px 8px;}
  .profile-actions{margin-left:auto;display:flex;gap:10px;align-items:center;flex-shrink:0;}
  .profile-actions .btn{margin-top:0;width:auto;}
  .demo-tag-row{display:flex;justify-content:center;margin-bottom:18px;}
  /* Globe blends into the page — no card box behind the Earth.
     Two-class selector so it beats the later `.pcard` rule regardless of order. */
  .pcard.globe-card{margin-bottom:14px;background:transparent;border:none;box-shadow:none;padding:0;}
  .globe-card .pcard-title{padding-left:2px;}
  .globe-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
  /* Big, full-width stage. The card is transparent, so the space beside the
     sphere shows the page — the Earth blends in with no box around it. */
  .globe-stage{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;}
  .globe-svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none;}
  .globe-svg:active{cursor:grabbing;}
  .globe-panel{position:absolute;top:12px;right:12px;width:180px;background:rgba(10,14,20,0.92);border:0.5px solid #2b3a4d;border-radius:10px;padding:14px;backdrop-filter:blur(6px);}
  .gp-close{position:absolute;top:6px;right:10px;color:var(--text-faint);cursor:pointer;font-size:16px;line-height:1;}
  .gp-close:hover{color:var(--text);}
  .gp-city{font-size:14px;font-weight:500;margin-bottom:6px;padding-right:14px;}
  .gp-status{font-family:var(--font-mono);font-size:12px;margin-bottom:4px;}
  .gp-status.open{color:#4ade80;}
  .gp-status.closed{color:#f87171;}
  .gp-hours{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);line-height:1.5;}
  .gp-trade{margin-top:10px;width:100%;background:var(--gold);color:#1A1204;border:none;border-radius:6px;padding:8px;font-size:12px;font-weight:600;cursor:pointer;}
  .gp-trade:hover{background:var(--gold);filter:brightness(1.18);}
  .globe-info{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);text-align:center;min-height:20px;line-height:1.5;}
  .globe-legend{display:flex;justify-content:center;gap:16px;margin-top:8px;font-family:var(--font-mono);font-size:10px;color:var(--text-faint);}
  .lg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle;}
  .lg-dot.open{background:#4ade80;}
  .lg-dot.closed{background:#f87171;}
  .lg-dot.night{background:#0a0f16;border:0.5px solid #2b3a4d;}
  .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
  .portfolio-summary{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:16px;}
  .pf-box{background:var(--panel);border:0.5px solid var(--border);border-radius:10px;padding:14px 16px;}
  .pf-main{border-color:var(--gold-dim);background:rgba(160,178,196,0.06);}
  .pf-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint);margin-bottom:6px;}
  .pf-val{font-family:var(--font-mono);font-size:20px;color:var(--text);}
  .pf-main .pf-val{color:var(--gold);font-size:24px;}
  .close-pos-btn{font-family:var(--font-sans);font-size:11px;background:transparent;border:0.5px solid var(--border-strong);color:var(--text-dim);border-radius:5px;padding:5px 10px;cursor:pointer;touch-action:manipulation;}
  .close-pos-btn:hover{border-color:var(--red);color:var(--red);}
  .news-list{display:flex;flex-direction:column;}
  .news-item{padding:11px 0;border-bottom:0.5px solid var(--border);}
  .news-item:last-child{border-bottom:none;}
  .news-head{font-size:13px;line-height:1.4;margin-bottom:5px;}
  .news-meta{display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:10px;color:var(--text-faint);}
  .news-tag{padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:0.04em;font-size:9px;}
  .news-tag.crypto{background:rgba(143,210,232,0.13);color:#8fd2e8;}
  .news-tag.stock{background:rgba(169,185,220,0.13);color:#a9b9dc;}
  .news-tag.forex{background:rgba(143,214,194,0.13);color:#8fd6c2;}
  .news-tag.macro{background:rgba(160,178,196,0.11);color:#9aa7b4;}
  .stat-box{background:var(--panel);border:0.5px solid var(--border);border-radius:10px;padding:14px 12px;text-align:center;}
  .stat-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint);margin-bottom:6px;}
  .stat-val{font-family:var(--font-mono);font-size:18px;color:var(--text);}
  .stat-val.green{color:var(--green);}
  .stat-val.red{color:var(--red);}
  .pcard{background:var(--panel);border:0.5px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;}
  .pcard-title{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px;}
  .pchart{width:100%;height:auto;display:block;}
  .edge-row{display:flex;align-items:center;gap:12px;}
  .edge-radar{width:55%;height:auto;}
  .edge-score-wrap{flex:1;}
  .edge-score-num{font-family:var(--font-mono);font-size:32px;color:var(--gold);margin-bottom:10px;}
  .edge-bar{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,#E5484D,#D9A441,#3ECF8E);}
  .edge-bar-marker{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--text);border:2px solid var(--bg);transform:translateX(-50%);}
  .edge-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--text-faint);margin-top:6px;}
  .pnl-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal-cell{aspect-ratio:1;border-radius:5px;border:0.5px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;color:var(--text-faint);}
  .cal-cell.win{background:rgba(62,207,142,0.16);border-color:rgba(62,207,142,0.3);color:var(--green);}
  .cal-cell.loss{background:rgba(229,72,77,0.16);border-color:rgba(229,72,77,0.3);color:var(--red);}
  .cal-cell .cal-day{font-size:8px;color:var(--text-faint);}
  .login-gate{background:rgba(160,178,196,0.09);border:0.5px solid var(--gold-dim);border-radius:6px;padding:10px 12px;font-size:12px;color:var(--gold);line-height:1.5;}
  /* (login-gate no longer used on the chart — chart now requires login to reach) */

  .market-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    max-width:640px;
    width:100%;
  }
  .market-card{
    background:var(--panel);
    border:0.5px solid var(--border);
    border-radius:10px;
    padding:22px 18px;
    cursor:pointer;
    transition:all .15s ease;
    text-align:left;
    touch-action:manipulation;
  }
  .market-card:hover{border-color:var(--border-strong);background:var(--panel-2);}
  .market-card .name{font-size:16px;font-weight:500;margin-bottom:6px;}
  .market-card .status{font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;}
  .status.open{color:var(--green);}
  .status.closed{color:var(--text-faint);}

  .closed-note{margin-top:1.5rem;color:var(--text-dim);font-size:13px;max-width:420px;text-align:center;}
  .athens-clock{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--text-faint);
    margin-bottom:1.5rem;
    letter-spacing:0.05em;
  }
  .step-heading{
    font-family:var(--font-sans);
    font-size:18px;
    font-weight:500;
    margin-bottom:1.25rem;
  }
  .exchange-grid, .session-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    max-width:640px;
    width:100%;
  }
  .exchange-card{
    background:var(--panel);
    border:0.5px solid var(--border);
    border-radius:10px;
    padding:16px 18px;
    cursor:pointer;
    transition:all .15s ease;
    text-align:left;
    touch-action:manipulation;
  }
  .exchange-card:hover{border-color:var(--border-strong);background:var(--panel-2);}
  .exchange-card.disabled{opacity:0.4;cursor:not-allowed;}
  .exchange-card.disabled:hover{border-color:var(--border);background:var(--panel);}
  .exchange-card .ex-name{font-size:14px;font-weight:500;margin-bottom:4px;}
  .exchange-card .ex-hours{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-bottom:6px;}
  .session-card{
    background:var(--panel);
    border:0.5px solid var(--border);
    border-radius:10px;
    padding:16px 18px;
    text-align:left;
    cursor:pointer;
    transition:all .15s ease;
    touch-action:manipulation;
  }
  .session-card:hover{border-color:var(--border-strong);background:var(--panel-2);}
  .session-card.disabled{opacity:0.4;cursor:not-allowed;}
  .session-card.disabled:hover{border-color:var(--border);background:var(--panel);}
  .session-card .ex-name{font-size:14px;font-weight:500;margin-bottom:4px;}
  .session-card .ex-hours{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-bottom:6px;}
  .overlap-note{
    margin-top:1.5rem;
    max-width:640px;
    width:100%;
    background:var(--panel);
    border:0.5px solid var(--gold-dim);
    border-radius:10px;
    padding:14px 18px;
    font-size:13px;
    color:var(--text-dim);
    line-height:1.6;
  }
  .overlap-note b{color:var(--gold);}

  .form-card{
    background:var(--panel);
    border:0.5px solid var(--border);
    border-radius:12px;
    padding:2rem;
    width:100%;
    max-width:420px;
  }
  .field{margin-bottom:1.25rem;}
  .field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;}
  .field input{
    width:100%;
    background:var(--panel-2);
    border:0.5px solid var(--border-strong);
    border-radius:6px;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:16px;
    padding:10px 12px;
    outline:none;
  }
  .field input:focus{border-color:var(--gold-dim);}
  .amount-row{display:flex;align-items:center;gap:8px;}
  .amount-row span{font-family:var(--font-mono);color:var(--text-dim);}

  .quick-picks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
  .chip{
    font-family:var(--font-mono);
    font-size:12px;
    background:var(--panel-2);
    border:0.5px solid var(--border-strong);
    border-radius:5px;
    padding:7px 10px;
    cursor:pointer;
    color:var(--text-dim);
    touch-action:manipulation;
  }
  .chip:hover{border-color:var(--gold-dim);color:var(--gold);}
  .symbol-results{margin-top:8px;max-height:200px;overflow-y:auto;border:0.5px solid var(--border);border-radius:6px;display:none;}
  .symbol-results.show{display:block;}
  .symbol-row{
    display:flex;justify-content:space-between;padding:10px 12px;cursor:pointer;
    border-bottom:0.5px solid var(--border);font-family:var(--font-mono);font-size:13px;
    touch-action:manipulation;
  }
  .symbol-row:last-child{border-bottom:none;}
  .symbol-row:hover{background:var(--panel-2);}
  .symbol-row .cat{color:var(--text-faint);font-size:11px;}
  .sym-label{display:flex;flex-direction:column;gap:2px;}
  .sym-name{font-family:var(--font-sans);font-size:11px;color:var(--text-dim);font-weight:400;}
  .selected-chip{
    display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);
    border:0.5px solid var(--gold-dim);border-radius:6px;padding:8px 12px;
    font-family:var(--font-mono);font-size:14px;color:var(--gold);
  }

  .wallet-choice{display:flex;flex-direction:column;gap:10px;margin-top:1.5rem;}
  .setup-error{color:var(--red);font-size:12px;min-height:16px;margin-top:6px;}
  .wallet-choice .btn{width:100%;}

  .dash{width:100%;max-width:1080px;display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;padding-top:8px;}
  .dash-header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;gap:12px;}
  .dash-header .sym{font-family:var(--font-mono);font-size:20px;font-weight:500;}
  #dashHeaderBadges{flex-wrap:wrap;justify-content:flex-end;}
  .back-inline{font-family:var(--font-mono);font-size:16px;color:var(--text-faint);cursor:pointer;touch-action:manipulation;}
  .back-inline:hover{color:var(--text-dim);}
  .badge{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--text-faint);border:0.5px solid var(--border);border-radius:4px;padding:3px 8px;
  }
  .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px;animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

  .chart-panel{background:var(--panel);border:0.5px solid var(--border);border-radius:12px;padding:1rem;}
  .timeframes{display:flex;gap:6px;margin-bottom:12px;align-items:center;}
  .tf-btn{
    font-family:var(--font-mono);font-size:11px;background:transparent;border:0.5px solid var(--border);
    color:var(--text-dim);border-radius:5px;padding:6px 11px;cursor:pointer;touch-action:manipulation;
  }
  .tf-btn.active{border-color:var(--gold-dim);color:var(--gold);}
  .zoom-hint{margin-left:auto;font-size:11px;color:var(--text-faint);font-family:var(--font-mono);}
  .chart-svg{width:100%;height:280px;display:block;cursor:grab;touch-action:none;}
  .chart-price{font-family:var(--font-mono);font-size:18px;margin-left:12px;}

  .side-panel{background:var(--panel);border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:16px;}
  .order-error{color:var(--red);font-size:12px;min-height:14px;}
  .type-toggle button{font-size:12px;}
  .field-hint{font-family:var(--font-mono);font-size:9px;color:var(--text-faint);font-weight:400;text-transform:none;letter-spacing:0;}
  .rr-readout{display:none;gap:8px;}
  .rr-readout.show{display:flex;}
  .rr-box{flex:1;background:var(--panel-2);border:0.5px solid var(--border);border-radius:8px;padding:8px 10px;text-align:center;}
  .rr-box .rr-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-faint);margin-bottom:3px;}
  .rr-box .rr-val{font-family:var(--font-mono);font-size:14px;}
  .rr-box .rr-val.up{color:var(--green);}
  .rr-box .rr-val.down{color:var(--red);}
  .order-status{font-size:11px;font-family:var(--font-mono);min-height:14px;letter-spacing:0.03em;}
  .order-status.ready{color:var(--green);}
  .order-status.incomplete{color:var(--text-faint);}
  .order-status.invalid{color:var(--gold);}
  .btn.primary:disabled{opacity:0.4;cursor:not-allowed;}
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
  .modal-overlay.show{display:flex;}
  .modal-card{background:var(--panel);border:0.5px solid var(--border-strong);border-radius:14px;padding:24px;width:100%;max-width:380px;}
  .modal-title{font-family:var(--font-serif);font-style:italic;font-size:22px;margin-bottom:16px;}
  .review-sym{font-family:var(--font-mono);font-size:16px;margin-bottom:4px;}
  .review-dir{font-family:var(--font-sans);font-size:12px;font-weight:600;display:inline-block;padding:3px 10px;border-radius:5px;margin-bottom:16px;}
  .review-dir.long{background:rgba(62,207,142,0.15);color:var(--green);}
  .review-dir.short{background:rgba(229,72,77,0.15);color:var(--red);}
  .review-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
  .review-line{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:13px;}
  .review-line .rl-label{color:var(--text-faint);}
  .review-line .rl-val.up{color:var(--green);}
  .review-line .rl-val.down{color:var(--red);}
  .review-note{font-size:11px;color:var(--text-faint);line-height:1.5;margin-bottom:16px;}
  .modal-actions{display:flex;gap:10px;}
  .modal-actions .btn{flex:1;margin-top:0;}
  .wallet-sim{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
  .wallet-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0.5px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s;}
  .wallet-opt:hover{border-color:var(--gold-dim);}
  .wallet-opt.selected{border-color:var(--gold);background:rgba(160,178,196,0.06);}
  .wallet-opt .wo-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
  .wallet-opt .wo-name{font-size:14px;}
  .done-check{width:52px;height:52px;border-radius:50%;background:rgba(62,207,142,0.15);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
  .panel-title{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);}
  .toggle-pair{display:flex;border:0.5px solid var(--border-strong);border-radius:6px;overflow:hidden;}
  .toggle-pair button{
    flex:1;background:transparent;border:none;color:var(--text-dim);font-family:var(--font-sans);
    font-size:13px;font-weight:500;padding:11px 0;cursor:pointer;touch-action:manipulation;
  }
  .toggle-pair button.on.long{background:rgba(62,207,142,0.15);color:var(--green);}
  .toggle-pair button.on.short{background:rgba(229,72,77,0.15);color:var(--red);}

  .ai-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);border:0.5px solid var(--border);border-radius:6px;padding:10px 12px;}
  .ai-toggle span{font-size:13px;}
  .switch{width:36px;height:20px;background:var(--border-strong);border-radius:10px;position:relative;cursor:pointer;transition:background .15s;touch-action:manipulation;}
  .switch.on{background:var(--gold-dim);}
  .switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:left .15s;}
  .switch.on::after{left:18px;background:#1A1204;}

  .manual-fields{display:none;flex-direction:column;gap:10px;}
  .manual-fields.show{display:flex;}
  .manual-fields .field{margin-bottom:0;}

  .ai-note{font-size:12px;color:var(--text-dim);line-height:1.5;background:var(--panel-2);border:0.5px solid var(--border);border-radius:6px;padding:10px 12px;display:none;}
  .ai-note.show{display:block;}
  .coming-soon{background:var(--panel-2);border:0.5px solid var(--border);border-radius:6px;padding:9px 12px;font-size:13px;color:var(--text-faint);}

  .positions-panel{grid-column:1/-1;background:var(--panel);border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;display:none;}
  .position-row{display:grid;grid-template-columns:1.2fr 0.8fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:10px 4px;border-bottom:0.5px solid var(--border);font-family:var(--font-mono);font-size:13px;}
  .position-row:last-child{border-bottom:none;}
  .dir-tag{font-family:var(--font-sans);font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px;width:fit-content;}
  .dir-tag.long{background:rgba(62,207,142,0.15);color:var(--green);}
  .dir-tag.short{background:rgba(229,72,77,0.15);color:var(--red);}
  .pnl.up{color:var(--green);}
  .pnl.down{color:var(--red);}

  .back-link{position:absolute;top:24px;left:24px;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);cursor:pointer;z-index:2;touch-action:manipulation;}
  .back-link:hover{color:var(--text-dim);}
  .home-link{position:absolute;top:24px;right:24px;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);cursor:pointer;z-index:2;touch-action:manipulation;}
  .home-link:hover{color:var(--gold);}
  .profile-link{position:absolute;top:24px;right:96px;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);cursor:pointer;z-index:2;touch-action:manipulation;display:none;}
  .profile-link:hover{color:var(--gold);}

  @media (hover:none){
    .btn:hover, .market-card:hover, .chip:hover, .symbol-row:hover{background:inherit;border-color:inherit;}
  }
  @media (max-width:520px){
    .screen{padding:1.25rem;padding-top:max(1.25rem, env(safe-area-inset-top));padding-bottom:max(1.25rem, env(safe-area-inset-bottom));}
    .market-grid{grid-template-columns:1fr;}
    .btn-row{flex-direction:column;width:100%;}
    .dash-header{flex-direction:column;align-items:flex-start;gap:8px;}
    .side-panel{order:2;}
    .chart-panel{order:1;}
    .chart-svg{height:220px;}
    .exchange-grid, .session-grid{grid-template-columns:1fr;}
    .back-link{top:max(16px, env(safe-area-inset-top));}
    .home-link{top:max(16px, env(safe-area-inset-top));right:16px;}
    .profile-link{top:max(16px, env(safe-area-inset-top));right:76px;}
  }
  @media (max-width:760px){
    .dash{grid-template-columns:1fr;}
    .pgrid{grid-template-columns:1fr;}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .profile-header{flex-wrap:wrap;}
    .profile-actions{margin-left:0;width:100%;margin-top:12px;}
    .profile-actions .btn{flex:1;}
    .globe-stage{aspect-ratio:4/3;max-width:100%;}
    .portfolio-summary{grid-template-columns:1fr;}
    .globe-panel{width:150px;top:8px;right:8px;padding:11px;}
  }
  @media (max-width:520px){
    .news-ticker{height:34px;gap:9px;padding:0 11px;}
    .nt-viewport{height:34px;}
    .nt-text{font-size:12px;}
    .nt-demo{display:none;}
    body{padding-top:34px;}
    .rr-readout{flex-wrap:wrap;}
  }

/* --- 3D Earth canvas (roadmap A5). Sits in .globe-stage in place of the
   SVG globe, which stays as the no-WebGL fallback. --- */
.globe-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; border-radius:inherit;
  cursor:grab; touch-action:none;
}
.globe-canvas:active{ cursor:grabbing; }

/* --- News ticker live state (roadmap B5) ---
   The LIVE dot is green on a real feed and amber on demo headlines. The app
   must never look like it has live data when it doesn't. --- */
.news-ticker .nt-live.is-demo{ color:var(--text-faint); }
.news-ticker .nt-live.is-demo .nt-dot{ background:var(--text-faint); animation:none; }
.news-ticker:hover .nt-headline{ opacity:1; }
#ntHeadline .nt-src{ white-space:nowrap; }

/* --- Market data feed badge (roadmap A2/A3) ---
   Green dot on a real provider feed, amber while prices are simulated. Same
   rule as the news ticker: never look live when you aren't. --- */
#feedBadge.is-demo .live-dot{ background:var(--text-faint); animation:none; }

/* ============================================================
   TradingView Lightweight Charts container (roadmap A4)
   ============================================================ */
.tv-chart{ width:100%; height:300px; position:relative; }
.chart-panel .chart-svg.tv-hidden{ display:none; }

/* ============================================================
   Perpetual futures order ticket (paper)
   Our own take on the standard derivatives panel layout.
   ============================================================ */
.futures-panel{ display:flex; flex-direction:column; gap:10px; }
.fut-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fut-modes{ display:flex; border:1px solid #242422; border-radius:6px; overflow:hidden; }
.fut-mode{ background:transparent; color:var(--dim,#8C8A82); border:0; padding:5px 12px;
  font-size:.72rem; cursor:pointer; font-family:inherit; }
.fut-mode.on{ background:#242422; color:var(--ink,#EDEAE4); }
.fut-lev-wrap{ display:flex; align-items:center; gap:6px; }
.fut-lev-label{ font-size:.68rem; color:var(--dim,#8C8A82); }
.fut-lev-val{ font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--gold,#D9A441); }

.fut-lev-slider{ width:100%; accent-color:var(--gold,#D9A441); cursor:pointer; }
.fut-lev-ticks{ display:flex; justify-content:space-between; font-size:.6rem; color:#54524A; margin-top:-6px; }

.fut-balance,.fut-readout,.fut-liq{ display:flex; flex-direction:column; gap:3px;
  font-size:.7rem; color:var(--dim,#8C8A82); }
.fut-balance div,.fut-readout div,.fut-liq div{ display:flex; justify-content:space-between; }
.fut-balance b,.fut-readout b,.fut-liq b{ color:var(--ink,#EDEAE4); font-weight:500;
  font-family:'JetBrains Mono',monospace; }
.fut-liq b{ color:#E5A03D; }

.fut-types{ display:flex; gap:4px; }
.fut-type{ flex:1; background:transparent; border:1px solid #242422; color:var(--dim,#8C8A82);
  padding:6px 0; border-radius:5px; font-size:.7rem; cursor:pointer; font-family:inherit; }
.fut-type.on{ border-color:var(--gold,#D9A441); color:var(--ink,#EDEAE4); }

.fut-field{ display:flex; align-items:center; gap:6px; border:1px solid #242422;
  border-radius:6px; padding:5px 8px; }
.fut-field label{ font-size:.66rem; color:#54524A; min-width:64px; }
.fut-field input{ flex:1; background:transparent; border:0; color:var(--ink,#EDEAE4);
  font-family:'JetBrains Mono',monospace; font-size:.82rem; outline:none; min-width:0; }
.fut-inline-btn{ background:#1a1a18; border:0; color:var(--dim,#8C8A82); font-size:.64rem;
  padding:3px 7px; border-radius:4px; cursor:pointer; font-family:inherit; }

.fut-pcts{ display:flex; gap:4px; }
.fut-pct{ flex:1; background:transparent; border:1px solid #242422; color:var(--dim,#8C8A82);
  padding:4px 0; border-radius:4px; font-size:.66rem; cursor:pointer; font-family:inherit; }
.fut-pct:hover{ border-color:var(--gold,#D9A441); color:var(--ink,#EDEAE4); }

.fut-tpsl-toggle{ display:flex; align-items:center; gap:6px; font-size:.7rem;
  color:var(--dim,#8C8A82); cursor:pointer; }
.fut-tpsl{ display:flex; flex-direction:column; gap:6px; }
.fut-proj{ display:flex; flex-direction:column; gap:2px; font-size:.66rem;
  color:var(--dim,#8C8A82); font-family:'JetBrains Mono',monospace; }

.fut-error{ display:none; font-size:.7rem; color:#E5484D; line-height:1.35; }

.fut-actions{ display:flex; gap:6px; }
.fut-buy,.fut-sell{ flex:1; border:0; padding:11px 0; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:600; color:#0A0A0A; }
.fut-buy{ background:#3ECF8E; }
.fut-sell{ background:#E5484D; }
.fut-buy:disabled,.fut-sell:disabled{ opacity:.55; cursor:default; }
.fut-note{ font-size:.62rem; color:#54524A; line-height:1.4; }

.fut-row{ flex-wrap:wrap; gap:6px 10px; font-size:.7rem; }
.fut-row .fut-liq-cell{ color:#E5A03D; }
.fut-order-row{ opacity:.75; }
.fut-pending{ color:var(--gold,#D9A441); font-size:.66rem; }

/* ============================================================
   Wallet / broker connections
   ============================================================ */
.connections-card .conn-sub{ font-size:.68rem; color:#54524A; margin:10px 0 4px; text-transform:uppercase; letter-spacing:.04em; }
.conn-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border:1px solid #242422; border-radius:8px; }
.conn-row.connected{ border-color:#2c4a3a; background:rgba(62,207,142,0.05); }
.conn-detail{ font-size:.74rem; color:var(--dim,#8C8A82); }
.conn-real{ font-size:.6rem; color:#3ECF8E; border:1px solid #2c4a3a; border-radius:4px; padding:1px 5px; margin-left:6px; }
.conn-paper{ font-size:.6rem; color:var(--gold,#D9A441); border:1px solid #4a3f24; border-radius:4px; padding:1px 5px; margin-left:6px; }
.conn-btn{ background:transparent; border:1px solid #333; color:var(--dim,#8C8A82); border-radius:6px;
  padding:5px 12px; font-size:.72rem; cursor:pointer; font-family:inherit; white-space:nowrap; }
.conn-btn.primary{ border-color:var(--gold,#D9A441); color:var(--ink,#EDEAE4); }
.conn-btn:hover{ border-color:var(--gold,#D9A441); }

.connect-options{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.connect-opt{ display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer;
  background:#151513; border:1px solid #242422; border-radius:10px; font-family:inherit; text-align:left; }
.connect-opt:hover{ border-color:var(--gold,#D9A441); }
.connect-opt:disabled{ opacity:.5; cursor:default; }
.connect-icon{ font-size:1.4rem; }
.connect-name{ flex:1; color:var(--ink,#EDEAE4); font-size:.9rem; font-weight:500; }
.connect-status{ font-size:.66rem; color:var(--dim,#8C8A82); }

/* per-connection live balance block */
.conn-balance{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; padding:8px 11px 2px;
  font-size:.72rem; color:var(--dim,#8C8A82); }
.conn-balance div{ display:flex; justify-content:space-between; }
.conn-balance b{ color:var(--ink,#EDEAE4); font-family:'JetBrains Mono',monospace; font-weight:500; }
.conn-balance b.up{ color:#3ECF8E; }
.conn-balance b.down{ color:#E5484D; }

/* market/product tag at the top of the trade panel */
.fut-market-tag{ font-size:.64rem; color:#54524A; text-transform:uppercase; letter-spacing:.05em;
  padding-bottom:2px; border-bottom:1px solid #1c1c1a; margin-bottom:2px; }

/* ============================================================
   Chart overlays (order #4): live P&L, candle countdown, drag popup
   ============================================================ */
.tv-chart{ position:relative; }
.tv-badge{ position:absolute; z-index:5; font-family:'JetBrains Mono',monospace; font-size:.66rem;
  padding:3px 8px; border-radius:5px; pointer-events:none; background:rgba(20,20,18,0.85); border:1px solid #242422; }
.tv-badge-count{ top:8px; left:8px; color:var(--dim,#8C8A82); }
.tv-badge-pnl{ top:8px; right:64px; }
.tv-badge-pnl.up{ color:#3ECF8E; border-color:#2c4a3a; }
.tv-badge-pnl.down{ color:#E5484D; border-color:#4a2c2c; }

.tv-repos-pop{ position:absolute; right:64px; z-index:8; width:180px; display:none;
  background:#151513; border:1px solid #333; border-radius:8px; padding:10px; box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.trp-title{ font-size:.72rem; color:var(--ink,#EDEAE4); margin-bottom:6px; font-weight:600; }
.trp-row{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--dim,#8C8A82); margin:2px 0; }
.trp-row b{ color:var(--ink,#EDEAE4); font-family:'JetBrains Mono',monospace; }
.trp-row b.up{ color:#3ECF8E; } .trp-row b.down{ color:#E5484D; }
.trp-actions{ display:flex; gap:6px; margin-top:8px; }
.trp-actions .btn{ flex:1; padding:5px 0; font-size:.72rem; }

/* order#5: profile open-positions rows (click to open the chart) */
.profile-pos-row{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  padding:9px 11px; border:1px solid #242422; border-radius:8px; margin-bottom:6px;
  cursor:pointer; font-size:.74rem; }
.profile-pos-row:hover{ border-color:var(--gold); background:rgba(160,178,196,0.05); }
.profile-pos-row .pp-sym{ font-weight:600; color:var(--ink,#EDEAE4); }
.profile-pos-row .pp-cell{ color:var(--dim,#8C8A82); font-family:'JetBrains Mono',monospace; }
.profile-pos-row .pnl{ font-family:'JetBrains Mono',monospace; margin-left:auto; }
.profile-pos-row .pnl.up{ color:#3ECF8E; } .profile-pos-row .pnl.down{ color:#E5484D; }
.profile-pos-row .pp-go{ color:var(--gold,#D9A441); font-size:.68rem; }

/* LEVERAGE AS ITS OWN BADGE - amber, because leverage is risk and should read
   as a warning colour, not as part of the word "long". */
.lev-badge{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  padding:2px 7px; border-radius:4px; color:#ffc061;
  background:rgba(255,192,97,0.12); border:1px solid rgba(255,192,97,0.35); }

/* WHEN A TIMED TRADE SELLS. Own line (flex-basis 100%), a thin progress bar
   through the hold, and the date in bold - the one thing he wanted to know. */
.pp-clock{ flex-basis:100%; display:flex; align-items:center; gap:8px;
  font-size:.68rem; color:var(--dim,#8C8A82); }
.pp-clock b{ color:var(--ink,#EDEAE4); font-weight:600; }
.pp-clock-bar{ flex:0 0 70px; height:4px; border-radius:2px;
  background:rgba(160,178,196,0.15); overflow:hidden; }
.pp-clock-bar i{ display:block; height:100%; background:var(--gold,#5fd0ff); }
.pp-clock.due{ color:#ffc061; }

/* AVERAGE WIN / AVERAGE LOSS on the bot row. */
.bsize-sep{ opacity:.35; margin:0 4px; font-weight:400; }
.bstat-v .pos{ color:#3ECF8E; } .bstat-v .neg{ color:#E5484D; }

/* order#5: live P&L badge is now interactive (has a close X) */
.tv-badge-pnl{ pointer-events:auto; display:none; align-items:center; gap:8px; }
.tv-pnl-close{ cursor:pointer; font-size:.95rem; line-height:1; opacity:.7; padding:0 2px; }
.tv-pnl-close:hover{ opacity:1; }

/* ============================================================
   Flat HUD world map (profile) — original render, Natural Earth data
   ============================================================ */
.flatmap-svg{ width:100%; height:100%; display:block; cursor:grab; touch-action:none; user-select:none; }
.flatmap-svg:active{ cursor:grabbing; }
.fm-country{ fill:rgba(150,166,182,0.07); stroke:var(--gold); stroke-width:0.7; stroke-linejoin:round; }
/* Inland water: the SAME accent, just quieter and thinner, so lakes read
   as detail inside a landmass rather than as a second coastline. No new
   colour is introduced - the map keeps exactly the palette it had. */
.fm-lake{ fill:rgba(9,12,15,0.55); stroke:var(--gold); stroke-width:0.35;
          stroke-linejoin:round; opacity:0.45; }
.fm-city-dot{ fill:#7fe3ff; opacity:0.55; }
.fm-marker{ fill:rgba(77,255,176,0.14); stroke:#4dffb0; stroke-width:1.4; cursor:pointer; transition:r .15s ease; }
.fm-marker.closed{ fill:rgba(255,90,106,0.12); stroke:#ff5a6a; }
.fm-marker.selected{ stroke-width:2.4; }
.fm-marker:hover{ r:7; }
.fm-marker-core{ fill:#eafff6; pointer-events:none; }
.fm-label{ fill:#bfefff; font-family:'JetBrains Mono',monospace; letter-spacing:1px;
  paint-order:stroke; stroke:rgba(7,9,11,0.85); stroke-width:3px; pointer-events:none; }
.fm-label.market{ fill:#eafff6; }

/* ============================================================
   Radar scan sweep over the map (screen-space, CSS motion)
   ============================================================ */
.fm-scan{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.fm-scan::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:130px;
  background:linear-gradient(90deg, transparent, rgba(160,178,196,0.10), rgba(196,210,224,0.22), rgba(160,178,196,0.10), transparent);
  filter:blur(1px); animation:fmSweep 6.5s linear infinite; }
/* no scanline tint here - it was a rectangle only over the map, which is what
   made the map read as a separate panel. The page texture already covers this. */
@keyframes fmSweep{ 0%{ left:-150px; } 100%{ left:100%; } }

/* ============================================================
   HUD command-center theme — APP-WIDE (every screen).
   Re-themes by overriding the CSS variables the existing components already
   use, so panels/stats/buttons all turn cyan without rewriting each component.
   ============================================================ */
/* ============================================================
   WAR MACHINE - gunmetal, not navy.

   The move that makes an interface look serious is not adding colour, it is
   TAKING IT AWAY. A warship console, a cockpit, a dealing desk: they are grey
   steel and white stencil, and colour appears only where it MEANS something.
   The old theme washed every panel, border and label in cyan, so cyan stopped
   carrying information - and green profit, red loss and the red REAL MONEY
   banner had to shout over it.

   So: the chrome is desaturated graphite, and these three keep their meaning
   and must never be reused for decoration -
       green  = profit          red = loss, and real money
       amber  = broker paper account
   ============================================================ */
body{
  --panel: rgba(18,22,26,0.74);
  --panel-2: rgba(26,31,37,0.82);
  --border: rgba(150,166,182,0.16);
  --border-strong: rgba(150,166,182,0.34);
  --gold: #b9c7d3;                 /* accent -> brushed steel */
  --gold-dim: rgba(185,199,211,0.42);
  --text: #e9edf1;
  --text-faint: #7e8b98;           /* muted labels -> neutral grey */
  --bg: #07090b;
  background:
    radial-gradient(1500px 950px at 50% 22%, #12161b, #07090b 74%) fixed;
}

/* PER-SCREEN ACCENT. Each section gets its own tint so you always know where
   you are, but they sit at the same lightness and only a few degrees apart -
   a change of light, not a change of paint. Anything louder would compete with
   the status colours above, which is the whole thing this theme is avoiding. */
#screen-welcome        { --gold:#d3dce4; --gold-dim:rgba(211,220,228,0.40); }
#screen-market         { --gold:#8fd2e8; --gold-dim:rgba(143,210,232,0.40); }
#screen-exchange       { --gold:#a9b9dc; --gold-dim:rgba(169,185,220,0.40); }
#screen-forex-sessions { --gold:#8fd6c2; --gold-dim:rgba(143,214,194,0.40); }
#screen-setup          { --gold:#bcc8d4; --gold-dim:rgba(188,200,212,0.40); }
#screen-dash           { --gold:#7fcdea; --gold-dim:rgba(127,205,234,0.40); }
#screen-profile        { --gold:#c6d2da; --gold-dim:rgba(198,210,218,0.40); }
#screen-login,
#screen-signup         { --gold:#d3dce4; --gold-dim:rgba(211,220,228,0.40); }
/* Same navy + grid texture on EVERY screen, so the map's world is the whole app. */
.screen{
  background:
    radial-gradient(1000px 460px at 50% -4%, rgba(150,170,190,0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(160,178,196,0.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(160,178,196,0.035) 0 1px, transparent 1px 46px),
    radial-gradient(1500px 950px at 50% 22%, #12161b, #07090b 74%);
}
.pcard, .stat-box, .pf-box, .conn-row,
.form-card, .market-card, .exchange-card, .session-card,
.side-panel, .positions-panel, .chart-panel, .modal-card{
  box-shadow:0 0 0 1px rgba(160,178,196,0.05), inset 0 0 26px rgba(70,80,92,0.08);
  backdrop-filter:none;          /* keep the wave SHARP through the card */
}
.pcard-title, .panel-title, .step-heading{ color:#7fd8ff; }
.pcard.globe-card{ box-shadow:none; backdrop-filter:none; }
.profile-welcome, .welcome-title{ color:var(--gold); }
.stat-val{ text-shadow:0 0 10px rgba(160,178,196,0.18); }
.demo-tag{ color:var(--gold); border-color:var(--gold-dim); }
/* Green and red keep their meaning; steel is the neutral accent. */
.btn.primary{ color:#04121c; }
.news-ticker{
  /* THIS is the rule that paints the bar - it comes after the one at the
     top of the file and wins. Same trap as .screen: re-theming the first
     declaration changes nothing you can see. Graphite now, matching the
     panels rather than sitting in its own darker blue. */
  background:linear-gradient(180deg, rgba(20,24,29,0.96), rgba(11,14,18,0.96));
  border-bottom-color:rgba(160,178,196,0.22);
}
.ticker-bg .bar{ background:var(--gold); }

/* leader line from a spread-out (de-clustered) marker to its true city spot */
.fm-leader{ stroke:rgba(120,220,255,0.45); stroke-width:0.7; stroke-dasharray:2 2; }

/* ============================================================
   Full-page living background + welcome sequence
   ============================================================ */
.wave-bg{ position:fixed; inset:0; width:100vw; height:100vh; display:block;
  pointer-events:none; z-index:0; }
.screen{ position:relative; z-index:1; background-color:transparent; }
/* Screens keep the grid texture but let the wave show through.
   THIS is the rule that actually paints - it comes after the earlier .screen
   block and wins, which is why re-theming the earlier one alone changed
   nothing on screen. Grid lines are neutral steel now, and the wash is a
   graphite grey rather than a navy tint. */
.screen{
  background:
    repeating-linear-gradient(0deg, rgba(160,178,196,0.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(160,178,196,0.035) 0 1px, transparent 1px 46px),
    linear-gradient(rgba(9,12,15,0.66), rgba(9,12,15,0.66));
}

/* magnifier: no box, just the glyph */
.search-toggle{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:none; background:none; color:var(--text-dim);
  transition:color .15s ease, transform .15s ease; }
.search-toggle:hover{ color:var(--gold); transform:scale(1.12); background:none; }
.search-toggle.on{ color:var(--gold); background:none; }

/* live-typed greeting */
.welcome-line{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(26px,4.6vw,42px); color:#dff2ff; text-align:center;
  min-height:1.3em; letter-spacing:0.01em;
  text-shadow:0 0 26px rgba(160,178,196,0.28);
}
.welcome-line.typing::after{
  content:'▌'; margin-left:2px; color:var(--gold); animation:caret .8s step-end infinite;
}
@keyframes caret{ 0%,100%{opacity:1;} 50%{opacity:0;} }

/* sign-in panel that appears after the greeting */
.welcome-auth{
  display:none; margin-top:26px; padding:20px 22px; border-radius:12px;
  background:rgba(18,22,26,0.72); border:1px solid rgba(160,178,196,0.22);
  backdrop-filter:blur(3px); text-align:center;
  animation:searchIn .25s ease both;
}
.welcome-auth.show{ display:block; }
.wa-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:#7fd8ff; margin-bottom:14px; }
.wa-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wa-actions .btn{ margin-top:0; }

/* search bar: only rendered for a signed-in user, revealed by the magnifier */
.global-search-wrap{ display:none; margin-top:22px; }
.global-search-wrap.open{ display:block; animation:searchIn .18s ease both; }
@keyframes searchIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

/* Map is NOT solid: the wave is erased behind it by wave.js instead. */
.globe-stage{ background:transparent; border-radius:10px; }

/* Chart is NOT solid either - wave.js erases the wave behind it. */
.tv-chart{ background:transparent; border-radius:8px; }

/* ---- Invitations panel (owner only). The app is invite-only; this is where
   the owner decides who may create an account. -------------------------- */
.inv-intro{ color:var(--text-faint); font-size:12px; line-height:1.5; margin:2px 0 12px; }
.inv-actions{ display:flex; gap:8px; margin-bottom:10px; }
.inv-actions input{ flex:1; min-width:0; padding:9px 11px; border-radius:8px;
  border:1px solid var(--border); background:rgba(0,0,0,0.25); color:var(--text);
  font-family:inherit; font-size:13px; }
.inv-actions .btn{ white-space:nowrap; }
.inv-new{ min-height:0; }
.inv-fresh{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:15px;
  letter-spacing:1px; color:var(--gold); background:rgba(160,178,196,0.08);
  border:1px solid var(--border); border-radius:8px; padding:7px 12px; margin:2px 0 6px; }
.inv-hint{ display:block; color:var(--text-faint); font-size:11px; margin-bottom:8px; }
.inv-row{ align-items:center; }
.inv-code{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.5px; }
.inv-state{ color:var(--text-faint); font-size:11px; margin-top:2px; }
.inv-note{ color:var(--text-dim); }
.inv-row.inv-used .inv-code{ color:var(--text-faint); text-decoration:line-through; }
.inv-row.inv-dead{ opacity:0.5; }
.inv-cancel{ padding:5px 10px; font-size:11px; }
.inv-empty{ color:var(--text-faint); font-size:12px; padding:6px 0; }
.inv-foot{ color:var(--text-faint); font-size:11px; margin-top:8px; }

/* ---- Access seats (owner only): how many people may use the app at once --- */
.acc-head{ font-size:13px; color:var(--text); margin-bottom:3px; }
.acc-sub{ color:var(--text-faint); font-size:11.5px; line-height:1.5; margin-bottom:10px; }
.acc-stepper{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.acc-btn{ width:34px; height:34px; padding:0; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.acc-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.acc-value{ display:flex; align-items:baseline; gap:6px; min-width:96px; }
#accNum{ font-family:'JetBrains Mono',monospace; font-size:23px; color:var(--gold); }
.acc-unit{ color:var(--text-faint); font-size:12px; }
.acc-state{ color:var(--text-faint); font-size:11.5px; margin-bottom:6px; }
.acc-warn{ color:#E5945B; }
.acc-list{ margin-top:6px; }
.inv-divider{ height:1px; background:var(--border); margin:14px 0 12px; }

/* ---- Invitation slots: one per seat, each sends its own email ------------ */
.mail-ok{ color:var(--text-faint); font-size:11.5px; margin-bottom:10px; }
.mail-off{ color:var(--text-faint); font-size:11.5px; line-height:1.55; margin-bottom:12px;
  padding:9px 11px; border:1px solid var(--border); border-radius:8px;
  background:rgba(229,148,91,0.05); }
.mail-off code{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gold); }
.slot-wrap{ display:flex; flex-direction:column; gap:12px; }
.inv-slot{ border:1px solid var(--border); border-radius:10px; padding:11px 12px;
  background:rgba(0,0,0,0.16); }
.inv-slot.filled{ border-color:rgba(160,178,196,0.28); }
.slot-head{ font-size:11px; text-transform:uppercase; letter-spacing:0.7px;
  color:var(--text-faint); margin-bottom:8px; }
.slot-form{ display:flex; gap:8px; }
.slot-email{ flex:1; min-width:0; padding:9px 11px; border-radius:8px;
  border:1px solid var(--border); background:rgba(0,0,0,0.25); color:var(--text);
  font-family:inherit; font-size:13px; }
.slot-send{ white-space:nowrap; }
.slot-result{ margin-top:8px; }
.slot-code{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:15px;
  letter-spacing:1.5px; color:var(--gold); background:rgba(160,178,196,0.08);
  border:1px solid var(--border); border-radius:8px; padding:7px 12px; margin:5px 0; }
.slot-link input{ width:100%; padding:7px 10px; border-radius:7px; margin-top:5px;
  border:1px solid var(--border); background:rgba(0,0,0,0.3); color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; font-size:11px; }
.slot-sent{ color:var(--text-faint); font-size:11.5px; }
.slot-ok{ color:#3ECF8E; font-size:12px; }
.slot-warn{ color:#E5945B; font-size:12px; line-height:1.5; }
.slot-muted{ color:var(--text-faint); font-size:11.5px; margin-top:4px; }
.slot-actions{ margin-top:8px; }

/* ---- Practice vs REAL money -------------------------------------------
   Real money must never be mistakable for practice. It gets its own colour
   (amber, deliberately NOT the app's cyan) and a banner that does not go away
   while it is armed. */
.mode-badge{ cursor:pointer; }
.mode-badge.is-real{ color:#0b0b0b; background:#E5A34B; border-color:#E5A34B; font-weight:700; }

.mode-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
  padding:9px 14px; font-size:12px; font-family:var(--font-mono, monospace);
  background:#3a2a12; color:#F0C88A; border-top:1px solid #E5A34B;
}
.mode-banner.live{ background:#4a1616; color:#ffd7d7; border-top-color:#e05a5a; }
.mode-banner strong{ letter-spacing:1.5px; }
.mode-banner .mb-sep{ opacity:0.45; }
.mode-banner .mb-dot{
  width:8px; height:8px; border-radius:50%; background:#E5A34B;
  box-shadow:0 0 0 0 rgba(229,163,75,0.7); animation:mbPulse 2s infinite;
}
.mode-banner.live .mb-dot{ background:#ff6b6b; }
@keyframes mbPulse{
  0%{ box-shadow:0 0 0 0 rgba(229,163,75,0.65); }
  70%{ box-shadow:0 0 0 9px rgba(229,163,75,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,163,75,0); }
}
.mode-banner .mb-off{
  margin-left:8px; padding:4px 11px; font-size:11px; cursor:pointer;
  background:transparent; color:inherit; border:1px solid currentColor; border-radius:6px;
}
/* while real money is armed, the trade panel carries the same warning colour */
body.real-money .side-panel, body.real-money .positions-panel{ border-color:#E5A34B; }
body.real-money{ padding-bottom:40px; }

/* ---- Brokerage account card (real holdings, kept apart from practice) ---- */
.brk-tag{ float:right; font-size:9.5px; letter-spacing:1.6px; padding:3px 8px;
  border-radius:4px; background:#E5A34B; color:#0b0b0b; font-weight:700; }
.brk-tag.live{ background:#e05a5a; color:#fff; }
.brk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin:10px 0 12px; }
.brk-grid div{ display:flex; justify-content:space-between; font-size:12.5px; }
.brk-grid span{ color:var(--text-faint); }
.brk-grid b{ font-family:'JetBrains Mono',monospace; font-weight:500; color:var(--text); }
.brk-grid b.pos, .brk-pnl.pos{ color:#3ECF8E; }
.brk-grid b.neg, .brk-pnl.neg{ color:#e06b6b; }
.brk-pos{ display:flex; flex-direction:column; gap:7px; }
.brk-row{ align-items:center; }
.brk-side{ font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-faint); margin-left:5px; }
.brk-pnl{ font-family:'JetBrains Mono',monospace; font-size:13px; text-align:right; }
.brk-pnl span{ display:block; font-size:10.5px; opacity:0.75; }
.brk-foot{ color:var(--text-faint); font-size:11px; line-height:1.6; margin-top:11px;
  border-top:1px solid var(--border); padding-top:9px; }
.mode-banner .mb-kill{ margin-left:8px; padding:4px 11px; font-size:11px; cursor:pointer;
  background:transparent; color:inherit; border:1px solid currentColor; border-radius:6px; }
.mode-banner .mb-kill.on{ background:#e05a5a; color:#fff; border-color:#e05a5a; font-weight:700; }
.mode-banner .mb-why{ flex-basis:100%; text-align:center; font-size:11px; opacity:0.9; padding-top:5px; }

/* ---- Automated strategies ---------------------------------------------
   A bot must be reviewable: every row shows what it decided AND why. */
.bot-intro{ color:var(--text-faint); font-size:11.5px; line-height:1.6; margin:2px 0 12px; }
.bot-intro strong{ color:var(--text); }
.bot-list{ display:flex; flex-direction:column; gap:9px; }
.bot-row{ border:1px solid var(--border); border-radius:9px; padding:10px 11px;
  background:rgba(0,0,0,0.18); }
.bot-row.on{ border-color:rgba(62,207,142,0.45); }
.bot-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.bot-sym{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text); }
.bot-strat{ color:var(--text-faint); font-size:11.5px; margin-left:7px; }
.bot-tf{ color:var(--text-faint); font-size:10.5px; margin-left:6px; opacity:0.8; }
.bot-tags{ display:flex; gap:5px; flex-wrap:wrap; }
.bot-tag{ font-size:9.5px; letter-spacing:0.8px; text-transform:uppercase;
  padding:2px 7px; border-radius:4px; border:1px solid var(--border); color:var(--text-faint); }
.bot-tag.live{ color:#3ECF8E; border-color:#2c4a3a; }
.bot-tag.auto{ color:#E5A34B; border-color:#5a4526; }
.bot-tag.real{ background:#e05a5a; color:#fff; border-color:#e05a5a; font-weight:700; }
.bot-last{ margin:8px 0 4px; font-size:12px; line-height:1.55; }
.bot-act{ font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:2px 6px;
  border-radius:4px; margin-right:7px; background:rgba(255,255,255,0.06); color:var(--text-faint); }
.bot-act.long{ color:#3ECF8E; } .bot-act.short{ color:#e06b6b; } .bot-act.close{ color:var(--gold); }
.bot-why{ color:var(--text-dim); }
.bot-meta{ color:var(--text-faint); font-size:10.5px; margin-bottom:8px; }
.bot-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.bot-btn{ padding:4px 9px; font-size:11px; }
.bot-btn.on{ background:#e05a5a; color:#fff; border-color:#e05a5a; }
.bot-btn.danger{ color:#e06b6b; }
.bot-new-title{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:9px; }
.bot-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.bot-form #botSymbol{ min-width:230px; flex:1 1 230px; }
.bot-side{ display:flex; flex-direction:column; gap:4px; min-width:190px; }
.bot-side label{ font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); }
.bot-about-fixed{ font-size:11.5px; line-height:1.5; color:var(--text-faint);
  border-left:2px solid var(--gold); padding:2px 0 2px 10px; margin:8px 0 12px; }
.sug-row.closed .sug-act{ opacity:.75; }
.bot-form select, .bot-form input{ padding:7px 9px; border-radius:7px; font-size:12px;
  border:1px solid var(--border); background:rgba(0,0,0,0.3); color:var(--text);
  font-family:inherit; }
.bot-form #botSymbol{ min-width:150px; }
.bot-form #botQty{ width:90px; }
.bot-about{ color:var(--text-faint); font-size:11px; line-height:1.55; margin-top:9px; }
.bot-error{ color:#E5945B; font-size:11.5px; margin-top:7px; }
.sug-list{ display:flex; flex-direction:column; gap:7px; }
.sug-row{ border-left:2px solid var(--border); padding:5px 0 5px 9px; }
.sug-row.traded{ border-left-color:#3ECF8E; }
.sug-row.failed{ border-left-color:#e06b6b; }
.sug-top{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:11.5px; }
.sug-act{ font-family:'JetBrains Mono',monospace; font-size:10px; }
.sug-act.long{ color:#3ECF8E; } .sug-act.short{ color:#e06b6b; } .sug-act.close{ color:var(--gold); }
.sug-sym{ color:var(--text); font-family:'JetBrains Mono',monospace; }
.sug-state{ color:var(--text-faint); }
.sug-at{ color:var(--text-faint); margin-left:auto; font-size:10.5px; }
.sug-why{ color:var(--text-dim); font-size:11.5px; line-height:1.5; margin-top:2px; }
.bot-score{ display:flex; align-items:baseline; gap:9px; margin:6px 0 2px; }
.bot-score span:first-child{ font-family:'JetBrains Mono',monospace; font-size:15px; }
.bot-score .pos{ color:#3ECF8E; } .bot-score .neg{ color:#e06b6b; }
.bot-score-sub{ color:var(--text-faint); font-size:11px; }

/* ---- Setup finder ------------------------------------------------------ */
.scan-intro{ color:var(--text-faint); font-size:11.5px; line-height:1.6; margin:2px 0 12px; }
.scan-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.scan-form select, .scan-form input{ padding:7px 9px; border-radius:7px; font-size:12px;
  border:1px solid var(--border); background:rgba(0,0,0,0.3); color:var(--text); font-family:inherit; }
#scanSymbol{ min-width:190px; }
.scan-side{ display:flex; flex-direction:column; gap:5px; min-width:150px; }
.scan-side label{ color:var(--text-faint); font-size:10.5px; }
.scan-hint{ color:var(--text-faint); font-size:10.5px; margin-top:7px; }
.scan-status{ color:var(--text-dim); font-size:12px; margin:11px 0 8px; }
.setup-list{ display:flex; flex-direction:column; gap:10px; }
.setup-card{ border:1px solid var(--border); border-radius:10px; padding:11px 12px;
  background:rgba(0,0,0,0.2); }
.setup-top{ display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; }
.setup-dir{ font-size:10px; letter-spacing:1.2px; padding:2px 7px; border-radius:4px; font-weight:700; }
.setup-dir.up{ background:#173a2b; color:#3ECF8E; } .setup-dir.down{ background:#3a1a1a; color:#e06b6b; }
.setup-sym{ font-family:'JetBrains Mono',monospace; font-size:13px; }
.setup-label{ color:var(--text-faint); font-size:11.5px; }
.setup-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px 14px; margin:10px 0 8px; }
.setup-nums div{ display:flex; justify-content:space-between; font-size:11.5px; }
.setup-nums span{ color:var(--text-faint); }
.setup-nums b{ font-family:'JetBrains Mono',monospace; font-weight:500; color:var(--text); }
.setup-nums b.up, .up{ color:#3ECF8E; } .setup-nums b.down, .down{ color:#e06b6b; }
.setup-move{ font-size:11.5px; color:var(--text-dim); margin-bottom:6px; }
.setup-note{ color:var(--text-faint); }
.setup-why{ display:flex; flex-direction:column; gap:2px; margin-bottom:7px; }
.setup-why span{ color:var(--text-faint); font-size:11px; }
.setup-cost{ font-size:11px; color:var(--text-faint); border-top:1px solid var(--border);
  padding-top:7px; margin-bottom:9px; }
.setup-cost .ok{ color:#3ECF8E; margin-left:6px; } .setup-cost .warn{ color:#E5945B; margin-left:6px; }
.scan-skip-title{ color:var(--text-faint); font-size:10.5px; text-transform:uppercase;
  letter-spacing:1.2px; margin:14px 0 6px; }
.scan-skip{ color:var(--text-faint); font-size:11px; line-height:1.6; }
.scan-skip b{ color:var(--text-dim); font-family:'JetBrains Mono',monospace; margin-right:6px; }
.setup-modal{ max-width:430px; }
.setup-live{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin:12px 0 10px; }
.setup-live div{ display:flex; justify-content:space-between; font-size:12.5px; }
.setup-live span{ color:var(--text-faint); }
.setup-live b{ font-family:'JetBrains Mono',monospace; font-weight:500; }
.setup-drift{ font-size:11.5px; min-height:17px; margin-bottom:8px; }
.setup-drift .ok{ color:#3ECF8E; } .setup-drift .warn{ color:#E5945B; }
.setup-timer{ font-size:11.5px; color:var(--text-faint); margin-bottom:10px; }
.setup-bar{ height:3px; background:rgba(255,255,255,0.08); border-radius:2px; margin-top:5px; overflow:hidden; }
.setup-bar i{ display:block; height:100%; width:100%; background:var(--gold); transition:width 1s linear; }
.setup-poor{ font-size:11px; line-height:1.55; color:#E5945B; background:rgba(229,148,91,0.07);
  border:1px solid rgba(229,148,91,0.25); border-radius:7px; padding:7px 9px; margin-bottom:8px; }
.setup-entries{ display:flex; flex-direction:column; gap:5px; margin:8px 0; }
.entry-opt{ font-size:11px; line-height:1.5; color:var(--text-faint);
  border-left:2px solid var(--border); padding-left:8px; }
.entry-opt b{ color:var(--text-dim); }
.entry-opt.cheap{ border-left-color:#3ECF8E; }
.entry-caveat{ color:#E5945B; }
.setup-entrypick{ display:flex; flex-direction:column; gap:5px; margin:10px 0 4px; }
.setup-entrypick label{ font-size:12px; color:var(--text-dim); display:flex; gap:7px; align-items:center; }
.setup-edge{ font-size:11px; line-height:1.55; padding:7px 9px; border-radius:7px; margin:6px 0 8px; }
.setup-edge.good{ color:#3ECF8E; background:rgba(62,207,142,0.07); border:1px solid rgba(62,207,142,0.25); }
.setup-edge.ok{ color:var(--text-dim); background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.setup-edge.bad{ color:#E5945B; background:rgba(229,148,91,0.07); border:1px solid rgba(229,148,91,0.28); }
.setup-conf{ font-size:11.5px; color:var(--gold); margin-bottom:3px; }
.setup-stopwhy{ font-size:11px; color:var(--text-faint); margin-bottom:5px; }

/* Bot pair picker: a long list, shut until you want it. */
.bot-pairs{ display:flex; flex-direction:column; gap:6px; min-width:240px; flex:1 1 240px; }
.bot-pairs-toggle{ display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 10px; border-radius:7px; font-size:12px; cursor:pointer;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  text-align:left; width:100%; }
.bot-pairs-toggle:hover{ border-color:var(--gold); }
.bot-caret{ transition:transform .15s ease; opacity:.7; }
.bot-pairs-toggle.open .bot-caret{ transform:rotate(180deg); }
.bot-pairs #botSymbol{ width:100%; }
.bot-note{ font-size:10.5px; line-height:1.45; color:var(--text-faint);
  margin:-2px 0 4px; }

/* Position tags on the chart - the exchange look: a label ON the line carrying
   the money at stake, with a control to remove it. Positioned by JS at each
   level's y coordinate. */
.tv-tag-layer{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.tv-tag{ position:absolute; left:8px; transform:translateY(-50%);
  display:flex; align-items:center; gap:8px; pointer-events:auto;
  padding:3px 8px; border-radius:4px; font-size:11.5px; font-weight:600;
  white-space:nowrap; color:#04121d; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.tv-tag-text{ letter-spacing:.01em; }
.tv-tag-x{ cursor:pointer; opacity:.75; font-size:14px; line-height:1;
  padding:0 2px; border-left:1px solid rgba(0,0,0,.25); }
.tv-tag-x:hover{ opacity:1; }
.tv-tag.draggable{ cursor:ns-resize; }
.tv-tag-entry{ background:#c8c6bd; }
.tv-tag-tp{ background:#3ECF8E; }
.tv-tag-sl{ background:#E5484D; color:#fff; }
.tv-tag-liq{ background:#E5A03D; }
.position-empty{ font-size:11.5px; color:var(--text-faint); padding:6px 2px; }
/* "back to now" on the chart */
.tv-jump{ position:absolute; right:70px; bottom:10px; z-index:7;
  padding:3px 10px; border-radius:5px; font-size:11px; font-weight:600;
  cursor:pointer; color:var(--text); background:rgba(18,22,26,.92);
  border:1px solid var(--border); }
.tv-jump:hover{ border-color:var(--gold); }

/* ---- bots card: scannable, not wordy ---------------------------------- */
.bot-sub{ font-size:11px; line-height:1.5; color:var(--text-faint); margin:2px 0 10px; }
.bot-how{ color:var(--gold); cursor:pointer; white-space:nowrap; }
.bot-how:hover{ text-decoration:underline; }

.bot-row{ border:1px solid var(--border); border-radius:9px; padding:9px 11px;
  margin-bottom:7px; background:rgba(9,17,28,.5); }
.bot-row.on{ border-color:rgba(160,178,196,.35); }

.bot-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.bot-dot{ width:7px; height:7px; border-radius:50%; background:#4a5563; flex:0 0 auto; }
.bot-dot.live{ background:#3ECF8E; box-shadow:0 0 8px rgba(62,207,142,.8); }
.bot-name{ font-size:13px; font-weight:700; letter-spacing:.01em; }
.bot-chip{ font-size:10px; padding:2px 7px; border-radius:20px; color:var(--text-faint);
  border:1px solid var(--border); white-space:nowrap; }
.bot-chip.real{ color:#ff6b6b; border-color:rgba(255,107,107,.5); font-weight:700; }
/* What the bot IS, next to what it is called. Quieter than the name so
   the row still reads name-first, but always present - a bot whose
   strategy you cannot see is a bot you cannot judge. */
/* The New bot form is a <details>, shut by default. Its summary has to read
   as a heading you can press, not as a stray line of text. */
/* The profile photo, opened full size. Sized to the viewport rather than to a
   fixed pixel count so it never overflows on a small window. */
.av-backdrop{ position:fixed; inset:0; z-index:900; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,6,8,0.82); backdrop-filter:blur(3px); }
.av-card{ display:flex; flex-direction:column; align-items:center; gap:16px;
  max-width:min(440px, 92vw); }
.av-big{ width:min(400px, 78vw, 60vh); height:auto; aspect-ratio:1/1;
  object-fit:cover; border-radius:12px; display:block;
  border:1px solid var(--border-strong);
  box-shadow:0 18px 60px rgba(0,0,0,0.6); }
.av-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.av-btn{ font-size:12px; padding:7px 14px; }
.avatar-cam{ cursor:pointer; }

/* The volume-profile level picker. Each row is a whole clickable line so a
   tick box the size of a full stop is not the only target. */
.vp-picks{ display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.vp-pick{ display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  font-size:11.5px; line-height:1.45; color:var(--text-dim);
  padding:4px 6px; border-radius:5px; }
.vp-pick:hover{ background:rgba(160,178,196,0.06); }
.vp-pick input{ margin-top:2px; flex-shrink:0; accent-color:var(--gold); }
.vp-pick b{ color:var(--text); font-weight:600; }
/* The measurement, in its own quieter voice - present, never shouting. */
.vp-pick em{ display:block; font-style:normal; font-size:10.5px;
  color:var(--text-faint); margin-top:1px; }

/* The wallet half of the Meme coins box. What is HELD reads first and
   loudest - that is money at risk right now; the scanner below is
   research. */
.mw-section{ margin-bottom:16px; }
.mw-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:7px; }
.mw-connect{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.mw-note{ font-size:11px; color:var(--text-faint); line-height:1.5; max-width:52ch; }
.mw-note b{ color:var(--text-dim); }
.mw-err{ font-size:11px; color:var(--red); }
.mw-btn{ font-size:11.5px; padding:6px 13px; }
/* Connect, beside the badge that says the account open in Phantom is not connected */
.mw-btn.mw-inline{ font-size:10.5px; padding:3px 10px; margin-left:6px; vertical-align:middle; }
.mw-head{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  margin-bottom:9px; }
.mw-addr{ font-family:var(--font-mono); font-size:11px; color:var(--gold); }
.mw-total{ font-family:var(--font-mono); font-size:16px; font-weight:700;
  color:var(--text); }
.mw-dim{ font-size:10.5px; color:var(--text-faint); }
.mw-row{ border:1px solid var(--border); border-radius:7px; padding:9px 11px;
  margin-bottom:7px; background:rgba(160,178,196,0.03); }
.mw-top{ display:flex; gap:11px; align-items:baseline; flex-wrap:wrap; }
.mw-sym{ font-family:var(--font-mono); font-weight:700; color:var(--text);
  font-size:13px; }
.mw-amt{ font-size:11px; color:var(--text-dim); }
.mw-val{ margin-left:auto; font-family:var(--font-mono); font-weight:700;
  color:var(--text); }
.mw-nomkt{ color:var(--text-faint); font-weight:400; font-size:11px; }
.mw-tag{ font-size:9px; letter-spacing:.08em; color:var(--text-faint);
  border:1px solid var(--border); border-radius:3px; padding:1px 5px; }
/* The exit ladder, shown before it is armed so it is never a surprise. */
.mw-plan{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mw-leg{ font-size:10.5px; color:var(--text-faint); border:1px solid var(--border);
  border-radius:4px; padding:3px 7px; }
.mw-leg b{ color:var(--text-dim); font-family:var(--font-mono); }
/* The stop is the one that saves you. It gets the only colour. */
.mw-leg.stop{ border-color:rgba(255,92,108,.45); color:#ff8d97; }
.mw-leg.stop b{ color:#ff8d97; }
.mw-acts{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:9px; }
.mw-foot{ margin-top:12px; }
/* SELL NOW is the emergency handle. It is meant to be findable in a panic. */
.mw-sell{ font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:6px 14px; color:#fff; background:#b3242f; border-color:#b3242f; }
.mw-sell:hover{ background:#d62c39; border-color:#d62c39; }
.mw-sell[disabled]{ opacity:.55; cursor:default; }
/* WHILE A SALE IS IN FLIGHT. Amber, because it is neither done nor failed, and
   because on this card green and red already mean money made and money lost. */
.mw-selling{ font-size:11.5px; color:#e0a33c; margin-top:9px; }
.mw-sold{ font-size:11.5px; color:var(--green); margin-top:9px; line-height:1.6; }
.mw-sold a{ color:var(--gold); }
.mw-chart{ font-size:10.5px; color:var(--gold); text-decoration:none; }
.mw-chart:hover{ text-decoration:underline; }
.mw-mint{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  margin-left:auto; }
.mw-none{ font-size:11.5px; color:var(--text-dim); padding:8px 4px; line-height:1.5; }
.mw-dust{ margin-top:6px; }

/* Meme coins. The refusals are as much the point as the passes, so they
   are styled to be readable rather than hidden away. */
.meme-head{ display:flex; gap:12px; align-items:center; font-size:11px;
  margin-bottom:8px; color:var(--text); }
.meme-head .meme-dim{ color:var(--text-faint); }
.meme-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:6px 8px; border-radius:5px; font-size:11.5px;
  border:1px solid transparent; }
.meme-row.yes{ border-color:var(--border); background:rgba(160,178,196,0.05); }
.meme-row.no{ color:var(--text-faint); }
.meme-sym{ font-family:var(--font-mono); font-weight:700; color:var(--text);
  min-width:76px; }
.meme-cell{ color:var(--text-dim); white-space:nowrap; }
.meme-chg{ font-family:var(--font-mono); font-weight:700; }
.meme-chg.up{ color:var(--green); } .meme-chg.down{ color:var(--red); }
/* Paid promotion is a WARNING, never a badge of quality. */
.meme-paid{ font-size:9px; letter-spacing:.08em; color:#ffb020;
  border:1px solid rgba(255,176,32,.45); border-radius:3px; padding:1px 5px; }
.meme-why{ flex:1 1 100%; font-size:10.5px; color:var(--text-faint); }
.meme-none{ font-size:11.5px; color:var(--text-dim); line-height:1.5;
  padding:8px 4px; }
.meme-refused{ margin-top:8px; }
.meme-refused summary{ cursor:pointer; font-size:11px;
  color:var(--text-faint); padding:4px 0; }
.meme-actions{ display:flex; gap:10px; align-items:center; margin-top:10px;
  flex-wrap:wrap; }
.meme-btn{ font-size:11.5px; padding:6px 12px; }
.meme-note{ font-size:10.5px; color:var(--text-faint); }

/* FOLDING PROFILE CARDS. The title becomes the handle; everything below it
   is hidden when the card is folded. Nothing is wrapped or moved, so the
   cards that rebuild their own contents twice a second are unaffected.
   .foldable is added by JS, so a card without a direct-child title never
   gets a caret it cannot honour. */
#screen-profile .foldable > .pcard-title{
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
  transition:color .15s ease; }
#screen-profile .foldable > .pcard-title:hover{ color:var(--gold); }
#screen-profile .foldable > .pcard-title::after{
  content:'▾'; margin-left:auto; font-size:11px; opacity:.65;
  transition:transform .15s ease; }
#screen-profile .folded > .pcard-title::after{ transform:rotate(-90deg); }
#screen-profile .folded > *:not(.pcard-title){ display:none !important; }
/* a folded card should sit tight, not keep the padding of a full one */
#screen-profile .pcard.folded{ padding-bottom:14px; }
#screen-profile .folded > .pcard-title{ margin-bottom:0; }

details.bot-new > summary.bot-new-title{ cursor:pointer; list-style:none;
   display:flex; align-items:center; gap:8px; user-select:none; }
details.bot-new > summary.bot-new-title::-webkit-details-marker{ display:none; }
details.bot-new > summary.bot-new-title:hover{ color:var(--gold); }
details.bot-new > summary .bot-caret{ transition:transform .15s ease;
   font-size:11px; opacity:.7; }
details.bot-new[open] > summary .bot-caret{ transform:rotate(180deg); }

/* Open positions, grouped by the bot that opened them. The heading has to
   read as a divider, not as another position row. */
.pp-group{ margin-bottom:14px; }
.pp-group:last-child{ margin-bottom:0; }
.pp-group-head{ display:flex; align-items:center; gap:10px; padding:6px 2px 7px;
                border-bottom:1px solid var(--border); margin-bottom:4px; }
.pp-group-name{ font-size:12px; font-weight:700; color:var(--gold);
                letter-spacing:.01em; }
.pp-group-n{ font-size:10px; color:var(--text-faint); margin-left:auto; }
.pp-group-head .pnl{ font-size:12px; font-weight:700; }

.bot-what{ font-size:11px; color:var(--text-faint); letter-spacing:.01em;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
           max-width:60%; }
.bot-state{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); }
.bot-state.live{ color:#3ECF8E; }

.bot-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:7px; }
.bstat{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bstat-l{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); }
.bstat-v{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.bstat-v.pos{ color:#3ECF8E; } .bstat-v.neg{ color:#E5484D; }
.bstat-v.muted{ color:var(--text-faint); font-weight:600; }

.bot-note-line{ font-size:10.5px; line-height:1.45; color:var(--text-faint);
  padding:5px 8px; border-radius:5px; background:rgba(255,255,255,.03); margin-bottom:7px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bot-note-line:hover{ white-space:normal; }
.bot-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.bot-btn{ font-size:10.5px; padding:4px 9px; }

@media (max-width:760px){
  .bot-stats{ grid-template-columns:repeat(3,1fr); }
  .bot-state{ margin-left:0; }
}

/* ---- new-bot form: a clean grid, not a pile of controls ---------------- */
.bot-new{ margin-top:4px; }
.bot-new-title{ font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:10px; }

.nb-row{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.nb-field{ display:flex; flex-direction:column; gap:5px; flex:1 1 110px; min-width:0; }
.nb-field.nb-grow{ flex:1 1 140px; }
.nb-field.nb-grow2{ flex:2 1 260px; }
.nb-field.nb-full{ flex:1 1 100%; }
.nb-field label{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); }
.nb-field input, .nb-field select, .bot-pairs-toggle{
  width:100%; padding:7px 9px; border-radius:7px; font-size:12px;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font-family:inherit; }
.nb-field input:focus, .nb-field select:focus{ outline:none; border-color:var(--gold); }
.nb-field #botSymbol{ margin-top:6px; max-height:190px; }

.nb-foot{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.nb-foot .bot-note{ flex:1; margin:0; }
.nb-create{ flex:0 0 auto; padding:8px 20px; font-size:12px; }

@media (max-width:640px){
  .nb-field{ flex:1 1 calc(50% - 5px); }
  .nb-foot{ flex-direction:column; align-items:stretch; }
}

/* ---- the boss's workers ------------------------------------------------ */
.wk-box{ border:1px solid var(--border); border-radius:7px; padding:7px 9px;
  margin-bottom:8px; background:rgba(255,255,255,.02); }
.wk-head{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:6px; }
.wk-sub{ text-transform:none; letter-spacing:0; opacity:.75; }
.wk{ display:grid; grid-template-columns:18px 74px 52px 1fr; align-items:center;
  gap:8px; padding:2px 0; font-size:11px; }
.wk-n{ width:16px; height:16px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:9px; font-weight:700;
  background:rgba(255,255,255,.07); color:var(--text-faint); }
.wk-name{ font-weight:600; }
.wk-count{ font-variant-numeric:tabular-nums; color:var(--text-faint); }
.wk-note{ color:var(--text-faint); font-size:10.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.wk.ok .wk-n{ background:rgba(62,207,142,.18); color:#3ECF8E; }
.wk.stalled .wk-n{ background:rgba(229,72,77,.18); color:#E5484D; }
.wk.stalled .wk-note{ color:#E5484D; }
@media (max-width:640px){ .wk{ grid-template-columns:18px 68px 46px 1fr; } }


/* ---- paper trading control panel (profile) -------------------------------
   Uses the existing card/row/button vocabulary; the only new thing is the
   status badge, because the difference between STOPPED, RUNNING-waiting and
   RUNNING-trading has to be readable at a glance. */
.pc-head{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.pc-actions{ display:flex; gap:8px; }
.pc-badge{ display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11px; letter-spacing:.06em; font-weight:600; margin-right:6px;
  border:1px solid transparent; }
.pc-stopped{ background:rgba(255,120,120,0.12); color:#ff9b9b;
  border-color:#5a2a2a; }
.pc-waiting{ background:rgba(255,196,110,0.12); color:#ffc46e;
  border-color:#5a4426; }
.pc-running{ background:rgba(62,207,142,0.12); color:#5fe0a8;
  border-color:#2c4a3a; }
.pc-mode{ background:rgba(127,216,255,0.10); color:#7fd8ff; border-color:#274a5c; }
.pc-real-off{ background:rgba(160,160,160,0.10); color:#9aa6ad;
  border-color:#3a4147; }
.pc-note{ font-size:12px; color:#9aa6ad; margin-bottom:12px; }
.pc-sec{ margin:16px 0 8px; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#7fd8ff; }
.pc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pc-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pc-cell{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; padding:8px 10px; }
.pc-cell-k{ font-size:11px; color:#8b979e; }
.pc-cell-v{ font-size:14px; color:#e8eef2; margin-top:2px; }
.pc-sub{ font-size:12px; color:#8b979e; margin-top:6px; }
.pc-readonly{ font-style:italic; }
.pc-prot{ margin-top:10px; }
.pc-why{ color:#7f8b92; }
.pc-row{ margin-top:6px; }
.pc-sym{ font-size:13px; color:#e8eef2; }
.pc-side{ font-size:11px; color:#8b979e; text-transform:uppercase; }
.pc-right{ font-size:13px; color:#e8eef2; text-align:right; }
.pc-up{ color:#5fe0a8; }
.pc-down{ color:#ff9b9b; }
.pc-stages{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pc-arrow{ color:#4a565d; }
.pc-stage{ padding:3px 8px; border-radius:6px; font-size:11px;
  border:1px solid rgba(255,255,255,0.08); }
.pc-stage-ok{ color:#7fd8ff; background:rgba(127,216,255,0.07); }
.pc-stage-bad{ color:#ff9b9b; background:rgba(255,120,120,0.08);
  border-color:#5a2a2a; }
.pc-locked{ opacity:.75; }
.pc-locked .btn[disabled]{ cursor:not-allowed; }

.pc-pos{ cursor:pointer; }
.pc-pos:hover{ border-color:#274a5c; background:rgba(127,216,255,0.05); }
.pc-go{ display:block; font-size:11px; color:#7fd8ff; margin-top:2px; }

.pc-cap{ display:inline-flex; align-items:center; gap:6px; margin-right:10px; }
.pc-cap-k{ font-size:11px; letter-spacing:.06em; color:#8b979e;
  text-transform:uppercase; }
.pc-cap-in{ display:inline-flex; align-items:center; gap:2px; color:#e8eef2;
  border:1px solid rgba(255,255,255,0.10); border-radius:6px; padding:2px 6px;
  background:rgba(255,255,255,0.02); }
.pc-cap-in input{ width:72px; background:transparent; border:0; outline:0;
  color:#e8eef2; font:inherit; font-size:13px; }
.pc-cap-left{ font-size:11px; color:#7fd8ff; }
.pc-cap-none{ color:#ffc46e; }

/* strategy-test section inside the existing paper card */
.pc-funnel{ display:flex; flex-wrap:wrap; gap:6px; }
.pc-fn{ font-size:11px; color:#8b979e; background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:2px 8px; }
.pc-fn b{ color:#e8eef2; }
.pc-test-actions{ display:flex; align-items:center; gap:10px; margin-top:10px; }

/* ---- profile: minimal pass ---- */
/* Structure and rhythm only - no colour is introduced here. Every value is an
   existing theme variable or a transparency of one, so the cyan/navy identity
   is exactly as it was. */

/* Cards breathe more and shout less. */
#screen-profile .pcard{ padding:18px 20px; margin-bottom:12px; border-radius:14px; }
#screen-profile .pcard-title{
  font-size:10px; letter-spacing:0.16em; margin-bottom:14px; opacity:0.75; }

/* Section headings inside a card: a hairline instead of a heavier title. */
.pc-sec{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.8;
  margin:20px 0 10px; padding-top:12px;
  border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.pc-sec:first-of-type{ border-top:0; padding-top:0; margin-top:14px; }
.pc-n{
  font-size:9.5px; color:var(--text-faint); opacity:0.65;
  border:1px solid var(--border); border-radius:20px; padding:1px 7px; }

/* Numbers: the value leads, the label is a whisper under it. */
.pc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; }
.pc-grid-4{ grid-template-columns:repeat(4,1fr); }
.pc-cell{ background:var(--panel-2); padding:14px 14px 13px; }
.pc-cell-k{
  font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.7;
  margin-top:6px; order:2; }
.pc-cell-v{
  font-family:var(--font-mono); font-size:19px; color:var(--text);
  line-height:1.1; order:1; letter-spacing:-0.01em; }
.pc-cell{ display:flex; flex-direction:column; }
.pc-cell.lead .pc-cell-v{ color:var(--gold); font-size:23px; }

/* Empty states: two words, not a sentence. */
.pc-empty{
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  opacity:0.5; padding:10px 2px; }

/* Rows sit on hairlines rather than in boxes-within-boxes. */
#screen-profile .conn-row.pc-row{
  background:transparent; border:0; border-bottom:1px solid var(--border);
  border-radius:0; padding:11px 2px; }
#screen-profile .conn-row.pc-row:last-of-type{ border-bottom:0; }

/* Real-money lock: one line, no paragraph. */
.pc-lock{ display:flex; align-items:center; gap:12px; padding:4px 2px; }
.pc-lock-k{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.7; }
.pc-lock-v{ font-family:var(--font-mono); font-size:13px; color:var(--text); }
.pc-lock .btn{ margin-left:auto; padding:5px 12px; font-size:11px; opacity:0.5; }

/* Pipeline: small even ticks, no arrows to line up. */
.pc-stages{ display:flex; flex-wrap:wrap; gap:6px; }
.pc-stage{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em;
  padding:4px 9px; border-radius:20px; border:1px solid var(--border);
  color:var(--text-faint); }
.pc-stage-ok{ color:var(--gold); border-color:var(--gold-dim); }

/* ---------------------------------------------------------------- bots ---- */
/* One quiet row per bot: identity on top, numbers in the middle, the crew as a
   single strip, actions at the foot. */
.bot-list{ gap:12px; }
.bot-row{
  border:1px solid var(--border); border-radius:12px; padding:15px 16px;
  background:var(--panel-2); }
.bot-row.on{ border-color:var(--gold-dim); }

.bot-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-bottom:14px; }
.bot-dot{ width:6px; height:6px; border-radius:50%;
  background:var(--text-faint); opacity:0.5; flex:none; }
.bot-dot.live{ background:var(--gold); opacity:1;
  box-shadow:0 0 0 3px rgba(160,178,196,0.16); }
.bot-name{ font-family:var(--font-mono); font-size:14px; color:var(--text);
  letter-spacing:-0.01em; }
.bot-chip{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-faint);
  border:1px solid var(--border); border-radius:20px; padding:2px 8px; }
.bot-state{ margin-left:auto; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); }
.bot-state.live{ color:var(--gold); }

/* FOUR COLUMNS, not five. Seven stats in a five-wide grid left the second
   row with empty dark holes that read as missing data. Four across gives a
   clean 4 + 4 with RESULT - the headline number - spanning two cells at the
   end, and the same rule makes the two-column phone layout come out even. */
.bot-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; margin-bottom:12px; }
.bot-stats .bstat:last-child{ grid-column:span 2; }
.bstat{ background:var(--panel); padding:11px 12px;
  display:flex; flex-direction:column-reverse; gap:5px; }
.bstat-l{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.7; }
.bstat-v{ font-family:var(--font-mono); font-size:15px; color:var(--text); }
.bstat-v.pos{ color:var(--green); } .bstat-v.neg{ color:var(--red); }
.bstat-v.muted{ color:var(--text-faint); opacity:0.55; }
/* The live line under a bot's number - what the OPEN trades are doing, which
   a win rate cannot say because it counts closed ones. */
.bstat-note{ font-family:var(--font-mono); font-size:8.5px;
  color:var(--text-faint); opacity:0.6; line-height:1.3; }

/* The seven workers, as one strip you can read in a glance. */
.wk-box{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:13px; }
.wk{ display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--font-mono); font-size:10px;
  border:1px solid var(--border); border-radius:20px; padding:3px 9px;
  color:var(--text-faint); }
.wk-name{ letter-spacing:0.04em; }
.wk-count{ color:var(--text); opacity:0.85; }
.wk.ok{ color:var(--gold); border-color:var(--gold-dim); }
.wk.stalled{ opacity:0.55; }
.wk.idle{ opacity:0.4; }

.bot-actions{ gap:7px; }
.bot-btn{ padding:5px 12px; font-size:11px; border-radius:8px; }

/* New-bot form: a calm grid, labels as hairline captions. */
.bot-new-title{ margin-bottom:14px; opacity:0.75; letter-spacing:0.16em; }
.nb-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
.nb-field{ display:flex; flex-direction:column; gap:5px; flex:1 1 110px; }
.nb-field.nb-grow{ flex:1 1 150px; } .nb-field.nb-grow2{ flex:2 1 230px; }
.nb-field.nb-full{ flex:1 1 100%; }
.nb-field label{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.7; }
.nb-field input, .nb-field select, .bot-pairs-toggle{
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-family:var(--font-mono); font-size:12px;
  color:var(--text); }
.nb-field input:focus, .nb-field select:focus{
  outline:none; border-color:var(--gold-dim); }
.nb-foot{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.bot-note{ font-family:var(--font-mono); font-size:11px;
  color:var(--text-faint); }
.nb-foot .nb-create{ margin-left:auto; }

@media (max-width:640px){
  .pc-grid, .pc-grid-4{ grid-template-columns:repeat(2,1fr); }
  .bot-stats{ grid-template-columns:repeat(2,1fr); }
  .bot-state{ margin-left:0; }
}

/* ---- profile: second pass ---- */
/* The first pass restyled and kept everything. This one shrinks the type and
   calms the grids. No colour is introduced; every value below is an existing
   theme variable or a transparency of one. */

/* Numbers were too loud. Value and label now sit close in size, so a card
   reads as one object instead of a headline with a caption. */
.pc-cell{ padding:11px 12px 10px; }
.pc-cell-v{ font-size:14px; letter-spacing:0; }
.pc-cell.lead .pc-cell-v{ font-size:15px; }
.pc-cell-k{ font-size:8.5px; margin-top:4px; }

.stat-grid{ grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; margin-bottom:12px; }
#screen-profile .stat-box{ background:var(--panel-2); border:0; border-radius:0;
  padding:12px 10px; }
#screen-profile .stat-val{ font-size:15px; text-shadow:none; }
#screen-profile .stat-label{ font-size:8.5px; margin-bottom:4px; }

.bstat{ padding:9px 10px; }
.bstat-v{ font-size:13px; }
.bstat-l{ font-size:8px; }

/* Sections: quieter, less vertical shouting. */
.pc-sec{ margin:16px 0 8px; padding-top:10px; font-size:9px; }

/* The diagnostics live here now - present, but costing no attention. */
.pc-more{ margin-top:16px; border-top:1px solid var(--border); padding-top:4px; }
.pc-more > summary{
  cursor:pointer; list-style:none; padding:9px 2px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.65; }
.pc-more > summary::-webkit-details-marker{ display:none; }
.pc-more > summary::after{ content:' +'; }
.pc-more[open] > summary::after{ content:' −'; }
.pc-more > summary:hover{ opacity:1; }
.pc-more .pc-sec:first-of-type{ border-top:0; padding-top:0; margin-top:10px; }

/* The card header is the one place an action should be obvious. */
.pc-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:space-between; margin-bottom:14px; }
.pc-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pc-actions .btn{ padding:6px 13px; font-size:11.5px; }
.pc-badge{ font-size:8.5px; letter-spacing:0.12em; }

/* One chart, full width, shorter - it is a glance, not a study. */
#screen-profile .pchart{ width:100%; height:120px; display:block; }

@media (max-width:640px){
  .stat-grid{ grid-template-columns:repeat(3,1fr); }
  .pc-cell-v{ font-size:13px; }
}

/* ---- one box ---- */
/* The account and its bots are one subject. They are still rendered by two
   functions (each polls on its own), but they sit inside a single card and
   their own card chrome is stripped so the seam disappears. */
.trade-hub{ padding:18px 20px; }
.trade-hub .hub-part{ background:none; border:0; border-radius:0; padding:0;
  margin:0; box-shadow:none; }
/* the second part is separated by a rule, not by a gap between boxes */
.trade-hub .hub-part + .hub-part:not([style*="display: none"]){
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
/* each part's own title becomes a section heading inside the one card */
.trade-hub .hub-part > .pcard-title{
  font-size:9.5px; letter-spacing:0.14em; opacity:0.7; margin-bottom:12px; }

/* ---- bot decisions ---- */
/* What a bot DID, checkable against the chart. Same palette, nothing new. */
.bt-box{ margin-bottom:12px; }
.bt-box > summary{ cursor:pointer; list-style:none; padding:6px 0;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint); opacity:0.75; }
.bt-box > summary::-webkit-details-marker{ display:none; }
.bt-box > summary::after{ content:' +'; }
.bt-box[open] > summary::after{ content:' −'; }
.bt-box > summary:hover{ opacity:1; }
.bt-none{ font-family:var(--font-mono); font-size:10px;
  color:var(--text-faint); opacity:0.45; margin-bottom:12px; }
.bt-row{ display:grid; grid-template-columns:78px 88px 58px 1fr 72px;
  gap:8px; align-items:baseline; padding:6px 0;
  border-top:1px solid var(--border); font-family:var(--font-mono);
  font-size:10.5px; }
.bt-when{ color:var(--text-faint); opacity:0.7; }
.bt-sym{ color:var(--text); }
.bt-act{ color:var(--text-faint); text-transform:uppercase;
  letter-spacing:0.06em; font-size:9.5px; }
.bt-act.took{ color:var(--gold); }
.bt-act.fail{ color:var(--red); }
.bt-why{ color:var(--text-faint); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.bt-pnl{ text-align:right; color:var(--text-faint); }
.bt-pnl.pos{ color:var(--green); } .bt-pnl.neg{ color:var(--red); }
@media (max-width:640px){
  .bt-row{ grid-template-columns:1fr 60px; }
  .bt-when, .bt-act{ display:none; }
}

/* ---- one row per position on a pair ---- */
/* Two bots can be long the same coin, so the row whose trade is DRAWN is
   marked - otherwise the lines belong to nobody in particular. */
.position-row{ cursor:pointer; }
.position-row:hover{ background:rgba(160,178,196,0.05); }
.position-row.viewing{ border-left:2px solid var(--gold);
  background:rgba(160,178,196,0.07); }
.pos-owner{ font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:0.06em; color:var(--text-faint);
  border:1px solid var(--border); border-radius:20px; padding:2px 8px; }
.position-row.viewing .pos-owner{ color:var(--gold);
  border-color:var(--gold-dim); }

/* ---- what the bot sees ---- */
/* A description of the charts. Same palette, no new colours. */
.cr-backdrop{ position:fixed; inset:0; z-index:9000; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(7,9,11,0.84); }
.cr-card{ background:var(--panel-2); border:1px solid var(--border-strong);
  border-radius:14px; max-width:760px; width:100%; max-height:82vh;
  display:flex; flex-direction:column; overflow:hidden; }
.cr-head{ display:flex; align-items:baseline; gap:10px; padding:16px 20px;
  border-bottom:1px solid var(--border); font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); }
.cr-head .cr-sub{ color:var(--text-faint); letter-spacing:0.08em; opacity:0.8; }
.cr-x{ margin-left:auto; cursor:pointer; font-size:18px; line-height:1;
  color:var(--text-faint); }
.cr-x:hover{ color:var(--text); }
.cr-body{ overflow-y:auto; padding:6px 20px 14px; }
.cr-foot{ padding:11px 20px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  opacity:0.75; }
.cr-pair{ padding:14px 0; border-bottom:1px solid var(--border); }
.cr-pair:last-child{ border-bottom:0; }
.cr-sym{ font-family:var(--font-mono); font-size:14px; color:var(--text);
  margin-bottom:8px; display:flex; align-items:baseline; gap:9px; }
.cr-agree{ font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:20px; padding:2px 8px; }
.cr-agree.yes{ color:var(--green); border-color:rgba(62,207,142,0.4); }
.cr-agree.no{ color:var(--text-faint); }
.cr-tf{ padding:7px 0 7px 12px; border-left:1px solid var(--border);
  margin-bottom:6px; }
.cr-tfname{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint); margin-right:8px; }
.cr-trend{ font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:0.06em; }
.cr-trend.up{ color:var(--green); } .cr-trend.down{ color:var(--red); }
.cr-trend.range{ color:var(--text-faint); }
.cr-why{ font-size:11px; color:var(--text-faint); margin-left:6px; }
.cr-line{ font-size:11.5px; color:var(--text-dim,var(--text-faint));
  margin-top:3px; line-height:1.5; }
.cr-none{ font-size:11.5px; color:var(--text-faint); opacity:0.6; }

/* ---- what each chart is for ---- */
.nb-chart{ flex:1 1 200px; }
.tf-note{ font-family:var(--font-mono); font-size:9.5px; line-height:1.5;
  color:var(--text-faint); margin-top:5px; }
.tf-measured{ display:block; opacity:0.75; }

/* ---- All trades ---------------------------------------------------------
   A full ledger, not a preview. Dense on purpose: the owner wants to scan a
   day of trading at once, so rows are compact and the columns line up with
   tabular figures. Only the result is coloured - colouring more of it turns a
   list into a fairground. */
.tr-title{
  margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--border);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);
}
#allTradesCard .tr-count{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--text-faint);margin-left:8px;font-weight:400;
}
.tr-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tr-chip{
  font:inherit;font-size:11px;padding:4px 10px;cursor:pointer;
  background:transparent;color:var(--text-faint);
  border:1px solid var(--border);border-radius:2px;
}
.tr-chip:hover{color:var(--text);border-color:var(--gold)}
.tr-chip.on{color:#06121c;background:var(--gold);border-color:var(--gold)}
.tr-scroll{max-height:420px;overflow-y:auto;overflow-x:auto;
           border:1px solid var(--border)}
.tr-list{min-width:640px}
.tr-row{
  display:grid;
  grid-template-columns:104px 92px 46px 1fr 1fr 74px 84px 96px;
  gap:8px;align-items:center;padding:6px 10px;
  border-bottom:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.tr-row:last-child{border-bottom:0}
.tr-head{
  position:sticky;top:0;background:var(--panel);z-index:1;
  color:var(--text-faint);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;
}
.tr-when{color:var(--text-faint)}
.tr-sym{color:var(--text)}
.tr-side{font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.tr-side.long{color:#4ade80}
.tr-side.short{color:#f87171}
.tr-px,.tr-fee{color:var(--text-faint)}
.tr-net{text-align:right;font-weight:600}
.tr-net.up{color:#4ade80}
.tr-net.down{color:#f87171}
.tr-why{color:var(--text-faint);font-size:10.5px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-empty{color:var(--text-faint);font-size:12.5px;padding:14px 0}
.tr-foot{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  padding:10px 2px 0;font-size:12px;color:var(--text-faint);
}
.tr-foot b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.tr-foot b.up{color:#4ade80}
.tr-foot b.down{color:#f87171}

/* ---- the exit ladder ------------------------------------------------------
   Two kinds of exit, and the styling keeps them apart on purpose: a resting
   order survives the laptop being off, a watched stop does not. Reading them
   as the same thing is the misunderstanding that costs money. */
.mw-exits{ display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; }
.mw-rest{ font-size:10.5px; color:var(--green); border:1px solid var(--green);
  border-radius:3px; padding:2px 7px; }
.mw-stopwatch{ font-size:10.5px; color:#e0a33c; border:1px solid #e0a33c;
  border-radius:3px; padding:2px 7px; }
.mw-stopwatch.hit{ color:#fff; background:#b3242f; border-color:#b3242f;
  font-weight:700; }

/* A fee charged by the TOKEN, not by an exchange - it cannot be routed around,
   so it is stated on the row rather than buried in a total. Red, because on a
   mint whose owner can still raise it this is a rug vector, not a footnote. */
.mw-fee{ font-size:10.5px; color:#ff8a93; border:1px solid #b3242f;
  border-radius:3px; padding:5px 8px; margin-top:7px; line-height:1.55; }
.mw-fee b{ color:#ffc2c7; }

/* Instant selling ON is a standing permission to sign without asking, so it is
   shown lit rather than as an ordinary pressed button - he should be able to
   see from across the room whether it is armed. */
.mw-btn.mw-on{ color:#0b1521; background:var(--green); border-color:var(--green);
  font-weight:700; }

/* The manual sell asks first; the automatic exits never come through here. */
.mw-ask{ font-size:11px; font-weight:700; color:#ff8a93; letter-spacing:.04em; }

/* The watched ladder. A rung reached goes amber while it sells, green when it
   is done - and the whole strip says out loud that it needs this page open,
   because a resting order would not and the two must never look alike. */
.mw-watch{ font-size:10.5px; color:#5fd0ff; border:1px solid #2f6f8f;
  border-radius:3px; padding:2px 7px; }
.mw-rung{ font-size:10.5px; color:var(--text-dim); border:1px solid var(--border);
  border-radius:3px; padding:2px 7px; }
.mw-rung.hit{ color:#e0a33c; border-color:#e0a33c; font-weight:700; }
.mw-rung.done{ color:var(--green); border-color:var(--green); }

/* Phantom on the wrong account: everything looks healthy and nothing can
   execute, so this is the loudest thing on the card. */
.mw-wrong{ font-size:11px; color:#fff; background:#b3242f; border:1px solid #d62c39;
  border-radius:3px; padding:7px 9px; margin-top:9px; line-height:1.55; }
.mw-wrong b{ color:#ffe2e4; }

/* ===========================================================================
   PROFILE — THE STATEMENT LOOK  (owner's direction, 2026-09-12)
   ===========================================================================

   He asked for elegant, minimal, expensive, and less text, and chose the
   private-bank-statement direction over the instrument panel: space doing the
   separating instead of boxes, small restrained labels, numbers given room.

   COLOURS ARE DELIBERATELY UNTOUCHED. He is picking those later, so every rule
   below uses the variables already in the theme and changes only structure,
   spacing, weight and rhythm. Swapping the palette later will not disturb any
   of this.

   SCOPED TO #screen-profile ON PURPOSE. The same .pcard class dresses the
   market, exchange and chart screens, and he asked for the profile.

   WHAT KEEPS ITS BOX, against the grain of everything else here: the warnings.
   .mw-wrong, .mw-fee and a broken stop stay loud and bordered. Stripping the
   text was his instruction; stripping the line that says a coin cannot be sold
   would be reading that instruction as licence to hide a failure.
   ======================================================================== */

/* Cards stop being cards. A hairline above each one is the whole separator. */
#screen-profile .pcard{
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 30px 4px 34px;
  margin: 0;
}
#screen-profile .pcard:first-of-type{ border-top: 0; }
#screen-profile .pcard.globe-card{ border-top: 0; padding-top: 8px; }

/* A title is a whisper, not a heading. */
#screen-profile .pcard-title{
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 20px;
}

/* THE NUMBERS HE JUDGES THE APP BY. No boxes, no fills - columns with air
   between them and the figure large and light enough to be read from across
   the room. Four since 2026-09-20: he asked for the money left to sit with
   the rest, so it leads them. */
#screen-profile .stat-grid{
  display: grid;
  /* minmax(0,...) so a long caption cannot make one column wider than
     its neighbours - 1fr alone is minmax(auto,1fr) and does exactly that. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 6px 0 0;
  padding: 34px 0 36px;
}

/* Four across is too tight on a phone: two rows of two. This sits AFTER the
   rule above on purpose - same specificity, so the later one wins. */
@media (max-width:640px){
  #screen-profile .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px;
    padding:24px 0 26px; }
}
#screen-profile .stat-box{
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 2px 26px;
  text-align: left;
}
#screen-profile .stat-box:first-child{ border-left: 0; padding-left: 4px; }
#screen-profile .stat-label{
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 12px;
}
#screen-profile .stat-val{
  font-size: 22px;          /* 34 was too loud for him - his call */
  font-weight: 200;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-shadow: none;
}

/* Rows separate with a hairline and breathe. */
#screen-profile .conn-row,
#screen-profile .pf-box,
#screen-profile .mw-row,
#screen-profile .bot-row{
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 4px;
  box-shadow: none;
}
#screen-profile .conn-row:first-child,
#screen-profile .mw-row:first-child,
#screen-profile .bot-row:first-child{ border-top: 0; }

#screen-profile .conn-sub,
#screen-profile .mw-sub{
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .45;
  margin: 24px 0 2px;
}

/* Buttons lose their fill. On a statement, an action is a word you can press. */
#screen-profile .btn{
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px;
}
#screen-profile .btn:hover{ border-color: var(--gold); background: transparent; }
/* SELL NOW is the exception and stays filled - it is the emergency handle and
   it has to be findable in a panic, which is the opposite of restrained. */
#screen-profile .btn.mw-sell{
  background: #b3242f; border-color: #b3242f; color: #fff; font-weight: 600;
}

/* Money in a statement is aligned, so the digits line up down the column. */
#screen-profile .stat-val,
#screen-profile .mw-val,
#screen-profile .mw-total,
#screen-profile .conn-balance b{ font-variant-numeric: tabular-nums; }

/* The exit rungs: a quiet row of levels, not sentences. */
#screen-profile .mw-plan{ gap: 18px; margin-top: 10px; opacity: .8; }
#screen-profile .mw-leg{ font-size: 10.5px; letter-spacing: .03em; }

/* WARNINGS KEEP THEIR BOX. Everything above is quieter; these must not be. */
#screen-profile .mw-wrong,
#screen-profile .mw-fee{ border-radius: 2px; padding: 12px 14px; }

/* ===========================================================================
   THE STATEMENT LOOK, APP-WIDE  (his instruction after seeing the profile)
   ===========================================================================
   The block above was scoped to #screen-profile while he decided whether he
   liked it. He does, so the same rules now dress every screen. Kept as its own
   block rather than edited into the one above, because that one is the record
   of WHY each decision was made and this is only where it applies.

   STILL NO COLOURS. Structure, spacing, weight and rhythm only - he is
   choosing the palette separately and nothing here will fight it.
   ======================================================================== */

.screen .pcard,
.screen .form-card,
.screen .market-card,
.screen .exchange-card,
.screen .session-card,
.screen .side-panel,
.screen .positions-panel,
.screen .chart-panel{
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
/* Cards that sit in a GRID keep an outline - with no rule and no fill they
   would run into each other sideways, which is the one place hairlines alone
   do not read. */
.screen .market-card,
.screen .exchange-card,
.screen .session-card{
  border: 1px solid var(--border);
  padding: 20px 18px;
}
.screen .panel-title,
.screen .step-heading,
.screen .pcard-title{
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .55;
}
.screen .btn{
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.screen .btn:hover{ border-color: var(--gold); background: transparent; }

/* THE PRIMARY BUTTON WAS DARK ON DARK. .btn.primary paints the text #1A1204 -
   near-black - which was legible on the old gold fill and invisible once the
   fill went. He reported it as "more in dark colour and not in white". It is
   an outline button now: the theme colour for the text and the border, nothing
   behind it. */
.screen .btn.primary{
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.screen .btn.primary:hover{
  background: transparent;
  filter: none;
  border-color: var(--gold);
  color: #fff;
}

/* Money lines up wherever it appears. */
.screen .stat-val, .screen .price, .screen .pos-pnl,
.screen .mw-val, .screen .conn-balance b{ font-variant-numeric: tabular-nums; }

/* WHAT KEEPS ITS VOICE, everywhere: the warnings and the emergency handle.
   Every rule above makes things quieter; these two must never get quieter. */
.screen .mw-wrong, .screen .mw-fee, .screen .real-banner{ border-radius: 2px; }
.screen .btn.mw-sell{
  background: #b3242f; border-color: #b3242f; color: #fff; font-weight: 600;
}

/* The profile's own .btn rule outranks the app-wide primary one (an id beats
   two classes), so the main action was coming out with a faint grey border
   like everything else. A primary action should still read as the primary
   action - even in a design this quiet. */
#screen-profile .btn.primary{
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}
#screen-profile .btn.primary:hover{ color:#fff; border-color: var(--gold); }

/* The token's own transfer fee, reduced from a paragraph to its number. Quiet,
   because he asked for the warning gone - but present, because it is money
   leaving his hand on every sale and a cost that shows nowhere cannot be
   weighed. The full sentence is on the hover title. */
.mw-feetag{ font-size:10px; color:#ff8a93; border:1px solid #7d2a31;
  border-radius:2px; padding:1px 6px; margin-left:8px; white-space:nowrap; }

/* THE EXIT LADDER AS A STATEMENT OF WHAT EACH RUNG PAYS.
   Four columns, aligned: the level, the price it fires at, the cash it returns,
   and what share of the position it sells. Aligned because the whole point is
   reading down the money column - which is impossible when the figures wander. */
.mw-levels{ margin-top: 10px; }
.mw-lvl{
  display: grid;
  grid-template-columns: 58px 1fr 90px auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 11px;
  border-top: 1px solid var(--border);
}
.mw-lvl:first-child{ border-top: 0; }
.mw-lvl span{ font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .5; }
.mw-lvl b{ font-weight: 400; font-variant-numeric: tabular-nums; opacity: .75; }
.mw-lvl i{ font-style: normal; font-variant-numeric: tabular-nums;
  text-align: right; }
.mw-lvl em{ font-style: normal; font-size: 9.5px; opacity: .45;
  letter-spacing: .06em; }

.mw-lvl.now b, .mw-lvl.now i{ opacity: 1; }
.mw-lvl.stop i{ color: #ff8a93; }
.mw-lvl.stop.hit{ background: #b3242f; color: #fff; }
.mw-lvl.stop.hit i, .mw-lvl.stop.hit em{ color: #fff; }
.mw-lvl.hit b, .mw-lvl.hit i{ color: #e0a33c; font-weight: 600; }
.mw-lvl.done b, .mw-lvl.done i{ color: var(--green); }
.mw-lvl.total{ border-top: 1px solid var(--border); }
.mw-lvl.total i{ color: var(--green); font-weight: 600; }
.mw-lvl.total span{ opacity: .7; }

/* Which kind of exit is guarding this coin. Never dropped: a watched ladder
   needs the page open and a resting order does not, and those must not look
   the same. */
.mw-guard{ font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .45; padding-top: 8px; }

/* CAN IT BE SOLD. The one that matters is .mw-nosell: a ladder on a coin with
   no route out is not protection, and it read exactly like protection before
   this line existed. Loud for that, quiet for everything healthy. */
.mw-nosell{ font-size:11px; line-height:1.45; margin-top:8px; padding:7px 9px;
  color:#ffd9dc; background:#3a1418; border:1px solid #7d2a31; border-radius:3px; }
.mw-nosell b{ color:#ff8a93; letter-spacing:.08em; }
.mw-costly{ font-size:11px; line-height:1.45; margin-top:8px; padding:7px 9px;
  color:#ffe6c2; background:#33240f; border:1px solid #7a5a1e; border-radius:3px; }
.mw-costly b{ color:#ffc061; }
.mw-dust{ font-size:10px; line-height:1.4; margin-top:6px;
  color:var(--text-faint); opacity:.75; }
.mw-cansell{ font-size:9.5px; line-height:1.4; margin-top:6px;
  color:var(--text-faint); opacity:.5; }

/* WHICH WALLET, AND IS PHANTOM ACTUALLY ON IT. The second half is the one that
   matters: the app can READ any wallet, but it can only SELL the one Phantom
   has open, and those two looking identical is how a box appears armed and
   cannot execute. */
.mw-live{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); border:1px solid var(--green); border-radius:2px;
  padding:1px 6px; margin-left:8px; }
.mw-notlive{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#e0a33c; border:1px solid #e0a33c; border-radius:2px;
  padding:1px 6px; margin-left:8px; }

/* ---- FULL SCREEN CHART ----------------------------------------------------
   The button in the timeframe row, and the panel covering the whole window.
   Declared last and one class more specific than `.screen .chart-panel`, which
   makes the panel transparent - in full screen it needs the page's own navy or
   the browser paints black behind it. */
.chart-full-btn{
  margin-left:8px; font-family:var(--font-mono); font-size:14px; line-height:1;
  background:transparent; border:0.5px solid var(--border); color:var(--text-dim);
  border-radius:5px; padding:5px 9px; cursor:pointer; touch-action:manipulation;
}
.chart-full-btn:hover{ color:var(--gold); border-color:var(--gold-dim); }
.chart-full-title{ display:none; font-family:var(--font-mono); font-size:13px;
  color:var(--text); margin-right:10px; white-space:nowrap; }
.screen .chart-panel.is-full{
  position:fixed; inset:0; z-index:9000; margin:0;
  display:flex; flex-direction:column; box-sizing:border-box;
  width:100vw; height:100vh; height:100dvh;
  padding:12px 16px 14px; border:0; border-radius:0;
  background:#060e18;
}
.screen .chart-panel.is-full .chart-full-title{ display:inline; }
.screen .chart-panel.is-full .tv-chart{ flex:1 1 auto; height:auto; min-height:0; }
.screen .chart-panel.is-full .chart-svg:not(.tv-hidden){ flex:1 1 auto; height:auto; }
body.chart-is-full{ overflow:hidden; }
/* The panel's own z-index cannot lift it past the news ticker (z-index 200):
   every screen is its own stacking layer, so a fixed child stays inside it.
   The dashboard screen is lifted while the chart is full, and the ticker is
   hidden - full screen means nothing on top of the candles. */
body.chart-is-full #screen-dash{ z-index:9000; }
body.chart-is-full .news-ticker{ display:none; }
/* LET THE CHART SHRINK BACK. A grid or flex item will not become narrower than
   its content by default, and the chart's content is a canvas sized to the
   last width it was given. Leaving full screen at 1280px wide, the canvas held
   the column open at 1188px and pushed the order panel off the right edge.
   min-width:0 lets the column return to its share; the chart then follows. */
#screen-dash .chart-panel{ min-width:0; }
#screen-dash .tv-chart{ min-width:0; overflow:hidden; }

/* ---- VOLUME PROFILE button and note ------------------------------------- */
.chart-vp-btn{ font-size:11px; letter-spacing:0.06em; padding:6px 9px; }
.chart-vp-btn.is-on{ color:var(--gold); border-color:var(--gold-dim); }
.chart-vp-note{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  margin-top:8px; line-height:1.45; min-height:1em; }
.screen .chart-panel.is-full .chart-vp-note{ flex:0 0 auto; }


/* the win rate's caption: which trades the percentage is made of */
.stat-sub{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint);
  margin-top:4px; line-height:1.35; }

/* Forgot password: a quiet text link and the note above the code field.
   Colours come from the app's own variables, so both themes follow. */
.forgot-row{ margin:8px 0 2px; font-size:12px; }
.text-link{ color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.text-link:hover{ color:var(--text); }
.reset-note{ font-size:13px; line-height:1.5; color:var(--text-dim); margin:0 0 14px; }
#resetCode{ letter-spacing:4px; }