/* MT Journal v3.0 — Gold Obsidian Design System */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
    --bg:#080a0f; --bg2:#0d1018; --bg3:#111520;
    --surface:rgba(16,20,32,0.75); --surface2:rgba(22,28,44,0.65);
    --border:rgba(255,255,255,0.055); --border2:rgba(255,255,255,0.12);
    --border-gold:rgba(212,175,55,0.25);
    --text:#edf1f7; --text2:#7a8898; --text3:#4a5568;
    --gold:#d4af37; --gold2:#e8c84a; --gold3:#f0d870;
    --gold-soft:rgba(212,175,55,0.12); --gold-glow:rgba(212,175,55,0.20); --gold-dim:rgba(212,175,55,0.06);
    --green:#0ecb81; --green2:rgba(14,203,129,0.10);
    --red:#f6465d; --red2:rgba(246,70,93,0.10);
    --orange:#f0a500; --orange2:rgba(240,165,0,0.12);
    --blue:#3b82f6; --blue2:rgba(59,130,246,0.12);
    --accent:#d4af37; --accent2:#e8c84a; --glow:rgba(212,175,55,0.18);
    --r:14px; --sidebar:258px; --topbar-h:54px;
    --font:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono:'DM Mono',monospace;
    --shadow-card:0 4px 24px rgba(0,0,0,0.35);
    --shadow-hover:0 8px 36px rgba(0,0,0,0.5);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;font-size:14px;-webkit-font-smoothing:antialiased;display:block}

.bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 15% 10%,rgba(212,175,55,0.04),transparent 60%),radial-gradient(ellipse 50% 40% at 85% 85%,rgba(14,203,129,0.03),transparent 60%);background-color:var(--bg)}

/* ── SIDEBAR ── */
.sidebar{position:fixed;left:0;top:0;width:var(--sidebar);height:100vh;background:rgba(6,8,14,0.97);backdrop-filter:blur(24px);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:300;overflow-y:auto;overflow-x:hidden;transition:transform .3s cubic-bezier(0.4,0,0.2,1)}
.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,0.5),transparent)}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:22px 18px 20px;border-bottom:1px solid var(--border);margin-bottom:8px}
.brand-icon{width:40px;height:40px;border-radius:10px;background:var(--gold-dim);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:5px}
.brand-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(212,175,55,0.4))}
.brand-name{font-size:1.05rem;letter-spacing:-0.3px;color:var(--text2);line-height:1.2}
.brand-name strong{color:var(--text);font-weight:700}
.brand-tagline{display:block;font-size:0.58rem;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;margin-top:2px;opacity:0.7}
.nav-section{padding:0 10px;margin-bottom:4px}
.nav-section-label{display:block;padding:10px 12px 6px;font-size:0.58rem;font-weight:700;letter-spacing:2px;color:var(--text3);text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--text2);text-decoration:none;font-size:0.875rem;font-weight:500;transition:all .2s ease;margin-bottom:1px;position:relative;border:1px solid transparent}
.nav-item:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-item.active{color:var(--gold);background:var(--gold-dim);border-color:var(--border-gold);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:55%;background:var(--gold);border-radius:0 3px 3px 0}
.ni{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0.65}
.nav-item.active .ni{opacity:1;color:var(--gold)}
.nav-item:hover .ni{opacity:0.9}
.sidebar-bottom{margin-top:auto;padding:14px;border-top:1px solid var(--border)}
.session-clock{background:rgba(0,0,0,0.4);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.session-time{font-size:0.78rem;font-family:var(--font-mono);font-weight:700;color:var(--text);letter-spacing:1px;margin-bottom:8px;text-align:center}
.session-indicators{display:grid;grid-template-columns:8px 1fr 8px 1fr 8px 1fr 8px 1fr;align-items:center;gap:3px}
.sess-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.1);transition:background .5s,box-shadow .5s;flex-shrink:0}
.sess-label{font-size:0.55rem;font-weight:700;color:var(--text3);letter-spacing:0.5px;transition:color .5s}
.balance-card{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:12px;padding:14px;margin-bottom:10px}
.balance-label{display:block;font-size:0.62rem;color:var(--gold);margin-bottom:7px;text-transform:uppercase;letter-spacing:1px;font-weight:600;opacity:0.8}
.balance-input{width:100%;background:rgba(0,0,0,0.4);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:8px;font-family:var(--font-mono);font-size:1rem;font-weight:600;transition:border-color .2s}
.balance-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.pro-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:0.72rem;color:var(--text2);border-radius:8px;background:rgba(255,255,255,0.02)}
.pro-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── TOPBAR ── */
.topbar{display:none;position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:rgba(6,8,14,0.99);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 12px;align-items:center;gap:10px;z-index:400}
.menu-btn{background:none;border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;transition:background .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-shrink:0}
.menu-btn:hover{background:rgba(255,255,255,0.08)}
.topbar-brand{display:flex;align-items:center;gap:8px;flex:1}
.topbar-logo{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(212,175,55,0.4))}
.topbar-title{font-size:1rem;color:var(--text2);font-weight:500}
.topbar-title strong{color:var(--text);font-weight:700}

/* ── MAIN CONTENT ── */
.content{margin-left:var(--sidebar);padding:28px 28px 40px;position:relative;z-index:1;min-width:0;width:calc(100% - var(--sidebar))}

/* ── RESPONSIVE ── */
@media(max-width:860px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0);box-shadow:4px 0 40px rgba(0,0,0,0.7)}
    .topbar{display:flex}
    .content{margin-left:0;width:100%;padding:calc(var(--topbar-h) + 14px) 14px 24px}
    .grid-dash{grid-template-columns:1fr !important}
    .kpi-row{grid-template-columns:repeat(2,1fr) !important;gap:8px}
    .grid-2{grid-template-columns:1fr !important}
    .page-head{flex-direction:column;align-items:flex-start}
    .head-actions{width:100%;flex-wrap:wrap}
    .deep-stats{grid-template-columns:repeat(2,1fr) !important}
    .streak-grid{grid-template-columns:repeat(2,1fr) !important}
    .jtf-wrap{grid-template-columns:1fr !important}
}
@media(max-width:500px){
    .content{padding:calc(var(--topbar-h) + 10px) 10px 20px}
    .panel{padding:14px}
    .kpi{padding:12px 6px}
    .kpi-label{font-size:0.54rem;letter-spacing:0.8px}
}

/* ── PAGE ── */
.page{display:none;animation:pageIn .3s cubic-bezier(0.4,0,0.2,1)}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:1.45rem;font-weight:700;letter-spacing:-0.5px}
.page-desc{color:var(--text2);margin:-10px 0 20px;font-size:0.87rem;line-height:1.55}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── FILTER TABS ── */
.filter-tabs{display:flex;background:rgba(0,0,0,0.35);border:1px solid var(--border);border-radius:12px;overflow:hidden;width:100%}
.filter-tab{padding:8px 12px;font-size:0.76rem;color:var(--text2);cursor:pointer;transition:all .2s;border-right:1px solid var(--border);font-weight:500;flex:1;text-align:center;white-space:nowrap}
.filter-tab:last-child{border-right:none}
.filter-tab:hover{background:rgba(255,255,255,0.04);color:var(--text)}
.filter-tab.active{background:var(--gold-dim);color:var(--gold);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.filter-select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-family:var(--font);font-size:0.82rem;cursor:pointer;transition:border-color .2s}
.filter-select:focus{outline:none;border-color:var(--gold)}

/* ── KPI CARDS ── */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.kpi{padding:16px 10px;border-radius:var(--r);text-align:center;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;min-width:0}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,0.35),transparent);opacity:0;transition:opacity .3s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.kpi:hover::before{opacity:1}
.kpi-label{font-size:0.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:700}
.kpi-val{font-size:clamp(0.9rem,1.8vw,1.55rem);font-weight:800;line-height:1.1;letter-spacing:-0.5px;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-sub{font-size:0.66rem;color:var(--text2);margin-top:4px;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── GLASS ── */
.glass{background:var(--surface);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-card);transition:border-color .25s}
.glass:hover{border-color:var(--border2)}
.panel{padding:22px;margin-bottom:18px}
.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.panel-top h3{font-size:0.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2)}

/* ── DASHBOARD GRID ── */
.grid-dash{display:grid;grid-template-columns:1fr 310px;gap:20px;align-items:start}
.dash-left{min-width:0}.dash-right{min-width:0}

/* ── WELCOME BANNER ── */
.welcome-banner{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:var(--r);background:linear-gradient(135deg,rgba(212,175,55,0.07),rgba(212,175,55,0.02));border:1px solid var(--border-gold);margin-bottom:16px;position:relative;overflow:hidden}
.welcome-banner::after{content:'';position:absolute;right:-20px;top:-20px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,0.1),transparent 70%);pointer-events:none}
.welcome-title{font-size:0.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
.welcome-sub{font-size:0.76rem;color:var(--text2)}

/* ── RSB ── */
.rsb-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.rsb-kpi{padding:11px;background:rgba(0,0,0,0.3);border-radius:10px;border:1px solid var(--border);transition:border-color .2s}
.rsb-kpi:hover{border-color:var(--border-gold)}
.rsb-lbl{font-size:0.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:5px;font-weight:700}
.rsb-val{font-size:0.92rem;font-weight:700;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── TAGS ── */
.tag{padding:3px 10px;border-radius:20px;font-size:0.67rem;font-weight:600;letter-spacing:0.5px;background:rgba(255,255,255,0.05);color:var(--text2)}
.tag.red{background:var(--red2);color:var(--red)}.tag.green{background:var(--green2);color:var(--green)}.tag.blue{background:var(--blue2);color:var(--blue)}.tag.orange{background:var(--orange2);color:var(--orange)}.tag.gold{background:var(--gold-dim);color:var(--gold);border:1px solid var(--border-gold)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);display:inline-block;animation:blink 2s infinite}

/* ── BUTTONS ── */
.btn-primary{width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--gold),#b8941f);color:#060810;font-family:var(--font);font-size:0.9rem;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:all .25s;box-shadow:0 4px 20px rgba(212,175,55,0.22);letter-spacing:0.2px}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent);opacity:0;transition:opacity .25s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(212,175,55,0.32)}
.btn-primary:hover::after{opacity:1}
.btn-primary span{position:relative;z-index:1}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn-outline{padding:8px 14px;border:1px solid var(--border);background:transparent;color:var(--text2);border-radius:8px;font-family:var(--font);font-size:0.82rem;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-outline:hover{background:rgba(255,255,255,0.04);color:var(--text);border-color:var(--border2)}
.btn-outline:disabled{opacity:0.35;cursor:not-allowed;pointer-events:none}
.btn-outline.gold{border-color:var(--border-gold);color:var(--gold)}
.btn-outline.gold:hover{background:var(--gold-dim);border-color:var(--gold)}

/* ── ALERT ── */
.alert-banner{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--r);margin-bottom:18px}
.alert-banner.danger{background:var(--red2);border:1px solid rgba(246,70,93,0.25);animation:bannerPulse 3s infinite}
.alert-icon{font-size:1.4rem;flex-shrink:0}
.alert-banner strong{color:var(--red);font-size:0.9rem}
.alert-banner p{color:var(--text2);font-size:0.83rem;margin-top:2px}
@keyframes bannerPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 20px 4px rgba(246,70,93,0.07)}}

/* ── INSIGHTS ── */
.insights-list{max-height:280px;overflow-y:auto;padding-right:4px}
.insight{display:flex;gap:12px;padding:12px 14px;border-radius:10px;margin-bottom:10px;background:rgba(0,0,0,0.2);border-left:3px solid transparent;animation:slideIn .4s ease backwards;transition:filter .2s}
.insight.positive{border-color:var(--green);background:var(--green2)}.insight.warning{border-color:var(--red);background:var(--red2)}.insight.tip{border-color:var(--gold);background:var(--gold-dim)}
.insight:hover{filter:brightness(1.06)}
.insight span{font-size:1rem;flex-shrink:0;margin-top:1px}
.insight p{color:var(--text2);font-size:0.83rem;line-height:1.5;margin:0}
.insight strong{display:block;color:var(--text);margin-bottom:3px;font-size:0.87rem;font-weight:600}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}}

/* ── FORMS ── */
.fg4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.fg3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
@media(max-width:700px){.fg4,.fg3{grid-template-columns:repeat(2,1fr)}}
.fg{margin-bottom:8px}
.fg label{display:block;font-size:0.72rem;color:var(--text2);margin-bottom:6px;font-weight:500}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 13px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:0.88rem;transition:all .22s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);background:rgba(0,0,0,0.5)}
.fg textarea{resize:vertical;min-height:44px}
.emoji-picker{display:flex;gap:6px;flex-wrap:wrap}
.ep{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,0.3);border:1px solid var(--border);cursor:pointer;transition:all .2s;font-size:1.2rem;color:var(--text2)}
.ep small{font-size:0.58rem;font-weight:500}
.ep:hover{border-color:var(--border2);background:rgba(255,255,255,0.04)}
.ep.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}
.slider{-webkit-appearance:none;height:5px;border-radius:10px;background:var(--border)!important;border:none!important;padding:0!important;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));cursor:pointer;box-shadow:0 0 10px var(--gold-glow)}
.conf-badge{background:var(--gold-dim);color:var(--gold);border:1px solid var(--border-gold);font-size:0.68rem;padding:2px 8px;border-radius:10px;margin-left:6px;font-weight:700;font-family:var(--font-mono)}

/* ── TABLE ── */
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th{padding:10px 14px;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);text-align:left;border-bottom:1px solid var(--border)}
td{padding:12px 14px;font-size:0.87rem;border-bottom:1px solid rgba(255,255,255,0.025);transition:background .15s}
tr:hover td{background:rgba(255,255,255,0.018)}
.side-l{color:var(--green);font-weight:600}.side-s{color:var(--red);font-weight:600}
.rr-badge{padding:3px 10px;border-radius:20px;font-size:0.74rem;font-weight:700;display:inline-block;font-family:var(--font-mono)}
.rr-badge.win{color:var(--green);background:var(--green2)}.rr-badge.loss{color:var(--red);background:var(--red2)}
.del-btn{background:none;border:none;color:var(--text2);cursor:pointer;opacity:0.35;transition:opacity .2s,color .2s;display:flex;align-items:center;padding:4px;border-radius:6px}
.del-btn:hover{opacity:1;color:var(--red);background:var(--red2)}
.trade-row{cursor:pointer}
.trade-row:hover td{background:rgba(212,175,55,0.03) !important}

/* ── JOURNAL SUMMARY BAR ── */
.journal-summary-bar{display:flex;align-items:center;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden;overflow-x:auto}
.jsb-item{display:flex;flex-direction:column;align-items:center;padding:12px 14px;flex:1;min-width:70px}
.jsb-lbl{font-size:0.56rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:4px}
.jsb-val{font-size:0.95rem;font-weight:700}
.jsb-sep{width:1px;height:28px;background:var(--border);flex-shrink:0}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:500px;padding:28px;border-radius:var(--r);animation:modalIn .25s cubic-bezier(0.4,0,0.2,1)}
@keyframes modalIn{from{opacity:0;transform:scale(0.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal h3{margin-bottom:20px;font-size:1.1rem;font-weight:700}
.modal-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
/* --- AI Parser Mobile Fix --- */
#aiParserModalUser.modal-overlay{
  z-index:9999 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#aiParserModalUser > .modal{
  width:min(540px, calc(100vw - 20px)) !important;
  max-width:540px !important;
  max-height:calc(100dvh - 20px) !important;
  margin:0 auto !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:clamp(14px, 3.2vw, 24px) !important;
}
@media (max-width: 640px){
  #aiParserModalUser > .modal{
    border-radius:14px !important;
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
  }
  #aiParserModalUser .btn-outline,
  #aiParserModalUser .btn-primary{
    min-height:40px;
  }
}

/* ── TRADE DETAIL MODAL ── */
.detail-kpi{background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:10px;padding:12px 14px;transition:border-color .2s}
.detail-kpi:hover{border-color:var(--border2)}
.dk-lbl{font-size:0.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:5px}
.dk-val{font-size:0.95rem;font-weight:700}

/* ── CHART ── */
.chart-box{position:relative;height:260px}
.chart-box.short{height:180px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/* ── STREAK ── */
.streak-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.streak-box{text-align:center;padding:14px 8px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid var(--border)}
.sb-label{font-size:0.6rem;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.8px;font-weight:700}
.sb-val{font-size:1.6rem;font-weight:800;font-family:var(--font-mono);letter-spacing:-0.5px}

/* ── DEEP STATS ── */
.deep-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
@media(max-width:1000px){.deep-stats{grid-template-columns:repeat(3,1fr)}}
.ds-card{padding:16px;border-radius:12px;background:rgba(0,0,0,0.25);border:1px solid var(--border);transition:border-color .2s,transform .2s}
.ds-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.ds-label{font-size:0.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;font-weight:700}
.ds-val{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:8px;line-height:1;font-family:var(--font-mono)}
.ds-sub{font-size:0.68rem;color:var(--text2);margin-top:7px;font-family:var(--font-mono)}
.ds-indicator{width:10px;height:4px;border-radius:2px}
.ds-indicator.win{background:var(--green)}.ds-indicator.loss{background:var(--red)}

/* ── METRIC ROWS ── */
.metric-rows{margin-top:12px}
.mr{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:10px;margin-bottom:6px;background:rgba(0,0,0,0.2);border:1px solid transparent;transition:border-color .2s}
.mr:hover{border-color:var(--border)}
.mr-name{font-weight:600;font-size:0.88rem}.mr-meta{color:var(--text2);font-size:0.78rem}.mr-val{font-weight:700;font-size:0.9rem;font-family:var(--font-mono)}

/* ── EMOTION GRID ── */
.emotion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.emo-card{padding:14px 8px;border-radius:12px;text-align:center;background:rgba(0,0,0,0.22);border:1px solid var(--border)}
.emo-icon{font-size:1.6rem;margin-bottom:4px}.emo-lbl{font-size:0.72rem;color:var(--text2)}.emo-wr{font-size:1.3rem;font-weight:700;margin-top:4px;font-family:var(--font-mono)}.emo-sub{font-size:0.66rem;color:var(--text2);margin-top:2px}

/* ── PROP FIRM ── */
.pf-progress{display:flex;flex-direction:column;gap:16px}
.pfr-top{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text2);margin-bottom:5px}
.pfr-bar{height:7px;background:rgba(255,255,255,0.04);border-radius:20px;overflow:hidden}
.pfr-fill{height:100%;border-radius:20px;transition:width .6s cubic-bezier(0.4,0,0.2,1)}
.pfr-fill.green{background:linear-gradient(90deg,var(--green),#34d399)}.pfr-fill.red{background:linear-gradient(90deg,var(--red),#f87171)}.pfr-fill.orange{background:linear-gradient(90deg,var(--gold),var(--gold2))}.pfr-fill.blue{background:linear-gradient(90deg,var(--blue),#60a5fa)}
.pf-status{text-align:center;margin-top:18px;padding:12px;border-radius:10px;background:rgba(0,0,0,0.2);font-size:0.9rem;font-weight:600}

/* ── CALC ── */
.calc-panel{display:flex;flex-direction:column}
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.calc-head h3{margin:0}
.calc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.calc-badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 10px;border-radius:999px;font-size:0.68rem;font-weight:700;letter-spacing:0;border:1px solid transparent}
.calc-badge.positive{color:var(--green);background:var(--green2);border-color:rgba(14,203,129,0.3)}
.calc-badge.negative{color:var(--red);background:var(--red2);border-color:rgba(246,70,93,0.3)}
.calc-badge.neutral{color:var(--text2);background:rgba(255,255,255,0.06);border-color:var(--border)}
.calc-switch{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--text2);font-size:0.8rem;cursor:pointer}
.calc-switch input{accent-color:var(--green)}
.calc-inline-error{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(246,70,93,0.28);background:rgba(246,70,93,0.08);color:var(--red);font-size:0.78rem;line-height:1.45}
.calc-results{margin-top:16px}
.cr{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 14px;border-radius:10px;margin-bottom:6px;background:rgba(0,0,0,0.25);border:1px solid var(--border)}
.cr span{color:var(--text2);font-size:0.87rem}
.cr strong{color:var(--green);font-size:0.9rem;font-family:var(--font-mono);text-align:right}
.calc-scenarios{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.calc-scenario-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:rgba(0,0,0,0.2);font-size:0.8rem}
.calc-scenario-row span{color:var(--text2)}
.calc-scenario-row strong{color:var(--text);font-family:var(--font-mono);font-size:0.82rem;text-align:right}
.calc-toggle{width:100%}
.calc-breakdown{margin-top:10px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,0.18);padding:8px}
.calc-break-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px}
.calc-break-row span{color:var(--text2);font-size:0.76rem}
.calc-break-row code{color:var(--text);font-size:0.74rem;font-family:var(--font-mono);white-space:normal;text-align:right}
@media(max-width:720px){
    .calc-form-grid{grid-template-columns:1fr}
    .cr{flex-direction:column;align-items:flex-start}
    .cr strong{text-align:left}
    .calc-scenario-row{flex-direction:column;align-items:flex-start}
    .calc-scenario-row strong{text-align:left}
}

/* ── PLAYBOOK ── */
.playbook-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.play-card{border-radius:var(--r);padding:20px;background:var(--surface);border:1px solid var(--border);transition:border-color .2s,transform .2s}
.play-card:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.play-name{font-size:1rem;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.play-section{margin-bottom:9px}
.play-section-title{font-size:0.63rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:700}
.play-section p{color:var(--text);font-size:0.85rem;line-height:1.5}
.play-stats{display:flex;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.play-stat{font-size:0.78rem;color:var(--text2)}.play-stat strong{color:var(--text);display:block;font-size:0.95rem;font-family:var(--font-mono)}

/* ── COACH / REPORT ── */
.coach-feed .insight{margin-bottom:12px}
.report-output{min-height:300px}
.report-empty{text-align:center;padding:60px 20px;color:var(--text2)}.report-empty span{font-size:3rem;display:block;margin-bottom:12px}
.rpt-section{margin-bottom:22px}.rpt-section h4{font-size:0.86rem;color:var(--gold);margin-bottom:10px;font-weight:700}
.rpt-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.87rem}
.rpt-row span{color:var(--text2)}.rpt-row strong{font-weight:600;font-family:var(--font-mono)}
.rpt-text{color:var(--text2);font-size:0.87rem;line-height:1.65;margin-bottom:6px}
.rpt-grade{font-size:3rem;font-weight:800;text-align:center;margin:16px 0;line-height:1;font-family:var(--font-mono)}

/* ── JOURNAL EMPTY ── */
.journal-empty{text-align:center;padding:50px 20px}
.journal-empty span.icon{font-size:2.5rem;display:block;margin-bottom:14px}
.journal-empty h2{font-size:1.2rem;margin-bottom:8px;font-weight:700}
.journal-empty p{color:var(--text2);font-size:0.87rem;margin-bottom:24px;line-height:1.55}
.je-features{display:flex;justify-content:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.je-feature{background:rgba(0,0,0,0.3);border:1px solid var(--border);padding:14px;border-radius:12px;text-align:left;width:150px}
.je-feature h4{font-size:0.83rem;margin:7px 0 4px;font-weight:600}.je-feature small{font-size:0.7rem;color:var(--text2)}
.je-feature.g{border-color:rgba(14,203,129,0.2)}.je-feature.g h4{color:var(--green)}
.je-feature.p{border-color:rgba(212,175,55,0.2)}.je-feature.p h4{color:var(--gold)}
.je-feature.y{border-color:rgba(59,130,246,0.2)}.je-feature.y h4{color:var(--blue)}

/* ── DAILY BRIEF ── */
.brief-modal .modal{max-width:550px}
.brief-header{text-align:center;margin-bottom:20px}
.brief-header span{font-size:3rem;display:block;margin-bottom:10px}
.brief-metric{display:flex;align-items:center;background:rgba(255,255,255,0.03);padding:13px 16px;border-radius:10px;margin-bottom:8px;border:1px solid var(--border);transition:all .2s;cursor:pointer}
.brief-metric:hover{background:rgba(255,255,255,0.05)}
.brief-metric.checked{background:var(--green2);border-color:rgba(14,203,129,0.3)}
.brief-val{font-size:1.05rem;font-weight:700;margin-left:auto;font-family:var(--font-mono)}
.brief-check{margin-right:14px;width:18px;height:18px;accent-color:var(--green);cursor:pointer}
.brief-label{display:flex;flex-direction:column}
.brief-label strong{font-size:0.9rem}.brief-label small{color:var(--text2);font-size:0.76rem;margin-top:2px;font-style:italic}

/* ── CALENDAR ── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
.cal-nav-btn{background:none;border:1px solid var(--border);color:var(--text2);width:26px;height:26px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.9rem;transition:all .18s}
.cal-nav-btn:hover{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.cal-month-title{font-size:0.8rem;color:var(--text);font-weight:700}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.cal-dow{font-size:0.55rem;color:var(--text3);text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:10px}
.cal-day{aspect-ratio:1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.62rem;color:var(--text2);background:rgba(255,255,255,0.02);position:relative;cursor:default;transition:transform .15s ease,box-shadow .15s ease;border:1px solid transparent;font-weight:500;overflow:hidden}
.cal-day:hover{transform:scale(1.15);z-index:5;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
.cal-dot{width:4px;height:4px;border-radius:50%;margin-top:1px;opacity:0}
.cal-day.has-trades .cal-dot{opacity:1}
.cal-pnl-mini{font-size:0.44rem;font-weight:800;font-family:var(--font-mono);line-height:1;margin-top:1px;letter-spacing:-0.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:98%;text-align:center}
.cal-num{line-height:1;font-size:0.65rem}
.cal-day .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--border2);padding:7px 11px;border-radius:8px;font-size:0.7rem;white-space:nowrap;z-index:20;color:var(--text);pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,0.5);line-height:1.5;text-align:center;min-width:90px}
.cal-day .tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--border2)}
.cal-day:hover .tip{display:block}
.loss-3{background:rgba(246,70,93,0.55);border-color:rgba(246,70,93,0.3);color:#fca5a5;font-weight:700}
.loss-2{background:rgba(246,70,93,0.30);border-color:rgba(246,70,93,0.18);color:#fca5a5}
.loss-1{background:rgba(246,70,93,0.14);color:#fca5a5}
.neutral{background:rgba(255,255,255,0.025);color:var(--text3)}
.win-1{background:rgba(14,203,129,0.14);color:#6ee7b7}
.win-2{background:rgba(14,203,129,0.30);border-color:rgba(14,203,129,0.18);color:#6ee7b7}
.win-3{background:rgba(14,203,129,0.52);border-color:rgba(14,203,129,0.30);color:#d1fae5;font-weight:700}
.loss-3 .cal-dot,.loss-2 .cal-dot,.loss-1 .cal-dot{background:var(--red)}
.win-1 .cal-dot,.win-2 .cal-dot,.win-3 .cal-dot{background:var(--green)}
.cal-day.today{border-color:var(--gold) !important}
.cal-day.today .cal-num{color:var(--gold);font-weight:800}
.cal-legend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:4px 0}
.cal-legend span{display:flex;align-items:center;gap:5px;font-size:0.66rem;color:var(--text2);font-weight:500}
.cl{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ── FOREX NEWS ── */
.news-filter-tabs{display:flex;gap:4px;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:10px;padding:4px}
.news-filter-btn{flex:1;padding:5px 8px;font-size:0.7rem;font-weight:600;border:none;border-radius:7px;background:transparent;color:var(--text2);cursor:pointer;transition:all .18s;font-family:var(--font)}
.news-filter-btn:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.news-filter-btn.active{background:var(--gold-dim);color:var(--gold);border:1px solid var(--border-gold)}
.news-list{display:flex;flex-direction:column;gap:2px}
.news-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;background:rgba(0,0,0,0.2);border:1px solid transparent;transition:all .15s;position:relative}
.news-item:hover{background:rgba(255,255,255,0.03);border-color:var(--border)}
.news-item.news-past{opacity:0.4}
.news-left{min-width:40px;text-align:right;flex-shrink:0}
.news-time{font-size:0.7rem;font-weight:700;color:var(--text);font-family:var(--font-mono);line-height:1.2}
.news-cur{font-size:0.58rem;color:var(--gold);font-weight:700;letter-spacing:0.5px;margin-top:2px}
.news-mid{flex:1;min-width:0}
.news-title{font-size:0.78rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.news-meta{display:flex;align-items:center;gap:6px;margin-top:3px}
.news-impact{font-size:0.52rem;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:0.5px}
.impact-high{background:rgba(246,70,93,0.2);color:var(--red);border:1px solid rgba(246,70,93,0.3)}
.impact-med{background:rgba(240,165,0,0.15);color:var(--gold);border:1px solid rgba(240,165,0,0.25)}
.impact-low{background:rgba(14,203,129,0.1);color:var(--green);border:1px solid rgba(14,203,129,0.2)}
.news-val{font-size:0.63rem;color:var(--text2);font-family:var(--font-mono)}
.news-countdown{font-size:0.66rem;font-weight:700;color:var(--text2);font-family:var(--font-mono);min-width:38px;text-align:right;flex-shrink:0}
.news-done{font-size:0.7rem;color:var(--green);min-width:20px;text-align:right;opacity:0.6}
.news-loading{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SHARE STATS MODAL ── */
.share-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);z-index:700;display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:600px){.share-modal-overlay{align-items:center;padding:20px}}
.share-modal{width:100%;max-width:540px;background:#0d1018;border:1px solid rgba(255,255,255,0.1);border-radius:24px 24px 0 0;padding:28px 22px 36px;animation:slideUp .3s cubic-bezier(0.4,0,0.2,1)}
@media(min-width:600px){.share-modal{border-radius:20px;animation:modalIn .25s cubic-bezier(0.4,0,0.2,1)}}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.share-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.share-modal-title{font-size:1.05rem;font-weight:700;color:var(--text)}
.share-modal-sub{font-size:0.76rem;color:var(--text2);margin-top:3px}
.share-close-btn{background:rgba(255,255,255,0.08);border:none;color:var(--text2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.share-close-btn:hover{background:rgba(255,255,255,0.14);color:var(--text)}
.share-tabs{display:flex;gap:6px;margin-bottom:18px;background:rgba(0,0,0,0.4);border-radius:12px;padding:4px}
.share-tab{flex:1;padding:8px 10px;border:none;border-radius:9px;background:transparent;color:var(--text2);font-family:var(--font);font-size:0.75rem;font-weight:600;cursor:pointer;transition:all .18s}
.share-tab.active{background:rgba(255,255,255,0.1);color:var(--text)}
.share-preview-wrap{display:flex;justify-content:center;margin-bottom:18px}
.share-card{width:100%;max-width:420px;border-radius:18px;padding:24px;position:relative;overflow:hidden;font-family:'DM Sans',sans-serif}
.share-card[data-theme="dark"]{background:linear-gradient(135deg,#0d1221 0%,#111827 100%);border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.share-card[data-theme="gold"]{background:linear-gradient(135deg,#0c0a04 0%,#1a1300 100%);border:1px solid rgba(212,175,55,0.3);box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 40px rgba(212,175,55,0.05)}
.share-card[data-theme="gold"]::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(212,175,55,0.08),transparent 60%);pointer-events:none}
.share-card[data-theme="minimal"]{background:#f8fafc;border:1px solid #e2e8f0;box-shadow:0 10px 40px rgba(0,0,0,0.12)}
.share-card[data-theme="minimal"] .sc-brand-name,.share-card[data-theme="minimal"] .sc-stat-val,.share-card[data-theme="minimal"] .sc-pnl-r,.share-card[data-theme="minimal"] .sc-streak-num{color:#0f172a}
.share-card[data-theme="minimal"] .sc-brand-sub,.share-card[data-theme="minimal"] .sc-stat-lbl,.share-card[data-theme="minimal"] .sc-pnl-label,.share-card[data-theme="minimal"] .sc-best-lbl,.share-card[data-theme="minimal"] .sc-streak-lbl,.share-card[data-theme="minimal"] .sc-date{color:#64748b}
.share-card[data-theme="minimal"] .sc-stat{background:#f1f5f9;border-color:#e2e8f0}
.share-card[data-theme="minimal"] .sc-bottom-row{border-color:#e2e8f0}
.sc-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.sc-brand-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#b8941f);color:#060810;font-size:0.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:0.5px;flex-shrink:0}
.sc-brand-name{font-size:0.9rem;font-weight:800;color:#fff;line-height:1.2}
.sc-brand-sub{font-size:0.62rem;color:rgba(255,255,255,0.35);margin-top:1px}
.sc-date{margin-left:auto;font-size:0.62rem;color:rgba(255,255,255,0.3);font-family:'DM Mono',monospace}
.sc-pnl{margin-bottom:18px}
.sc-pnl-label{font-size:0.58rem;font-weight:700;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px}
.sc-pnl-value{font-size:2.6rem;font-weight:900;line-height:1;font-family:'DM Mono',monospace;letter-spacing:-1px;margin-bottom:4px}
.sc-pnl-r{font-size:0.85rem;font-weight:600;font-family:'DM Mono',monospace;opacity:0.8}
.sc-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.sc-stat{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:9px;padding:9px 6px;text-align:center}
.sc-stat-lbl{font-size:0.5rem;font-weight:700;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:5px}
.sc-stat-val{font-size:0.88rem;font-weight:800;color:#fff;font-family:'DM Mono',monospace}
.sc-bottom-row{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06)}
.sc-streak{display:flex;flex-direction:column;gap:2px}
.sc-streak-num{font-size:0.95rem;font-weight:800;color:#fff;font-family:'DM Mono',monospace}
.sc-streak-lbl{font-size:0.6rem;color:rgba(255,255,255,0.4)}
.sc-best{display:flex;flex-direction:column;align-items:center;gap:2px}
.sc-best-lbl{font-size:0.55rem;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.5px}
.sc-best-val{font-size:0.76rem;font-weight:700;color:var(--gold)}
.sc-wl{display:flex;align-items:center;font-size:0.86rem}
.share-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}
.share-copy-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--text2);border-radius:12px;font-family:var(--font);font-size:0.86rem;font-weight:600;cursor:pointer;transition:all .2s}
.share-copy-btn:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.share-download-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;border:none;background:linear-gradient(135deg,var(--gold),#b8941f);color:#060810;border-radius:12px;font-family:var(--font);font-size:0.88rem;font-weight:800;cursor:pointer;transition:all .22s;box-shadow:0 4px 20px rgba(212,175,55,0.25);letter-spacing:0.2px}
.share-download-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(212,175,55,0.35)}

/* ── HIDDEN EXPORT CARD ── */
#shareCardExport{position:absolute;left:-9999px;top:-9999px;width:480px;background:#080a0f;padding:28px;border-radius:16px;color:#fff;font-family:var(--font);border:1px solid rgba(212,175,55,0.2);z-index:-1}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.07);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}

/* ── UTILITY ── */
.green{color:var(--green)}.red{color:var(--red)}.orange{color:var(--orange)}.blue{color:var(--blue)}.gold{color:var(--gold)}
/* ════════════════════════════════════════════════════
   JOURNAL TRADE FORM  —  Two-column step layout
   ════════════════════════════════════════════════════ */

/* ── Outer wrapper: two-column desktop ── */
.jtf-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}
@media (max-width: 960px) { .jtf-wrap { grid-template-columns: 1fr; } }

/* ── Shared card shell ── */
.jtf-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 12px;
    backdrop-filter: blur(16px);
    transition: border-color .2s;
}
.jtf-card:focus-within { border-color: var(--border2); }

/* ── Step header ── */
.jtf-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.jtf-step-num {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 4px 8px;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.jtf-step-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.jtf-step-sub {
    font-size: 0.72rem;
    color: var(--text3);
    margin-top: 2px;
}

/* ── Generic input ── */
.jtf-input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.88rem;
    padding: 10px 14px;
    transition: border-color .2s, box-shadow .2s;
}
.jtf-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.jtf-input::placeholder { color: var(--text3); }
.jtf-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ── 1. Pair input + grid ── */
.jtf-pair-input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 13px 16px;
    margin-bottom: 14px;
    transition: border-color .2s, box-shadow .2s;
    letter-spacing: 1px;
}
.jtf-pair-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.jtf-pair-input::placeholder { color: var(--text3); font-weight: 400; font-size: 0.88rem; font-family: var(--font); letter-spacing: 0; }

.jtf-pair-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
@media (max-width: 600px) { .jtf-pair-grid { grid-template-columns: repeat(4, 1fr); } }

.jtf-pair-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    letter-spacing: 0.3px;
}
.jtf-pair-btn:hover { background: var(--gold-dim); border-color: var(--border-gold); color: var(--gold); }
.jtf-pair-btn.active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.jtf-pair-flag { font-size: 1rem; line-height: 1; }

/* ── 2. Time & Session ── */
.jtf-tw-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 540px) { .jtf-tw-row { grid-template-columns: 1fr; } }

.jtf-field-wrap { display: flex; flex-direction: column; }

.jtf-session-pills {
    display: flex;
    gap: 6px;
}
.jtf-sess-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.jtf-sess-pill:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.jtf-sess-pill.active { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); color: #60a5fa; }

/* ── 3. Direction ── */
.jtf-dir-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.jtf-dir {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all .22s;
}
.jtf-dir:hover { border-color: var(--border2); background: rgba(255,255,255,0.03); }
.jtf-dir-icon {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text3);
    transition: color .22s;
}
.jtf-dir-text { text-align: left; }
.jtf-dir-text strong { display: block; font-size: 0.88rem; color: var(--text2); font-weight: 800; letter-spacing: 0.5px; transition: color .22s; }
.jtf-dir-text span { font-size: 0.68rem; color: var(--text3); }

.jtf-dir.long.active { background: rgba(14,203,129,0.08); border-color: rgba(14,203,129,0.45); }
.jtf-dir.long.active .jtf-dir-icon { color: var(--green); }
.jtf-dir.long.active .jtf-dir-text strong { color: var(--green); }

.jtf-dir.short.active { background: rgba(246,70,93,0.08); border-color: rgba(246,70,93,0.45); }
.jtf-dir.short.active .jtf-dir-icon { color: var(--red); }
.jtf-dir.short.active .jtf-dir-text strong { color: var(--red); }

/* ── 4. Price levels ── */
.jtf-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.jtf-price-box {
    flex: 1;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 12px 14px;
    background: rgba(0,0,0,0.3);
    transition: border-color .2s;
    position: relative;
}
.jtf-price-box:focus-within { border-color: var(--border2); }
.jtf-price-tag {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.entry-box .jtf-price-tag { color: #60a5fa; }
.sl-box    .jtf-price-tag { color: var(--red); }
.exit-box  .jtf-price-tag { color: var(--green); }

.jtf-price-val {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0;
}
.jtf-price-val:focus { outline: none; }
.jtf-price-val::placeholder { color: var(--text3); font-size: 0.8rem; font-weight: 400; }

.jtf-price-arrow {
    color: var(--text3);
    font-size: 0.9rem;
    flex-shrink: 0;
    padding: 0 2px;
}

/* R:R bar */
.jtf-rr-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
}
.jtf-rr-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex-shrink: 0;
    min-width: 55px;
}
.jtf-rr-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text3);
    flex-shrink: 0;
    min-width: 60px;
    transition: color .3s;
}
.jtf-rr-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.jtf-rr-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease, background .3s;
    background: var(--gold);
}

/* ── 5. Money input ── */
.jtf-money-input {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.jtf-money-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.jtf-money-sign {
    padding: 10px 14px;
    background: var(--gold-dim);
    color: var(--gold);
    font-weight: 800;
    font-size: 1rem;
    border-right: 1px solid var(--border-gold);
}

/* ── RIGHT COLUMN ── */
/* Preview card */
.jtf-preview-card {
    background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
    border: 1px solid var(--border-gold);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.jtf-preview-card::before {
    content: 'LIVE PREVIEW';
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 0.52rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 1.5px;
    opacity: 0.6;
}
.jtf-preview-pair {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: 4px;
    min-height: 36px;
}
.jtf-preview-dir {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 16px;
}
.jtf-preview-dir.long { background: rgba(14,203,129,0.15); color: var(--green); border: 1px solid rgba(14,203,129,0.3); }
.jtf-preview-dir.short { background: rgba(246,70,93,0.15); color: var(--red); border: 1px solid rgba(246,70,93,0.3); }
.jtf-preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.jtf-prev-stat {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.jtf-prev-stat span { display: block; font-size: 0.58rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 4px; }
.jtf-prev-stat strong { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 800; color: var(--text); }

/* ── 6. Result buttons ── */
.jtf-result-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.jtf-res {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
    border: 1.5px solid var(--border);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all .18s;
}
.jtf-res:hover { background: rgba(255,255,255,0.04); border-color: var(--border2); color: var(--text); }
.jtf-res.auto.active  { background: rgba(212,175,55,0.1); border-color: var(--border-gold); color: var(--gold); }
.jtf-res.win.active   { background: rgba(14,203,129,0.12); border-color: rgba(14,203,129,0.45); color: var(--green); }
.jtf-res.loss.active  { background: rgba(246,70,93,0.12); border-color: rgba(246,70,93,0.45); color: var(--red); }
.jtf-res.be.active    { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.3); color: #94a3b8; }

/* ── 7. Setup chips ── */
.jtf-setup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.jtf-setup-chip {
    padding: 6px 13px;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.jtf-setup-chip:hover { border-color: var(--border-gold); color: var(--gold); background: var(--gold-dim); }
.jtf-setup-chip.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* ── 8. Mindset grid ── */
.jtf-mindset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.jtf-mind-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 12px;
    background: rgba(0,0,0,0.22);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all .18s;
}
.jtf-mind-btn:hover { border-color: var(--border2); background: rgba(255,255,255,0.03); }
.jtf-mind-btn.active { background: var(--gold-dim); border-color: var(--border-gold); }
.jtf-mind-btn.danger.active { background: rgba(246,70,93,0.1); border-color: rgba(246,70,93,0.35); }
.jtf-mind-emoji { font-size: 1.5rem; line-height: 1; }
.jtf-mind-label { font-size: 0.66rem; font-weight: 600; color: var(--text2); text-align: center; }
.jtf-mind-btn.active .jtf-mind-label { color: var(--gold); }
.jtf-mind-btn.danger.active .jtf-mind-label { color: var(--red); }

/* ── 9. Notes + upload ── */
.jtf-notes {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 12px 14px;
    resize: vertical;
    min-height: 88px;
    margin-bottom: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.jtf-notes:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.jtf-notes::placeholder { color: var(--text3); }

.jtf-upload-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1.5px dashed var(--border2);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text2);
    font-size: 0.82rem;
    transition: all .2s;
}
.jtf-upload-area:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.jtf-upload-area svg { flex-shrink: 0; opacity: 0.5; transition: opacity .2s; }
.jtf-upload-area:hover svg { opacity: 1; }

/* ── Actions ── */
.jtf-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.jtf-btn-cancel {
    flex: 0 0 auto;
    padding: 13px 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    border-radius: 12px;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.jtf-btn-cancel:hover { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--border2); }

.jtf-btn-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .22s;
    box-shadow: 0 4px 20px rgba(212,175,55,0.22);
    letter-spacing: 0.3px;
}
.jtf-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(212,175,55,0.35); }
.jtf-btn-submit:active { transform: translateY(0); }
.jtf-btn-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Calendar mini P&L text ── */
.cal-pnl-mini {
    font-size: 0.5rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
    margin-top: 1px;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
    text-align: center;
}

/* ── Share Stats Modal ── */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(10px);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

@media (min-width: 600px) {
    .share-modal-overlay { align-items: center; padding: 20px; }
}

.share-modal {
    width: 100%;
    max-width: 560px;
    background: #0d1018;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px 24px 0 0;
    padding: 28px 24px 36px;
    animation: slideUp .3s cubic-bezier(0.4,0,0.2,1);
}

@media (min-width: 600px) {
    .share-modal { border-radius: 20px; animation: modalIn .25s cubic-bezier(0.4,0,0.2,1); }
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.share-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.share-modal-sub   { font-size: 0.78rem; color: var(--text2); margin-top: 3px; }

.share-close-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text2);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s;
}
.share-close-btn:hover { background: rgba(255,255,255,0.14); color: var(--text); }

/* Theme tabs */
.share-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 4px;
}
.share-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.share-tab.active {
    background: rgba(255,255,255,0.1);
    color: var(--text);
}

/* Preview wrap */
.share-preview-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* ── The actual share card ── */
.share-card {
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
}

/* Dark theme */
.share-card[data-theme="dark"] {
    background: linear-gradient(135deg, #0d1221 0%, #111827 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* Gold theme */
.share-card[data-theme="gold"] {
    background: linear-gradient(135deg, #0c0a04 0%, #1a1300 100%);
    border: 1px solid rgba(212,175,55,0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(212,175,55,0.05);
}
.share-card[data-theme="gold"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.08), transparent 60%);
    pointer-events: none;
}

/* Minimal theme */
.share-card[data-theme="minimal"] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.share-card[data-theme="minimal"] .sc-brand-name,
.share-card[data-theme="minimal"] .sc-stat-val,
.share-card[data-theme="minimal"] .sc-pnl-r,
.share-card[data-theme="minimal"] .sc-streak-num { color: #0f172a; }
.share-card[data-theme="minimal"] .sc-brand-sub,
.share-card[data-theme="minimal"] .sc-stat-lbl,
.share-card[data-theme="minimal"] .sc-pnl-label,
.share-card[data-theme="minimal"] .sc-best-lbl,
.share-card[data-theme="minimal"] .sc-streak-lbl,
.share-card[data-theme="minimal"] .sc-date { color: #64748b; }
.share-card[data-theme="minimal"] .sc-stat { background: #f1f5f9; border-color: #e2e8f0; }
.share-card[data-theme="minimal"] .sc-bottom-row { border-color: #e2e8f0; }

/* Brand row */
.sc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.sc-brand-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.sc-brand-name { font-size: 0.95rem; font-weight: 800; color: #fff; line-height: 1.2; }
.sc-brand-sub  { font-size: 0.65rem; color: rgba(255,255,255,0.35); margin-top: 1px; }
.sc-date { margin-left: auto; font-size: 0.65rem; color: rgba(255,255,255,0.3); font-family: 'DM Mono', monospace; }

/* P&L block */
.sc-pnl { margin-bottom: 20px; }
.sc-pnl-label { font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.sc-pnl-value { font-size: 2.8rem; font-weight: 900; line-height: 1; font-family: 'DM Mono', monospace; letter-spacing: -1px; margin-bottom: 4px; }
.sc-pnl-r { font-size: 0.88rem; font-weight: 600; font-family: 'DM Mono', monospace; opacity: 0.8; }

/* Stats grid */
.sc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.sc-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.sc-stat-lbl { font-size: 0.52rem; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.sc-stat-val { font-size: 0.95rem; font-weight: 800; color: #fff; font-family: 'DM Mono', monospace; }

/* Bottom row */
.sc-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sc-streak { display: flex; flex-direction: column; gap: 2px; }
.sc-streak-num { font-size: 1rem; font-weight: 800; color: #fff; font-family: 'DM Mono', monospace; }
.sc-streak-lbl { font-size: 0.62rem; color: rgba(255,255,255,0.4); }
.sc-best { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sc-best-lbl { font-size: 0.58rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.5px; }
.sc-best-val { font-size: 0.78rem; font-weight: 700; color: var(--gold); }
.sc-wl { display: flex; align-items: center; font-size: 0.88rem; }

/* Share action buttons */
.share-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
}
.share-copy-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text2);
    border-radius: 12px;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.share-copy-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }

.share-download-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px;
    border: none;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    border-radius: 12px;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .22s;
    box-shadow: 0 4px 20px rgba(212,175,55,0.25);
    letter-spacing: 0.2px;
}
.share-download-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(212,175,55,0.35); }

/* ════════════════════════════════════════════════════════
   DISCIPLINE GUARD SYSTEM
   ════════════════════════════════════════════════════════ */

/* ── Dashboard Mini Widget ── */
.dg-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    backdrop-filter: blur(16px);
    transition: border-color .2s;
}

.dg-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dg-widget-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex: 1;
}

.dg-status-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.68rem;
    font-weight: 700;
    transition: all .3s;
    white-space: nowrap;
}

.dg-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    transition: all .3s;
    flex-shrink: 0;
}

.dg-settings-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text3);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s;
    flex-shrink: 0;
}

.dg-settings-btn:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    color: var(--gold);
}

/* Progress bars */
.dg-bars { display: flex; flex-direction: column; gap: 8px; }

.dg-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dg-bar-label {
    font-size: 0.62rem;
    color: var(--text3);
    font-weight: 600;
    width: 72px;
    flex-shrink: 0;
}

.dg-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    overflow: hidden;
}

.dg-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width .5s cubic-bezier(0.4,0,0.2,1), background .3s;
}

.dg-bar-fill.loss   { background: linear-gradient(90deg, var(--red),   #f87171); }
.dg-bar-fill.trades { background: linear-gradient(90deg, var(--blue),  #60a5fa); }
.dg-bar-fill.streak { background: linear-gradient(90deg, var(--gold),  var(--gold2)); }

/* Warning: flash red at 70%+ */
.dg-bar-fill[style*="width: 7"],
.dg-bar-fill[style*="width: 8"],
.dg-bar-fill[style*="width: 9"],
.dg-bar-fill[style*="width: 100"] {
    animation: barWarn 1.5s ease-in-out infinite alternate;
}

@keyframes barWarn {
    from { opacity: 1; }
    to   { opacity: 0.65; }
}

.dg-bar-val {
    font-size: 0.62rem;
    font-family: var(--font-mono);
    color: var(--text2);
    width: 58px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
}

/* ── FULL LOCK OVERLAY ── */
.dg-lock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 14, 0.97);
    backdrop-filter: blur(20px);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInOverlay .4s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dg-lock-card {
    background: rgba(16,20,32,0.9);
    border: 1px solid rgba(246,70,93,0.3);
    border-radius: 24px;
    padding: 40px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 80px rgba(246,70,93,0.08), 0 20px 60px rgba(0,0,0,0.6);
    animation: cardPop .4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes cardPop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.dg-lock-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    display: block;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

.dg-lock-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--red);
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 0 0 30px rgba(246,70,93,0.3);
}

.dg-lock-reason {
    font-size: 0.92rem;
    color: var(--text2);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.dg-lock-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.dg-lock-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px;
}

.dg-lock-stat span {
    display: block;
    font-size: 0.6rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
    font-weight: 700;
}

.dg-lock-stat strong {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text);
}

.dg-lock-countdown {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 28px;
    padding: 12px 20px;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    display: inline-block;
}

.dg-lock-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.dg-unlock-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text3);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.dg-unlock-btn:hover {
    background: rgba(246,70,93,0.1);
    border-color: rgba(246,70,93,0.3);
    color: var(--red);
}

.dg-unlock-warn {
    font-size: 0.68rem;
    color: var(--text3);
    text-align: center;
}

/* ── GUARD PAGE ── */
.dg-master-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: all .2s;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text2);
}

.dg-master-toggle:hover { border-color: var(--border2); color: var(--text); }

.dg-toggle-track {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--border);
    position: relative;
    transition: all .25s;
    flex-shrink: 0;
}

.dg-toggle-track.active {
    background: rgba(14,203,129,0.2);
    border-color: rgba(14,203,129,0.4);
}

.dg-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text3);
    transition: all .25s cubic-bezier(0.34,1.56,0.64,1);
}

.dg-toggle-track.active .dg-toggle-thumb {
    transform: translateX(18px);
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
}

/* Status card */
.dg-status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

.dg-status-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
    animation: iconPulse 3s ease-in-out infinite;
}

.dg-status-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 4px;
}

.dg-status-desc {
    font-size: 0.84rem;
    color: var(--text2);
    line-height: 1.5;
}

/* Today grid */
.dg-today-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-bottom: 18px;
}

@media(max-width:860px) { .dg-today-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px) { .dg-today-grid { grid-template-columns: 1fr 1fr; } }

.dg-today-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    transition: border-color .2s;
}

.dg-today-card:hover { border-color: var(--border2); }

.dg-today-label {
    font-size: 0.6rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 8px;
}

.dg-today-val {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-mono);
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--text2);
}

.dg-today-val.red    { color: var(--red); }
.dg-today-val.blue   { color: var(--blue); }
.dg-today-val.orange { color: var(--orange); }

.dg-today-track {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.dg-today-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(0.4,0,0.2,1); }
.dg-today-fill.loss   { background: linear-gradient(90deg, var(--red), #f87171); }
.dg-today-fill.trades { background: linear-gradient(90deg, var(--blue), #60a5fa); }
.dg-today-fill.streak { background: linear-gradient(90deg, var(--gold), var(--gold2)); }

.dg-today-limit, .dg-today-sub {
    font-size: 0.62rem;
    color: var(--text3);
    font-family: var(--font-mono);
}

/* Settings grid */
.dg-settings-grid { display: flex; flex-direction: column; gap: 4px; }

.dg-setting-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    transition: border-color .2s;
}

.dg-setting-item:hover { border-color: var(--border); }

.dg-setting-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dg-setting-icon.red    { background: var(--red2);    color: var(--red); }
.dg-setting-icon.blue   { background: var(--blue2);   color: var(--blue); }
.dg-setting-icon.orange { background: var(--orange2); color: var(--orange); }
.dg-setting-icon.gold   { background: var(--gold-dim); color: var(--gold); }

.dg-setting-info { flex: 1; }

.dg-setting-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}

.dg-setting-desc {
    font-size: 0.74rem;
    color: var(--text3);
    line-height: 1.4;
}

/* +/- controls */
.dg-setting-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dg-ctrl-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text2);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-ctrl-btn:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    color: var(--gold);
}

.dg-ctrl-val {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    min-width: 40px;
    text-align: center;
}

/* Lock history */
.dg-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    margin-bottom: 6px;
    border: 1px solid transparent;
    transition: border-color .2s;
}

.dg-history-row:hover { border-color: var(--border); }

.dg-history-icon { font-size: 1.1rem; flex-shrink: 0; }

.dg-history-info { flex: 1; min-width: 0; }

.dg-history-reason { font-size: 0.84rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dg-history-meta { font-size: 0.7rem; color: var(--text3); margin-top: 3px; }

.dg-history-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.dg-history-badge.lock     { background: var(--red2);    color: var(--red); }
.dg-history-badge.override { background: var(--orange2); color: var(--orange); }

/* ── SOCIAL MEDIA LINKS ── */
.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    margin-bottom: 8px;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .2s ease;
    flex-shrink: 0;
}

.social-btn:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212,175,55,0.15);
}

/* ════════════════════════════════════════════════════════
   BACKUP & RESTORE
   ════════════════════════════════════════════════════════ */

/* Usage card */
.bk-usage-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.bk-usage-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 200px;
}

.bk-usage-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
}

.bk-usage-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.bk-usage-sub   { font-size: 0.78rem; color: var(--text2); }

.bk-usage-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.bk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.bk-stat span {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text);
    line-height: 1;
}

.bk-stat small {
    font-size: 0.6rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}

/* Two-column grid */
.bk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media(max-width:800px) { .bk-grid { grid-template-columns: 1fr; } }

/* Backup options */
.bk-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.bk-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .18s;
}

.bk-option:hover { border-color: var(--border2); }

.bk-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}

.bk-option-info { display: flex; justify-content: space-between; align-items: center; flex: 1; }
.bk-option-name  { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.bk-option-count { font-size: 0.74rem; color: var(--text3); font-family: var(--font-mono); }

/* Backup button */
.bk-btn-backup {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .22s;
    box-shadow: 0 4px 20px rgba(212,175,55,0.22);
    letter-spacing: 0.2px;
    margin-bottom: 10px;
}

.bk-btn-backup:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(212,175,55,0.32); }
.bk-btn-backup:active { transform: translateY(0); }

/* Upload zone */
.bk-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    border: 2px dashed var(--border2);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    color: var(--text2);
    font-size: 0.85rem;
    margin-bottom: 14px;
}

.bk-upload-zone:hover, .bk-upload-zone.drag-over {
    border-color: var(--gold);
    background: var(--gold-dim);
    color: var(--text);
}

.bk-upload-zone svg { color: var(--text3); transition: color .2s; }
.bk-upload-zone:hover svg, .bk-upload-zone.drag-over svg { color: var(--gold); }
.bk-upload-zone small { font-size: 0.7rem; color: var(--text3); }
.bk-link { color: var(--gold); text-decoration: underline; }

/* File preview */
.bk-file-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(14,203,129,0.06);
    border: 1px solid rgba(14,203,129,0.25);
    border-radius: 12px;
    margin-bottom: 14px;
}

.bk-file-icon { font-size: 1.6rem; flex-shrink: 0; }

.bk-file-info { flex: 1; min-width: 0; }
.bk-file-name { font-size: 0.88rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-file-meta { font-size: 0.72rem; color: var(--text2); margin-top: 3px; }

.bk-file-clear {
    background: none;
    border: 1px solid var(--border);
    color: var(--text3);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all .18s;
    flex-shrink: 0;
}

.bk-file-clear:hover { background: var(--red2); border-color: var(--red); color: var(--red); }

/* Restore options */
.bk-restore-opts { display: flex; flex-direction: column; gap: 12px; }

.bk-restore-mode { display: flex; flex-direction: column; gap: 8px; }

.bk-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s;
}

.bk-radio:hover { border-color: var(--border2); }
.bk-radio input[type="radio"]:checked + .bk-radio-info strong { color: var(--gold); }
.bk-radio input[type="radio"] { accent-color: var(--gold); margin-top: 2px; flex-shrink: 0; }

.bk-radio-info { display: flex; flex-direction: column; gap: 3px; }
.bk-radio-info strong { font-size: 0.88rem; font-weight: 700; color: var(--text); transition: color .18s; }
.bk-radio-info span   { font-size: 0.76rem; color: var(--text3); line-height: 1.4; }

/* Restore button */
.bk-btn-restore {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: rgba(14,203,129,0.15);
    border: 1px solid rgba(14,203,129,0.35);
    color: var(--green);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .22s;
    letter-spacing: 0.2px;
}

.bk-btn-restore:hover {
    background: rgba(14,203,129,0.22);
    border-color: rgba(14,203,129,0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(14,203,129,0.15);
}

/* Success / error messages */
.bk-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(14,203,129,0.1);
    border: 1px solid rgba(14,203,129,0.3);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--green);
    font-weight: 600;
}

.bk-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--red2);
    border: 1px solid rgba(246,70,93,0.3);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--red);
    font-weight: 600;
}

/* Reminder banner */
.bk-reminder {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    font-size: 0.84rem;
    color: var(--text2);
    line-height: 1.55;
}

.bk-reminder svg { color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.bk-reminder strong { color: var(--gold); }

/* ════════════════════════════════════════════════════════
   AFFILIATE SYSTEM
   ════════════════════════════════════════════════════════ */

/* Nav badge */
.nav-aff-badge {
    margin-left: auto;
    font-size: 0.85rem;
    animation: blink 2s infinite;
}

/* Eyebrow */
.aff-eyebrow {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 4px;
    opacity: 0.8;
}

/* Earn badge */
.aff-earn-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    padding: 14px 20px;
    text-align: center;
}
.aff-earn-pct {
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    font-family: var(--font-mono);
    line-height: 1;
}
.aff-earn-label {
    font-size: 0.7rem;
    color: var(--text2);
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Tabs */
.aff-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.aff-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.aff-tab:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.aff-tab.active { background: var(--gold-dim); border-color: var(--border-gold); color: var(--gold); }
.aff-tab.coming { opacity: 0.5; cursor: default; }
.aff-tab.coming:hover { background: rgba(0,0,0,0.25); color: var(--text2); }

.aff-soon-tag {
    font-size: 0.55rem;
    background: rgba(255,255,255,0.08);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Panels */
.aff-panel { display: none; }
.aff-panel.active { display: block; }

/* How it works */
.aff-how-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.aff-how-step {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.aff-how-num {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}

.aff-how-icon { font-size: 1.8rem; line-height: 1; }

.aff-how-text {
    font-size: 0.8rem;
    color: var(--text2);
    line-height: 1.4;
}

.aff-how-text strong { color: var(--gold); }

.aff-how-arrow {
    font-size: 1.2rem;
    color: var(--text3);
    flex-shrink: 0;
}

/* Card */
.aff-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 16px;
    transition: border-color .2s;
}

.aff-card:focus-within { border-color: var(--border2); }

.aff-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.aff-card-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.aff-card-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.aff-card-sub   { font-size: 0.76rem; color: var(--text2); }

.aff-card-desc {
    font-size: 0.85rem;
    color: var(--text2);
    line-height: 1.55;
    margin-bottom: 18px;
}

/* Register field row */
.aff-field-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.aff-field-wrap { flex: 1; }

.aff-label {
    display: block;
    font-size: 0.66rem;
    color: var(--text3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.aff-input {
    width: 100%;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 11px 14px;
    transition: all .2s;
}

.aff-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.aff-input::placeholder { color: var(--text3); }

.aff-btn-primary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .22s;
    box-shadow: 0 4px 16px rgba(212,175,55,0.22);
    white-space: nowrap;
    flex-shrink: 0;
}

.aff-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.32); }

.aff-wa-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text3);
}

/* Referral link box */
.aff-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 0.88rem;
}

.aff-link-text { flex: 1; color: var(--green); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aff-copy-btn, .aff-share-btn, .aff-regen-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text2);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s;
    flex-shrink: 0;
}

.aff-copy-btn:hover  { background: rgba(14,203,129,0.12); border-color: rgba(14,203,129,0.3); color: var(--green); }
.aff-share-btn:hover { background: var(--gold-dim); border-color: var(--border-gold); color: var(--gold); }
.aff-regen-btn:hover { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: var(--blue); }

.aff-stats-mini {
    display: flex;
    gap: 0;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.aff-stat-mini {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-right: 1px solid var(--border);
}
.aff-stat-mini:last-child { border-right: none; }
.aff-stat-mini span { font-size: 1.2rem; font-weight: 800; font-family: var(--font-mono); color: var(--text); }
.aff-stat-mini small { font-size: 0.58rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; margin-top: 4px; }

/* Commission grid */
.aff-commission-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 4px;
}

@media(max-width:700px) { .aff-commission-grid { grid-template-columns: 1fr; } }

.aff-comm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    transition: border-color .2s, transform .2s;
}

.aff-comm-card:hover { border-color: var(--border-gold); transform: translateY(-2px); }

.aff-comm-pct {
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    font-family: var(--font-mono);
    line-height: 1;
    margin-bottom: 6px;
}

.aff-comm-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.aff-comm-desc { font-size: 0.74rem; color: var(--text2); line-height: 1.5; }

/* Daily code */
.aff-code-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.aff-code-val {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: 3px;
}

.aff-code-expiry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--text2);
    margin-bottom: 6px;
}

.aff-expiry-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 6px var(--red);
    animation: blink 2s infinite;
    flex-shrink: 0;
}

.aff-code-countdown {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--gold);
    margin-bottom: 16px;
}

/* Code howto */
.aff-code-howto {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}

.aff-howto-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.aff-howto-steps { display: flex; flex-direction: column; gap: 8px; }

.aff-howto-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
    color: var(--text2);
}

.aff-howto-step span {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    font-size: 0.65rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

/* Coming soon */
.aff-coming-soon-card {
    text-align: center;
    padding: 60px 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.aff-cs-icon { font-size: 3.5rem; margin-bottom: 16px; display: block; }
.aff-coming-soon-card h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; }
.aff-coming-soon-card p { color: var(--text2); font-size: 0.88rem; margin-bottom: 28px; line-height: 1.6; }

.aff-cs-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    max-width: 460px;
    margin: 0 auto 28px;
    text-align: left;
}

@media(max-width:500px) { .aff-cs-features { grid-template-columns: 1fr; } }

.aff-cs-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--text2);
    padding: 10px 14px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.aff-cs-feat span { font-size: 1rem; flex-shrink: 0; }

.aff-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    border-radius: 12px;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    transition: all .22s;
    box-shadow: 0 4px 16px rgba(212,175,55,0.22);
}

.aff-notify-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.32); }

/* ════════════════════════════════════════════════════════
   FREEMIUM SYSTEM
   ════════════════════════════════════════════════════════ */

/* ── Progress Bar (Dashboard) ── */
.free-progress-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.free-progress-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text2);
    font-weight: 500;
}

.free-progress-left svg { color: var(--gold); flex-shrink: 0; }

.free-progress-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 140px;
}

.free-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
}

.free-progress-fill {
    height: 100%;
    border-radius: 10px;
    background: var(--green);
    transition: width .5s cubic-bezier(0.4,0,0.2,1), background .3s;
}

.free-upgrade-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-gold);
    background: var(--gold-dim);
    color: var(--gold);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.free-upgrade-pill:hover {
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    border-color: transparent;
}

/* ── Topbar badges ── */
.topbar-premium-badge {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-left: auto;
    flex-shrink: 0;
}

.topbar-free-badge {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text3);
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Form paywall overlay ── */
.form-paywall-overlay {
    position: relative;
    background: rgba(6,8,14,0.92);
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    margin-bottom: 0;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: border-color .2s;
}

.form-paywall-overlay:hover { border-color: var(--gold); }

.fpo-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fpo-lock { font-size: 2.5rem; filter: grayscale(0); }
.fpo-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.fpo-sub { font-size: 0.8rem; color: var(--gold); font-weight: 500; }

/* ── PAYWALL MODAL ── */
.paywall-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(12px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .3s;
}

.paywall-overlay.active { opacity: 1; }

.paywall-card {
    width: 100%;
    max-width: 480px;
    background: #0d1018;
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 24px;
    padding: 32px 28px;
    position: relative;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(212,175,55,0.05);
    transform: translateY(20px) scale(0.97);
    transition: transform .3s cubic-bezier(0.34,1.2,0.64,1);
}

.paywall-overlay.active .paywall-card { transform: translateY(0) scale(1); }

.paywall-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--text3);
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s;
}
.paywall-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }

/* Header */
.paywall-header { text-align: center; margin-bottom: 24px; }
.paywall-crown  { font-size: 2.8rem; margin-bottom: 10px; display: block; animation: iconPulse 2s ease-in-out infinite; }
.paywall-badge  {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.paywall-title   { font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -0.3px; }
.paywall-trigger { font-size: 0.84rem; color: var(--text2); line-height: 1.55; }

/* Features */
.paywall-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.paywall-feat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    font-size: 0.84rem;
    color: var(--text);
}

.paywall-feat small { color: var(--text3); font-size: 0.74rem; display: block; margin-top: 2px; }

.pf-check {
    width: 20px; height: 20px;
    background: rgba(14,203,129,0.15);
    border: 1px solid rgba(14,203,129,0.3);
    color: var(--green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Plans */
.paywall-plans {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.paywall-plan {
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    text-align: center;
}

.paywall-plan:hover { border-color: var(--border2); }

.paywall-plan.selected {
    border-color: var(--gold);
    background: var(--gold-dim);
    box-shadow: 0 0 0 1px rgba(212,175,55,0.2);
}

.plan-tag {
    font-size: 0.56rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.plan-name   { font-size: 0.8rem; font-weight: 700; color: var(--text2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.plan-price  { font-size: 1.35rem; font-weight: 900; color: var(--text); font-family: var(--font-mono); letter-spacing: -0.5px; margin-bottom: 2px; }
.plan-period { font-size: 0.68rem; color: var(--text3); margin-bottom: 4px; }
.plan-saving { font-size: 0.64rem; color: var(--green); font-weight: 600; min-height: 16px; }

/* CTA */
.paywall-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.paywall-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 900;
    cursor: pointer;
    transition: all .22s;
    box-shadow: 0 6px 24px rgba(212,175,55,0.3);
    letter-spacing: 0.2px;
}

.paywall-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(212,175,55,0.4); }
.paywall-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.paywall-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.paywall-btn-secondary:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.paywall-btn-restore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text3);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.paywall-btn-restore:hover { color: var(--text2); }

.paywall-disclaimer {
    font-size: 0.7rem;
    color: var(--text3);
    text-align: center;
    line-height: 1.5;
}

/* ── Premium Toast ── */
.premium-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: linear-gradient(135deg, #1a1300, #0d1018);
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 30px rgba(212,175,55,0.1);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    transition: transform .4s cubic-bezier(0.34,1.2,0.64,1), opacity .4s;
    opacity: 0;
    white-space: nowrap;
}

.premium-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.premium-toast span { font-size: 1.4rem; }

/* ════════════════════════════════════════════════════════
   ONBOARDING MODAL
   ════════════════════════════════════════════════════════ */
.onboard-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(16px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .4s ease;
}
.onboard-overlay.active { opacity: 1; }
.onboard-card {
    width: 100%; max-width: 460px;
    background: linear-gradient(160deg, #0f1420 0%, #080a0f 100%);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 24px;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 60px rgba(212,175,55,0.04);
    transform: translateY(24px) scale(0.97);
    transition: transform .4s cubic-bezier(0.34,1.2,0.64,1);
    max-height: 92vh;
    overflow-y: auto;
}
.onboard-overlay.active .onboard-card { transform: translateY(0) scale(1); }
.onboard-logo { margin-bottom: 16px; }
.onboard-badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.onboard-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.5px;
    margin-bottom: 6px;
}
.onboard-sub { font-size: 0.85rem; color: var(--text2); margin-bottom: 24px; }

.onboard-steps {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 20px; text-align: left;
}
.onboard-step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
}
.onboard-step-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.onboard-step-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.onboard-step-desc  { font-size: 0.76rem; color: var(--text2); line-height: 1.45; }

.onboard-notice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 14px;
    background: rgba(240,165,0,0.08);
    border: 1px solid rgba(240,165,0,0.2);
    border-radius: 12px;
    text-align: left;
    font-size: 0.8rem;
    color: var(--text2);
    line-height: 1.55;
    margin-bottom: 16px;
}
.onboard-notice svg { color: var(--orange); flex-shrink: 0; margin-top: 1px; }
.onboard-notice strong { color: var(--orange); }

.onboard-free-info {
    font-size: 0.8rem;
    color: var(--text2);
    margin-bottom: 20px;
    padding: 10px 14px;
    background: rgba(14,203,129,0.05);
    border: 1px solid rgba(14,203,129,0.15);
    border-radius: 10px;
    line-height: 1.5;
}
.onboard-free-info strong { color: var(--text); }
.onboard-free-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--green2);
    color: var(--green);
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 4px;
    vertical-align: middle;
}
.onboard-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px;
    border: none; border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font); font-size: 0.95rem; font-weight: 900;
    cursor: pointer; letter-spacing: 0.2px;
    transition: all .22s;
    box-shadow: 0 6px 24px rgba(212,175,55,0.28);
    margin-bottom: 14px;
}
.onboard-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(212,175,55,0.38); }
.onboard-tos { font-size: 0.68rem; color: var(--text3); line-height: 1.5; }

/* ════════════════════════════════════════════════════════
   LIVE SIGNAL SYSTEM
   ════════════════════════════════════════════════════════ */

/* Live badge in page title */
.sig-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(246,70,93,0.12);
    border: 1px solid rgba(246,70,93,0.3);
    color: var(--red);
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 1px;
    animation: blink 1.5s infinite;
    vertical-align: middle;
}

/* Last update indicator */
.sig-last-update {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--text3);
    font-family: var(--font-mono);
}

/* Stats row */
.sig-stats-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media(max-width:800px){ .sig-stats-row{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px){ .sig-stats-row{ grid-template-columns:repeat(2,1fr) } }

.sig-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .2s;
}
.sig-stat-card:hover { border-color: var(--border2); }
.sig-stat-icon { margin-bottom: 2px; }
.sig-stat-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); }
.sig-stat-val { font-size: 1.5rem; font-weight: 900; font-family: var(--font-mono); letter-spacing: -.5px; color: var(--text); line-height: 1; }
.sig-stat-sub { font-size: 0.68rem; color: var(--text3); }

/* External analyst stats */
.sig-analyst-wrap {
    margin-bottom: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(240,185,11,0.08), rgba(255,255,255,0.01));
    border-radius: 14px;
    padding: 12px;
}
.sig-analyst-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sig-analyst-sub {
    font-size: 0.66rem;
    color: var(--text3);
    letter-spacing: 0.3px;
    text-align: right;
}
.sig-analyst-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media(max-width:700px){
    .sig-analyst-list { grid-template-columns: 1fr; }
    .sig-analyst-head { align-items: flex-start; flex-direction: column; }
    .sig-analyst-sub { text-align: left; }
}
.sig-analyst-card {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 10px;
    background: rgba(0,0,0,.2);
}
.sig-analyst-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sig-analyst-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}
.sig-analyst-count {
    font-size: 0.66rem;
    color: var(--text3);
    font-family: var(--font-mono);
}
.sig-analyst-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 7px;
}
.sig-analyst-kpi {
    font-size: 0.67rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text2);
    line-height: 1.1;
}
.sig-analyst-kpi.good { color: var(--green); border-color: rgba(14,203,129,0.35); background: rgba(14,203,129,0.08); }
.sig-analyst-kpi.bad { color: var(--red); border-color: rgba(246,70,93,0.35); background: rgba(246,70,93,0.08); }
.sig-analyst-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.65rem;
    color: var(--text3);
}

/* Exchange tabs */
.sig-exchange-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.sig-ex-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.25);
    color: var(--text2);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.sig-ex-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.sig-ex-tab.active { background: var(--gold-dim); border-color: var(--border-gold); color: var(--gold); }
.sig-ex-dot {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.sig-ex-dot.okx    { background: #4D9EFF; box-shadow: 0 0 6px #4D9EFF; }
.sig-ex-dot.bitget { background: #00C896; box-shadow: 0 0 6px #00C896; }
.sig-ex-badge {
    font-size: 0.58rem;
    background: rgba(255,255,255,.06);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .3px;
}
.sig-ex-count {
    background: rgba(255,255,255,.08);
    font-size: 0.65rem;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

/* Section title */
.sig-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text2);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.sig-section-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    display: inline-block;
}
.sig-section-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.5s infinite; }
.sig-section-dot.gray  { background: var(--text3); }

/* Signal Card */
.sig-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
    transition: border-color .2s, transform .15s;
    position: relative;
    overflow: hidden;
}
.sig-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity .3s;
}
.sig-card.open::before { background: linear-gradient(90deg, var(--green), transparent); opacity: 1; }
.sig-card.win::before  { background: linear-gradient(90deg, var(--green), transparent); opacity: .5; }
.sig-card.loss::before { background: linear-gradient(90deg, var(--red), transparent);   opacity: .5; }
.sig-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.sig-card.open  { border-color: rgba(14,203,129,.2); background: rgba(14,203,129,.03); }
.sig-card.win   { border-color: rgba(14,203,129,.12); }
.sig-card.loss  { border-color: rgba(246,70,93,.12); }

.sig-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
}
.sig-card-left  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sig-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.sig-ex-tag {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.sig-method-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text2);
    background: rgba(255,255,255,.05);
    padding: 2px 8px;
    border-radius: 6px;
}
.sig-pair {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    font-family: var(--font-mono);
}
.sig-side {
    font-size: 0.82rem;
    font-weight: 800;
    font-family: var(--font-mono);
}
.sig-leverage {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,.06);
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--text2);
    font-family: var(--font-mono);
}

/* Price row */
.sig-price-row {
    display: flex;
    gap: 0;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.sig-price-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border-right: 1px solid var(--border);
}
.sig-price-item:last-child { border-right: none; }
.sig-price-item span { font-size: 0.58rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.sig-price-item strong { font-size: 0.88rem; font-weight: 700; font-family: var(--font-mono); color: var(--text); }

.sig-photo-wrap {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.18);
}
.sig-photo {
    width: 100%;
    max-height: 320px;
    display: block;
    object-fit: contain;
    background: #0b1220;
}
@media(max-width:600px){
    .sig-photo { max-height: 240px; }
}

/* Live / result badge */
.sig-card-live {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.75rem; color: var(--green);
    font-weight: 600; margin-bottom: 8px;
}
.sig-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 6px var(--green);
    animation: blink 1.5s infinite; flex-shrink: 0;
}
/* ── Signal progress bar (open positions) ── */
.sig-progress-wrap {
    margin-bottom: 10px;
}
.sig-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-family: var(--font-mono);
}
.sig-progress-bar {
    position: relative;
    height: 8px;
    border-radius: 6px;
    overflow: visible;
    display: flex;
    margin-bottom: 5px;
}
.sig-progress-sl {
    height: 100%;
    background: linear-gradient(90deg, rgba(246,70,93,0.35), rgba(246,70,93,0.6));
    border-radius: 6px 0 0 6px;
}
.sig-progress-tp {
    height: 100%;
    background: linear-gradient(90deg, rgba(14,203,129,0.6), rgba(14,203,129,0.35));
    border-radius: 0 6px 6px 0;
    flex: 1;
}
.sig-progress-entry {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--gold);
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
    z-index: 2;
}
.sig-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text2);
    font-family: var(--font-mono);
}

.sig-card-result {
    font-size: 0.85rem;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-bottom: 8px;
    letter-spacing: .3px;
}

/* Card footer */
.sig-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sig-time   { font-size: 0.72rem; color: var(--text3); font-family: var(--font-mono); }
.sig-notes  { font-size: 0.76rem; color: var(--text2); flex: 1; }
.sig-status-open {
    font-size: 0.65rem; font-weight: 800;
    color: var(--green); background: var(--green2);
    padding: 2px 8px; border-radius: 10px;
    animation: blink 2s infinite;
    margin-left: auto;
}

/* Empty state */
.sig-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text3);
    font-size: 0.84rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.sig-empty svg { opacity: .25; }

/* Blur overlay */
#sigHistorySection { position: relative; }
.sig-blur-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to top, var(--bg) 40%, transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    z-index: 5;
}
.sig-blur-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.sig-blur-msg span { font-size: 1.8rem; }
.sig-blur-msg strong { font-size: 0.9rem; color: var(--text); }
.sig-blur-msg button {
    padding: 9px 22px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(212,175,55,.25);
}
.sig-blur-msg button:hover { transform: translateY(-1px); }

/* Access gate */
.sig-access-gate {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.sig-gate-card {
    max-width: 480px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-gold);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
}
.sig-gate-icon { font-size: 2.5rem; margin-bottom: 12px; display: block; }
.sig-gate-card h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.sig-gate-card p  { font-size: 0.84rem; color: var(--text2); margin-bottom: 20px; line-height: 1.6; }
.sig-gate-preview { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; text-align: left; }
.sig-gate-feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.83rem; color: var(--text2);
    padding: 8px 12px;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.sig-gate-feat span { color: var(--green); font-weight: 800; }
.sig-gate-actions { display: flex; flex-direction: column; gap: 8px; }
.sig-gate-btn-primary {
    padding: 13px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font); font-size: 0.92rem; font-weight: 800;
    cursor: pointer; transition: all .22s;
    box-shadow: 0 4px 18px rgba(212,175,55,.25);
}
.sig-gate-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(212,175,55,.35); }
.sig-gate-btn-secondary {
    padding: 10px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text2); border-radius: 10px;
    font-family: var(--font); font-size: 0.83rem; font-weight: 600;
    cursor: pointer; transition: all .18s;
}
.sig-gate-btn-secondary:hover { border-color: var(--border2); color: var(--text); }

/* Signal modals */
.sig-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75); backdrop-filter: blur(12px);
    z-index: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity .3s;
}
.sig-modal-overlay.active { opacity: 1; }
.sig-modal {
    width: 100%; max-width: 440px;
    background: #0d1018;
    border: 1px solid var(--border-gold);
    border-radius: 20px;
    padding: 28px 26px;
    text-align: center;
    position: relative;
    transform: translateY(20px) scale(.97);
    transition: transform .3s cubic-bezier(.34,1.2,.64,1);
    max-height: 90vh; overflow-y: auto;
}
.sig-modal-overlay.active .sig-modal { transform: translateY(0) scale(1); }
.sig-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.07); border: none; color: var(--text2);
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s;
}
.sig-modal-close:hover { background: rgba(255,255,255,.13); color: var(--text); }
.sig-modal-icon { font-size: 2.4rem; margin-bottom: 10px; display: block; }
.sig-modal h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.sig-modal-sub { font-size: 0.82rem; color: var(--text2); margin-bottom: 20px; line-height: 1.5; }
.sig-modal-hint { font-size: 0.72rem; color: var(--text3); margin-top: 10px; line-height: 1.5; }

/* Donate options */
.sig-donate-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.sig-donate-opt {
    background: rgba(0,0,0,.3);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    text-align: center;
}
.sig-donate-opt:hover { border-color: var(--border2); }
.sig-donate-opt.selected { border-color: var(--gold); background: var(--gold-dim); box-shadow: 0 0 0 1px rgba(212,175,55,.2); }
.sig-donate-tag {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    font-size: 0.52rem; font-weight: 800;
    background: var(--gold); color: #060810;
    padding: 2px 7px; border-radius: 10px;
    white-space: nowrap; letter-spacing: .3px;
}
.sig-donate-emoji { font-size: 1.3rem; margin-bottom: 6px; display: block; }
.sig-donate-label { font-size: 0.72rem; font-weight: 700; color: var(--text2); margin-bottom: 3px; }
.sig-donate-price { font-size: 0.88rem; font-weight: 900; color: var(--text); font-family: var(--font-mono); margin-bottom: 3px; }
.sig-donate-desc  { font-size: 0.62rem; color: var(--text3); }

/* Donate confirm button */
.sig-donate-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #060810;
    font-family: var(--font); font-size: 0.9rem; font-weight: 800;
    cursor: pointer; transition: all .22s;
    box-shadow: 0 4px 18px rgba(212,175,55,.22);
}
.sig-donate-btn:hover  { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(212,175,55,.35); }
.sig-donate-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Code input */
.sig-code-input {
    width: 100%;
    background: rgba(0,0,0,.4);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 13px;
    letter-spacing: 2px;
    text-align: center;
    transition: border-color .2s;
}
.sig-code-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.sig-code-err { font-size: 0.78rem; color: var(--red); margin-top: 8px; }

/* ── RR PRESET BUTTONS ── */
.rr-preset {
    padding: 5px 10px;
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(255,255,255,.04);
    color: var(--text2);
    cursor: pointer;
    transition: all .15s;
    letter-spacing: .3px;
}
.rr-preset:hover {
    border-color: var(--green);
    color: var(--green);
    background: rgba(14,203,129,.08);
}
.rr-preset.active {
    border-color: var(--green);
    color: var(--green);
    background: rgba(14,203,129,.15);
    box-shadow: 0 0 0 1px rgba(14,203,129,.25);
}