:root{
  --demo-bg:#05080d;
  --demo-panel:#0a1018;
  --demo-panel2:#0d1520;
  --demo-line:rgba(255,255,255,.10);
  --demo-gold:#f2c45f;
  --demo-blue:#4aa7ff;
  --demo-green:#3dde92;
  --demo-red:#ff667a;
  --demo-text:#f4f7fb;
  --demo-muted:#9eb0c7;
}
*{box-sizing:border-box}
.demo-body{margin:0;background:radial-gradient(circle at 10% 0,rgba(42,122,219,.12),transparent 26%),linear-gradient(180deg,#03070c,#07101a 50%,#03070c);color:var(--demo-text);font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif}
.demo-shell{width:min(1540px,calc(100% - 28px));margin:0 auto}
.demo-header{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--demo-line);background:rgba(3,7,12,.94);backdrop-filter:blur(14px)}
.demo-header-inner{min-height:76px;display:flex;align-items:center;gap:22px}
.demo-logo{display:flex;flex-direction:column;min-width:150px;color:inherit;text-decoration:none}.demo-logo strong{font-size:31px;color:var(--demo-gold);letter-spacing:-.04em}.demo-logo small{font-size:10px;color:#ddd;letter-spacing:.08em}
.demo-nav{display:flex;gap:20px;align-items:center;flex:1}.demo-nav a{color:#e8edf5;text-decoration:none;font-size:14px;font-weight:800}.demo-nav a.active{color:var(--demo-gold)}
.demo-header-actions{display:flex;gap:9px}.demo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--demo-line);background:#101722;color:#fff;text-decoration:none;font:inherit;font-weight:850;cursor:pointer}.demo-btn.primary{color:#1b1201;background:linear-gradient(180deg,#f8d675,#d9a02a);border-color:rgba(255,235,170,.4)}.demo-btn.blue{background:linear-gradient(180deg,#188dff,#0868cd);border-color:rgba(111,194,255,.35)}.demo-btn.danger{background:#2b1117;border-color:rgba(255,102,122,.35);color:#ffb6c0}.demo-btn.sm{min-height:34px;padding:0 11px;font-size:12px}.demo-btn.block{width:100%}
.demo-ticker{border-bottom:1px solid var(--demo-line);background:#05090f;min-height:46px;overflow:hidden}.demo-ticker .tradingview-widget-container{height:46px}
.demo-hero{padding:28px 0 18px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}.demo-eyebrow{color:#62b7ff;font-size:12px;font-weight:900;letter-spacing:.16em}.demo-hero h1{margin:8px 0 12px;font-size:44px;line-height:1.12;letter-spacing:-.045em}.demo-hero h1 em{font-style:normal;color:var(--demo-gold)}.demo-hero p{margin:0;color:#bfcee0;line-height:1.8}.demo-risk-chip{display:flex;gap:10px;align-items:center;padding:13px 15px;border:1px solid rgba(242,196,95,.20);border-radius:14px;background:rgba(242,196,95,.07);color:#ffe6ac;font-size:13px;font-weight:750;max-width:680px}
.demo-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.demo-stat{padding:17px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(14,26,42,.95),rgba(7,13,21,.98));border:1px solid var(--demo-line)}.demo-stat span{display:block;color:var(--demo-muted);font-size:12px;font-weight:800;margin-bottom:8px}.demo-stat strong{display:block;font-size:25px}.demo-stat small{display:block;margin-top:6px;font-size:11px;color:#83a0c1}.demo-stat .up{color:var(--demo-green)}.demo-stat .down{color:var(--demo-red)}
.demo-layout{display:grid;grid-template-columns:minmax(0,1.6fr) 420px;gap:16px;align-items:start}.demo-card{border:1px solid var(--demo-line);background:linear-gradient(180deg,rgba(10,19,31,.96),rgba(5,10,17,.99));border-radius:22px;overflow:hidden}.demo-card-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--demo-line)}.demo-card-head h2,.demo-card-head h3{margin:0;font-size:18px}.demo-card-head p{margin:4px 0 0;color:var(--demo-muted);font-size:12px}.demo-live{display:flex;align-items:center;gap:8px;color:#9bf4c4;font-size:11px;font-weight:900}.demo-live i{width:8px;height:8px;border-radius:50%;background:var(--demo-green);box-shadow:0 0 12px rgba(61,222,146,.7)}
.demo-chart{height:640px}.demo-chart .tradingview-widget-container,.demo-chart .tradingview-widget-container__widget{height:100%;width:100%}.demo-chart .tradingview-widget-copyright{font-size:10px;padding:2px 8px}
.demo-trade-panel{position:sticky;top:92px}.demo-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px}.demo-tab{border:1px solid var(--demo-line);background:#0b121c;color:#b7c6d9;padding:10px 6px;border-radius:11px;font-weight:850;font-size:12px;cursor:pointer}.demo-tab.active{background:rgba(242,196,95,.12);border-color:rgba(242,196,95,.4);color:#ffe6a9}
.demo-form{padding:4px 16px 17px}.demo-field{margin:12px 0}.demo-field label{display:block;margin-bottom:7px;color:#cbd8e8;font-size:12px;font-weight:800}.demo-field select,.demo-field input{width:100%;height:43px;border-radius:11px;border:1px solid var(--demo-line);background:#07101a;color:#fff;padding:0 12px;font:inherit;outline:none}.demo-field select:focus,.demo-field input:focus{border-color:#4faaff}.demo-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.demo-direction{display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-direction button{height:44px;border-radius:11px;border:1px solid var(--demo-line);background:#0a131e;color:#d5e0ed;font-weight:900;cursor:pointer}.demo-direction button.active.buy{background:rgba(61,222,146,.13);border-color:rgba(61,222,146,.42);color:#8af1ba}.demo-direction button.active.sell{background:rgba(255,102,122,.13);border-color:rgba(255,102,122,.42);color:#ff9dac}
.demo-quote-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.demo-quote{padding:11px;border-radius:12px;background:#07101a;border:1px solid var(--demo-line)}.demo-quote span{display:block;font-size:10px;color:var(--demo-muted);margin-bottom:5px}.demo-quote strong{font-size:17px}.demo-quote.bid strong{color:#ff8495}.demo-quote.ask strong{color:#6ce4a3}
.demo-mode-info{padding:12px 13px;border-radius:12px;background:rgba(79,170,255,.08);border:1px solid rgba(79,170,255,.18);color:#cfe5ff;font-size:12px;line-height:1.65}.demo-order-summary{margin:12px 0;padding:12px;border-radius:12px;background:#07101a;border:1px solid var(--demo-line)}.demo-order-summary div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12px}.demo-order-summary span{color:var(--demo-muted)}.demo-order-summary strong{color:#fff}
.demo-error{min-height:20px;color:#ff93a2;font-size:12px;margin:8px 0}.demo-disclaimer{margin:12px 0 0;color:#8294aa;font-size:11px;line-height:1.55}
.demo-section{padding:18px 0}.demo-section-title{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:14px}.demo-section-title h2{margin:0;font-size:28px;letter-spacing:-.03em}.demo-section-title p{margin:0;color:var(--demo-muted);font-size:13px}
.demo-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.demo-product{padding:19px;border-radius:19px;border:1px solid var(--demo-line);background:linear-gradient(180deg,rgba(13,24,39,.95),rgba(6,11,18,.99))}.demo-product b{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(74,167,255,.12);color:#7bc3ff;margin-bottom:14px}.demo-product h3{margin:0 0 9px;font-size:18px}.demo-product p{margin:0;color:#aebed1;font-size:13px;line-height:1.7}.demo-product ul{margin:12px 0 0;padding-left:18px;color:#d4dfec;font-size:12px;line-height:1.7}
.demo-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.demo-table-card{border:1px solid var(--demo-line);border-radius:20px;background:#07101a;overflow:hidden}.demo-table-card header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--demo-line)}.demo-table-card header h3{margin:0;font-size:17px}.demo-table-wrap{overflow:auto}.demo-table{width:100%;border-collapse:collapse;font-size:12px;min-width:690px}.demo-table th,.demo-table td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;white-space:nowrap}.demo-table th{color:#8fa4bd;background:#09121d}.demo-table .profit{color:var(--demo-green);font-weight:900}.demo-table .loss{color:var(--demo-red);font-weight:900}.demo-empty{text-align:center;padding:28px;color:#7f93aa}
.demo-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.demo-step{padding:17px;border:1px solid var(--demo-line);border-radius:17px;background:#08111c}.demo-step span{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:rgba(242,196,95,.12);color:var(--demo-gold);font-weight:900}.demo-step h3{margin:12px 0 7px;font-size:16px}.demo-step p{margin:0;color:#a8b8cb;font-size:12px;line-height:1.65}
.demo-footer{margin-top:28px;border-top:1px solid var(--demo-line);padding:26px 0 40px;color:#8fa1b6;font-size:12px}.demo-footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.demo-footer a{color:#d3e4f6;text-decoration:none;margin-right:16px}
.demo-toast{position:fixed;right:18px;bottom:18px;z-index:120;max-width:340px;padding:14px 16px;border-radius:14px;background:#111b28;border:1px solid var(--demo-line);box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.demo-toast.show{opacity:1;transform:none}.demo-toast strong{display:block;margin-bottom:4px}.demo-toast span{color:#b8c8da;font-size:12px}
@media(max-width:1200px){.demo-layout{grid-template-columns:1fr}.demo-trade-panel{position:static}.demo-product-grid{grid-template-columns:repeat(2,1fr)}.demo-chart{height:580px}}
@media(max-width:850px){.demo-nav{display:none}.demo-summary{grid-template-columns:repeat(2,1fr)}.demo-hero{grid-template-columns:1fr}.demo-bottom-grid{grid-template-columns:1fr}.demo-steps{grid-template-columns:repeat(2,1fr)}.demo-header-actions .hide-mobile{display:none}}
@media(max-width:560px){.demo-shell{width:calc(100% - 16px)}.demo-header-inner{min-height:66px}.demo-logo strong{font-size:25px}.demo-header-actions{margin-left:auto}.demo-header-actions .demo-btn{padding:0 10px;font-size:11px}.demo-hero h1{font-size:34px}.demo-summary{grid-template-columns:1fr 1fr}.demo-stat{padding:14px}.demo-stat strong{font-size:20px}.demo-chart{height:480px}.demo-product-grid,.demo-steps{grid-template-columns:1fr}.demo-two{grid-template-columns:1fr}.demo-tabs{grid-template-columns:1fr 1fr}.demo-section-title{align-items:flex-start;flex-direction:column}.demo-risk-chip{font-size:11px}}


.demo-operator-notice{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border:1px solid rgba(241,190,79,.28);border-radius:14px;background:rgba(241,190,79,.08)}
.demo-operator-notice strong{color:#f2c15c}.demo-operator-notice span{color:#e8edf5;font-weight:700}.demo-operator-notice a{margin-left:auto;color:#74c7ff;font-weight:900}
.demo-data-status{padding:10px 14px;border-top:1px solid rgba(255,255,255,.08);color:#9fb3c9;font-size:13px;background:#070b11}.demo-data-status.connected{color:#65e3a4}.demo-data-status.warning{color:#ffcc78}
.demo-live-guide .demo-section-title{align-items:center}.demo-guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.demo-guide-card{padding:18px;border-radius:18px;border:1px solid rgba(80,149,230,.18);background:linear-gradient(180deg,#0c1725,#080d15)}.demo-guide-card strong{display:block;color:#fff;font-size:18px}.demo-guide-card span{display:block;color:#7fcfff;font-size:13px;margin:7px 0 12px}.demo-guide-card ul{margin:0;padding-left:18px;color:#dce8f6;line-height:1.8}.demo-extension-note{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:14px;padding:16px 18px;border-radius:16px;border:1px solid rgba(242,193,92,.22);background:rgba(242,193,92,.07)}.demo-extension-note b,.demo-extension-note strong{color:#f2c15c}.demo-extension-note span{color:#dbe5f2;line-height:1.65}
.demo-btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1050px){.demo-guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.demo-guide-grid{grid-template-columns:1fr}.demo-extension-note{grid-template-columns:1fr}.demo-operator-notice a{margin-left:0;width:100%}}


/* v41 chart and order layout */
.demo-chart{position:relative;min-height:640px;background:#05090d}
.demo-chart iframe{width:100%!important;height:100%!important;display:block}
.demo-data-status a{color:#73c9ff;font-weight:900;text-decoration:none}
.demo-open-orders-section{padding-top:16px}
.demo-open-orders-card{border-color:rgba(242,196,95,.24);background:linear-gradient(180deg,rgba(13,24,39,.98),rgba(6,11,18,.99))}
.demo-open-orders-card header{padding:16px 18px}
.demo-open-orders-card header p,.demo-table-card header p{margin:4px 0 0;color:var(--demo-muted);font-size:12px}
.demo-open-orders-card .demo-table{min-width:850px;font-size:13px}
.demo-open-orders-card .demo-table th,.demo-open-orders-card .demo-table td{padding:13px 14px}
@media(max-width:1200px){.demo-chart{min-height:580px}}
@media(max-width:560px){.demo-chart{min-height:480px}.demo-open-orders-card header{align-items:flex-start}.demo-open-orders-card .demo-live{flex:0 0 auto}}


/* v54 TradingView full-height optimization */
.demo-chart{
  position:relative;
  display:block;
  width:100%;
  height:640px;
  min-height:640px;
  overflow:hidden;
  background:#05090d;
  isolation:isolate;
}
.demo-tv-chart{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  min-height:640px;
  background:#05090d;
}
.demo-tv-chart>div,
.demo-tv-chart iframe{
  width:100%!important;
  height:100%!important;
  min-height:640px!important;
  display:block!important;
  border:0!important;
}
.demo-chart-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  text-align:center;
  background:radial-gradient(circle at 50% 25%,rgba(28,115,202,.18),transparent 38%),#05090d;
  color:#d9e8f7;
  transition:opacity .2s ease,visibility .2s ease;
}
.demo-chart-fallback strong{font-size:19px;color:#fff}
.demo-chart-fallback span{font-size:12px;color:#9eb0c7}
.demo-chart-fallback a{color:#73c9ff;font-weight:900;text-decoration:none}
.demo-chart-fallback.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.demo-card:has(.demo-chart){min-width:0}
@media(max-width:1200px){
  .demo-chart{height:580px;min-height:580px}
  .demo-tv-chart,.demo-tv-chart>div,.demo-tv-chart iframe{min-height:580px!important}
}
@media(max-width:700px){
  .demo-chart{height:520px;min-height:520px}
  .demo-tv-chart,.demo-tv-chart>div,.demo-tv-chart iframe{min-height:520px!important}
}
@media(max-width:560px){
  .demo-chart{height:460px;min-height:460px}
  .demo-tv-chart,.demo-tv-chart>div,.demo-tv-chart iframe{min-height:460px!important}
}