:root{color-scheme:dark;--bg:#050505;--surface:#0b0b0b;--surface-2:#111;--surface-3:#171717;--border-gold:rgba(218,163,45,.42);--text:#f7f7f7;--muted:#a9a9a9;--gold:#e6ae3d;--gold-light:#ffd56a;--input-bg:#111;--track:#34302a;--shadow:rgba(0,0,0,.45);--radius:18px}
html[data-theme=light]{color-scheme:light;--bg:#f6f6f4;--surface:#fff;--surface-2:#fff;--surface-3:#fafafa;--border-gold:rgba(190,132,20,.42);--text:#171717;--muted:#666;--gold:#d79a24;--gold-light:#f3c34f;--input-bg:#fff;--track:#e6e4e0;--shadow:rgba(0,0,0,.08)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(230,174,61,.055),transparent 35%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}
.app-shell{min-height:100vh;display:flex;justify-content:center;padding:32px 20px 42px}.calculator{width:min(100%,980px);background:var(--surface);border:1px solid var(--gold);border-radius:22px;box-shadow:0 25px 80px var(--shadow);padding:24px}
.section-header{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;align-items:center;text-decoration:none}.brand-logo{width:190px;height:auto;max-height:106px;object-fit:contain;display:block}.header-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.segmented{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--border-gold);background:var(--surface-2);border-radius:13px}.segment{min-width:72px;height:42px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;font-weight:700}.segment.active{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#16100a;box-shadow:0 4px 18px rgba(230,174,61,.18)}.theme-switch .segment{min-width:50px;font-size:19px;padding:0 10px}
/* cohesive form */
.trade-form{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-gold);border-radius:22px;background:linear-gradient(145deg,rgba(230,174,61,.035),transparent 38%),var(--surface-2);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.form-row{display:grid;grid-template-columns:1fr 1fr}.form-row-top{border-bottom:1px solid var(--border-gold)}
.field{min-width:0;padding:24px}.field label{display:block;margin-bottom:10px;color:var(--text);font-size:14px;font-weight:750;letter-spacing:-.01em}.field-hint{margin:7px 1px 0;color:var(--muted);font-size:11px;line-height:1.4}
.position-section{padding:22px 24px;border-bottom:1px solid var(--border-gold);background:rgba(230,174,61,.018)}.section-heading,.results-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.section-heading{margin-bottom:14px}.section-heading h2,.results-heading h2{margin:0;font-size:16px;letter-spacing:-.01em}.section-heading output{color:var(--gold);font-size:13px;font-weight:800}
.direction-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:66px;padding:5px;border:1px solid var(--border-gold);border-radius:14px;background:var(--input-bg)}
.direction-btn{border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-weight:800;font-size:15px;transition:.18s ease}.direction-btn.active{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#17110a;box-shadow:0 4px 14px rgba(230,174,61,.14)}
.form-row-controls{border-bottom:1px solid var(--border-gold)}.control-card{min-width:0;padding:21px 24px;background:var(--surface-2)}.control-card .label-row{margin-bottom:13px}.control-card label{display:block;margin-top:3px;color:var(--text);font-size:14px;font-weight:750}.control-card output{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:32px;padding:0 11px;border-radius:10px;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#17110a;font-size:13px;font-weight:850}
.form-row-prices{}.field-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.field-title label{margin:0}.field-badge{display:inline-flex;align-items:center;height:23px;padding:0 8px;border:1px solid var(--border-gold);border-radius:7px;color:var(--gold);font-size:9px;font-weight:850;letter-spacing:.1em}
.input-wrap{position:relative;display:flex;align-items:center;min-height:54px;border:1px solid rgba(230,174,61,.36);border-radius:12px;background:var(--input-bg)}.input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(230,174,61,.1)}.input-wrap input{width:100%;height:52px;min-width:0;padding:0 15px;border:0;outline:0;background:transparent;color:var(--text);font-size:18px;font-weight:600}.money-wrap .input-prefix{padding-left:15px;color:var(--muted);font-size:17px;font-weight:700}.money-wrap input{padding-left:8px}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.label-row label{margin:0}input[type=range]{width:100%;height:7px;margin:0;appearance:none;-webkit-appearance:none;background:var(--track);border-radius:999px;outline:none;accent-color:var(--gold)}input[type=range]::-webkit-slider-thumb{width:22px;height:22px;appearance:none;-webkit-appearance:none;border:2px solid var(--gold-light);border-radius:50%;background:var(--gold);cursor:pointer}input[type=range]::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--gold-light);border-radius:50%;background:var(--gold);cursor:pointer}.range-labels{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:13px}
.currency-note{margin:11px 3px 0;color:var(--muted);font-size:12px;line-height:1.5}.results{margin-top:20px;padding:22px;border:1px solid var(--border-gold);border-radius:var(--radius);background:radial-gradient(circle at 50% 0%,rgba(230,174,61,.035),transparent 55%),var(--surface-2)}.results h2{margin:2px 0 0;color:var(--gold-light);font-size:24px;letter-spacing:-.02em}html[data-theme=light] .results h2{color:#bd8115}
.result-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.result-card{min-height:108px;display:flex;align-items:center;gap:14px;grid-column:span 2;padding:18px;border:1px solid var(--border-gold);border-radius:15px;background:var(--surface-3)}.result-card-wide{grid-column:span 3}.result-icon{flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold)}.result-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.result-label{display:block;margin-bottom:7px;color:var(--muted);font-size:13px;font-weight:600}.result-card strong{display:block;color:var(--text);font-size:21px;line-height:1.15;overflow-wrap:anywhere}.result-card strong.negative{color:#d86a6a}
.loss-note{margin:15px 4px 0;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}.loss-note strong{color:var(--gold-light);font-weight:700}html[data-theme=light] .loss-note strong{color:#a86f0d}
.calculate-btn{width:100%;min-height:58px;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:24px;border:1px solid rgba(255,215,116,.7);border-radius:14px;background:linear-gradient(180deg,#f2c65b,#d99d28);color:#16100a;box-shadow:0 10px 28px rgba(214,154,35,.18);cursor:pointer;font-weight:800}.calculator-icon{width:23px;height:23px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.calculate-btn:hover{transform:translateY(-1px);box-shadow:0 13px 34px rgba(214,154,35,.25)}
.error-message{margin-top:12px;padding:12px 14px;border:1px solid rgba(210,65,65,.35);border-radius:10px;background:rgba(210,65,65,.08);color:#ef8585;font-size:13px}.footer{padding-top:19px;color:var(--muted);text-align:center;font-size:10px;font-weight:700;letter-spacing:.24em}.footer span{color:var(--gold);padding:0 5px}
@media(max-width:760px){
  .app-shell{padding:12px}
  .calculator{padding:14px;border-radius:18px}
  .section-header{min-height:92px;align-items:flex-start}
  .brand-logo{width:142px;max-height:82px}
  .header-controls{flex-direction:column;align-items:stretch;gap:7px}
  .header-controls .segmented{width:100%}
  .theme-switch{align-self:flex-end}

  .form-row{grid-template-columns:1fr}
  .form-row-top{border-bottom:1px solid var(--border-gold)}
  .form-row-top .field:first-child{border-bottom:1px solid var(--border-gold)}

  .position-section{padding:20px 18px}

  .form-row-controls{grid-template-columns:1fr;border-bottom:1px solid var(--border-gold)}
  .form-row-prices{grid-template-columns:1fr}
  .form-row-prices .field:first-child{border-bottom:1px solid var(--border-gold)}

  .field{padding:19px 18px}
  .direction-btn{padding:10px}
  .result-grid{grid-template-columns:1fr}
  .result-card,.result-card-wide{grid-column:auto;min-height:92px}
  .results{padding:16px}
}
@media(max-width:420px){.section-heading h2,.results-heading h2{font-size:16px}.section-header{gap:10px}.brand-logo{width:126px;max-height:74px}.segment{min-width:61px;padding:0 9px;font-size:13px}.theme-switch .segment{min-width:44px}.field{padding:16px}.result-card{padding:15px}.result-card strong{font-size:18px}.calculate-btn{gap:14px;font-size:14px}}

.direction-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:54px;padding:4px;border:1px solid rgba(230,174,61,.36);border-radius:12px;background:var(--input-bg)}
.direction-btn{border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-weight:800;font-size:15px;transition:.15s ease}
.direction-btn.active{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#17110a;box-shadow:0 4px 16px rgba(230,174,61,.16)}
.direction-btn:not(.active):hover{color:var(--text);background:var(--surface-3)}
.result-card strong.positive{color:#46c477}


.results-heading{margin-bottom:17px}.results-heading h2{color:var(--gold-light)}html[data-theme=light] .results-heading h2{color:#bd8115}

.site-footer{
  width:100%;
  margin:20px 0 0;
  padding:0;
  text-align:center;
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
}
.site-footer a{
  color:var(--muted);
  text-decoration:none;
}
.site-footer a:hover{
  color:var(--gold);
  text-decoration:underline;
}

.calculator-title{
  padding:22px 24px 12px;
  color:var(--gold-light);
  font-size:22px;
  line-height:1.2;
  font-weight:800;
}


/* Canonical 1px center dividers */
@media(min-width:761px){
  .form-row-top,
  .form-row-controls,
  .form-row-prices{
    gap:0;
    background-color:var(--surface-2);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:100% 100%;
  }

  .form-row-top{
    background-image:linear-gradient(
      to right,
      var(--surface-2) 0,
      var(--surface-2) calc(50% - .5px),
      var(--border-gold) calc(50% - .5px),
      var(--border-gold) calc(50% + .5px),
      var(--surface-2) calc(50% + .5px),
      var(--surface-2) 100%
    );
  }

  .form-row-controls{
    background-image:linear-gradient(
      to right,
      var(--surface-2) 0,
      var(--surface-2) calc(50% - .5px),
      var(--border-gold) calc(50% - .5px),
      var(--border-gold) calc(50% + .5px),
      var(--surface-2) calc(50% + .5px),
      var(--surface-2) 100%
    );
  }

  .form-row-prices{
    background-image:linear-gradient(
      to right,
      var(--surface-2) 0,
      var(--surface-2) calc(50% - .5px),
      var(--border-gold) calc(50% - .5px),
      var(--border-gold) calc(50% + .5px),
      var(--surface-2) calc(50% + .5px),
      var(--surface-2) 100%
    );
  }

  .form-row-top .field,
  .form-row-controls .control-card,
  .form-row-prices .field{
    background:transparent;
    border-right:0 !important;
    border-left:0 !important;
  }
}

/* Exact same title color as Results */
.calculator-title{color:var(--gold-light);}
html[data-theme=light] .calculator-title{color:#bd8115;}

/* Top block: the center divider runs continuously from the top border
   through Risk Calculator and the Trading account / Asset row. */
@media(min-width:761px){
  .intro-section{
    position:relative;
  }

  .intro-section::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:var(--border-gold);
    transform:translateX(-0.5px);
    pointer-events:none;
    z-index:5;
  }

  .intro-section .calculator-title,
  .intro-section .form-row-top,
  .intro-section .form-row-top .field{
    background:transparent !important;
  }

  .intro-section .form-row-top{
    background-image:none !important;
  }
}

@media(max-width:760px){
  .intro-section::after{
    display:none;
  }
}