:root{
    --line-balance:#A6721F;
    --line-goal:#3F6FB0;
    --bg:#F5F6F8;
    --panel:#FFFFFF;
    --panel-2:#ECEEF2;
    --border:#DBDFE6;
    --text:#1B1F27;
    --text-dim:#5B6270;
    --text-faint:#8A909C;
    --accent:#A6721F;
    --accent-strong:#8A5E19;
    --accent-bg:#F3E6D2;
    --win:#1F8F5F;
    --win-bg:#E1F4EB;
    --loss:#C0392B;
    --loss-bg:#FBE7E4;
    --be:#5B6270;
    --be-bg:#E9EBEF;
    --open:#A6721F;
    --open-bg:#F3E6D2;
    --shadow: 0 1px 2px rgba(20,24,32,.06), 0 8px 24px -12px rgba(20,24,32,.18);
    --radius: 12px;
    --font-display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --font-body:'Work Sans', system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --line-balance:#B07D30;
      --line-goal:#5B87C7;
      --bg:#10131A;
      --panel:#181C25;
      --panel-2:#1F2430;
      --border:#2B303C;
      --text:#EDEFF3;
      --text-dim:#A2A9B6;
      --text-faint:#6E7482;
      --accent:#E3AC5C;
      --accent-strong:#F1C989;
      --accent-bg:rgba(227,172,92,.14);
      --win:#4ADE80;
      --win-bg:rgba(74,222,128,.13);
      --loss:#F87171;
      --loss-bg:rgba(248,113,113,.13);
      --be:#A2A9B6;
      --be-bg:rgba(162,169,182,.13);
      --open:#E3AC5C;
      --open-bg:rgba(227,172,92,.14);
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --line-balance:#B07D30;
    --line-goal:#5B87C7;
    --bg:#10131A;
    --panel:#181C25;
    --panel-2:#1F2430;
    --border:#2B303C;
    --text:#EDEFF3;
    --text-dim:#A2A9B6;
    --text-faint:#6E7482;
    --accent:#E3AC5C;
    --accent-strong:#F1C989;
    --accent-bg:rgba(227,172,92,.14);
    --win:#4ADE80;
    --win-bg:rgba(74,222,128,.13);
    --loss:#F87171;
    --loss-bg:rgba(248,113,113,.13);
    --be:#A2A9B6;
    --be-bg:rgba(162,169,182,.13);
    --open:#E3AC5C;
    --open-bg:rgba(227,172,92,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    margin:0;
    padding:24px clamp(16px,4vw,40px) 64px;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent);}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:.01em; text-wrap:balance; margin:0;}
  ::selection{background:var(--accent-bg);}

  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap; margin-bottom:22px;
  }
  .brand{display:flex; align-items:center; gap:14px;}
  .brand-mark{
    width:44px;height:44px;border-radius:10px;
    background:linear-gradient(160deg, var(--accent), var(--accent-strong));
    color:#1B1206; font-family:var(--font-display); font-weight:800; font-size:19px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .brand h1{font-size:28px; line-height:1;}
  .brand p{margin:4px 0 0; color:var(--text-dim); font-size:13.5px;}

  .btn{
    font-family:var(--font-body); font-weight:600; font-size:14px;
    border-radius:9px; border:1px solid var(--border); background:var(--panel);
    color:var(--text); padding:10px 16px; cursor:pointer; transition:.15s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn:hover{border-color:var(--accent); color:var(--accent-strong);}
  .btn-primary{
    background:var(--accent); border-color:var(--accent); color:#1B1206;
  }
  .btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:#1B1206;}
  .btn-ghost{background:transparent; border-color:transparent;}
  .btn-danger{border-color:var(--loss); color:var(--loss); background:transparent;}
  .btn-danger:hover{background:var(--loss-bg);}
  .btn-sm{padding:7px 12px; font-size:13px;}
  .btn:disabled{opacity:.5; cursor:not-allowed;}

  .stats{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px; margin-bottom:20px;
  }
  .stat-tile{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px;
  }
  .stat-tile .label{font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
  .stat-tile .value{font-family:var(--font-mono); font-size:26px; font-weight:600; margin-top:6px; font-variant-numeric:tabular-nums;}
  .stat-tile .sub{font-size:12.5px; color:var(--text-dim); margin-top:2px;}

  .filters{
    position:sticky; top:0; z-index:5; background:var(--bg);
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    padding:12px 0; border-bottom:1px solid var(--border); margin-bottom:20px;
  }
  .filters input[type="search"], .filters select{
    font-family:var(--font-body); font-size:13.5px; padding:9px 12px;
    border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text);
  }
  .filters input[type="search"]{min-width:200px; flex:1 1 200px;}
  .tag-filter-row{display:flex; flex-wrap:wrap; gap:6px; width:100%;}
  .chip{
    font-size:12.5px; padding:5px 11px; border-radius:100px; border:1px solid var(--border);
    background:var(--panel); color:var(--text-dim); cursor:pointer; user-select:none;
    transition:.12s ease; white-space:nowrap;
  }
  .chip:hover{border-color:var(--accent);}
  .chip.active{background:var(--accent-bg); border-color:var(--accent); color:var(--accent-strong); font-weight:600;}
  .chip.tiny{font-size:11px; padding:3px 9px;}

  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); gap:16px;
  }
  .card{
    position:relative;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; cursor:pointer; box-shadow:var(--shadow); display:flex; flex-direction:column;
    transition:transform .12s ease, border-color .12s ease;
  }
  .card:hover{transform:translateY(-2px); border-color:var(--accent);}
  .card::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--border); z-index:1;
  }
  .card.result-win::before{background:var(--win);}
  .card.result-loss::before{background:var(--loss);}
  .card.result-open::before{background:var(--open);}
  .card.result-breakeven::before{background:var(--be);}
  .card-thumb{
    height:150px; background:var(--panel-2); display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative;
  }
  .card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .card-thumb .noshot{color:var(--text-faint); font-size:12.5px; text-align:center; padding:0 12px;}
  .result-pill{
    position:absolute; top:8px; right:8px; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; padding:4px 9px; border-radius:100px;
  }
  .result-win{background:var(--win-bg); color:var(--win);}
  .result-loss{background:var(--loss-bg); color:var(--loss);}
  .result-breakeven{background:var(--be-bg); color:var(--be);}
  .result-open{background:var(--open-bg); color:var(--open);}
  select.result-pill{
    border:none; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    cursor:pointer; font-family:inherit; outline:none;
    padding-right:22px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='7'><path d='M0 0L4.5 6L9 0Z' fill='currentColor'/></svg>");
    background-repeat:no-repeat;
    background-position:right 8px center;
    background-size:9px 6px;
  }
  select.result-pill:hover{filter:brightness(0.95);}
  select.result-pill:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .card-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .card-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .card-instrument{font-family:var(--font-mono); font-weight:600; font-size:15px;}
  .card-date{font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
  .card-meta{font-size:12px; color:var(--text-dim); display:flex; gap:6px; flex-wrap:wrap;}
  .dir-badge{font-weight:600;}
  .dir-long{color:var(--win);}
  .dir-short{color:var(--loss);}
  .card-caption{font-size:13px; color:var(--text-dim); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .card-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:auto;}

  .empty-state{
    text-align:center; padding:70px 20px; color:var(--text-dim);
  }
  .empty-state h2{font-size:22px; margin-bottom:8px;}
  .empty-state p{max-width:420px; margin:0 auto 18px; font-size:14px; line-height:1.5;}

  .overlay{
    position:fixed; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(2px);
    display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px;
    z-index:50; overflow-y:auto;
  }
  .modal{
    background:var(--panel); border:1px solid var(--border); border-radius:16px;
    width:100%; max-width:640px; box-shadow:var(--shadow); padding:26px 26px 24px;
    margin-bottom:5vh;
  }
  .modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px;}
  .modal-head h2{font-size:22px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
  .field .hint{font-size:12px; color:var(--text-faint); font-weight:400; text-transform:none; letter-spacing:0; display:block; margin-top:3px;}
  .field input[type="text"], .field input[type="date"], .field input[type="number"],
  .field select, .field textarea{
    width:100%; font-family:var(--font-body); font-size:14px; padding:10px 12px;
    border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text);
  }
  .field textarea{resize:vertical; min-height:64px; line-height:1.5; font-family:var(--font-body);}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  @media (max-width:520px){ .row2, .row3{grid-template-columns:1fr;} }

  .dropzone{
    border:1.5px dashed var(--border); border-radius:10px; padding:18px; text-align:center;
    background:var(--bg); cursor:pointer; transition:.12s ease; position:relative;
  }
  .dropzone.drag{border-color:var(--accent); background:var(--accent-bg);}
  .dropzone p{margin:0; font-size:13px; color:var(--text-dim);}
  .dropzone .sub{font-size:11.5px; color:var(--text-faint); margin-top:3px;}
  .shot-preview{position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--border);}
  .shot-preview img{width:100%; max-height:280px; object-fit:contain; background:var(--panel-2); display:block;}
  .shot-preview button{
    position:absolute; top:8px; right:8px; background:rgba(15,17,22,.72); color:#fff; border:none;
    border-radius:100px; width:28px; height:28px; cursor:pointer; font-size:14px; line-height:1;
  }

  .post-analysis-field{
    margin-top:22px; padding-top:18px; border-top:1px dashed var(--border);
  }
  .post-analysis-field > label{color:var(--accent-strong);}
  .tagpicker{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
  .tag-add-row{display:flex; gap:8px;}
  .tag-add-row input{flex:1;}

  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border);}

  .detail-shot{width:100%; border-radius:10px; border:1px solid var(--border); display:block; margin-bottom:18px; background:var(--panel-2);}
  .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:18px;}
  .detail-item .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; margin-bottom:3px;}
  .detail-item .v{font-size:14px; line-height:1.5;}
  .detail-item .v.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
  .detail-block{margin-bottom:16px;}
  .detail-block .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; margin-bottom:5px;}
  .detail-block .v{font-size:14.5px; line-height:1.6; white-space:pre-wrap;}

  .banner{
    background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent-strong);
    border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:18px; display:none;
  }
  .banner.show{display:block;}

  .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  button:focus-visible, .chip:focus-visible, .card:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  [hidden]{display:none!important;}
  img{max-width:100%;}
  .header-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .banner{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .banner p{margin:0; flex:1 1 240px; line-height:1.45;}
  .banner .btn{padding:7px 12px; font-size:13px;}
  .warning{background:var(--loss-bg); border:1px solid var(--loss); color:var(--loss); border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:18px;}
  .no-results{grid-column:1/-1; text-align:center; color:var(--text-faint); padding:40px 0;}
  .post-block{margin-top:20px; padding-top:16px; border-top:1px dashed var(--border);}
  .site-footer{margin-top:48px; padding-top:18px; border-top:1px solid var(--border); color:var(--text-faint); font-size:12.5px; line-height:1.55; max-width:720px;}
  .backup-section{padding:14px 0; border-top:1px solid var(--border);}
  .backup-section:first-of-type{border-top:none; padding-top:0;}
  .backup-section h3{font-size:18px; margin-bottom:6px;}
  .backup-section p{margin:0 0 12px; color:var(--text-dim); font-size:14px; line-height:1.5;}
  .backup-info{font-size:13px; color:var(--text-faint); margin-bottom:16px;}
  .notice{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--win); color:#fff; padding:10px 18px; border-radius:8px; font:14px var(--font-body); z-index:100000; box-shadow:0 4px 16px rgba(0,0,0,.3); max-width:min(90vw,520px); text-align:center;}
  .notice-error{background:var(--loss);}
  @media (max-width:520px){ .brand h1{font-size:24px;} .header-actions{width:100%;} .header-actions .btn{flex:1; justify-content:center;} }
  .banner.show{display:flex;}

  .coach-toggle{display:flex!important; align-items:center; gap:10px; font-size:14px!important; font-weight:600; color:var(--text)!important; text-transform:none!important; letter-spacing:0!important; cursor:pointer; margin:0 0 4px;}
  .coach-toggle input, .coach-filter input{width:18px; height:18px; accent-color:var(--accent); cursor:pointer; margin:0;}
  .detail-modal-toggle{margin-top:4px;}
  .coach-filter{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); cursor:pointer; white-space:nowrap;}
  .coach-filter:has(input:checked){border-color:var(--accent); background:var(--accent-bg); color:var(--accent-strong); font-weight:600;}
  .coach-badge{display:inline-block; font-size:11.5px; font-weight:600; color:var(--accent-strong); background:var(--accent-bg); border:1px solid var(--accent); border-radius:100px; padding:2px 9px;}

  /* tabs */
  .tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px;}
  .tab{font:600 15px var(--font-body); background:none; border:none; color:var(--text-dim); padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--accent-strong); border-bottom-color:var(--accent);}
  .tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  /* amounts */
  .pos{color:var(--win)!important;}
  .neg{color:var(--loss)!important;}
  .card-pnl{font-family:var(--font-mono); font-weight:600; font-size:14px; font-variant-numeric:tabular-nums;}
  .pnl-share{display:block; font-family:var(--font-body); font-size:12px; color:var(--text-faint); font-weight:400;}
  .stat-tile .value{overflow-wrap:anywhere;}

  /* overview */
  .panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; margin-bottom:16px;}
  .panel-head{margin-bottom:14px;}
  .panel-head h2{font-size:22px;}
  .panel-head p{margin:4px 0 0; color:var(--text-dim); font-size:13.5px; line-height:1.45;}
  .panel-head-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 16px; align-items:start;}
  .settings-grid .field{margin-bottom:10px;}
  .settings-grid input[type="text"], .settings-grid input[type="date"], .settings-grid select{
    width:100%; font-family:var(--font-body); font-size:14px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text);}
  .settings-grid label:not(.coach-toggle){display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
  .settings-grid .hint{font-size:12px; color:var(--text-faint); display:block; margin-top:4px;}
  .goal-toggle-field{padding-top:24px;}
  .goal-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .ov-note{font-size:13px; color:var(--text-dim); margin:-6px 0 16px;}

  .chart{position:relative; min-height:120px;}
  .chart svg{display:block; overflow:visible;}
  .chart .grid{stroke:var(--border); stroke-width:1;}
  .chart .zero{stroke:var(--text-faint); stroke-width:1;}
  .chart .axis{fill:var(--text-faint); font:11.5px var(--font-body); font-variant-numeric:tabular-nums;}
  .chart .direct{fill:var(--text-dim); font:600 12px var(--font-body);}
  .chart .line-balance{fill:none; stroke:var(--line-balance); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
  .chart .line-goal{fill:none; stroke:var(--line-goal); stroke-width:2; stroke-dasharray:6 4; stroke-linecap:round;}
  .chart .crosshair{stroke:var(--text-faint); stroke-width:1;}
  .chart .dot{stroke:var(--panel); stroke-width:2;}
  .chart .dot-balance{fill:var(--line-balance);}
  .chart .dot-goal{fill:var(--line-goal);}
  .chart-empty{color:var(--text-faint); font-size:14px; text-align:center; padding:36px 12px;}
  .chart-tip{position:absolute; top:8px; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:10px 12px; font-size:13px; pointer-events:none; min-width:190px; z-index:2;}
  .tip-date{font-weight:600; margin-bottom:6px; color:var(--text);}
  .tip-row{display:flex; align-items:center; gap:8px; color:var(--text-dim); margin-top:3px;}
  .tip-row b{margin-left:auto; font-family:var(--font-mono); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;}
  .tip-row.muted{font-size:12px;}
  .chart-legend{display:flex; gap:16px; font-size:13px; color:var(--text-dim);}
  .lg{display:inline-flex; align-items:center; gap:6px;}
  .lg-line{display:inline-block; width:18px; height:0; border-top:2px solid var(--line-balance);}
  .lg-line.lg-goal{border-top:2px dashed var(--line-goal);}

  .segmented{display:inline-flex; border:1px solid var(--border); border-radius:9px; padding:3px; background:var(--bg);}
  .segmented button{font:600 13px var(--font-body); border:none; background:none; color:var(--text-dim); padding:6px 14px; border-radius:6px; cursor:pointer;}
  .segmented button.active{background:var(--panel); color:var(--accent-strong); box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .table-wrap{overflow-x:auto; margin:0 -4px;}
  .table-wrap table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .table-wrap th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
  .table-wrap td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
  .table-wrap tr:last-child td{border-bottom:none;}
  .table-wrap .num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .sub-label{display:block; font-size:12px; color:var(--text-faint);}

  .cf-form{display:grid; grid-template-columns:150px 120px 1fr 1.4fr auto; gap:8px; margin-bottom:12px;}
  .cf-form input, .cf-form select{font-family:var(--font-body); font-size:14px; padding:9px 11px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); min-width:0;}
  @media (max-width:720px){ .cf-form{grid-template-columns:1fr 1fr;} .cf-form #cf_note{grid-column:1/-1;} .cf-form .btn{grid-column:1/-1; justify-content:center;} }
  .cf-list{list-style:none; margin:0; padding:0;}
  .cf-list li{display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--border); font-size:14px;}
  .cf-date{font-family:var(--font-mono); color:var(--text-faint); font-size:13px;}
  .cf-note{flex:1; color:var(--text-dim);}
  .cf-amount{font-family:var(--font-mono); font-weight:600;}
  .cf-empty{color:var(--text-faint); justify-content:center;}
  @media (max-width:520px){
    .stat-tile .value{font-size:20px;}
    .panel{padding:16px 14px 14px;}
    .table-wrap table{font-size:12.5px;}
    .table-wrap::after{content:"Veeg opzij voor saldo en doel"; display:block; font-size:11.5px; color:var(--text-faint); padding:8px 4px 0;}
  }

  /* trades table */
  .table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
  .table-count{font-size:13px; color:var(--text-dim);}
  .trades-table{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); margin:0;}
  .trades-table table{min-width:1180px;}
  .trades-table th{position:sticky; top:0; background:var(--panel); z-index:1;}
  .trades-table th:first-child, .trades-table td:first-child{padding-left:16px;}
  .th-sort{all:unset; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;}
  .th-sort:hover, .th-sort.active{color:var(--accent-strong);}
  .th-sort:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
  .t-row{cursor:pointer;}
  .t-row:hover td{background:var(--panel-2);}
  .t-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .t-row td:first-child{box-shadow:inset 4px 0 0 var(--border);}
  .t-row.row-win td:first-child{box-shadow:inset 4px 0 0 var(--win);}
  .t-row.row-loss td:first-child{box-shadow:inset 4px 0 0 var(--loss);}
  .t-row.row-open td:first-child{box-shadow:inset 4px 0 0 var(--open);}
  .t-row.row-breakeven td:first-child{box-shadow:inset 4px 0 0 var(--be);}
  .trades-table td{vertical-align:middle;}
  .trades-table .result-pill{position:static;}
  .t-instr{font-family:var(--font-mono); font-weight:600; white-space:nowrap;}
  .t-tags{min-width:180px;}
  .t-tags .chip{margin:1px 0;}
  .trades-table .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
  .nowrap{white-space:nowrap;}
  .center{text-align:center!important;}
  .muted{color:var(--text-faint);}
  .trades-table tfoot td{font-weight:600; border-top:1px solid var(--border); border-bottom:none; background:var(--panel-2); font-size:13px;}
  .trades-table tfoot td.muted{font-weight:400;}
  @media (max-width:520px){ .trades-table::after{content:"Veeg opzij voor meer kolommen";} }

  .header-actions a.btn{text-decoration:none;}
  .empty-help{margin-top:16px!important; font-size:13.5px!important;}
  .site-footer a{color:var(--accent);}
  @media (max-width:520px){
    .header-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
    .header-actions #newEntryBtn{grid-column:1/-1; order:-1;}
    .header-actions .btn{white-space:nowrap;}
    .header-actions a.btn-ghost{border-color:var(--border);}
  }

  .discard-bar{background:var(--loss-bg); border:1px solid var(--loss); border-radius:10px; padding:12px 14px; margin:-4px 0 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .discard-bar[hidden]{display:none;}
  .discard-bar p{margin:0; flex:1 1 220px; font-size:14px; color:var(--text); line-height:1.45;}
  .discard-actions{display:flex; gap:8px;}

  /* calculator */
  .calc-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:start;}
  @media (max-width:820px){ .calc-grid{grid-template-columns:1fr;} }
  .calc-sub{font-size:17px; margin:18px 0 10px; color:var(--text);}
  .calc-sub:first-of-type{margin-top:4px;}
  #calcView .field label{display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
  #calcView input[type="text"]{width:100%; font-family:var(--font-mono); font-size:15px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); min-width:0;}
  #calcView input.invalid{border-color:var(--loss); background:var(--loss-bg);}
  #calcView input:focus{outline:2px solid var(--accent); outline-offset:1px;}
  .hint-inline{text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-faint);}
  .input-with-btn{display:flex; gap:8px;}
  .input-with-btn .btn{white-space:nowrap;}
  .input-suffix{position:relative; margin-top:8px;}
  .input-suffix input{padding-right:34px!important;}
  .input-suffix span{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-family:var(--font-mono); pointer-events:none;}
  .row2 .input-suffix{margin-top:0;}
  .risk-presets{display:flex; width:100%;}
  .risk-presets button{flex:1;}
  .calc-results{position:sticky; top:16px;}
  @media (max-width:820px){ .calc-results{position:static;} }
  .calc-empty{color:var(--text-faint); font-size:14px; padding:28px 0; text-align:center;}
  .calc-hero{background:var(--accent-bg); border:1px solid var(--accent); border-radius:10px; padding:14px 16px; margin-bottom:14px;}
  .calc-hero .label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--accent-strong);}
  .calc-hero .value{font-family:var(--font-mono); font-size:28px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  .calc-hero .sub{font-size:13px; color:var(--text-dim); margin-top:2px; font-family:var(--font-mono);}
  .calc-list{margin:0 0 14px;}
  .calc-list > div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border);}
  .calc-list > div[hidden]{display:none;}
  .calc-list dt{color:var(--text-dim); font-size:14px;}
  .calc-list dd{margin:0; font-family:var(--font-mono); font-weight:600; font-size:14px; text-align:right; font-variant-numeric:tabular-nums;}
  .dir-pill{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:100px;}
  .dir-pill.dir-long{background:var(--win-bg); color:var(--win);}
  .dir-pill.dir-short{background:var(--loss-bg); color:var(--loss);}
  .lvl{font-family:var(--font-body); font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px;}
  .lvl-low{background:var(--win-bg); color:var(--win);}
  .lvl-mid{background:var(--be-bg); color:var(--text);}
  .lvl-high{background:var(--open-bg); color:var(--accent-strong);}
  .lvl-danger{background:var(--loss-bg); color:var(--loss);}
  .calc-warn{background:var(--loss-bg); border:1px solid var(--loss); border-radius:10px; padding:10px 14px; margin-bottom:14px;}
  .calc-warn p{margin:0; font-size:13.5px; line-height:1.5; color:var(--text);}
  .calc-warn p + p{margin-top:6px;}
  #c_toTrade{width:100%; justify-content:center;}
  .calc-note{font-size:12px; color:var(--text-faint); margin:12px 0 0; line-height:1.5;}

  .calc-hint{display:block; font-size:12px; color:var(--text-faint); margin-top:5px; line-height:1.4;}

  .dt-sub{display:block; font-size:11.5px; color:var(--text-faint); margin-top:2px;}
  .liq-row dt{max-width:60%;}

  .calc-explain{border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:14px; background:var(--bg);}
  .calc-explain summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--accent-strong);}
  .calc-explain p{font-size:13.5px; line-height:1.55; color:var(--text-dim); margin:8px 0 0;}

  #calcView input.text-input{font-family:var(--font-body); text-transform:uppercase;}
  #calcView input.text-input::placeholder{text-transform:none;}

  .mode-switch{display:flex; width:100%;}
  .mode-switch button{flex:1;}
  #calcView .field[hidden]{display:none;}

  /* ---------- Opties Journal: range tab ---------- */
  .range-status{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);}
  .range-status p{margin:0; font-size:14px; color:var(--text-dim);}
  .range-status b{color:var(--text);}
  .range-status .sub-label{display:block; font-size:12.5px; color:var(--text-faint); margin-top:2px;}
  .range-status .warn-text{color:var(--loss);}
  .range-row{cursor:pointer;}
  .range-row.is-active td{background:var(--accent-bg);}
  .range-row.is-active .t-instr{color:var(--accent-strong);}
  .row-skip td{color:var(--text-faint);}
  .range-legend{margin:-4px 0 10px;}
  .lg-bar{display:inline-block; width:10px; height:12px; border-radius:3px 3px 0 0; background:var(--line-goal); vertical-align:-1px;}
  .lg-line.lg-avg{border-top:2px solid var(--line-balance);}
  .chart .bar{fill:var(--line-goal); opacity:.85;}
  .chart .line-halo{fill:none; stroke:var(--panel); stroke-width:6; stroke-linejoin:round; stroke-linecap:round;}
  .chart .line-avg{fill:none; stroke:var(--line-balance); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
  .chart .dot-avg{fill:var(--line-balance);}
  .chart .skip-mark{fill:var(--text-faint); font:600 12px var(--font-body);}
  .range-hint{color:var(--accent-strong); font-weight:500;}
  /* Direction is not good or bad here (writing an option is the normal case), so keep it neutral. */
  .dir-badge.dir-long, .dir-badge.dir-short{color:var(--text);}
  @media (max-width:520px){ #rangeView .table-wrap::after{content:"Veeg opzij voor meer kolommen";} }
  .fee-fields{grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px 16px; border-top:1px solid var(--border); padding-top:12px; margin-top:4px;}