:root{--primary:#00ecb9;--primary-dark:#00b894;--gold:#f1e05a;--btn-home:#1c232c;--btn-calc:#1c232c;--btn-journal:#1c232c;--btn-dash:#1c232c;--btn-settings:#1c232c;--btn-contact:#1c232c;--btn-logout:#1c232c;--btn-active-bg:#FFFFFF;--btn-active-text:#0A0E27;--btn-active-border:#00ecb9;--btn-calculate:#00ecb9;--btn-send-journal:#00ecb9;--btn-reset:#00ecb9;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b;--info:#00ecb9;--bg-primary:#0A0E27;--bg-secondary:#151937;--bg-tertiary:#1E2347;--bg-card:#252B4F;--bg-input:#1A1F3A;--bg-hover:#2D3358;--border:#2D3358;--border-light:#3D4470;--text-primary:#FFFFFF;--text-secondary:#E0E7FF;--text-muted:#9CA3AF;--text-dark:#6B7280;--shadow-gold:0 0 15px rgba(0,236,185,0.5);--shadow-cyan:0 0 15px rgba(0, 255, 255, 0.5);--shadow-pink:0 0 15px rgba(255, 0, 255, 0.5);--shadow-orange:0 0 15px rgba(255, 107, 0, 0.5);--shadow-purple:0 0 15px rgba(176, 38, 255, 0.5);--shadow-green:0 0 15px rgba(57, 255, 20, 0.5);--shadow-red:0 0 15px rgba(255, 0, 64, 0.5);--shadow-md:0 4px 8px rgba(0, 0, 0, 0.4);--shadow-lg:0 8px 16px rgba(0, 0, 0, 0.5);--transition-fast:0.15s ease;--transition-normal:0.25s ease}*{margin:0;padding:0;box-sizing:border-box}html{overflow-anchor:none}body{background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%);color:var(--text-primary);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-anchor:none}h1,h2,h3,h4,.logo-text,.main-title{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em}a{color:var(--info);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary)}.navbar{background:linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);padding:12px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--primary);position:sticky;top:0;z-index:1000;box-shadow:var(--shadow-lg);flex-wrap:nowrap;gap:14px;min-height:64px}@media (max-width:640px){.navbar{flex-wrap:wrap;flex-direction:column;align-items:stretch}.logo-section{justify-content:center;margin-bottom:4px}.nav-buttons{justify-content:center}}/* Compact nav on laptop widths — buttons keep their full text, just shrink tightly + never wrap.
   If a screen is ever narrower than the buttons truly need, the bar scrolls horizontally
   instead of wrapping Logout onto a second line. */
@media (min-width:641px) and (max-width:1600px){
  .navbar{padding:8px 14px;gap:8px}
  .logo-text{font-size:17px}
  .logo-icon-img{height:28px;width:28px}
  .nav-buttons{flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:thin;justify-content:flex-start}
  .nav-btn{padding:6px 8px;font-size:10px;letter-spacing:0;gap:4px;height:32px;flex-shrink:0}
  .user-avatar{width:28px;height:28px;flex-shrink:0}
  .nav-buttons::-webkit-scrollbar{height:4px}
  .nav-buttons::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}
}.logo-section{display:flex;align-items:center;gap:12px;flex-shrink:0}.logo-icon{font-size:32px;filter:drop-shadow(0 0 8px rgba(0,236,185,.5))}.logo-icon-img{height:38px;width:38px;object-fit:contain;border-radius:8px;filter:drop-shadow(0 0 8px rgba(0,236,185,.5))}.logo-text{font-size:26px;font-weight:800;letter-spacing:1px;white-space:nowrap}.logo-word-trade{color:#fff;text-shadow:0 0 15px rgba(255,255,255,.3)}.logo-word-calc{color:#fff;text-shadow:0 0 15px rgba(255,255,255,.3)}.logo-word-master{color:var(--gold);text-shadow:0 0 15px rgba(241,224,90,.4)}.nav-buttons{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:1;min-width:0}.nav-btn{padding:8px 14px;border:2px solid var(--border);border-radius:8px;cursor:pointer;font-weight:600;font-size:12.5px;color:var(--text-secondary);background:var(--bg-card);transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;height:38px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}.btn-pricing{border-color:var(--primary)!important;color:var(--primary)!important}.btn-pricing:hover{background:var(--primary)!important;color:#04120c!important}.nav-btn:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--text-primary);background:var(--bg-hover)}.nav-btn.active:hover{filter:none;transform:translateY(-1px)}.nav-btn.active{background:var(--primary);color:#04120c;border-color:var(--primary);box-shadow:0 4px 16px rgba(0,236,185,.35)}.btn-logout{border-color:rgba(239,68,68,.35)!important;color:#fca5a5!important}.btn-logout:hover{border-color:var(--danger)!important;color:#fff!important;background:rgba(239,68,68,.14)!important}.btn-logout{background:var(--btn-logout)}.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),orange);color:#0a0e27;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:default;position:relative;flex-shrink:0;box-shadow:0 0 0 2px var(--bg-secondary),0 0 8px rgba(0,236,185,.4)}.user-avatar::after{content:'';position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;background:var(--success);border:2px solid var(--bg-secondary);border-radius:50%}.home-hero{text-align:center;max-width:900px;margin:8px auto 28px;padding:28px 24px 24px;background:linear-gradient(160deg,rgba(0,236,185,.08) 0,rgba(57,255,20,.04) 100%);border:2px solid var(--border);border-radius:16px}.home-hero-title{font-size:30px;font-weight:800;line-height:1.28;color:var(--gold);margin-bottom:14px;text-shadow:0 0 20px rgba(241,224,90,.35)}.home-hero-sub{font-size:15.5px;color:var(--text-secondary);line-height:1.6;max-width:720px;margin:0 auto}@media (max-width:640px){.home-hero-title{font-size:22px}.home-hero-sub{font-size:14px}}
.page{display:none;max-width:1400px;margin:0 auto;padding:20px 24px;animation:fadeIn .4s ease}.page.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section-header{text-align:center;margin:16px 0 24px;padding-bottom:16px;border-bottom:2px solid var(--border)}.main-title{color:var(--primary);font-size:34px;font-weight:800;margin-bottom:10px;text-shadow:0 0 20px rgba(0,236,185,.5);letter-spacing:1px}.version-tag{color:var(--primary);text-shadow:0 0 15px rgba(0,236,185,.4);font-size:.7em;vertical-align:middle;opacity:.9}.section-header h2{color:var(--primary);font-size:32px;font-weight:700;margin-bottom:10px}.section-header p{color:var(--text-muted);font-size:16px}.subtitle{font-size:14px;color:var(--text-dark);margin-top:8px}.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:20px}.home-card{background:linear-gradient(135deg,var(--bg-card) 0,var(--bg-tertiary) 100%);border:2px solid var(--border);border-radius:14px;padding:22px 20px;text-align:center;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center}.home-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,236,185,.1),transparent);transition:left .6s}.home-card:hover::before{left:100%}.home-card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:var(--shadow-gold)}.card-icon{font-size:44px;margin-bottom:12px;display:block;filter:drop-shadow(0 4px 8px rgba(0, 0, 0, .3))}.home-card h3{color:var(--primary);font-size:19px;font-weight:700;margin-bottom:8px}.home-card p{color:var(--text-muted);font-size:13px;line-height:1.5}.card-badge{display:inline-block;margin-top:16px;padding:4px 12px;background:rgba(0,236,185,.1);color:var(--primary);border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.settings-container{max-width:900px;margin:0 auto}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}.settings-card{background:var(--bg-card);border:2px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow-md)}.settings-card h3{color:var(--primary);font-size:22px;font-weight:700;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--border)}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;color:var(--text-muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.input-group input,.input-group select,.input-group textarea{width:100%;padding:14px 16px;background:var(--bg-input);border:2px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:15px;font-family:inherit;transition:all var(--transition-fast);box-sizing:border-box}.input-group textarea{resize:vertical;min-height:140px;line-height:1.5}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,236,185,.2);background:var(--bg-hover)}.input-warning{display:block;margin-top:8px;padding:8px 12px;background:rgba(255,0,64,.12);border:1px solid var(--danger);border-radius:6px;color:var(--danger);font-size:12.5px;font-weight:700;line-height:1.4}.input-group input::placeholder{color:var(--text-dark)}.calc-mode-selector{display:flex;gap:16px;margin-bottom:24px;max-width:800px;margin-left:auto;margin-right:auto}.mode-btn{flex:1;padding:16px 24px;background:var(--bg-card);color:var(--text-primary);border:2px solid var(--border);border-radius:10px;cursor:pointer;font-weight:700;font-size:15px;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.5px}.mode-btn:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-2px)}.mode-btn.active{background:linear-gradient(135deg,var(--primary) 0,#00b894 100%);border-color:var(--primary);color:var(--bg-primary);box-shadow:var(--shadow-gold);text-shadow:none}.top-selection-bar{background:var(--bg-card);border:2px solid var(--border);border-radius:12px;padding:20px;margin-bottom:24px;box-shadow:var(--shadow-md)}.selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.top-selection-bar .input-group label{color:var(--primary);font-size:12px;font-weight:700}.calculator-container{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.input-section,.output-section{background:var(--bg-card);border:2px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow-lg)}.output-section{background:linear-gradient(160deg,var(--bg-card) 0,var(--bg-tertiary) 100%);border-color:var(--primary);box-shadow:0 0 0 1px rgba(0,236,185,.15),var(--shadow-lg);position:relative;overflow:hidden}.output-section::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--gold),var(--success))}.output-section .section-title{color:var(--primary);border-bottom-color:rgba(0,236,185,.25)}.section-title{font-size:20px;color:var(--primary);font-weight:700;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:1px}.btn-primary{width:100%;padding:16px;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:var(--bg-primary);border:none;border-radius:10px;font-size:17px;font-weight:800;cursor:pointer;margin-top:24px;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-gold)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(0,236,185,.7)}.btn-calculate{width:100%;padding:16px;background:linear-gradient(135deg,var(--btn-calculate) 0,#0cc 100%);color:var(--bg-primary);border:none;border-radius:10px;font-size:17px;font-weight:800;cursor:pointer;margin-top:24px;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-cyan);text-shadow:none}.btn-calculate:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(0,255,255,.7)}.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.btn-journal{padding:14px;background:linear-gradient(135deg,var(--btn-send-journal) 0,#c0c 100%);color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:15px;transition:all var(--transition-fast);text-transform:uppercase;box-shadow:var(--shadow-pink)}.btn-journal:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(255,0,255,.7)}.btn-reset{padding:14px;background:linear-gradient(135deg,var(--btn-reset) 0,#c50 100%);color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:15px;transition:all var(--transition-fast);text-transform:uppercase;box-shadow:var(--shadow-orange)}.btn-reset:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(255,107,0,.7)}.quick-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.stat-box{background:var(--bg-input);padding:16px;border-radius:10px;border-left:4px solid;transition:all var(--transition-fast);min-width:0}.stat-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-box .stat-value{word-break:break-word}.stat-blue{border-left-color:var(--info)}.stat-red{border-left-color:var(--danger)}.stat-orange{border-left-color:var(--warning)}.stat-purple{border-left-color:var(--btn-send-journal)}.stat-box .stat-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;font-weight:600}.stat-box .stat-value{font-size:22px;font-weight:800;color:var(--text-primary)}.additional-stats{background:var(--bg-input);padding:18px 20px;border-radius:10px;margin-bottom:20px}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px}.stat-item:last-child{border-bottom:none}.stat-item .stat-label{color:var(--text-secondary);font-size:17px;font-weight:700}.stat-item .stat-value{color:var(--primary);font-weight:800;font-size:20px}@media (max-width:480px){.stat-item .stat-label{font-size:15px}.stat-item .stat-value{font-size:18px}}.target-header{color:var(--primary);font-size:18px;font-weight:700;margin:24px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--border)}.targets-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px}.target-box{background:var(--bg-input);border:2px solid var(--border);border-radius:12px;padding:20px 16px;text-align:center;transition:all var(--transition-fast)}.target-box:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.target-1{border-color:#34d399}.target-2{border-color:var(--success);background:linear-gradient(135deg,rgba(57,255,20,.1) 0,rgba(57,255,20,.05) 100%);box-shadow:0 0 15px rgba(57,255,20,.2)}.target-3{border-color:#059669}.target-label{font-size:13px;color:var(--success);font-weight:700;margin-bottom:10px;text-transform:uppercase}.target-price{font-size:22px;font-weight:800;color:var(--text-primary);margin:8px 0}.target-profit{font-size:15px;color:var(--success);font-weight:700}.risk-section{display:flex;flex-direction:column;gap:16px}.risk-item{padding:16px;border-radius:10px;border:2px solid;transition:all var(--transition-fast)}.risk-item:hover{transform:translateY(-2px)}.risk-item .risk-label{font-size:12px;font-weight:700;margin-bottom:6px;text-transform:uppercase}.risk-item .risk-value{font-size:22px;font-weight:800}.risk-item.liquidation{background:rgba(176,38,255,.12);border-color:#b026ff}.risk-item.liquidation .risk-label{color:#b026ff}.risk-item.liquidation .risk-value{color:#b026ff}.risk-item.profit{background:rgba(57,255,20,.1);border-color:var(--success)}.risk-item.profit .risk-label{color:var(--success)}.risk-item.profit .risk-value{color:var(--success)}.risk-item.loss{background:rgba(255,0,64,.1);border-color:var(--danger)}.risk-item.loss .risk-label{color:var(--danger)}.risk-item.loss .risk-value{color:var(--danger)}.output-section.dir-long .stat-box{border-left-color:var(--success)!important;background:rgba(57,255,20,.08)!important}.output-section.dir-long .stat-box .stat-value{color:var(--success)!important}.output-section.dir-long .target-box{border-color:var(--success)!important;background:rgba(57,255,20,.08)!important}.output-section.dir-long .target-price{color:var(--success)!important}.output-section.dir-long .target-profit{color:var(--success)!important}.output-section.dir-long .target-label{color:var(--success)!important}.output-section.dir-long .risk-item.loss,.output-section.dir-long .risk-item.profit{background:rgba(57,255,20,.1)!important;border-color:var(--success)!important}.output-section.dir-long .risk-item.loss .risk-label,.output-section.dir-long .risk-item.loss .risk-value,.output-section.dir-long .risk-item.profit .risk-label,.output-section.dir-long .risk-item.profit .risk-value{color:var(--success)!important}.output-section.dir-short .stat-box{border-left-color:var(--danger)!important;background:rgba(255,107,0,.08)!important}.output-section.dir-short .stat-box .stat-value{color:var(--danger)!important}.output-section.dir-short .target-box{border-color:var(--danger)!important;background:rgba(255,107,0,.08)!important}.output-section.dir-short .target-price{color:var(--danger)!important}.output-section.dir-short .target-profit{color:var(--danger)!important}.output-section.dir-short .target-label{color:var(--danger)!important}.output-section.dir-short .risk-item.loss,.output-section.dir-short .risk-item.profit{background:rgba(255,107,0,.1)!important;border-color:var(--danger)!important}.output-section.dir-short .risk-item.loss .risk-label,.output-section.dir-short .risk-item.loss .risk-value,.output-section.dir-short .risk-item.profit .risk-label,.output-section.dir-short .risk-item.profit .risk-value{color:var(--danger)!important}.filter-bar{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}.filter-btn{padding:10px 20px;background:var(--bg-card);color:var(--text-primary);border:2px solid var(--border);border-radius:8px;cursor:pointer;font-weight:700;transition:all var(--transition-fast);text-transform:uppercase;font-size:13px}.filter-btn:hover{background:var(--bg-hover);border-color:var(--primary)}.filter-btn.active{background:var(--primary);color:var(--bg-primary);border-color:var(--primary);box-shadow:var(--shadow-gold)}.journal-hint{background:rgba(6,182,212,.1);border:1px solid var(--info);border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:13.5px;color:var(--text-secondary);line-height:1.6}.market-filter-label{color:var(--text-muted);font-weight:700;font-size:13px;display:flex;align-items:center}#currencyFilterSelect,#marketFilterSelect,#tradeTypeFilterSelect{padding:10px 16px;background:var(--bg-card);color:var(--text-primary);border:2px solid var(--border);border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}#currencyFilterSelect:focus,#marketFilterSelect:focus,#tradeTypeFilterSelect:focus{outline:0;border-color:var(--primary)}.journal-actions-cell{display:flex;flex-direction:row;align-items:center;gap:10px;white-space:nowrap}.journal-action-btn{border:none;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;transition:opacity .15s,transform .1s;flex-shrink:0}.journal-action-btn:hover{opacity:.85;transform:scale(1.04)}.journal-action-btn:active{transform:scale(.97)}.journal-action-edit{background:#06b6d4}.journal-action-delete{background:#ef4444;padding:7px 12px;font-size:14px}.journal-container{overflow-x:auto;overflow-y:auto;max-height:65vh;background:var(--bg-card);border-radius:16px;border:2px solid var(--border);box-shadow:var(--shadow-lg);position:relative}.journal-table thead th{position:sticky;top:0;z-index:5;box-shadow:0 2px 0 var(--border)}.journal-table{width:100%;border-collapse:collapse;min-width:1650px}.journal-table thead{background:var(--bg-tertiary)}.journal-table th{padding:16px 12px;text-align:left;color:var(--primary);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border)}.journal-table td{padding:12px;border-bottom:1px solid var(--border);color:var(--text-secondary);font-size:14px}.journal-table tbody tr{transition:background var(--transition-fast)}.journal-table tbody tr:hover{background:var(--bg-hover)}.empty-message{text-align:center;color:var(--text-dark);padding:40px!important;font-size:16px}.journal-table .win{color:var(--success);font-weight:700}.journal-table .loss{color:var(--danger);font-weight:700}.journal-table .be{color:var(--warning);font-weight:700}.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}
.stat-card{background:linear-gradient(135deg,var(--bg-card) 0,var(--bg-tertiary) 100%);border:2px solid var(--border);border-radius:16px;padding:28px 20px;text-align:center;transition:all .35s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--gold));opacity:0;transition:opacity .3s}
.stat-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--primary);box-shadow:0 12px 30px rgba(0,236,185,.25),var(--shadow-lg)}
.stat-card:hover::before{opacity:1}
.stat-icon{font-size:36px;margin-bottom:12px;filter:drop-shadow(0 0 8px rgba(255,255,255,.15));transition:transform .3s}
.stat-card:hover .stat-icon{transform:scale(1.15) rotate(-4deg)}
.stat-value{font-size:32px;font-weight:800;color:var(--text-primary);margin-bottom:8px}
.stat-label{color:var(--text-muted);font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* ---- Trading Health Score — hero gauge, the dashboard's centerpiece ---- */
.health-score-card{background:linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 60%,var(--bg-card) 100%);border:2px solid var(--primary);border-radius:20px;padding:28px 24px;margin-bottom:28px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:center;box-shadow:0 0 40px rgba(0,236,185,.12),var(--shadow-lg);position:relative;overflow:hidden}
.health-score-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(0,236,185,.10),transparent 55%);pointer-events:none}
.health-score-ring-wrap{position:relative;width:180px;height:180px;flex-shrink:0}
.health-score-ring-wrap svg{transform:rotate(-90deg);width:100%;height:100%}
.health-score-ring-bg{fill:none;stroke:var(--bg-input);stroke-width:14}
.health-score-ring-fg{fill:none;stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1),stroke .4s}
.health-score-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.health-score-num{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:800;line-height:1}
.health-score-of{font-size:12px;color:var(--text-muted);margin-top:2px;letter-spacing:.05em}
.health-score-info{flex:1;min-width:200px}
.health-score-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.health-score-badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.health-score-desc{color:var(--text-secondary);font-size:14px;margin-top:8px;line-height:1.6;max-width:420px}
.health-score-breakdown{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.health-score-chip{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);background:var(--bg-input);padding:6px 12px;border-radius:10px;border:1px solid var(--border)}
.health-score-chip b{color:var(--text-primary);font-size:13px}
.health-score-scale{margin-top:20px;width:100%;max-width:420px}
.health-score-scale-bar{position:relative;height:10px;border-radius:6px;display:flex;overflow:visible}
.health-score-scale-seg:first-child{border-radius:6px 0 0 6px}
.health-score-scale-seg:last-child{border-radius:0 6px 6px 0}
.health-score-scale-marker{position:absolute;top:-9px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--text-primary);filter:drop-shadow(0 0 3px rgba(0,0,0,.6));transform:translateX(-50%);transition:left 1.2s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:0}
.health-score-scale-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--text-muted);line-height:1.4;text-align:center}
.health-score-scale-labels span:first-child{text-align:left}
.health-score-scale-labels span:last-child{text-align:right}
@media(max-width:640px){.health-score-card{flex-direction:column;text-align:center}.health-score-info{text-align:center}.health-score-breakdown{justify-content:center}.health-score-scale{max-width:100%}}

.dash-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.chart-card{background:var(--bg-card);border:2px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow-md);margin-bottom:20px;position:relative;transition:box-shadow .3s,border-color .3s;overflow:hidden}
.chart-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--gold),var(--primary));background-size:200% 100%;animation:accentShift 6s linear infinite}
@keyframes accentShift{from{background-position:0% 0}to{background-position:200% 0}}
.chart-card:hover{border-color:var(--border-light);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pie-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}

/* ---- Animated SVG donut charts (replaces the old flat conic-gradient circle) ---- */
.donut-wrap{position:relative;width:150px;height:150px;flex-shrink:0}
.donut-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-wrap circle{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-center .dc-num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--text-primary)}
.donut-center .dc-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

.pie-legend{display:flex;flex-direction:column;gap:8px}
.legend-item{font-size:14px;font-weight:700;color:var(--text-secondary);padding:4px 0;cursor:default;transition:transform .2s;display:flex;align-items:center;gap:8px}
.legend-item:hover{transform:translateX(3px)}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}

/* ---- Daily Activity Heatmap (GitHub-contributions style calendar) ---- */
.chart-accent-heat::before{background:linear-gradient(90deg,#FF0040,var(--gold),#39FF14);background-size:200% 100%}
.heatmap-scroll{overflow-x:auto;padding-bottom:6px}
.heatmap-grid{display:grid;grid-template-rows:repeat(7,13px);grid-auto-flow:column;grid-auto-columns:13px;gap:3px;min-width:max-content}
.heatmap-cell{width:13px;height:13px;border-radius:3px;transition:transform .15s;cursor:pointer;display:block}
.heatmap-cell:hover{transform:scale(1.5)}
.heatmap-legend{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:var(--text-muted)}
.heatmap-legend .heatmap-cell{cursor:default}
.heatmap-legend .heatmap-cell:hover{transform:none}

.bar-chart{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;height:200px;padding-top:20px;overflow-x:auto}
.bar-group{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:40px;flex:1;position:relative}
.bar-value{font-size:11px;font-weight:700;margin-bottom:6px;white-space:nowrap}
.bar{width:24px;border-radius:6px 6px 0 0;min-height:4px;transition:height .8s cubic-bezier(.2,.8,.2,1),transform .2s,filter .2s;cursor:pointer}
.bar:hover{transform:scaleX(1.15);filter:brightness(1.25)}
.bar-label{margin-top:8px;font-size:12px;color:var(--text-muted);font-weight:600}

/* ---- Equity curve hover tooltip ---- */
.chart-card-relative{position:relative}
.equity-tooltip{position:absolute;pointer-events:none;background:var(--bg-secondary);border:1px solid var(--primary);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;color:var(--text-primary);box-shadow:var(--shadow-lg);opacity:0;transition:opacity .15s;white-space:nowrap;z-index:10;transform:translate(-50%,-130%)}
@keyframes equityFadeIn{from{opacity:0;transform:scaleY(.92);transform-origin:bottom}to{opacity:1;transform:scaleY(1)}}
#equityCurve.equity-animate-in{animation:equityFadeIn .7s ease-out}

@media (max-width:900px){.dash-charts-grid{grid-template-columns:1fr}}

/* ---- Dashboard journal filters (market/direction) alongside period buttons ---- */
.dash-filter-divider{width:1px;align-self:stretch;background:var(--border);margin:0 4px}
.dash-select{background:var(--bg-input);color:var(--text-primary);border:2px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600;cursor:pointer;height:38px}
.dash-select:hover{border-color:var(--primary)}

/* ---- Top KPI strip (icon-badge cards with vs-previous-period delta) ---- */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:20px 0 28px}
.kpi-card{background:var(--bg-card);border:2px solid var(--border);border-radius:14px;padding:18px;display:flex;gap:14px;align-items:flex-start;transition:transform .3s,border-color .3s}
.kpi-card:hover{transform:translateY(-4px);border-color:var(--primary)}
.kpi-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.kpi-label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi-value{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:800;color:var(--text-primary);margin:4px 0}
.kpi-delta{font-size:11.5px;font-weight:700;color:var(--text-muted)}
.kpi-delta.up{color:var(--success)}
.kpi-delta.down{color:var(--danger)}

/* ---- Semi-circle Profit Factor gauge ---- */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding-top:8px}
.gauge-wrap svg{width:220px;max-width:100%;overflow:visible}
.gauge-track{fill:none;stroke:var(--bg-input);stroke-width:26;stroke-linecap:round}
.gauge-fill{fill:none;stroke-width:26;stroke-linecap:round;transition:stroke .4s}
.gauge-center{text-align:center;margin-top:-44px}
.gauge-num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:800;color:var(--text-primary)}
.gauge-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.gauge-scale{display:flex;justify-content:space-between;width:220px;max-width:100%;font-size:10px;color:var(--text-muted);margin-top:2px}
.gauge-badge{display:inline-block;margin-top:10px;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:800;text-transform:uppercase}

/* ---- Instrument-wise horizontal performance bars ---- */
.instrument-bars{display:flex;flex-direction:column;gap:14px}
.instrument-bar-row{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:12px}
.instrument-bar-name{font-size:13px;font-weight:700;color:var(--text-secondary)}
.instrument-bar-track{background:var(--bg-input);border-radius:8px;height:20px;overflow:hidden;position:relative}
.instrument-bar-fill{height:100%;border-radius:8px;transition:width 1s cubic-bezier(.2,.8,.2,1);width:0}
.instrument-bar-val{font-size:12.5px;font-weight:700;text-align:right}

/* ---- Recent Trades table ---- */
.recent-trades-scroll{overflow-x:auto}
.recent-trades-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.recent-trades-table th{text-align:left;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:2px solid var(--border)}
.recent-trades-table td{padding:10px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.recent-trades-table tr:hover td{background:var(--bg-hover)}
.rt-badge{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:800;text-transform:uppercase}
.rt-long{background:rgba(0,255,255,.15);color:#00FFFF}
.rt-short{background:rgba(255,107,0,.15);color:#FF6B00}
.rt-win{background:rgba(57,255,20,.15);color:#39FF14}
.rt-loss{background:rgba(255,0,64,.15);color:#FF0040}
.rt-be{background:rgba(255,215,0,.15);color:#FFD700}
.rt-open{background:rgba(0,236,185,.15);color:var(--primary)}

/* ---- Performance metrics list + Key insights list ---- */
.metrics-list{display:flex;flex-direction:column;gap:2px}
.metrics-row{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid var(--border)}
.metrics-row:last-child{border-bottom:none}
.metrics-row .m-label{font-size:13.5px;color:var(--text-secondary)}
.metrics-row .m-val{font-size:14px;font-weight:800}
.insights-list{display:flex;flex-direction:column;gap:12px}
.insight-item{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-secondary);line-height:1.5}
.insight-item .ii-check{color:var(--success);font-size:15px;flex-shrink:0;margin-top:1px}

/* ---- Bottom motivational banner ---- */
.dash-banner{margin-top:8px;background:linear-gradient(90deg,rgba(0,236,185,.12),rgba(241,224,90,.12),rgba(0,236,185,.12));border:1px solid var(--primary);border-radius:14px;padding:16px 20px;text-align:center;color:var(--text-secondary);font-size:14px}
.dash-banner b{color:var(--primary)}.contact-container{max-width:900px;margin:0 auto;padding:20px}.contact-form-card{background:linear-gradient(160deg,var(--bg-card) 0,var(--bg-tertiary) 100%);padding:32px;border-radius:16px;border:2px solid var(--border);box-shadow:var(--shadow-lg);margin-bottom:32px;position:relative;overflow:hidden}.contact-form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--info),var(--success))}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-submit-btn{width:100%;font-size:16px;padding:14px;margin-top:8px}.contact-success-msg{margin-top:16px;padding:14px 18px;background:rgba(57,255,20,.12);border:1px solid var(--success);border-radius:8px;color:var(--success);font-weight:700;font-size:14px;text-align:center}.contact-direct-info{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:20px}.contact-info-card{background:var(--bg-card);border-radius:12px;padding:22px 28px;min-width:220px;text-align:center;border:1px solid var(--border);transition:all var(--transition-fast);display:flex;flex-direction:column;align-items:center;text-decoration:none;cursor:pointer}.contact-info-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.contact-info-card .contact-info-icon{font-size:32px;margin-bottom:10px;display:flex;align-items:center;justify-content:center}.contact-info-card h3{margin:8px 0;font-size:17px}.contact-info-card .contact-info-link{font-weight:700;font-size:14px}.contact-info-hint{font-size:11px;color:var(--text-muted);margin-top:4px;opacity:.8}.contact-info-email{border-color:var(--info)}.contact-info-email h3{color:var(--info)}.contact-info-email .contact-info-link{color:var(--text-primary)}.contact-info-whatsapp{border-color:#25d366}.contact-info-whatsapp h3{color:#25d366}.contact-info-whatsapp .contact-info-link{color:var(--text-primary)}.response-time{margin-top:24px;text-align:center;color:var(--text-muted);font-size:14px}.faq-section{margin-top:40px}.faq-heading{color:var(--primary);font-size:20px;margin-bottom:18px;text-align:center}.faq-item{background:var(--bg-card);border:2px solid var(--border);border-radius:10px;margin-bottom:12px;overflow:hidden;transition:border-color var(--transition-fast)}.faq-item.open{border-color:var(--primary)}.faq-question{width:100%;text-align:left;background:0 0;border:none;color:var(--text-primary);padding:16px 20px;font-size:15px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:inherit}.faq-question:hover{color:var(--primary)}.faq-icon{flex-shrink:0;font-size:20px;font-weight:800;color:var(--primary);transition:transform var(--transition-fast)}.faq-item.open .faq-icon{transform:rotate(45deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 20px}.faq-item.open .faq-answer{max-height:300px;padding:0 20px 18px}.faq-answer p{color:var(--text-secondary);font-size:14px;line-height:1.6}@media (max-width:600px){.contact-row{grid-template-columns:1fr}}.footer{text-align:center;margin-top:60px;padding:32px 24px;border-top:2px solid var(--border);color:var(--text-muted);background:var(--bg-secondary)}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;max-width:1400px;margin:0 auto}.footer-logo-section{display:flex;align-items:center;gap:12px;flex:1;min-width:200px;justify-content:flex-start}.footer-logo{height:100px;width:auto;border-radius:8px}.footer-brand{font-size:20px;font-weight:800;color:var(--primary)}.footer-center{flex:2;text-align:center}.footer-links{margin-top:12px;font-size:16px}.footer-links a{color:var(--info);text-decoration:none;margin:0 10px;transition:color .3s}.footer-links a:hover{color:var(--primary)}.footer-right{flex:1;text-align:right;min-width:200px}.tagline{font-size:13px;color:var(--text-muted);font-style:italic}.footer p{margin:8px 0;font-size:14px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-box{background:linear-gradient(160deg,var(--bg-card) 0,var(--bg-tertiary) 100%);border:2px solid var(--border);border-radius:16px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:fadeIn .25s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px solid var(--border)}.modal-header h3{color:var(--primary);font-size:19px}.modal-close{background:0 0;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;transition:color var(--transition-fast)}.modal-close:hover{color:var(--danger)}.modal-body{padding:20px 24px 24px}.modal-info-row{background:var(--bg-input);padding:10px 14px;border-radius:8px;font-size:13px;color:var(--text-secondary);margin-bottom:18px;font-weight:600}.modal-body textarea{width:100%;padding:14px 16px;background:var(--bg-input);border:2px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:14px;font-family:inherit;resize:vertical}.modal-body textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,236,185,.2)}.modal-actions{display:flex;gap:12px;margin-top:8px}.modal-actions .btn-primary,.modal-actions .btn-secondary{flex:1;padding:12px;border-radius:8px;border:none;font-weight:700;cursor:pointer;font-size:14px;transition:all var(--transition-fast)}.modal-actions .btn-primary{background:linear-gradient(135deg,var(--success) 0,#00b300 100%);color:#0a0e27}.modal-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 15px rgba(57,255,20,.4)}.modal-actions .btn-secondary{background:var(--bg-input);color:var(--text-secondary);border:2px solid var(--border)}.modal-actions .btn-secondary:hover{background:var(--bg-hover)}@media (max-width:480px){.journal-table td,.journal-table th{font-size:12px;padding:8px 6px}}.toast-notification{position:fixed;top:20px;right:20px;padding:16px 28px;border-radius:10px;color:#fff;font-weight:700;z-index:10000;animation:slideIn .3s ease;box-shadow:var(--shadow-lg);max-width:350px;font-size:14px}@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(400px);opacity:0}}@media (max-width:1024px){.calculator-container{grid-template-columns:1fr}.footer-content{flex-direction:column;text-align:center}.footer-logo-section,.footer-right{justify-content:center;text-align:center}}@media (max-width:768px){.navbar{padding:12px 16px}.logo-text{font-size:22px}.nav-btn{padding:8px 12px;font-size:11px;height:38px}.main-title{font-size:32px}.section-header h2{font-size:24px}.home-cards{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.calc-mode-selector{flex-direction:column}.selection-grid{grid-template-columns:1fr}.quick-stats{grid-template-columns:1fr}.targets-grid{grid-template-columns:1fr}.action-bar{grid-template-columns:1fr}.dash-stats{grid-template-columns:1fr 1fr}.footer-links{font-size:16px}.footer-links a{font-size:16px;margin:0 8px}.footer-logo{height:70px}.input-section,.output-section{padding:20px}}@media (max-width:480px){.dash-stats{grid-template-columns:1fr}.stat-value{font-size:24px}.nav-btn{padding:6px 8px;font-size:10px;height:36px}.logo-text{font-size:18px}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--bg-input) inset!important;box-shadow:0 0 0 1000px var(--bg-input) inset!important;-webkit-text-fill-color:var(--text-primary)!important;caret-color:var(--text-primary)!important;border-color:var(--border)!important;transition:background-color 5000s ease-in-out 0s}input:-webkit-autofill:focus,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bg-hover) inset,0 0 0 3px rgba(0,236,185,.2)!important;box-shadow:0 0 0 1000px var(--bg-hover) inset,0 0 0 3px rgba(0,236,185,.2)!important;border-color:var(--primary)!important}input:-moz-autofill,input:-moz-autofill:focus,input:-moz-autofill:hover{box-shadow:0 0 0 1000px var(--bg-input) inset!important;-moz-text-fill-color:var(--text-primary)!important}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}
/* ---- Journal: sticky filter bar + floating live P&L summary bar ---- */
#journal .filter-bar{position:sticky;top:64px;z-index:20;background:var(--bg-primary);padding-top:8px;padding-bottom:8px}
.journal-summary-bar{position:sticky;bottom:0;left:0;right:0;margin-top:14px;background:linear-gradient(135deg,var(--bg-card) 0,var(--bg-tertiary) 100%);border:2px solid var(--primary);border-radius:14px;padding:14px 20px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;box-shadow:0 -6px 20px rgba(0,0,0,.35);z-index:15}
.journal-summary-bar .js-title{font-weight:800;color:var(--primary);font-size:13px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.journal-summary-bar .js-items{display:flex;flex-wrap:wrap;gap:22px}
.journal-summary-bar .js-item{text-align:center;min-width:78px}
.journal-summary-bar .js-item .js-val{font-size:16px;font-weight:800}
.journal-summary-bar .js-item .js-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}
@media(max-width:768px){.journal-summary-bar{position:sticky;justify-content:center;text-align:center;border-radius:0;border-left:none;border-right:none;bottom:0}#journal .filter-bar{top:0}}


/* =====================================================
   MOBILE RESPONSIVE FIXES — Complete Overhaul
   ===================================================== */

/* --- NAVBAR: center everything on mobile --- */
@media (max-width: 640px) {
  .navbar {
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
  }
  .logo-section {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .nav-btn {
    padding: 6px 10px;
    font-size: 10.5px;
    height: 34px;
    flex: 0 0 auto;
  }
  .user-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}

/* --- HOME PAGE: center-align all buttons --- */
@media (max-width: 640px) {
  .home-hero {
    padding: 18px 14px 16px;
    margin: 6px auto 18px;
    border-radius: 12px;
  }
  .home-hero-title {
    font-size: 20px;
    line-height: 1.3;
  }
  .home-hero-sub {
    font-size: 13px;
  }
  .home-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  .home-card {
    min-height: 150px;
    padding: 18px 16px;
    text-align: center;
  }
  .card-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
  .home-card h3 {
    font-size: 16px;
  }
  .home-card p {
    font-size: 12px;
  }
}

/* --- JOURNAL PAGE: summary bar stays visible while scrolling the table, but scrolls away normally so the site footer below it is never covered --- */
@media (max-width: 768px) {
  .journal-summary-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 8px 16px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--bg-secondary);
    border-top: 2px solid var(--primary);
  }
  .journal-container {
    max-height: calc(100vh - 280px);
    overflow-x: auto;
    overflow-y: auto;
  }
  /* Journal filter bar */
  .filter-bar {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
  }
  .filter-btn {
    padding: 7px 14px;
    font-size: 12px;
  }
  /* Journal market filter row */
  .journal-filter-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  #marketFilterSelect,
  #tradeTypeFilterSelect,
  #currencyFilterSelect {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* --- FOOTER: always show all links --- */
@media (max-width: 768px) {
  .footer {
    margin-top: 30px;
    padding: 24px 16px 70px; /* bottom padding for fixed bar */
  }
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .footer-logo-section {
    justify-content: center;
  }
  .footer-logo {
    height: 60px;
  }
  .footer-center {
    text-align: center;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    font-size: 13px;
    line-height: 2;
  }
  .footer-links a {
    font-size: 13px;
    margin: 0 6px;
    color: var(--info);
    white-space: nowrap;
  }
  .footer-right {
    text-align: center;
    min-width: unset;
  }
}

/* --- JOURNAL HINT / BACKUP BAR: stack on mobile --- */
@media (max-width: 600px) {
  .journal-hint[style*="Triple Backup"] > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .journal-hint[style*="Triple Backup"] .backup-btns-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 3-column backup status grid → 1 column */
  .journal-hint[style*="Triple Backup"] > div:nth-child(2) {
    grid-template-columns: 1fr;
  }
}

/* --- CALCULATOR: stack on mobile --- */
@media (max-width: 768px) {
  .calculator-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .calc-mode-selector {
    flex-direction: column;
    gap: 10px;
  }
  .mode-btn {
    padding: 12px 20px;
    font-size: 14px;
  }
  .quick-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .targets-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .action-bar {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .input-section,
  .output-section {
    padding: 18px 16px;
    border-radius: 12px;
  }
}

/* --- EXTRA SMALL: 380px and below --- */
@media (max-width: 420px) {
  .nav-btn {
    padding: 5px 8px;
    font-size: 10px;
    height: 32px;
    gap: 4px;
  }
  .logo-text {
    font-size: 18px;
  }
  .targets-grid {
    grid-template-columns: 1fr;
  }
  .quick-stats {
    grid-template-columns: 1fr;
  }
  .action-bar {
    grid-template-columns: 1fr;
  }
  .filter-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .page {
    padding: 14px 12px;
  }
  .main-title {
    font-size: 24px;
  }
  .footer-links a {
    font-size: 12px;
    margin: 0 4px;
  }
}

/* --- SETTINGS --- */
@media (max-width: 640px) {
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .settings-card {
    padding: 20px 16px;
  }
}

/* --- DASHBOARD --- */
@media (max-width: 640px) {
  .dash-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .health-score-card {
    flex-direction: column;
    text-align: center;
  }
}

/* --- CONTACT --- */
@media (max-width: 600px) {
  .contact-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-direct-info {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .contact-info-card {
    min-width: unset;
    padding: 18px 20px;
  }
}