/* assets/css/app.css */
:root{
  --bg:#0b1220;
  --panel:#101a2f;
  --text:#e8eefc;
  --muted:#a9b6d3;
  --line:rgba(255,255,255,.10);
  --btn:#1f6fff;
  --btn2:#23314f;
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #070b14 0%, #0b1220 100%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}

.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(11,18,32,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{width:12px;height:12px;border-radius:99px;background:var(--btn)}
.brand-title{font-weight:700}
.brand-sub{font-size:12px;color:var(--muted)}

.nav a{padding:10px 12px;border-radius:10px}
.nav a.active, .nav a:hover{background:rgba(255,255,255,.06)}

.hero{padding:18px 0}
.hero h1{margin:0 0 8px;font-size:26px}
.hero p{margin:0;color:var(--muted)}

.search-row{margin-top:14px}
.search-row input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

.grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:14px;
  padding-bottom:30px;
}
@media (min-width: 640px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 1000px){
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.card{
  display:block;
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  transition: transform .12s ease, background .12s ease;
}
.card:hover{transform: translateY(-2px); background:rgba(255,255,255,.07)}
.card-title{font-weight:700;margin-bottom:6px}
.card-desc{color:var(--muted);font-size:13px;line-height:1.4}
.card-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(31,111,255,.16);
  border:1px solid rgba(31,111,255,.25);
}

.calc-header h1{margin:14px 0 6px;font-size:24px}
.calc-header p{margin:0;color:var(--muted)}

.calc-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:14px;
  padding-bottom:30px;
}
@media (min-width: 900px){
  .calc-layout{grid-template-columns: 1fr 1fr;}
}

.panel{
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.panel h2{margin:0 0 12px;font-size:16px}

.field{display:block;margin-bottom:12px}
.label{display:block;margin-bottom:6px;font-weight:600}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

.btn-row{display:flex;gap:10px;margin-top:10px}
button{
  border:0; cursor:pointer;
  padding:12px 14px;
  border-radius:12px;
  background:var(--btn);
  color:white;
  font-weight:700;
}
button.secondary{background:var(--btn2)}
.error{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
}

.result-table{display:flex;flex-direction:column;gap:10px}
.result-row{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.result-label{color:var(--muted)}
.result-value{font-weight:800}
.note{margin-top:12px;color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.btn{display:inline-block;margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--btn);font-weight:800}

/* ===== BN EXPIRY SPECIAL UI (Exact Table Style) ===== */
.bnx { max-width: 920px; margin: 18px auto 30px; }
.bnx-title {
  background: #ffd400;
  color: #000;
  font-weight: 900;
  text-align: center;
  padding: 16px 12px;
  border-radius: 14px 14px 0 0;
  letter-spacing: .5px;
  font-size: 28px;
}
.bnx-footer {
  background: #ffd400;
  color: #000;
  font-weight: 900;
  text-align: center;
  padding: 14px 12px;
  border-radius: 0 0 14px 14px;
  font-size: 24px;
}
.bnx-table {
  border-left: 2px solid rgba(255,255,255,.25);
  border-right: 2px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.15);
}

.bnx-row { display: grid; grid-template-columns: 1fr 1fr; }
.bnx-cell {
  padding: 14px 12px;
  border-top: 2px solid rgba(0,0,0,.25);
  border-right: 2px solid rgba(0,0,0,.25);
  text-align: center;
  font-weight: 900;
}
.bnx-row .bnx-cell:last-child { border-right: 0; }

.bnx-head .bnx-cell {
  background: #00a6d6;
  color: #000;
  font-size: 22px;
}

.bnx-label .bnx-cell {
  background: #ff5aa6;
  color: #000;
  font-size: 18px;
}

.bnx-input .bnx-cell { background: #bfbfbf; }
.bnx-input input {
  width: 100%;
  max-width: 260px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.35);
  outline: none;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.bnx-strike-label .bnx-cell {
  background: #ff5aa6;
  color: #000;
  font-size: 18px;
}
.bnx-strike-value .bnx-cell {
  background: #8fd14f;
  color: #000;
  font-size: 22px;
}

.bnx-premium-head .bnx-cell {
  background: #00a6d6;
  color: #000;
  font-size: 18px;
}
.bnx-premium-label .bnx-cell {
  background: #ff7bb9;
  color: #000;
  font-size: 16px;
}

.bnx-buy .bnx-cell {
  background: #00a6d6;
  color: #000;
  font-size: 20px;
}
.bnx-sl .bnx-cell {
  background: #c79bff;
  color: #000;
  font-size: 20px;
}
.bnx-target .bnx-cell {
  background: #9ad05d;
  color: #000;
  font-size: 20px;
}

.bnx-buy span, .bnx-sl span, .bnx-target span {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.bnx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-top: 2px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.05);
}
.bnx-actions button { min-width: 160px; }
.bnx-error {
  width: 100%;
  max-width: 700px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,0,0,.12);
  border: 1px solid rgba(255,0,0,.20);
  margin-top: 6px;
}

@media (max-width: 520px) {
  .bnx-title { font-size: 20px; }
  .bnx-footer { font-size: 18px; }
  .bnx-head .bnx-cell { font-size: 18px; }
  .bnx-label .bnx-cell, .bnx-strike-label .bnx-cell { font-size: 14px; }
  .bnx-strike-value .bnx-cell { font-size: 16px; }
  .bnx-buy span, .bnx-sl span, .bnx-target span { font-size: 18px; }
}
.bnx-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bnx-key{
  font-weight:900;
}
/* === BNX: Center align BUY/SL/TARGET text + value === */
.bnx-inline{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}

/* === BNX: Remove number input arrows (spinners) === */
.bnx-input input[type="number"]::-webkit-outer-spin-button,
.bnx-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.bnx-input input[type="number"]{
  -moz-appearance: textfield; /* Firefox */
}
/* ===== BNX: BUY/SL/TARGET as 4 columns (Label|Value|Label|Value) ===== */
.bnx-row4{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.bnx-row4 .bnx-cell{
  border-top: 2px solid rgba(0,0,0,.25);
  border-right: 2px solid rgba(0,0,0,.25);
  text-align:center;
  font-weight:900;
  padding: 14px 12px;
}
.bnx-row4 .bnx-cell:nth-child(4){ border-right:0; }

/* Colors to match your design */
.bnx-buy4 .bnx-cell{ background:#00a6d6; color:#000; font-size:20px; }
.bnx-sl4 .bnx-cell{ background:#c79bff; color:#000; font-size:20px; }
.bnx-target4 .bnx-cell{ background:#9ad05d; color:#000; font-size:20px; }

/* Make values slightly bigger */
.bnx-row4 .bnx-val span{
  font-size:22px;
  font-weight:900;
}

/* Remove number input spinners */
.bnx-input input[type="number"]::-webkit-outer-spin-button,
.bnx-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.bnx-input input[type="number"]{
  -moz-appearance:textfield;
}

/* Mobile: keep readable */
@media (max-width:520px){
  .bnx-buy4 .bnx-cell,
  .bnx-sl4 .bnx-cell,
  .bnx-target4 .bnx-cell{
    font-size:14px;
    padding:10px 6px;
  }
  .bnx-row4 .bnx-val span{ font-size:16px; }
}
/* ===== BTST UI ===== */
.btst-wrap{max-width:720px;margin:18px auto 30px}
.btst-title{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:16px 12px;
  border-radius:14px 14px 0 0;
  font-size:26px;
}
.btst-footer{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:14px 12px;
  border-radius:0 0 14px 14px;
  font-size:22px;
}
.btst-table{
  border-left:2px solid rgba(255,255,255,.25);
  border-right:2px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.15);
}
.btst-row{display:grid}
.btst-row.btst-head2{grid-template-columns:1fr 1fr}
.btst-cell{
  padding:14px 12px;
  border-top:2px solid rgba(0,0,0,.25);
  border-right:2px solid rgba(0,0,0,.25);
  text-align:center;
  font-weight:900;
}
.btst-row.btst-head2 .btst-cell:last-child,
.btst-row.btst-out .btst-cell:last-child{border-right:0}

.btst-label .btst-cell{background:#ff5aa6;color:#000;font-size:18px}
.btst-input .btst-cell{background:#bfbfbf}
.btst-input input{
  width:100%;
  max-width:320px;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.35);
  outline:none;
  font-size:18px;
  font-weight:900;
  text-align:center;
}

.btst-head2 .btst-cell{background:#00a6d6;color:#000;font-size:20px}
.btst-out{grid-template-columns:1fr 1fr}
.btst-out .btst-cell{background:#8fd14f;color:#000;font-size:22px}

.btst-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-top:2px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.05);
}
.btst-actions button{min-width:160px}
.btst-error{
  width:100%;
  max-width:600px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
  margin-top:6px;
}

/* Remove number arrows */
.btst-input input[type="number"]::-webkit-outer-spin-button,
.btst-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.btst-input input[type="number"]{ -moz-appearance:textfield; }
/* ===== FUTURES UI ===== */
.fut-wrap{max-width:720px;margin:18px auto 30px}
.fut-title{
  background:#ffd400;color:#000;font-weight:900;text-align:center;
  padding:16px;border-radius:14px 14px 0 0;font-size:26px;
}
.fut-footer{
  background:#ffd400;color:#000;font-weight:900;text-align:center;
  padding:14px;border-radius:0 0 14px 14px;font-size:22px;
}
.fut-table{
  border-left:2px solid rgba(255,255,255,.25);
  border-right:2px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.15);
}
.fut-row{display:grid}
.fut-head2{grid-template-columns:1fr 1fr}
.fut-out{grid-template-columns:1fr 1fr}
.fut-cell{
  padding:14px;border-top:2px solid rgba(0,0,0,.25);
  border-right:2px solid rgba(0,0,0,.25);
  text-align:center;font-weight:900;
}
.fut-row .fut-cell:last-child{border-right:0}
.fut-label .fut-cell{background:#ff5aa6;color:#000}
.fut-input .fut-cell{background:#bfbfbf}
.fut-input input{
  width:100%;max-width:320px;padding:12px;border-radius:10px;
  border:1px solid rgba(0,0,0,.35);text-align:center;font-weight:900;
}
.fut-head2 .fut-cell{background:#00a6d6;color:#000}
.fut-out .fut-cell{background:#8fd14f;color:#000;font-size:22px}
.fut-actions{
  display:flex;gap:10px;justify-content:center;
  padding:14px;border-top:2px solid rgba(0,0,0,.25);
}
.fut-error{
  width:100%;max-width:600px;text-align:center;
  padding:10px;border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
}
.fut-input input[type="number"]::-webkit-outer-spin-button,
.fut-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.fut-input input[type="number"]{-moz-appearance:textfield;}
/* ===== NIFTY & BANKNIFTY FUTURE CALCULATOR UI ===== */
.nf-wrap{max-width:1200px;margin:18px auto 30px}
.nf-title{
  background:#9ea6ff;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:18px 12px;
  border-radius:14px 14px 0 0;
  font-size:34px;
  letter-spacing:.5px;
}
.nf-footer{
  background:#c7a6ff;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:14px 12px;
  border-radius:0 0 14px 14px;
  font-size:34px;
}

.nf-table{
  border-left:2px solid rgba(0,0,0,.25);
  border-right:2px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.02);
}

.nf-row{
  display:grid;
  grid-template-columns: 2.2fr 1.8fr 1.1fr 1.1fr 1.1fr;
}
.nf-cell{
  padding:18px 12px;
  border-top:2px solid rgba(0,0,0,.35);
  border-right:2px solid rgba(0,0,0,.35);
  text-align:center;
  font-weight:900;
  color:#000;
  font-size:22px;
}
.nf-row .nf-cell:last-child{border-right:0}

.nf-head .nf-cell{background:#f2b200}
.nf-h1,.nf-h2{font-size:26px}

.nf-left-buy{background:#a6ff9c}
.nf-left-sell{background:#ff7f7f}

.nf-ash{background:#d8d8d8}
.nf-ash input{
  width:100%;
  max-width:320px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.35);
  font-size:22px;
  font-weight:900;
  text-align:center;
  outline:none;
  background:#fff;
}

/* outputs */
.nf-out-buy{background:#a6ff9c}
.nf-out-sell{background:#ff7f7f}

/* Remove number arrows */
.nf-ash input[type="number"]::-webkit-outer-spin-button,
.nf-ash input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.nf-ash input[type="number"]{-moz-appearance:textfield;}

.nf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-top:2px solid rgba(0,0,0,.35);
  background:rgba(255,255,255,.06);
}
.nf-error{
  width:100%;
  max-width:700px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
  margin-top:6px;
}

/* Mobile */
@media (max-width: 900px){
  .nf-title,.nf-footer{font-size:22px}
  .nf-row{grid-template-columns: 1.7fr 1.3fr 1fr 1fr 1fr;}
  .nf-cell{font-size:16px;padding:12px 8px}
  .nf-h1,.nf-h2{font-size:18px}
}
/* ===== Mobile Responsive: NIFTY/BANKNIFTY FUTURES (Label | Value) ===== */
@media (max-width: 600px){

  .nf-title, .nf-footer{
    font-size: 20px;
    padding: 14px 10px;
  }

  .nf-wrap{ padding: 0 10px; }

  /* Stack layout */
  .nf-row{ grid-template-columns: 1fr; }
  .nf-head{ display:none; }

  .nf-buy, .nf-sell{
    border: 2px solid rgba(0,0,0,.25);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
  }

  .nf-cell{
    border-right: 0 !important;
    text-align: center;
    font-size: 16px;
    padding: 12px 10px;
  }

  .nf-ash input{
    max-width: 100%;
    font-size: 18px;
    padding: 12px;
  }

  /* ========= KEY CHANGE: LABEL | VALUE rows ========= */
  /* Make each output cell behave like: [LABEL] [VALUE] */
/* ===== MOBILE FIX: PERFECT CENTER ALIGNMENT ===== */
.nf-out-buy,
.nf-out-sell{
  display: flex !important;
  justify-content: space-between;  /* left & right */
  align-items: center;             /* vertical center */
  padding: 14px 16px;
  font-weight: 900;
  font-size: 16px;
}

/* Left label */
#nfBuyEntry::before,
#nfBuyTarget::before,
#nfBuySL::before,
#nfSellEntry::before,
#nfSellTarget::before,
#nfSellSL::before{
  content: attr(data-label);
}

/* Remove old label system */
#nfBuyEntry::before{content:"ENTRY";}
#nfBuyTarget::before{content:"TARGET";}
#nfBuySL::before{content:"STOPLOSS";}
#nfSellEntry::before{content:"ENTRY";}
#nfSellTarget::before{content:"TARGET";}
#nfSellSL::before{content:"STOPLOSS";}

/* Value styling */
.nf-out-buy span,
.nf-out-sell span{
  font-size: 20px;
  font-weight: 900;
  text-align: right;
}