[data-theme="dark"]{--bg:#07070f;--bg2:#0d0d1a;--bg3:#131320;--bg4:#191928;--border:#1c1c32;--border2:#252540;--text:#eeeeff;--text2:#aaaacc;--text3:#7878a0;--shadow:rgba(0,0,0,0.6);--inp-bg:#0f0f1e;}
[data-theme="light"]{--bg:#f2f2f8;--bg2:#ffffff;--bg3:#ebebf5;--bg4:#e2e2ef;--border:#d8d8ea;--border2:#c0c0d8;--text:#10101e;--text2:#404068;--text3:#888898;--shadow:rgba(0,0,0,0.1);--inp-bg:#f8f8ff;}
:root{--green:#00e5a0;--green2:rgba(0,229,160,0.12);--green3:rgba(0,229,160,0.05);--red:#ff3d6e;--red2:rgba(255,61,110,0.12);--red3:rgba(255,61,110,0.05);--yellow:#ffcc00;--yellow2:rgba(255,204,0,0.12);--blue:#4d9fff;--blue2:rgba(77,159,255,0.1);--purple:#9d6fff;--purple2:rgba(157,111,255,0.12);--orange:#ff8c42;--orange2:rgba(255,140,66,0.12);--teal:#00cce5;--teal2:rgba(0,204,229,0.1);--r:12px;--r2:8px;--mono:'JetBrains Mono',monospace;--sans:'Syne',sans-serif;}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;-webkit-tap-highlight-color:transparent;}
.app{display:flex;min-height:100vh;}

/* SIDEBAR */
.sidebar{min-height:100vh;background:var(--bg2);border-right:1px solid var(--border);padding:25px 0;position:fixed;top:0;left:0;display:flex;flex-direction:column;z-index:100;overflow-y:auto;overflow-x:hidden;width:275px;}
[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#0d0d1c 0%,#0a0a16 100%);border-right-color:rgba(255,255,255,.04);}
.logo{padding:0 18px 16px;border-bottom:1px solid var(--border);margin-bottom:10px;}
.logo-mark-wrap{display:flex;align-items:center;gap:9px;}
.logo-mark-sq{width:26px;height:26px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,var(--green),var(--purple));box-shadow:0 0 20px rgba(0,229,160,.55),0 0 40px rgba(0,229,160,.15);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#000;font-family:var(--sans);transition:box-shadow .3s;}
.logo-mark-sq:hover{box-shadow:0 0 28px rgba(0,229,160,.7),0 0 50px rgba(0,229,160,.2);}
.logo-brand{font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:-0.5px;color:var(--text);}
.logo-pro{color:var(--green);}
.logo-title{font-size:19px;font-weight:800;letter-spacing:-0.5px;line-height:1.1;}
.logo-sub{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:0.15em;text-transform:uppercase;margin-top:2px;}
.theme-btn{margin-top:8px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-family:var(--mono);font-size:9px;color:var(--text2);cursor:pointer;transition:all .15s;}
.theme-btn:hover{border-color:var(--green);color:var(--green);}
.nav-s{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text3);letter-spacing:0.12em;text-transform:uppercase;padding:12px 18px 4px;}
.nav-i{display:flex;align-items:center;gap:11px;padding:12px 22px;font-size:15px;font-weight:500;color:var(--text3);cursor:pointer;transition:all .15s;border-left:2px solid transparent;white-space:nowrap;overflow:hidden;}
.nav-i:hover{color:var(--text2);background:var(--bg3);}
.nav-i.active{color:var(--text);background:var(--bg3);border-left-color:var(--green);box-shadow:inset 3px 0 14px rgba(0,229,160,.07);}
.nav-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.sb-bottom{margin-top:auto;padding:14px 18px;border-top:1px solid var(--border);}
.clock{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--green);text-shadow:0 0 14px rgba(0,229,160,.35);}
.date-s{font-size:10px;color:var(--text3);margin-top:2px;}

/* MAIN */
.main{flex:1;padding:35px 40px;margin-left:275px;}
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;}
.pt{font-size:27px;font-weight:800;letter-spacing:-0.8px;}
.ps{font-family:var(--mono);font-size:14px;color:var(--text3);margin-top:5px;}
.panel{display:none;}.panel.active{display:block;animation:panelEnter .22s ease;}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:15px;transition:background .3s,border-color .3s,box-shadow .2s,transform .2s;box-shadow:0 2px 8px var(--shadow);}
.card:hover{border-color:var(--border2);box-shadow:0 8px 28px var(--shadow);}
[data-theme="dark"] .card{background:linear-gradient(145deg,var(--bg2) 0%,#0a0a18 100%);}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ct{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;}
/* STAT CARDS */
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:0 2px 12px var(--shadow);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--purple));opacity:.5;transition:opacity .2s;}
.sc:hover{transform:translateY(-3px);box-shadow:0 10px 30px var(--shadow);border-color:var(--border2);}
.sc:hover::before{opacity:1;}
[data-theme="dark"] .sc{background:linear-gradient(160deg,var(--bg2) 0%,#09091a 100%);}
.sl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.sv{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1.2;padding-bottom:2px;}
.sv.green{color:var(--profit);text-shadow:0 0 22px rgba(0,229,160,.35);}.sv.red{color:var(--loss);text-shadow:0 0 22px rgba(255,61,110,.35);}.sv.yellow{color:var(--yellow);}.sv.blue{color:var(--blue);}.sv.purple{color:var(--purple);}
.ss{font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:5px;}

/* GOAL */
.goal-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:25px;margin-bottom:15px;box-shadow:0 4px 24px var(--shadow);}
[data-theme="dark"] .goal-card{background:linear-gradient(135deg,#0e0e1f,#09091c);border-color:rgba(0,229,160,.12);}
.goal-pnl{font-family:var(--mono);font-size:48px;font-weight:700;line-height:1.15;padding-bottom:2px;letter-spacing:-.02em;}
.goal-pnl.pos{color:var(--profit);text-shadow:0 0 50px rgba(0,229,160,.3);}
.goal-pnl.neg{color:var(--loss);text-shadow:0 0 40px rgba(255,61,110,.25);}
.goal-pnl.zero{color:var(--text2);}
.bar-track{height:6px;background:var(--border2);border-radius:3px;overflow:hidden;margin:12px 0 8px;}
.bar-fill{height:100%;border-radius:3px;background:var(--profit);transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(0,229,160,.45);}
.bar-fill.over{background:var(--yellow);box-shadow:0 0 12px rgba(255,204,0,.4);}.bar-fill.neg{background:var(--loss);width:0!important;}

/* ALERTS (small inline) */
.alert{padding:12px 16px;border-radius:var(--r2);font-family:var(--mono);font-size:13px;margin-bottom:12px;display:none;align-items:center;gap:10px;border-left:3px solid transparent;}
.alert.show{display:flex;}
.alert.ok{background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);border-left-color:var(--profit);color:var(--profit);}
.alert.warn{background:rgba(255,204,0,.08);border:1px solid rgba(255,204,0,.2);border-left-color:var(--yellow);color:var(--yellow);}
.alert.err{background:rgba(255,61,110,.08);border:1px solid rgba(255,61,110,.2);border-left-color:var(--loss);color:var(--loss);}
.alert.info{background:rgba(77,159,255,.08);border:1px solid rgba(77,159,255,.2);border-left-color:var(--blue);color:var(--blue);}

/* ── GOAL ALERT BANNER (prominent, animated) ────────────────── */
.goal-alert{display:none;border-radius:14px;padding:18px 20px;margin-bottom:16px;position:relative;overflow:hidden;animation:goalAlertIn .4s cubic-bezier(.2,1.4,.4,1);}
.goal-alert.show{display:flex;align-items:center;gap:16px;}
@keyframes goalAlertIn{from{transform:translateY(-12px) scale(.96);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
/* diagonal stripe overlay */
.goal-alert::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 0,transparent 8px);pointer-events:none;}
/* shimmer sweep on entrance */
.goal-alert::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:goalAlertShimmer .8s ease .1s forwards;pointer-events:none;}
@keyframes goalAlertShimmer{to{left:160%;}}
.goal-alert-icon{font-size:32px;flex-shrink:0;line-height:1;filter:drop-shadow(0 0 12px currentColor);}
.goal-alert-body{flex:1;min-width:0;}
.goal-alert-title{font-family:var(--mono);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:-.01em;}
.goal-alert-sub{font-family:var(--mono);font-size:11px;margin-top:4px;opacity:.8;line-height:1.5;}
/* ok – goal reached */
.goal-alert.ok{background:linear-gradient(135deg,rgba(0,229,160,.16),rgba(0,229,160,.06));border:1px solid rgba(0,229,160,.4);box-shadow:0 4px 24px rgba(0,229,160,.12),inset 0 1px 0 rgba(255,255,255,.05);}
.goal-alert.ok .goal-alert-title{color:#fff;}
.goal-alert.ok .goal-alert-sub{color:var(--profit);}
.goal-alert.ok .goal-alert-icon{color:var(--profit);}
/* warn – rule break */
.goal-alert.warn{background:linear-gradient(135deg,rgba(255,140,66,.16),rgba(255,140,66,.06));border:1px solid rgba(255,140,66,.4);box-shadow:0 4px 24px rgba(255,140,66,.12),inset 0 1px 0 rgba(255,255,255,.05);}
.goal-alert.warn .goal-alert-title{color:#fff;}
.goal-alert.warn .goal-alert-sub{color:var(--orange);}
.goal-alert.warn .goal-alert-icon{color:var(--orange);}
/* caution – goal reached but user still on trade form */
.goal-alert.caution{background:linear-gradient(135deg,rgba(255,204,0,.14),rgba(255,204,0,.05));border:1px solid rgba(255,204,0,.4);box-shadow:0 4px 24px rgba(255,204,0,.1),inset 0 1px 0 rgba(255,255,255,.05);}
.goal-alert.caution .goal-alert-title{color:#fff;}
.goal-alert.caution .goal-alert-sub{color:var(--yellow);}
.goal-alert.caution .goal-alert-icon{color:var(--yellow);}

/* RULES */
.rl{display:flex;flex-direction:column;gap:7px;}
.rr{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:all .2s;user-select:none;border-left:3px solid transparent;}
.rr:hover{border-color:var(--border2);background:var(--bg2);border-left-color:var(--green);transform:translateX(2px);}
.rr.kept{background:rgba(0,229,160,.07);border-color:rgba(0,229,160,.25);border-left-color:var(--profit);box-shadow:0 2px 12px rgba(0,229,160,.06);}
.rr.broken{background:rgba(255,61,110,.07);border-color:rgba(255,61,110,.25);border-left-color:var(--loss);box-shadow:0 2px 12px rgba(255,61,110,.06);}
.rc{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;font-family:var(--mono);transition:all .2s;}
.rr.kept .rc{background:var(--profit);border-color:var(--profit);color:#000;font-weight:700;box-shadow:0 0 10px rgba(0,229,160,.4);}
.rr.broken .rc{background:var(--loss);border-color:var(--loss);color:#fff;box-shadow:0 0 10px rgba(255,61,110,.4);}
.rt{font-size:14px;color:var(--text2);flex:1;transition:color .2s;}
.rr.kept .rt{color:var(--text);font-weight:500;}.rr.broken .rt{color:var(--loss);text-decoration:line-through;opacity:.8;}

/* TRADES */
.tl{display:flex;flex-direction:column;gap:7px;}
.tr-row{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);border-left:3px solid transparent;transition:all .2s;position:relative;}
.tr-row:hover{background:var(--bg2);border-color:var(--border2);border-left-color:var(--green);transform:translateX(2px);}
.tr-emo{font-size:22px;flex-shrink:0;margin-top:0px;}
.tr-info{flex:1;min-width:0;}
.tr-sym{font-family:var(--mono);font-size:15px;font-weight:700;}
.tr-meta{font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:2px;}
.tr-note{font-size:13px;color:var(--text2);margin-top:3px;opacity:.85;}
.tr-brk{font-family:var(--mono);font-size:11px;color:var(--loss);margin-top:3px;font-weight:600;}
.tr-pnl{font-family:var(--mono);font-size:16px;font-weight:700;text-align:right;min-width:85px;letter-spacing:-.01em;}
.tr-pnl.pos{color:var(--profit);text-shadow:0 0 14px rgba(0,229,160,.25);}.tr-pnl.neg{color:var(--loss);text-shadow:0 0 14px rgba(255,61,110,.2);}
.tr-r{font-family:var(--mono);font-size:11px;color:var(--text3);text-align:right;margin-top:2px;}
.del-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:10px;min-width:36px;min-height:36px;transition:all .15s;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r2);}
.del-btn:hover{color:var(--red);background:rgba(255,61,110,0.1);}
@media(hover:none){.del-btn{min-width:44px;min-height:44px;}} /* Touch-Geräte: WCAG 44px */

/* FORM */
.fg{margin-bottom:11px;width:100%;max-width:100%;overflow:hidden;}
.fl{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;display:block;}
.fi{width:100%;max-width:100%;box-sizing:border-box;background:var(--inp-bg);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;font-family:var(--mono);font-size:15px;color:var(--text);outline:none;transition:border-color .15s,background .3s;}
input[type="date"].fi,input[type="date"]{-webkit-appearance:none;appearance:none;width:100%;max-width:100%;box-sizing:border-box;}
.fi:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(157,111,255,.18);}
.fi:focus-visible{outline:2px solid var(--purple);outline-offset:1px;}
.fi::placeholder{color:var(--text3);}
select.fi option{background:var(--bg2);color:var(--text);}
textarea.fi{resize:vertical;min-height:70px;font-size:14px;line-height:1.5;}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.fr4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;}
/* Lot type toggle */
.lot-row{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:10px;}
.lot-group{display:flex;gap:6px;align-items:flex-end;}
.lot-group .fi{flex:1;min-width:0;}
.lot-type-toggle{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:3px;gap:3px;flex-shrink:0;height:46px;align-items:center;}
.lot-type-btn{flex:1;padding:5px 10px;border:none;border-radius:calc(var(--r2) - 2px);font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;background:transparent;color:var(--text3);white-space:nowrap;height:100%;}
.lot-type-btn.active{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(157,111,255,.35);}
.lot-type-btn:not(.active):hover{color:var(--text);background:rgba(255,255,255,.05);}
.mood-s{width:100%;-webkit-appearance:none;height:5px;border-radius:3px;background:var(--border2);outline:none;margin-bottom:6px;cursor:pointer;}
.mood-s::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--purple);cursor:pointer;box-shadow:0 0 10px rgba(157,111,255,.5);border:2px solid rgba(255,255,255,.1);}
.mood-s:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(157,111,255,.25);}
.mood-s::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--purple);cursor:pointer;border:none;box-shadow:0 0 10px rgba(157,111,255,.5);}

/* BUTTONS */
.btn{padding:12px 20px;border-radius:var(--r2);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:0.04em;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:8px;}
.btn-p{background:var(--green);color:#000;box-shadow:0 0 0 0 rgba(0,229,160,.4);}
.btn-p:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,229,160,.35);}
.btn-s{background:var(--bg3);color:var(--text2);border:1px solid var(--border);}
.btn-s:hover{border-color:var(--border2);color:var(--text);}
.btn-d{background:var(--red2);color:var(--red);border:1px solid rgba(255,61,110,0.25);}
.btn-d:hover{background:var(--red);color:#fff;}
.btn-pu{background:var(--purple2);color:var(--purple);border:1px solid rgba(157,111,255,0.3);}
.btn-pu:hover{background:var(--purple);color:#fff;}
.btn-b{background:var(--blue2);color:var(--blue);border:1px solid rgba(77,159,255,0.25);}
.btn-full{width:100%;justify-content:center;}
.btn-sm{padding:7px 13px;font-size:13px;}

/* TAGS */
.tag{display:inline-block;padding:3px 8px;border-radius:4px;font-family:var(--mono);font-size:12px;font-weight:600;}
.tg{background:var(--green2);color:var(--green);}
.tr2{background:var(--red2);color:var(--red);}
.ty{background:var(--yellow2);color:var(--yellow);}
.tb{background:var(--blue2);color:var(--blue);}
.tp{background:var(--purple2);color:var(--purple);}
.to{background:var(--orange2);color:var(--orange);}
.tt2{background:var(--teal2);color:var(--teal);}

/* EMOTION PICKER */
.emo-grid{display:flex;gap:6px;}
.emo-btn{flex:1;padding:12px 4px 9px;background:var(--inp-bg);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;text-align:center;transition:all .2s;min-height:58px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.emo-btn:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow);}
.emo-btn.sel{border-color:var(--purple);background:var(--purple2);box-shadow:0 0 18px rgba(157,111,255,.2);transform:translateY(-2px);}
.emo-btn .ei{font-size:24px;display:block;transition:transform .2s;}
.emo-btn:hover .ei{transform:scale(1.15);}
.emo-btn.sel .ei{transform:scale(1.1);}
.emo-btn .el{font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:4px;}
.emo-btn.sel .el{color:var(--purple);font-weight:600;}

/* CALENDAR */
.cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:6px;}
.cal-nav{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:6px 11px;font-family:var(--mono);font-size:13px;color:var(--text2);cursor:pointer;}
.cal-sel{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:6px 11px;font-family:var(--mono);font-size:13px;color:var(--text);cursor:pointer;outline:none;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cdn{font-family:var(--mono);font-size:11px;color:var(--text3);text-align:center;padding:4px 0;font-weight:600;letter-spacing:.06em;}
.cd{border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);position:relative;border:1px solid transparent;min-height:56px;max-height:72px;height:calc((100vw - 340px) / 7 * 0.55);padding:4px 2px;gap:1px;}
.cd.empty,.cd.future{opacity:.2;}
.cd.no-t{background:var(--bg3);border-color:var(--border);}
.cd.win{background:var(--profit2);border-color:rgba(0,229,160,0.22);}
.cd.loss{background:var(--loss2);border-color:rgba(255,61,110,0.18);}
.cd.today{border-color:var(--purple)!important;box-shadow:0 0 0 1px var(--purple) inset;}
.cal-clickable:hover{opacity:.82;transform:scale(1.06);transition:all .15s;z-index:1;position:relative;}
.cd-n{font-size:12px;color:var(--text3);}
.cd.win .cd-n{color:var(--profit);}.cd.loss .cd-n{color:var(--loss);}
.cd-p{font-size:13px;font-weight:700;line-height:1.2;}
.cd.win .cd-p{color:var(--profit);}.cd.loss .cd-p{color:var(--loss);}
.cd-dot{display:none;}
.cd-brk{position:absolute;top:3px;right:3px;font-size:8px;}

/* BARS */
.bc{display:flex;flex-direction:column;gap:8px;}
.br{display:flex;align-items:center;gap:9px;}
.bcl{font-family:var(--mono);font-size:12px;color:var(--text2);min-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bt{flex:1;height:7px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.bf{height:100%;border-radius:4px;background:var(--profit);transition:width .5s cubic-bezier(.4,0,.2,1);}
.bf.red{background:var(--loss);}.bf.yellow{background:var(--yellow);}
.bv{font-family:var(--mono);font-size:12px;color:var(--text3);min-width:62px;text-align:right;font-weight:600;}

/* INSIGHTS */
.ic{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--purple);border-radius:var(--r2);padding:14px 16px;margin-bottom:8px;display:flex;gap:13px;align-items:flex-start;transition:all .18s;}
.ic:hover{border-color:var(--border2);border-left-color:var(--purple);background:var(--bg2);transform:translateX(2px);}
.ic-icon{font-size:20px;flex-shrink:0;margin-top:0;line-height:1.4;min-width:26px;text-align:center;}
.ic-text{font-size:13px;color:var(--text2);line-height:1.65;flex:1;}
.ic-text strong{color:var(--text);font-weight:700;}
.tip-c{background:linear-gradient(135deg,rgba(0,229,160,.07),rgba(0,229,160,.02));border:1px solid rgba(0,229,160,.2);border-left:3px solid var(--profit);border-radius:var(--r2);padding:16px 18px;margin-bottom:10px;}
.tip-t{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--profit);}
.tip-s{margin-top:6px;padding-left:18px;}
.tip-s li{font-size:13px;color:var(--text2);line-height:1.85;margin-bottom:2px;}

/* ── PSYCHOLOGIE PROFIL CARDS ───────────────────────────── */
.psych-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px;}
.psych-pc{display:flex;flex-direction:column;gap:12px;border-radius:14px;padding:18px 16px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.psych-pc::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;background:rgba(255,255,255,.03);}
.psych-pc:hover{transform:translateY(-2px);}
.psych-pc:hover::before{opacity:1;}
.psych-pc-header{display:flex;align-items:center;gap:10px;}
.psych-pc-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.psych-pc-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.psych-pc-val{font-size:14px;line-height:1.55;font-weight:500;color:var(--text2);}
/* color variants */
.psych-pc--red{background:linear-gradient(135deg,rgba(255,61,110,.1),rgba(255,61,110,.04));border:1px solid rgba(255,61,110,.25);box-shadow:0 4px 20px rgba(255,61,110,.08);}
.psych-pc--red .psych-pc-icon{background:rgba(255,61,110,.15);box-shadow:0 0 16px rgba(255,61,110,.2);}
.psych-pc--red .psych-pc-tag{color:var(--red);}
.psych-pc--red:hover{box-shadow:0 8px 28px rgba(255,61,110,.16);}
.psych-pc--orange{background:linear-gradient(135deg,rgba(255,140,66,.1),rgba(255,140,66,.04));border:1px solid rgba(255,140,66,.25);box-shadow:0 4px 20px rgba(255,140,66,.08);}
.psych-pc--orange .psych-pc-icon{background:rgba(255,140,66,.15);box-shadow:0 0 16px rgba(255,140,66,.2);}
.psych-pc--orange .psych-pc-tag{color:var(--orange);}
.psych-pc--orange:hover{box-shadow:0 8px 28px rgba(255,140,66,.16);}
.psych-pc--green{background:linear-gradient(135deg,rgba(0,229,160,.1),rgba(0,229,160,.04));border:1px solid rgba(0,229,160,.25);box-shadow:0 4px 20px rgba(0,229,160,.08);}
.psych-pc--green .psych-pc-icon{background:rgba(0,229,160,.15);box-shadow:0 0 16px rgba(0,229,160,.2);}
.psych-pc--green .psych-pc-tag{color:var(--profit);}
.psych-pc--green:hover{box-shadow:0 8px 28px rgba(0,229,160,.16);}
.psych-pc--blue{background:linear-gradient(135deg,rgba(77,159,255,.1),rgba(77,159,255,.04));border:1px solid rgba(77,159,255,.25);box-shadow:0 4px 20px rgba(77,159,255,.08);}
.psych-pc--blue .psych-pc-icon{background:rgba(77,159,255,.15);box-shadow:0 0 16px rgba(77,159,255,.2);}
.psych-pc--blue .psych-pc-tag{color:#4d9fff;}
.psych-pc--blue:hover{box-shadow:0 8px 28px rgba(77,159,255,.16);}
@media(max-width:600px){.psych-grid{grid-template-columns:1fr;}}

/* QUOTE */
.qc{background:linear-gradient(135deg,rgba(255,204,0,.07),rgba(255,204,0,.02));border:1px solid rgba(255,204,0,.2);border-left:3px solid var(--yellow);border-radius:var(--r2);padding:16px 18px;margin-bottom:15px;}
.qt{font-size:15px;color:var(--text);line-height:1.75;font-style:italic;}
.qa{font-family:var(--mono);font-size:11px;color:var(--yellow);margin-top:8px;font-weight:600;letter-spacing:.05em;}

/* GATE */
.gate{background:var(--bg2);border:1px solid rgba(255,61,110,0.2);border-radius:var(--r);padding:28px;text-align:center;margin-bottom:12px;}
.gate-icon{font-size:40px;margin-bottom:12px;}

/* FILTERS */
.fbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);border-top:2px solid var(--border2);}
.fs{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:8px 12px;font-family:var(--mono);font-size:13px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;}
.fs:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(157,111,255,.12);}

/* TILTMETER */
.tilt-wrap{position:relative;width:100%;height:150px;margin:10px 0;}
.tilt-track{width:100%;height:26px;background:linear-gradient(90deg,#00e5a0,#ffcc00,#ff3d6e);border-radius:13px;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);}
.tilt-needle{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--bg);box-shadow:0 2px 12px rgba(0,0,0,.5);transition:left .8s cubic-bezier(.4,0,.2,1);}
.tilt-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:6px;letter-spacing:.04em;}
.tilt-score-big{font-family:var(--mono);font-size:56px;font-weight:800;text-align:center;margin:10px 0;letter-spacing:-.02em;}
.tilt-desc{font-family:var(--mono);font-size:13px;text-align:center;color:var(--text2);letter-spacing:.04em;}

/* EQUITY CURVE */
.equity-wrap{position:relative;width:100%;height:120px;}
.equity-wrap canvas{width:100%;height:100%;}

/* DIARY */
.diary-entry{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--purple);border-radius:var(--r2);padding:16px 18px;margin-bottom:10px;transition:all .2s;}
.diary-entry:hover{border-color:var(--border2);border-left-color:var(--purple);background:var(--bg2);}
.diary-date{font-family:var(--mono);font-size:11px;color:var(--text3);margin-bottom:6px;letter-spacing:.05em;font-weight:600;}
.diary-mood{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.diary-text{font-size:14px;color:var(--text2);line-height:1.75;white-space:pre-wrap;}

/* NO-TRADE LOG */
.nt-item{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--r2);margin-bottom:8px;transition:all .2s;}
.nt-item:hover{border-color:var(--border2);background:var(--bg2);transform:translateX(2px);}
.nt-icon{font-size:24px;flex-shrink:0;}
.nt-info{flex:1;}
.nt-date{font-family:var(--mono);font-size:11px;color:var(--text3);font-weight:600;margin-bottom:2px;}
.nt-reason{font-size:13px;color:var(--text2);}

/* DEVELOPMENT */
.dev-milestone{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border);transition:all .2s;}
.dev-milestone:hover .dev-content{transform:translateX(2px);}
.dev-dot{width:14px;height:14px;border-radius:50%;background:var(--profit);flex-shrink:0;margin-top:4px;box-shadow:0 0 10px rgba(0,229,160,.35);transition:box-shadow .2s;}
.dev-dot.warn{background:var(--yellow);box-shadow:0 0 10px rgba(255,204,0,.35);}
.dev-dot.bad{background:var(--loss);box-shadow:0 0 10px rgba(255,61,110,.35);}
.dev-content{flex:1;transition:transform .2s;}
.dev-date{font-family:var(--mono);font-size:11px;color:var(--text3);font-weight:600;letter-spacing:.04em;}
.dev-text{font-size:14px;color:var(--text2);margin-top:3px;line-height:1.6;}

/* ── TOOLTIP SYSTEM ─────────────────────────────────────── */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%) scale(.95);
  background:rgba(10,10,26,.97);
  color:var(--text2);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  padding:7px 11px;
  border-radius:8px;
  border:1px solid var(--border2);
  white-space:pre-line;
  max-width:210px;
  text-align:center;
  z-index:9200;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.55);
  letter-spacing:.01em;
}
[data-tooltip]::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top:5px solid var(--border2);
  z-index:9201;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translateX(-50%) scale(1);}
[data-tooltip]:hover::before,[data-tooltip]:focus-visible::before{opacity:1;}
/* Tooltip below (for elements near top of viewport) */
[data-tooltip][data-tip-pos="bottom"]::after{bottom:auto;top:calc(100% + 9px);transform:translateX(-50%) scale(.95);}
[data-tooltip][data-tip-pos="bottom"]:hover::after{transform:translateX(-50%) scale(1);}
[data-tooltip][data-tip-pos="bottom"]::before{bottom:auto;top:calc(100% + 3px);border-top:none;border-bottom:5px solid var(--border2);}
/* Tooltip right-aligned (for right-edge elements) */
[data-tooltip][data-tip-pos="left"]::after{left:auto;right:0;transform:translateX(0) scale(.95);}
[data-tooltip][data-tip-pos="left"]:hover::after{transform:translateX(0) scale(1);}
[data-tooltip][data-tip-pos="left"]::before{left:auto;right:12px;transform:none;}

/* SCREENSHOT */
.img-preview{width:100%;max-height:180px;object-fit:contain;border-radius:var(--r2);border:1px solid var(--border);margin-top:6px;}
.img-placeholder{border:2px dashed var(--border2);border-radius:var(--r2);padding:20px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--text3);cursor:pointer;transition:border-color .15s;}
.img-placeholder:hover{border-color:var(--purple);}

/* GAME – Pokerkarte Design */
.card-deck-wrapper{perspective:900px;width:188px;margin:0 auto 20px;position:relative;overflow:visible;}
.card-deck{
  position:relative;width:188px;height:265px;
  cursor:pointer;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,0,.2,1);
  animation:cardIdle 5s ease-in-out infinite;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.55));
}
.card-deck.flipped{transform:rotateY(180deg);}
.card-deck:hover:not(.flipped){
  animation:none;
  transform:translateY(-10px) rotateY(10deg) rotateX(-3deg);
  filter:drop-shadow(0 18px 40px rgba(157,111,255,.5));
}
.card-deck.picking-up{
  animation:none!important;
  transform:translateY(-14px) scale(1.05)!important;
  transition:transform .14s ease!important;
  filter:drop-shadow(0 22px 44px rgba(157,111,255,.55));
}
@keyframes cardIdle{
  0%,100%{transform:translateY(0) rotateZ(0deg) rotateY(0);}
  25%  {transform:translateY(-7px) rotateZ(.8deg) rotateY(-2deg);}
  75%  {transform:translateY(-5px) rotateZ(-.5deg) rotateY(1.5deg);}
}
.gcard{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:hidden;}

/* Kartenrückseite – echte Pokerkarte */
.gcard-back{
  z-index:2;
  background:
    linear-gradient(45deg,rgba(157,111,255,.1) 25%,transparent 25%,transparent 75%,rgba(157,111,255,.1) 75%) 0 0 / 18px 18px,
    linear-gradient(45deg,rgba(157,111,255,.1) 25%,transparent 25%,transparent 75%,rgba(157,111,255,.1) 75%) 9px 9px / 18px 18px,
    linear-gradient(158deg,#1e0e42 0%,#0b0b1e 45%,#160c32 100%);
  box-shadow:
    inset 0 0 0 3px rgba(157,111,255,.6),
    inset 0 0 0 5px #09091a,
    inset 0 0 0 7px rgba(157,111,255,.2),
    inset 0 0 40px rgba(157,111,255,.07);
}
.gcard-back::before{
  content:'';position:absolute;inset:13px;
  border:1.5px solid rgba(157,111,255,.3);border-radius:8px;
  background:
    linear-gradient(45deg,rgba(0,229,160,.045) 25%,transparent 25%,transparent 75%,rgba(0,229,160,.045) 75%) 0 0 / 13px 13px,
    linear-gradient(45deg,rgba(0,229,160,.045) 25%,transparent 25%,transparent 75%,rgba(0,229,160,.045) 75%) 6.5px 6.5px / 13px 13px;
  pointer-events:none;
}
/* Suit-Symbole in den Ecken */
.card-suit{
  position:absolute;font-size:15px;font-weight:900;line-height:1;opacity:.55;
}
.card-suit-tl{top:13px;left:15px;color:var(--purple);}
.card-suit-tr{top:13px;right:15px;color:#e05070;transform:scaleX(-1);}
.card-suit-bl{bottom:13px;left:15px;color:var(--blue);transform:scaleY(-1);}
.card-suit-br{bottom:13px;right:15px;color:#e05070;transform:scale(-1);}
/* Zentrales Ornament */
.card-back-center{
  font-size:54px;color:rgba(157,111,255,.25);
  text-shadow:0 0 24px rgba(157,111,255,.2);
  user-select:none;pointer-events:none;
  animation:cardCenterPulse 3.5s ease-in-out infinite;
}
@keyframes cardCenterPulse{
  0%,100%{text-shadow:0 0 24px rgba(157,111,255,.2);color:rgba(157,111,255,.25);opacity:1;}
  50%   {text-shadow:0 0 44px rgba(157,111,255,.45);color:rgba(157,111,255,.42);opacity:.9;}
}

/* Kartenvorderseite – Mystischer Sternenhimmel */
.gcard-front{
  z-index:1;
  background:
    radial-gradient(circle,rgba(255,255,255,.85) 1px,transparent 1px) 18px 22px / 58px 58px,
    radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 1px) 42px 48px / 47px 47px,
    radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1px) 8px 37px / 39px 39px,
    radial-gradient(circle,rgba(255,255,255,.4) 1px,transparent 1px) 30px 10px / 52px 52px,
    radial-gradient(ellipse at 25% 25%,rgba(0,229,160,.14) 0%,transparent 55%),
    radial-gradient(ellipse at 75% 75%,rgba(157,111,255,.13) 0%,transparent 55%),
    linear-gradient(160deg,#06041a 0%,#110934 55%,#07101f 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0,229,160,.55),
    inset 0 0 0 3px rgba(0,229,160,.07),
    inset 0 0 35px rgba(0,229,160,.04);
  transform:rotateY(180deg);-webkit-transform:rotateY(180deg);
  color:#eeeeff;
}
/* Shimmer beim Aufdecken */
.gcard-front::after{
  content:'';position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,transparent 30%,rgba(0,229,160,.12) 50%,transparent 70%);
  animation:cardRevealShimmer 1s ease .4s forwards;pointer-events:none;opacity:0;
}
@keyframes cardRevealShimmer{
  0%{opacity:0;background-position:-100% 0;}
  30%{opacity:1;}
  100%{opacity:0;background-position:200% 0;}
}

/* Eck-Ornamente */
.gc-corner{
  position:absolute;font-size:13px;
  color:rgba(0,229,160,.75);
  text-shadow:0 0 8px rgba(0,229,160,.7),0 0 16px rgba(0,229,160,.4);
  animation:cornerPulse 3s ease-in-out infinite;
}
.gc-tl{top:12px;left:14px;}
.gc-br{bottom:12px;right:14px;transform:rotate(180deg);}
@keyframes cornerPulse{
  0%,100%{opacity:.7;text-shadow:0 0 8px rgba(0,229,160,.6);}
  50%{opacity:1;text-shadow:0 0 14px rgba(0,229,160,1),0 0 24px rgba(0,229,160,.5);}
}

/* Icon ⚡ */
.gc-icon{
  font-size:30px;margin-bottom:12px;
  filter:drop-shadow(0 0 10px rgba(0,229,160,.9)) drop-shadow(0 0 4px rgba(255,255,255,.6));
  animation:iconPulse 2.2s ease-in-out infinite;
}
@keyframes iconPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(0,229,160,.7));transform:scale(1);}
  50%{filter:drop-shadow(0 0 18px rgba(0,229,160,1)) drop-shadow(0 0 6px rgba(255,255,255,.5));transform:scale(1.08);}
}

/* Regeltext-Box */
.gc-rule{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:13px 15px;
  font-family:var(--sans);font-size:14px;font-weight:700;
  line-height:1.7;text-align:center;
  color:#ffffff;
  text-shadow:0 1px 4px rgba(0,0,0,.8),0 0 16px rgba(0,229,160,.4);
  width:100%;
}

/* Deck-Glow beim Aufdecken */
.card-deck.flipped{
  animation:deckRevealGlow .9s ease forwards;
}
@keyframes deckRevealGlow{
  0%{filter:drop-shadow(0 14px 32px rgba(0,0,0,.55));}
  45%{filter:drop-shadow(0 0 28px rgba(0,229,160,.9)) drop-shadow(0 0 55px rgba(157,111,255,.5));}
  100%{filter:drop-shadow(0 12px 28px rgba(157,111,255,.4));}
}

/* Sparkle-Partikel */
@keyframes spk{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1;}
  35%{opacity:1;transform:translate(calc(-50% + var(--dx)*.4),calc(-50% + var(--dy)*.4)) scale(1.3);}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0;}
}
.streak-pips{display:flex;gap:4px;justify-content:center;margin:8px 0 14px;}
.sp{width:24px;height:5px;border-radius:3px;background:var(--border2);transition:background .3s;}
.sp.done{background:var(--green);}.sp.cur{background:var(--orange);}

/* SETTINGS */
.sst{font-size:17px;font-weight:700;margin-bottom:3px;}
/* Settings group separator */
.set-grp{display:flex;align-items:center;gap:12px;margin:30px 0 14px;padding:0 2px;}
.set-grp:first-child{margin-top:8px;}
.set-grp-lbl{font-family:var(--mono);font-size:10px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;}
.set-grp-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(157,111,255,.45),transparent);}
.sss{font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:15px;}
.tl2{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;}
.ti{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;font-family:var(--mono);font-size:12px;color:var(--text2);}
.tr2x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:10px;line-height:1.4;}
.tr2x:hover{color:var(--red);}
.add-row{display:flex;gap:7px;}
.rei{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);margin-bottom:6px;}
.rei-inp{flex:1;background:transparent;border:none;outline:none;font-family:var(--mono);font-size:14px;color:var(--text);}
.rei-inp::placeholder{color:var(--text3);}
.wb{font-family:var(--mono);font-size:9px;padding:2px 5px;background:var(--orange2);color:var(--orange);border-radius:3px;}
.wb input{width:28px;background:transparent;border:none;color:var(--orange);font-family:var(--mono);font-size:9px;outline:none;}

/* TOGGLE SWITCH */
.toggle-switch{display:inline-flex;align-items:center;cursor:pointer;user-select:none;gap:9px;}
.toggle-switch input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.toggle-track{width:40px;height:22px;background:var(--border2);border-radius:11px;position:relative;transition:background .2s;flex-shrink:0;}
.toggle-switch input:checked+.toggle-track{background:var(--green);}
.toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.toggle-switch input:checked+.toggle-track .toggle-thumb{left:21px;}
.toggle-label{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text2);}

/* POPUP */
.pop-ov{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.pop-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:28px;max-width:380px;width:90%;text-align:center;animation:popIn .3s ease;}
@keyframes popIn{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ── HINT POPUP (info cards per panel) ───────────────────── */
.hint-pop-ov{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);padding:16px;}
.hint-pop-box{background:var(--bg2);border:1px solid rgba(157,111,255,.22);border-radius:18px;width:100%;max-width:500px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;position:relative;animation:hintPopIn .3s cubic-bezier(.2,1.4,.4,1);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(157,111,255,.1);}
@keyframes hintPopIn{from{transform:scale(.88) translateY(20px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
/* top accent bar */
.hint-pop-bar{height:3px;background:linear-gradient(90deg,var(--purple),var(--blue),var(--purple));background-size:200%;animation:hintBarShimmer 3s linear infinite;flex-shrink:0;}
@keyframes hintBarShimmer{0%{background-position:0%;}100%{background-position:200%;}}
/* close button */
.hint-pop-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:50%;width:30px;height:30px;color:var(--text3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:2;line-height:1;}
.hint-pop-close:hover{background:rgba(255,61,110,.12);border-color:rgba(255,61,110,.4);color:var(--red);}
/* header: icon + title */
.hint-pop-header{padding:26px 24px 18px;text-align:center;flex-shrink:0;}
.hint-pop-icon-wrap{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,rgba(157,111,255,.18),rgba(77,159,255,.12));border:1px solid rgba(157,111,255,.28);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 0 28px rgba(157,111,255,.18),inset 0 1px 0 rgba(255,255,255,.06);}
.hint-pop-icon{font-size:32px;line-height:1;display:block;}
.hint-pop-title{font-size:17px;font-weight:800;color:var(--text);line-height:1.35;letter-spacing:-.015em;padding:0 32px;}
/* scrollable text body */
.hint-pop-body{padding:0 24px 6px;overflow-y:auto;flex:1;scrollbar-width:thin;}
.hint-pop-body .hp-line{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.hint-pop-body .hp-line:last-child{border-bottom:none;}
.hint-pop-body .hp-bullet{color:var(--purple);font-size:16px;line-height:1.6;flex-shrink:0;font-weight:700;}
.hint-pop-body .hp-txt{font-size:13px;color:var(--text2);line-height:1.7;flex:1;}
.hint-pop-body .hp-spacer{height:8px;}
.hint-pop-body .hp-section{display:flex;gap:10px;align-items:flex-start;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.hint-pop-body .hp-section:last-child{border-bottom:none;}
.hint-pop-body .hp-section-txt{font-size:13px;color:var(--text2);line-height:1.7;flex:1;font-weight:500;}
/* footer */
.hint-pop-footer{padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;background:rgba(0,0,0,.12);}
.hint-pop-dismiss{display:flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--text3);user-select:none;transition:color .15s;}
.hint-pop-dismiss input{accent-color:var(--purple);width:14px;height:14px;cursor:pointer;flex-shrink:0;}
.hint-pop-dismiss:hover{color:var(--text2);}
/* CTA button */
.hint-pop-btn{background:linear-gradient(135deg,#9d6fff,#4d9fff);color:#fff;border:none;border-radius:10px;padding:11px 24px;font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 4px 16px rgba(157,111,255,.35),inset 0 1px 0 rgba(255,255,255,.15);letter-spacing:.01em;white-space:nowrap;}
.hint-pop-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(157,111,255,.5),inset 0 1px 0 rgba(255,255,255,.2);}
.hint-pop-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(157,111,255,.3);}
.hint-pop-btn-check{font-size:15px;}
.pop-timer{font-family:var(--mono);font-size:12px;color:var(--text3);margin:10px 0;}
.pop-timer span{color:var(--yellow);font-size:18px;font-weight:700;}
.pop-btn{font-family:var(--mono);font-size:13px;padding:11px 26px;border-radius:var(--r2);border:1px solid var(--border);background:var(--bg3);color:var(--text3);cursor:not-allowed;opacity:.5;}
.pop-btn.ready{cursor:pointer;color:#000;background:var(--green);border:none;opacity:1;}

/* MODAL */
.mod-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8888;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
.mod-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:22px;max-width:340px;width:90%;animation:popIn .2s ease;}
.mod-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.mod-text{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:16px;white-space:pre-line;}
.mod-actions{display:flex;gap:7px;}

/* NO-TRADE SCORE */
.ntc-bar{height:8px;border-radius:4px;background:var(--border2);overflow:hidden;margin:6px 0;}
.ntc-fill{height:100%;border-radius:4px;transition:width .5s,background .3s;}

/* AI ANALYSIS */
.ai-out{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);padding:16px;font-size:14px;color:var(--text2);line-height:1.8;min-height:100px;white-space:pre-wrap;}

.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all .3s;}
.ob-dot.active{background:var(--green);width:24px;border-radius:4px;}
.ob-sym-btn{padding:9px 17px;border-radius:var(--r2);font-family:var(--mono);font-size:13px;font-weight:600;cursor:pointer;border:2px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s;}
.ob-sym-btn.active{border-color:var(--green);background:var(--green2);color:var(--green);}
.ob-lang-btn{width:100%;padding:16px 20px;border-radius:var(--r2);font-family:var(--mono);font-size:16px;font-weight:600;cursor:pointer;border:2px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s;text-align:left;}
.ob-lang-btn:hover{border-color:var(--border2);color:var(--text);}
.ob-lang-btn.active{border-color:var(--green);background:var(--green2);color:var(--green);}
/* ═══ TOAST NOTIFICATIONS ════════════════════════════════ */
#toastContainer{position:fixed;bottom:70px;right:16px;z-index:9500;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:320px;}
@media(min-width:768px){#toastContainer{bottom:24px;}}
/* ── Nav Customizer ─────────────────────────────────────── */
/* ── Economic Ticker ─────────────────────────────────── */
.econ-ticker{display:flex;align-items:center;height:28px;background:rgba(10,10,15,.98);border-bottom:1px solid var(--border);overflow:hidden;position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:500;}
.ticker-label{font-family:var(--mono);font-size:9px;font-weight:800;color:#000;background:var(--green);padding:0 10px;height:100%;display:flex;align-items:center;white-space:nowrap;flex-shrink:0;letter-spacing:.08em;gap:4px;}
.ticker-track{flex:1;overflow:hidden;height:100%;position:relative;}
.ticker-inner{display:inline-flex;align-items:center;height:100%;white-space:nowrap;will-change:transform;animation:tickerScroll 60s linear infinite;}
.ticker-inner:hover{animation-play-state:paused;}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;align-items:center;gap:6px;padding:0 20px;font-family:var(--mono);font-size:12px;color:var(--text2);border-right:1px solid rgba(255,255,255,.06);height:100%;cursor:default;}
.ticker-item .ti-name{color:var(--text);font-weight:600;font-size:12px;}
.ticker-item .ti-time{color:var(--text2);font-size:11px;}
.ticker-item .ti-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ticker-item.ti-today .ti-name{color:var(--green);}
.ticker-item.ti-today{background:rgba(0,230,118,.05);}
.ticker-sep{display:inline-flex;align-items:center;padding:0 8px;color:rgba(255,255,255,.2);font-size:14px;}
[data-theme="light"] .econ-ticker{background:var(--bg4);border-bottom-color:var(--border2);}
[data-theme="light"] .ticker-item{color:var(--text2);}
[data-theme="light"] .ticker-item .ti-name{color:var(--text);}
[data-theme="light"] .ticker-item .ti-time{color:var(--text3);}
[data-theme="light"] .ticker-sep{color:rgba(0,0,0,.15);}
/* has-ticker: push layout below the 28px fixed ticker bar + safe-area-inset-top for iOS notch */
body.has-ticker{padding-top:calc(28px + env(safe-area-inset-top,0px));}
body.has-ticker .sidebar{top:calc(28px + env(safe-area-inset-top,0px));}
body.has-ticker .mob-hdr{top:calc(28px + env(safe-area-inset-top,0px));}
.nc-section{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:12px 0 4px;font-weight:700;}
.nc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);margin-bottom:6px;cursor:grab;transition:border-color .15s,background .15s,opacity .15s,transform .15s;user-select:none;touch-action:none;}
.nc-item:active{cursor:grabbing;}
.nc-item.nc-hidden{opacity:.42;}
.nc-item.nc-drag-over{border-color:var(--purple);background:var(--purple2);transform:scale(1.01);}
.nc-item.nc-dragging{opacity:.35;transform:scale(.98);}
.nc-handle{font-size:18px;color:var(--text3);cursor:grab;line-height:1;flex-shrink:0;padding:0 2px;font-family:sans-serif;}
.nc-icon{font-size:18px;flex-shrink:0;}
.nc-label{flex:1;font-size:17px;font-weight:600;}
.nc-pin{font-size:12px;opacity:.45;}
.nc-toggle{background:none;border:none;cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;transition:background .15s;line-height:1;}
.nc-toggle:hover{background:var(--bg3);}
.nc-tip{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:center;padding:8px 0 2px;}
/* ── Pro Gate Overlay ───────────────────────────────────── */
.pro-gate-ov{background:var(--bg2);border-radius:var(--r);border:1px solid var(--border);margin-top:8px;}
/* ── Mobile Bottom Nav Customizer ───────────────────────── */
.mnc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;}
.mnc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;text-align:center;min-height:64px;font-size:20px;user-select:none;}
.mnc-tile:hover{border-color:var(--green);background:var(--bg3);}
.mnc-tile.mnc-on{border-color:var(--green);background:var(--green-dim,rgba(0,229,160,.12));}
.mnc-tile.mnc-dis{opacity:.38;cursor:not-allowed;}
.mnc-lbl{font-family:var(--mono);font-size:9px;color:var(--text2);line-height:1.2;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mnc-tile.mnc-on .mnc-lbl{color:var(--green);}
.mnc-count{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:right;margin-bottom:8px;}
/* ── End Nav Customizer ──────────────────────────────────── */
.toast{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r2);font-family:var(--mono);font-size:14px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:toastIn .3s ease;pointer-events:all;cursor:pointer;min-width:260px;}
.toast.ok{background:var(--green);color:#000;}
.toast.err{background:var(--red);color:#fff;}
.toast.warn{background:var(--yellow);color:#000;}
.toast.info{background:var(--bg2);color:var(--text);border:1px solid var(--border2);}
@keyframes toastIn{from{transform:translateX(120%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes toastOut{from{transform:translateX(0);opacity:1;}to{transform:translateX(120%);opacity:0;}}

/* ═══ EMPTY STATES ═══════════════════════════════════════ */
.empty-state{text-align:center;padding:50px 25px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.empty-state-icon{font-size:55px;opacity:.7;}
.empty-state-title{font-size:18px;font-weight:700;color:var(--text2);}
.empty-state-sub{font-family:var(--mono);font-size:12px;color:var(--text3);line-height:1.7;max-width:320px;}
.empty-state-btn{margin-top:6px;}

/* ═══ WEEK OVERVIEW ══════════════════════════════════════ */
.week-bar{display:flex;gap:4px;align-items:flex-end;height:62px;margin:10px 0 4px;}
.week-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.week-bar-fill{width:100%;border-radius:4px 4px 0 0;min-height:3px;transition:height .4s;}
.week-bar-day{font-family:var(--mono);font-size:11px;color:var(--text3);}
.week-bar-val{font-family:var(--mono);font-size:11px;}

/* ═══ DIARY SEARCH ═══════════════════════════════════════ */
.search-inp{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:12px 16px;font-family:var(--mono);font-size:14px;color:var(--text);outline:none;transition:border-color .15s;box-sizing:border-box;}
.search-inp:focus{border-color:var(--purple);}
.search-inp::placeholder{color:var(--text3);}

/* ═══ SLIDER BUBBLE ═════════════════════════════════════ */
.slider-bubble{
  position:fixed;display:none;
  background:var(--purple);color:#fff;
  font-family:var(--mono);font-size:14px;font-weight:700;
  padding:5px 12px;border-radius:8px;
  pointer-events:none;z-index:9999;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  transform:translateX(-50%);
  white-space:nowrap;
  animation:bubblePop .12s ease;
}
.slider-bubble::after{
  content:'';position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--purple);
}
@keyframes bubblePop{from{transform:translateX(-50%) scale(.8);opacity:0;}to{transform:translateX(-50%) scale(1);opacity:1;}}

/* ═══ TRIAL BANNER ══════════════════════════════════════ */
.trial-banner{
  position:relative;overflow:hidden;
  border-radius:var(--r);
  border:1px solid rgba(0,229,160,.45);
  padding:14px 18px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  animation:trialGlow 3.5s ease-in-out infinite;
}
.trial-banner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(125deg,rgba(0,229,160,.14) 0%,rgba(157,111,255,.13) 28%,rgba(77,159,255,.1) 55%,rgba(0,229,160,.1) 75%,rgba(157,111,255,.14) 100%);
  background-size:350% 350%;
  animation:trialAura 9s ease infinite;
  z-index:0;
}
.trial-banner::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:trialShimmer 6s ease-in-out infinite;
  z-index:1;
}
.trial-banner>*{position:relative;z-index:2;}
.trial-banner-label{font-family:var(--mono);font-size:10px;font-weight:800;color:var(--green);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.trial-banner-days{background:rgba(0,229,160,.18);border:1px solid rgba(0,229,160,.35);border-radius:20px;padding:1px 8px;font-size:10px;letter-spacing:.5px;}
.trial-banner-text{font-size:14px;color:var(--text);line-height:1.5;}
.trial-banner-btn{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--green);color:#000;border:none;border-radius:var(--r2);padding:10px 20px;cursor:pointer;letter-spacing:.5px;white-space:nowrap;flex-shrink:0;transition:all .2s;box-shadow:0 0 14px rgba(0,229,160,.3);}
.trial-banner-btn:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(0,229,160,.55);}
@keyframes trialAura{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes trialGlow{0%,100%{border-color:rgba(0,229,160,.4);box-shadow:0 0 0 0 rgba(0,229,160,0),0 4px 24px rgba(0,0,0,.35);}50%{border-color:rgba(0,229,160,.75);box-shadow:0 0 18px rgba(0,229,160,.22),0 4px 24px rgba(0,0,0,.35);}}
@keyframes trialShimmer{0%{left:-60%;}55%{left:120%;}100%{left:120%;}}

/* ═══ MICRO-ANIMATIONS ═══════════════════════════════════ */
@keyframes countUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
@keyframes goalReached{0%{box-shadow:0 0 0 0 rgba(0,229,160,.5);}70%{box-shadow:0 0 0 20px rgba(0,229,160,0);}100%{box-shadow:0 0 0 0 rgba(0,229,160,0);}}
@keyframes slideInRight{from{transform:translateX(30px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes fadeInUp{from{transform:translateY(12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg);opacity:1;}100%{transform:translateY(100vh) rotate(720deg);opacity:0;}}
@keyframes panelEnter{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 8px rgba(0,229,160,.3);}50%{box-shadow:0 0 18px rgba(0,229,160,.6);}}
.anim-count{animation:countUp .4s ease;}
.anim-pulse{animation:pulse .3s ease;}
.btn-p:active{transform:scale(.96);}
.btn-s:active{transform:scale(.97);}
.btn-d:active{transform:scale(.97);}
.nav-i{transition:all .2s ease;}
.sc{transition:background .3s,transform .18s,box-shadow .18s;}
.sc:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow);}
.tr-row{transition:background .15s,border-color .15s;}
.tr-row:hover{background:var(--bg3)!important;border-color:var(--border2)!important;}
.rr:hover{border-color:var(--border2);transform:translateX(2px);}
.tg{background:var(--green2);color:var(--green);box-shadow:0 0 6px rgba(0,229,160,.08);}
.bar-fill.over{animation:glowPulse 2s ease infinite;}

/* ═══ CONFETTI ═══════════════════════════════════════════ */
.confetti-piece{position:fixed;width:10px;height:10px;top:-10px;z-index:9998;animation:confettiFall linear forwards;pointer-events:none;border-radius:2px;}
@keyframes streakFlash{from{opacity:1;}to{opacity:0;transform:scale(1.08);}}
@keyframes streakBurst{
  0%  {transform:translate(-50%,-60%) scale(0);opacity:0;}
  55% {transform:translate(-50%,-60%) scale(1.3);opacity:1;}
  80% {transform:translate(-50%,-60%) scale(1.1);opacity:1;}
  100%{transform:translate(-50%,-60%) scale(1);opacity:0;}
}

/* ═══ ACCENT COLORS ══════════════════════════════════════ */
/* --profit / --loss are SEMANTIC trading colors and never change with accent */
:root{--profit:#00e5a0;--profit2:rgba(0,229,160,.18);--loss:#ff3d6e;--loss2:rgba(255,61,110,.18);}
[data-accent="green"]{--green:#00e5a0;--green2:rgba(0,229,160,0.12);--green3:rgba(0,229,160,0.05);}
[data-accent="blue"]{--green:#4d9fff;--green2:rgba(77,159,255,0.12);--green3:rgba(77,159,255,0.05);}
[data-accent="purple"]{--green:#9d6fff;--green2:rgba(157,111,255,0.12);--green3:rgba(157,111,255,0.05);}
[data-accent="orange"]{--green:#ff8c42;--green2:rgba(255,140,66,0.12);--green3:rgba(255,140,66,0.05);}
[data-accent="red"]{--green:#ff3d6e;--green2:rgba(255,61,110,0.12);--green3:rgba(255,61,110,0.05);}
.accent-btn{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;flex-shrink:0;}
.accent-btn.active{border-color:var(--text);transform:scale(1.15);}

/* ═══ DASHBOARD EQUITY ═══════════════════════════════════ */
#dashEquityWrap{position:relative;width:100%;height:90px;margin-top:10px;}
#dashEquityCanvas{width:100%;height:100%;}

.divider{height:1px;background:var(--border);margin:12px 0;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   xs:  <480px   → Phone portrait
   sm:  480–767px → Phone landscape / small tablet
   md:  768–1023px → Tablet
   lg:  1024–1439px → Desktop
   xl:  ≥1440px  → Wide desktop
═══════════════════════════════════════════════════════ */

/* ── BASE (Desktop lg) ── already defined above, sidebar 275px wide ── */
.app{display:flex;min-height:100vh;}
.sidebar{width:275px;}
.main{margin-left:275px;padding:35px 40px;max-width:calc(100vw - 275px);}
.mob-hdr,.bot-nav,.mob-menu{display:none;}

/* ── XL DESKTOP (≥1440px) ─────────────────────────────── */
@media(min-width:1440px){
  .sidebar{width:310px;}
  .main{margin-left:310px;padding:40px 60px;max-width:calc(100vw - 310px);}
  .g2{gap:25px;}
  .g3{gap:22px;}
  .g4{gap:20px;}
  .g5{gap:17px;}
  .card{padding:27px;}
  .sv{font-size:35px;}
  .goal-pnl{font-size:65px;}
  .pt{font-size:35px;}
  .fi{font-size:16px;padding:14px 17px;}
}

/* ── TABLET (768–1023px) ──────────────────────────────── */
@media(max-width:1023px) and (min-width:768px){
  .sidebar{width:190px;}
  .main{margin-left:190px;padding:20px 24px;max-width:calc(100vw - 190px);}
  .logo-title{font-size:12px;}
  .nav-i{font-size:11px;padding:8px 14px;}
  .nav-icon{font-size:13px;}
  .g4{grid-template-columns:1fr 1fr!important;}
  .g5{grid-template-columns:1fr 1fr 1fr!important;}
  .fr4{grid-template-columns:1fr 1fr!important;}
  .sv{font-size:22px;}
  .goal-pnl{font-size:38px;}
  .pt{font-size:20px;}
  .card{padding:15px;}
}

/* ── MOBILE (≤767px) ──────────────────────────────────── */
@media(max-width:767px){
  /* Hide desktop sidebar, show mobile UI */
  .sidebar{display:none!important;}
  .mob-hdr{display:flex!important;}
  .bot-nav{display:flex!important;}
  .sidebar-only{display:none!important;}

  /* Main content full width, space for fixed header + bottom nav */
  .main{
    margin-left:0!important;
    max-width:100vw!important;
    width:100vw!important;
    padding:62px 12px calc(64px + env(safe-area-inset-bottom,0px)) 12px!important;
    background:var(--bg)!important;
    box-sizing:border-box!important;
  }
  /* Extra top offset when ticker is visible (28px ticker + 52px header + 10px gap) */
  body.has-ticker .main{padding-top:90px!important;}
  body,html{background:var(--bg)!important;}

  /* Typography */
  .pt{font-size:19px!important;letter-spacing:-.5px!important;}
  .ps{font-size:10px!important;}
  .sv{font-size:20px!important;}
  .goal-pnl{font-size:30px!important;line-height:1.15!important;padding-bottom:2px!important;}
  .ss{font-size:9px!important;}

  /* Page header */
  .ph{flex-direction:column!important;gap:6px!important;margin-bottom:14px!important;}

  /* Cards */
  .card{padding:12px!important;margin-bottom:10px!important;}
  .ch{margin-bottom:10px!important;}

  /* Grids – single column on phone */
  .g2{grid-template-columns:1fr!important;gap:10px!important;}
  .g3{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .g4{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .g5{grid-template-columns:1fr 1fr!important;gap:7px!important;}

  /* Forms */
  .fr2,.fr3,.fr4{grid-template-columns:1fr!important;gap:8px!important;}
  /* 16px minimum prevents iOS Safari from auto-zooming on input focus */
  .fi{font-size:16px!important;padding:11px 12px!important;}
  textarea.fi{font-size:16px!important;}
  .fl{font-size:9px!important;}
  .fg{margin-bottom:10px!important;}

  /* Emotion picker */
  .emo-grid{gap:4px!important;}
  .emo-btn{padding:8px 2px 6px!important;}
  .emo-btn .ei{font-size:18px!important;line-height:1.2!important;padding-bottom:2px!important;}
  .emo-btn .el{font-size:8px!important;}

  /* Buttons */
  .btn{padding:11px 14px!important;font-size:11px!important;}
  .btn-sm{padding:7px 11px!important;font-size:10px!important;}

  /* Calendar */
  .cal-hdr{flex-wrap:wrap!important;gap:5px!important;justify-content:center!important;}
  .cal-sel{font-size:10px!important;padding:5px 7px!important;}
  .cal-nav{font-size:10px!important;padding:5px 9px!important;}
  .cd{min-height:36px!important;max-height:52px!important;height:auto!important;}
  .cd-n{font-size:9px!important;}
  .cd-p{font-size:10px!important;}

  /* Stat cards – tighter */
  .sc{padding:10px 12px!important;}
  .sl{font-size:8px!important;}

  /* Filter bar */
  .fbar{gap:5px!important;padding:8px 10px!important;}
  .fs{font-size:10px!important;padding:6px 7px!important;}

  /* Auth screen */
  #authScreen{padding:16px!important;align-items:flex-start!important;padding-top:40px!important;}

  /* Trade rows */
  .tr-row{padding:9px 10px!important;gap:7px!important;}
  .tr-sym{font-size:12px!important;}
  .tr-pnl{font-size:12px!important;min-width:60px!important;}
  .tr-meta{font-size:9px!important;}

  /* Stat cards on dashboard – 2 col for g5 */
  #panel-dashboard .g5{grid-template-columns:1fr 1fr!important;}

  /* Goal card */
  .goal-card{padding:14px!important;}

  /* Settings lang buttons */
  .lang-sel-btn{padding:8px 12px!important;font-size:10px!important;}

  /* Sst titles */
  .sst{font-size:13px!important;}
  .sss{font-size:9px!important;}

  /* Bar chart labels */
  .bcl{min-width:70px!important;font-size:9px!important;}
  .bv{min-width:40px!important;font-size:9px!important;}

  /* Tilt needle */
  .tilt-track{height:16px!important;}

  /* Panel title already shown in mobile header – hide duplicate in panel body */
  .ph .pt{display:none!important;}
  .ph{margin-bottom:4px!important;}
}

/* ── PHONE PORTRAIT EXTRA SMALL (<480px) ─────────────── */
@media(max-width:479px){
  .main{padding:62px 10px 72px!important;}
  body.has-ticker .main{padding-top:90px!important;}
  .g3{grid-template-columns:1fr!important;}
  .g5{grid-template-columns:1fr 1fr!important;}
  .goal-pnl{font-size:26px!important;}
  .sv{font-size:18px!important;}
  .lang-sel-btn{padding:7px 10px!important;font-size:9px!important;}
  .card-deck{width:150px!important;height:212px!important;}
  #panel-dashboard .g5{grid-template-columns:1fr 1fr!important;}
  .cd{min-height:32px!important;}
}

/* ── MOBILE HEADER ─────────────────────────────────────── */
.mob-hdr{
  align-items:center;justify-content:space-between;
  padding:0 14px;
  padding-top:env(safe-area-inset-top,0px);
  height:calc(52px + env(safe-area-inset-top,0px));
  background:var(--bg2);border-bottom:1px solid var(--border);
  position:fixed;top:0;left:0;right:0;z-index:150;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:transform .28s ease;
}
.mob-hdr--hidden{transform:translateY(-100%);}
.mob-hdr-title{display:block;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 48px);}
.mob-hdr-right{display:flex;gap:6px;align-items:center;}
.mob-menu-btn{
  background:none;border:none;color:var(--text3);
  font-size:18px;cursor:pointer;padding:0;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r2);transition:background .15s;
}
.mob-menu-btn:active{background:var(--bg3);}

/* ── BOTTOM NAV ────────────────────────────────────────── */
.bot-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);
  border-top:1px solid var(--border);
  z-index:200;flex-direction:row;
  box-shadow:0 -2px 10px rgba(0,0,0,.2);
  /* Safe area for iPhone home indicator */
  padding-bottom:env(safe-area-inset-bottom,0px);
  height:calc(56px + env(safe-area-inset-bottom,0px));
}
.bn-i{
  flex:1 1 0;min-width:0;max-width:20%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:2px;cursor:pointer;
  border-top:2px solid transparent;
  transition:border-color .15s;
  padding:6px 1px 4px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.bn-i.active{border-top-color:var(--green);}
.bn-i .bi{font-size:19px;color:var(--text3);line-height:1.2;display:block;text-align:center;width:100%;}
.bn-i.active .bi{color:var(--green);}
.bn-i .bcl{font-family:var(--mono);font-size:8px;color:var(--text3);text-align:center;line-height:1;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.bn-i.active .bcl{color:var(--green);}

/* ── MOBILE MENU (Hamburger) ───────────────────────────── */
.mob-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;backdrop-filter:blur(5px);}
.mob-menu.open{display:block;}
.mob-menu-box{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--bg2);border-radius:16px 16px 0 0;
  padding:16px 0 32px;max-height:80vh;overflow-y:auto;
}
.mob-menu-i{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:14px;color:var(--text2);cursor:pointer;transition:background .1s;}
.mob-menu-i:active,.mob-menu-i.active{background:var(--bg3);color:var(--green);}

/* ── LANG BUTTONS ──────────────────────────────────────── */
.lang-btn{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:3px 8px;font-family:var(--mono);font-size:9px;color:var(--text2);cursor:pointer;}
.lang-btn.active{border-color:var(--green);color:var(--green);}
.lang-sel-btn{padding:9px 16px;border-radius:var(--r2);font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer;border:2px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s;}
.lang-sel-btn:hover{border-color:var(--border2);color:var(--text);}
.lang-sel-btn.active{border-color:var(--green);background:var(--green2);color:var(--green);}

/* ══ DESKTOP LAYOUT POLISH ════════════════════════════════
   Panels and forms stay at comfortable reading widths on
   desktop instead of stretching across very wide viewports.
══════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  /* Cap panel content width — no panel should exceed 1060px */
  .panel{max-width:1060px;}

  /* Form groups: limit standalone fields to a comfortable width */
  .fg{max-width:520px;}
  /* Inside row-grids each column should still fill its slot */
  .fr2 .fg,.fr3 .fg,.fr4 .fg{max-width:100%!important;}

  /* Selects look stretched beyond ~400px — cap them */
  select.fi{max-width:400px;}
  /* Inside grids, selects fill their column */
  .fr2 select.fi,.fr3 select.fi,.fr4 select.fi{max-width:100%!important;}

  /* Number / date inputs: intrinsically short */
  input[type="number"].fi,input[type="date"].fi{max-width:260px;}
  .fr2 input[type="number"].fi,.fr3 input[type="number"].fi,.fr4 input[type="number"].fi,
  .fr2 input[type="date"].fi,.fr3 input[type="date"].fi,.fr4 input[type="date"].fi{max-width:100%!important;}

  /* Filter bar stretching too wide — keep it contained */
  .fbar{max-width:760px;}

  /* Settings add-rule input row */
  .add-row{max-width:520px;}

  /* Form panels: cap at comfortable reading width so cards don't stretch */
  #panel-einstellungen,#panel-checkin,#panel-notrade{max-width:740px;}

  /* Slightly more vertical breathing room in page header */
  .ph{margin-bottom:28px;}

  /* Full-width buttons look odd on wide desktop — give them a cap */
  .btn-full{max-width:380px;}
  /* But keep form-submit buttons full-width inside constrained .fg */
  .fg .btn-full{max-width:100%;}
}

/* ── XL DESKTOP (≥1440px): slightly wider to use more screen ── */
@media(min-width:1440px){
  .panel{max-width:1200px;}
  .fg{max-width:580px;}
  .fr2 .fg,.fr3 .fg,.fr4 .fg{max-width:100%!important;}
  select.fi{max-width:460px;}
  .fr2 select.fi,.fr3 select.fi,.fr4 select.fi{max-width:100%!important;}
  input[type="number"].fi,input[type="date"].fi{max-width:300px;}
  .fr2 input[type="number"].fi,.fr3 input[type="number"].fi,.fr4 input[type="number"].fi,
  .fr2 input[type="date"].fi,.fr3 input[type="date"].fi,.fr4 input[type="date"].fi{max-width:100%!important;}
  .fbar{max-width:880px;}
  .add-row{max-width:580px;}
  .btn-full{max-width:420px;}
  .fg .btn-full{max-width:100%;}
  #panel-einstellungen,#panel-checkin,#panel-notrade{max-width:800px;}
}