@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* Inter 로컬 폰트 (CDN 미사용) */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
    
    body { 
      background: #0a0a0a; 
      color: #ccc; 
      font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
    }
    
    .main-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    
    .top-header {
      background: #111;
      border-bottom: 1px solid #222;
      padding: 6px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 58px;
      flex-shrink: 0;
      overflow: visible;
    }
    
    .top-left {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    
    .top-header h1 {
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      letter-spacing: 1px;
    }
    
    .symbol-info {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .symbol-info > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .current-price {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    
    .header-stats {
      display: flex;
      margin-left: auto;
      margin-right: 0; /* [p3560] was 50px — pushed group fully to right edge */
      gap: 60px;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-item h4 { 
      font-size: 10px; 
      color: #666; 
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    
    .stat-item .value { 
      font-size: 20px; 
      font-weight: bold; 
      color: #f6465d;
    }

    .stat-item .sub-label {
      font-size: 9px;
      color: #666;
      text-transform: uppercase;
      margin-top: 8px;
      margin-bottom: 2px;
    }
    
    .stat-item .sub-pnl {
      font-size: 13px;
      font-weight: bold;
    }
    
    .control-bar {
      background: #111;
      border-top: 3px solid #2a2a2a;
      border-bottom: none;
      padding: 5px 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      height: 44px;
      max-height: 44px;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }
    .control-bar::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: #2a2a2a;
      z-index: 10;
    }
    
    .control-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }
    
    .control-group label {
      font-size: 12px;
      background: rgba(0, 212, 255, 0.2);
      color: #00d4ff;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
      text-transform: uppercase;
      min-width: 50px;
    }
    
    .control-group select {
      background: #1a1a1a;
      border: 1px solid #333;
      color: #fff;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 12px;
      cursor: pointer;
    }
    
    .control-group select:focus {
      outline: none;
      border-color: #00d4ff;
    }
    
    .content-wrapper.v13-grid{
      display:grid;
      grid-template-columns: 1fr 350px 370px;
      grid-template-rows: 1fr 200px;
      gap:3px;
      background:#2a2a2a;
      flex:1;
      overflow:hidden;
      height:100%;
    }
    .content-wrapper.v13-grid .left-col{ grid-column:1; grid-row:1; overflow:hidden; display:flex; flex-direction:column; background:#0a0a0a;}
    .content-wrapper.v13-grid .orderbook-panel{ grid-column:2; grid-row:1; height:100%; background:#0a0a0a; }
    .content-wrapper.v13-grid .order-panel{ grid-column:3; grid-row:1 / 3; height:auto; min-height:100%; overflow:auto; background:#0a0a0a;}
    .content-wrapper.v13-grid .positions-section{ grid-column:1 / 3; grid-row:2; height:200px; display:flex; flex-direction:column; min-height:0; background:#0a0a0a; }

.chart-section {
      background: #0a0a0a;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* LW chart container sizing safety */
    .chart-section { flex: 1 1 auto; min-height: 360px; overflow: hidden; }
    #chart { width: 100%; height: 100%; min-height: 360px; overflow: hidden; position: relative; }

    
    #chart { 
      width: 100%;
      flex: 1;
    }
    
    .positions-section {
      background: #111;
      border-top: 1px solid #222;
      height: 200px;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
    
    .positions-tabs {
      display: flex;
      flex: 1;
      background: #0a0a0a;
      border-bottom: 1px solid #222;
      padding: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .positions-tabs::-webkit-scrollbar { display: none; }
    
    .position-tab {
      padding: 12px 16px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: #666;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      /* FIX84I: Title Case labels (no forced uppercase) */
      text-transform: none;
      transition: all 0.2s;
      white-space: nowrap;
      outline: none;
    }
    .position-tab:focus {
      outline: none;
      box-shadow: none;
    }
    
    .position-tab.active {
      color: #fff;
      background: none;
      border-bottom-color: #fff;
    }
    
    .position-tab:hover {
      color: #fff;
    }
    
    .close-all-btn {
      background: linear-gradient(135deg, #f6465d 0%, #ff8888 100%);
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 11px;
      font-weight: bold;
      transition: all 0.3s;
      margin-left: auto;
      margin-right: 12px;
    }
    
    .close-all-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    }
    
    .positions-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
    }

    
    .positions-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    
    
    /* v20: stabilize positions table layout to avoid column jitter */

    /* v25: positions table 12 equal columns (including action) */
    /* ── pos-grid: div+flex 기반 포지션 그리드 (table 대체) ── */
    .pos-grid { width: 100%; }
    .pos-grid-row { display: flex; align-items: center; width: 100%; }
    .pos-grid-hdr { background: #1a1a1a; border-bottom: 1px solid #333; }
    .pos-grid-hdr .pos-grid-cell { 
      font-size: 13px; color: #666; font-weight: 600; 
      padding: 8px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pos-grid-data {
      border-bottom: 1px solid #1e1e1e;
      transition: background 0.12s ease;
      position: relative;
    }
    .pos-grid-data:hover,
    .pos-grid-data.row-hovered {
      background: rgba(255,255,255,0.10) !important;
      z-index: 1;
    }
    .pos-grid-data:hover::after,
    .pos-grid-data.row-hovered::after {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      pointer-events: none;
    }
    .pos-grid-cell { 
      flex-shrink: 0; flex-grow: 1; box-sizing: border-box;
      padding: 6px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 13px; color: #e8e8e8; /* [p465] 한단계 밝게 */
      font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
    }
    /* Close All Positions 헤더 텍스트 */
    .pos-close-all-hdr { color: #f0b90b; cursor: default; font-size: 13px; white-space: nowrap; font-weight: 600; }
    .pos-close-all-hdr.pos-close-all-active { color: #f0b90b; cursor: pointer; font-size: 13px; text-decoration: none; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }
    /* 버튼 스타일 */
    .btn-pos-market, .btn-pos-limit, .btn-pos-reverse, .btn-pos-tpsl, .btn-pos-tpsl-add { 
      background: transparent; border: 1px solid #555; color: #ccc; padding: 3px 0; 
      border-radius: 3px; cursor: pointer; font-size: 11px; white-space: nowrap;
      min-width: 46px; text-align: center; display: inline-block;
    }
    .btn-pos-market:hover, .btn-pos-limit:hover { border-color: #888; color: #fff; }
    .btn-pos-reverse:hover { border-color: #facc15; color: #facc15; }
    .btn-pos-tpsl:hover { border-color: #0ecb81; color: #0ecb81; }
    .btn-pos-tpsl-add:hover { border-color: #f0b90b; color: #f0b90b; }
    .btn-pos-mktlmt {
      background: transparent !important;
      border: none !important;
      color: #f0b90b !important;
      cursor: pointer;
      font-size: 12px !important;
      padding: 0 4px;
      font-weight: 600;
      display: inline-block;
      user-select: none;
      -webkit-user-select: none;
    }
    .btn-pos-mktlmt:hover { color: #ffe066 !important; transition: color 0.15s; }
    .btn-mktlmt-sep {
      color: rgba(255,255,255,0.2);
      font-size: 11px;
      padding: 0 1px;
      pointer-events: none;
    }

    .positions-table-equal-12 { table-layout: fixed; width: 100%; }
    .positions-table-equal-12 th, .positions-table-equal-12 td { width: 8.3333%; }

    /* v91: positions table 13 equal columns (added Funding column) */
    .positions-table-equal-13 { table-layout: fixed; width: 100%; }
    .positions-table-equal-13 th, .positions-table-equal-13 td { width: 7.6923%; }

    .positions-table{ table-layout:fixed; width:100%; }
    .positions-table th, .positions-table td{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .positions-table td{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
    .positions-table .num{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
/* [p467] positions-table 헤더/행 Positions 탭 스타일 통일 */
.positions-table th {
      padding: 8px 6px;
      text-align: left;
      font-size: 13px;
      color: #666;
      font-weight: 600;
      text-transform: none;
      border-right: none;
      white-space: nowrap;
      background: #1a1a1a;
      position: sticky;
      top: 0;
      border-bottom: 1px solid #333;
    }
    
    .positions-table th:last-child { border-right: none; }
    
    .positions-table td {
      padding: 6px 6px;
      border-bottom: 1px solid #1e1e1e;
      border-right: none;
      white-space: nowrap;
      font-size: 13px;
      color: #e8e8e8;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
    }
    .positions-table tbody tr { transition: background 0.12s ease; }
    .positions-table tbody tr:hover { background: rgba(255,255,255,0.10) !important; }
    
    .positions-table td:last-child { border-right: none; }
    
    .positions-table tbody tr:hover { background: rgba(255,255,255,0.10) !important; }
    
    .symbol-cell {
      font-weight: bold;
      color: #fff;
    }
    
    .side-long {
      color: #0ecb81;
      font-weight: bold;
    }
    
    .side-short {
      color: #f6465d;
      font-weight: bold;
    }
    
    .pnl-positive { color: #0ecb81; }
    .pnl-negative { color: #f6465d; }

    .liq-price {
      color: #b8860b;
    }
    
    .btn-close-pos {
      background: transparent;
      color: #ccc;
      border: 1px solid #555;
      padding: 3px 8px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 11px;
      font-weight: normal;
      transition: all 0.2s;
      white-space: nowrap;
    }
    
    .btn-close-pos:hover {
      border-color: #888;
      color: #fff;
    }
    
    .empty-state {
      padding: 40px 20px;
      text-align: center;
      color: #555;
      font-size: 12px;
    }
    
    .right-panel {
      background: #111;
      border-left: 1px solid #222;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
    }
    
    .right-panel-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      height: 100%;
      overflow: hidden;
    }
    
    .orderbook-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .panel-header {
      background: #1a1a1a;
      padding: 8px 12px;
      font-size: 12px;
      /* FIX84I: Order Book header in bold white, no "BINANCE" */
      font-weight: 800;
      color: #fff;
      text-transform: none;
      border-bottom: 1px solid #333;
    }
    
    .panel-content {
      padding: 0;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .orderbook-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .orderbook-section {
      flex: 1;
      overflow-y: auto;
    }
    
    .orderbook-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    
    .orderbook-table th {
      padding: 6px 8px;
      text-align: right;
      font-size: 12px;
      color: #666;
      font-weight: 600;
      text-transform: none;
      background: #0a0a0a;
      position: sticky;
      top: 0;
      border-bottom: 1px solid #222;
    }
    
    
    /* v20: Size/Sum headers same as positions tab */
    .orderbook-table th:nth-child(2),
    .orderbook-table th:nth-child(3){ color:#666; }
.orderbook-table th:first-child { text-align: left; padding-left: 10px; }
    
    .orderbook-table td {
      padding: 4px 8px;
      text-align: right;
      border: none !important;
      cursor: pointer;
      transition: all 0.1s;
    }
    
    .orderbook-table td:first-child { text-align: left; padding-left: 10px; }
    
    .orderbook-table tbody tr:hover {
      background: #1a1a1a;
    }
    
    .ask { color: #f6465d; }
    .bid { color: #0ecb81; }
    
    
    /* Shift-drag tooltip (price change / %) */
    #shiftDragTooltip{
      position:absolute;
      pointer-events:none;
      z-index:9999;
      background: rgba(10,12,16,0.88);
      border:1px solid #0ecb81;
      color:#0ecb81;
      font-size:13px;
      font-weight:700;
      padding:6px 10px;
      border-radius:8px;
      display:none;
      white-space:nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    .orderbook-divider {
      padding: 2px 8px;
      text-align: center;
      font-size: 11px;
      color: #fff;
      background: #0a0a0a;
      border: none;
      font-weight: bold;
    }
    
    .order-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .margin-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: #0a0a0a;
      border-bottom: none;
      padding: 1px 15px;
      margin-top: 3px;
      margin-bottom: 3px;
    }
    
    .margin-tab {
      padding: 8px;
      background: #1a1a1a;
      border: none;
      color: #666;
      cursor: pointer;
      font-size: 13px;
      font-weight: bold;
      text-transform: capitalize;
      transition: all 0.2s;
      border-radius: 6px;
    }
    
    .margin-tab.active {
      background: #3a4149;
      color: #fff;
    }
    
    .order-type-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: #0a0a0a;
      border-bottom: 1px solid #222;
      padding: 1px 15px;
      margin-bottom: 0px;
    }
    
    .order-type-tab {
      padding: 8px;
      background: #1a1a1a;
      border: none;
      color: #666;
      cursor: pointer;
      font-size: 13px;
      font-weight: bold;
      text-transform: capitalize;
      transition: all 0.2s;
      border-radius: 6px;
    }
    
    .order-type-tab.active {
      background: #3a4149;
      color: #fff;
    }
    
    .order-form-section {
      padding: 6px 15px 45px 15px;
      background: #0a0a0a;
      flex: 1;
      overflow-y: visible;
      overflow-x: hidden;
    }
    
    .form-row {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 12px;
    }
    
    .form-row label {
      font-size: 11px;
      color: #666;
      text-transform: none;
    }
    
    .form-row input, .form-row select {
      background: #1a1a1a;
      border: 1px solid #333;
      color: #fff;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 12px;
    }
    
    .form-row input:focus, .form-row select:focus {
      outline: none;
      border-color: #00d4ff;
    }
    
    .form-row input:disabled {
      background: #0a0a0a;
      color: #666;
      cursor: not-allowed;
    }
    
    .size-selector {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      min-width: 0;
    }
    
    .size-input-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }
    
    .size-input-group label {
      font-size: 10px;
      color: #666;
    }
    
    .size-input-group input {
      background: #1a1a1a;
      border: 1px solid #333;
      color: #fff;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 12px;
    }
    
    .leverage-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .leverage-input-row {
      display: grid;
      grid-template-columns: 1fr 80px;
      gap: 8px;
      align-items: center;
    }
    
    .leverage-slider-container {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .leverage-slider {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #0a0a0a;
      border: 1px solid rgba(255,255,255,0.10);
      outline: none;
      -webkit-appearance: none;
    }
    
    .leverage-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 0;
      background: #f0b90b;
      cursor: pointer;
      border: 2px solid #0a0a0a;
      transform: rotate(45deg);
      box-shadow: none;
    }
    
    .leverage-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 0;
      background: #f0b90b;
      cursor: pointer;
      border: 2px solid #0a0a0a;
      transform: rotate(45deg);
      box-shadow: none;
    }
    
    .leverage-input {
      background: #1a1a1a;
      border: 1px solid #333;
      color: #00d4ff;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 12px;
      text-align: center;
      font-weight: bold;
    }
    
    .leverage-input:focus {
      outline: none;
      border-color: #00d4ff;
    }
    
    .leverage-label {
      font-size: 12px;
      color: #666;
      margin-top: 8px;
      text-align: center;
    }
    
    .form-info {
      background: #1a1a1a;
      padding: 10px;
      border-radius: 8px;
      font-size: 11px;
      margin-bottom: 12px;
    }
    
    .form-info-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .form-info-row:last-child {
      margin-bottom: 0;
    }
    
    .form-info-label {
      color: #666;
    }
    
    .form-info-value {
      color: #fff;
      font-weight: bold;
    }
    
    .order-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 15px;
    }
    
    .btn-open-long {
      background: #2ebd85;
      color: #fff;
      border: none;
      padding: 8px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 14px;
      text-transform: none;
      transition: filter 0.15s;
    }
    
    .btn-open-long:hover {
      filter: brightness(1.1);
    }
    
    .btn-open-short {
      background: #f6465d;
      color: #fff;
      border: none;
      padding: 8px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 14px;
      text-transform: none;
      transition: filter 0.15s;
    }
    
    .btn-open-short:hover {
      filter: brightness(1.1);
    }
    
    .close-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 15px;
    }
    
    .btn-close-long {
      background: #2ebd85;
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 15px;
      text-transform: none;
      transition: filter 0.15s;
    }
    
    .btn-close-long:hover {
      filter: brightness(1.1);
    }
    
    .btn-close-short {
      background: #f6465d;
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 15px;
      text-transform: none;
      transition: filter 0.15s;
    }
    
    .btn-close-short:hover {
      filter: brightness(1.1);
    }
    
    .no-position-message {
      padding: 20px;
      text-align: center;
      color: #666;
      font-size: 12px;
    }
    
    .pending-orders-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    
    .pending-orders-table th {
      padding: 6px 8px;
      text-align: left;
      font-size: 12px;
      color: #666;
      font-weight: 600;
      text-transform: uppercase;
      border-right: 1px solid #222;
      white-space: nowrap;
      background: #1a1a1a;
      position: sticky;
      top: 0;
      border-bottom: 1px solid #333;
    }
    .pending-orders-table th:first-child, .pending-orders-table td:first-child { min-width: 170px; }
    
    .pending-orders-table th:last-child { border-right: none; }
    
    .pending-orders-table td {
      padding: 6px 8px;
      border-bottom: 1px solid #1a1a1a;
      border-right: 1px solid #222;
      white-space: nowrap;
      font-size: 14px;
    }
    
    .pending-orders-table td:last-child { border-right: none; }
    
    .pending-orders-table tbody tr:hover { background: #151515; }
    
    .amend-edit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 3px;
      background: rgba(255,255,255,0.06);
      color: #888;
      font-size: 12px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.10);
      vertical-align: middle;
      margin-left: 4px;
    }
    .amend-edit-btn:hover {
      background: rgba(240,185,11,0.2);
      color: #f0b90b;
      border-color: rgba(240,185,11,0.4);
    }

    .btn-cancel-order {
      background: #f6465d;
      color: #fff;
      border: none;
      padding: 4px 8px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 10px;
      font-weight: bold;
      transition: all 0.3s;
    }
    
    .btn-cancel-order:hover {
      background: #ff8888;
      transform: scale(1.05);
    }

    /* ===== MODAL: Gate.io style (p437) ===== */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.75);
      z-index: 10001;
      justify-content: center;
      align-items: center;
    }
    .modal-overlay.active { display: flex !important; }

    .modal-box {
      background: #202630;
      border: none;
      border-radius: 12px;
      padding: 28px 28px 22px;
      min-width: 400px;
      max-width: 510px;
      width: 510px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
      animation: modalSlideIn 0.2s ease-out;
      z-index: 1001;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }
    @keyframes modalSlideIn {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* 일반 모달 - 타이틀 */
    .modal-title {
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 14px;
      letter-spacing: -0.2px;
    }
    /* 일반 모달 - 본문 */
    .modal-content {
      font-size: 15px;
      font-weight: 600;
      color: #d1d4dc;
      margin-bottom: 22px;
      line-height: 1.7;
      white-space: pre-wrap;
    }
    .modal-form-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
      text-align: left;
    }
    .modal-form-row label {
      font-size: 12px;
      font-weight: 600;
      color: #848e9c;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .modal-form-row input {
      background: #181c24;
      border: 1px solid #363c46;
      color: #eaecef;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      outline: none;
    }
    .modal-form-row input:focus { border-color: #f0b90b; }
    .modal-info-text { font-size: 12px; color: #848e9c; margin-top: 4px; }

    /* 일반 모달 - 버튼 */
    .modal-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 22px;
    }
    .modal-btn {
      padding: 14px 20px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 700;
      transition: opacity 0.15s, transform 0.1s;
      letter-spacing: 0.2px;
    }
    .modal-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .modal-btn:active { transform: translateY(0); opacity: 1; }
    /* Cancel: 테두리형, 확실히 구별 */
    .modal-btn-cancel {
      background: #2f3743 !important;
      border: none !important;
      color: #EAECEF !important;
    }
    .modal-btn-cancel:hover { border-color: #6a7080; color: #eaecef; }
    /* Confirm: 기본 흰색 */
    .modal-btn-confirm,
    .modal-btn-confirm.long-confirm,
    .modal-btn-confirm.short-confirm {
      background: #f0b90b !important;
      color: #202630 !important;
      border: none !important;
      font-weight: 700 !important;
    }
    /* X 닫기 버튼 */
    .modal-close-x {
      position: absolute;
      top: 16px; right: 18px;
      background: none; border: none;
      color: #5a6070; font-size: 24px; line-height: 1;
      cursor: pointer; padding: 0; z-index: 1;
    }
    .modal-close-x:hover { color: #eaecef; }
    /* 단일 OK 버튼 전체폭 */
    #confirmBtn[style*="1 / -1"] { border-radius: 50px; }

    /* ===== CLOSE MODAL (Gate.io style) ===== */
    #closePositionModal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.75);
      z-index: 10000;
      justify-content: center;
      align-items: center;
    }
    #closePositionModal.active { display: flex !important; }
    .close-modal-input-box:focus-within,
    .tpsl-modal-input-box:focus-within,
    .modal-input-box:focus-within {
      border-color: #f0b90b !important;
    }
    .close-modal-input-box input:focus,
    .tpsl-modal-input-box input:focus,
    .modal-input-box input:focus {
      outline: none;
    }
    .modal-input-box { cursor: text; }

    .close-modal-box {
      background: #202630;
      border: none;
      border-radius: 12px;
      padding: 24px 24px 20px;
      width: 480px;
      max-width: 96vw;
      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
      animation: modalSlideIn 0.2s ease-out;
      position: relative;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    }
    .close-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .close-modal-header h3 {
      font-size: 20px; font-weight: 700; color: #ffffff; margin: 0;
    }
    .close-modal-x {
      background: none; border: none; color: #5a6070;
      font-size: 22px; cursor: pointer; padding: 0 2px; line-height: 1;
    }
    .close-modal-x:hover { color: #eaecef; }

    /* 심볼·마진·방향·레버리지 서브타이틀 */
    .close-modal-subtitle {
      font-size: 15px; font-weight: 700; color: #eaecef;
      margin-bottom: 16px;
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .close-modal-subtitle .cm-sep   { color: #5a6070; }
    .close-modal-subtitle .cm-long  { color: #0ecb81; }
    .close-modal-subtitle .cm-short { color: #f6465d; }
    .close-modal-subtitle .cm-lev   { color: #0ecb81; }

    /* 포지션 정보 행 */
    .close-modal-info { margin-bottom: 18px; }
    .close-modal-info-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid #242830;
    }
    .close-modal-info-row:last-child { border-bottom: none; }
    .close-modal-info-row span:first-child {
      font-size: 13px; color: #848e9c; font-weight: 500;
    }
    .close-modal-info-row span:last-child {
      font-size: 14px; color: #eaecef; font-weight: 700;
    }

    /* Limit / Market 탭 */
    .close-modal-tabs {
      display: flex; gap: 0;
      border-bottom: 1px solid #363c46;
      margin-bottom: 16px;
    }
    .close-modal-tab {
      background: none; border: none;
      font-size: 14px; font-weight: 600; color: #5a6070;
      padding: 8px 18px 10px; cursor: pointer;
      position: relative;
    }
    .close-modal-tab.active { color: #eaecef; }
    .close-modal-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 14px; right: 14px;
      height: 2px; background: #ffffff; border-radius: 2px;
    }

    /* Price / Size 입력 박스 */
    .close-modal-input-box {
      background: #181c24;
      border: 1px solid #363c46;
      border-radius: 8px;
      padding: 11px 14px;
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 10px;
      cursor: text;
    }
    .close-modal-input-box label {
      font-size: 13px; font-weight: 600; color: #848e9c;
    }
    .close-modal-input-box .cm-val {
      font-size: 14px; font-weight: 700; color: #eaecef;
    }
    .close-modal-price-input {
      background: none !important; border: none !important; outline: none !important; box-shadow: none !important;
      color: #eaecef; font-size: 14px; font-weight: 700;
      text-align: right; width: 100%;
      -moz-appearance: textfield;
    }
    .close-modal-price-input::-webkit-outer-spin-button,
    .close-modal-price-input::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
    .close-modal-price-unit {
      font-size: 13px; color: #848e9c; margin-left: 6px; font-weight: 600;
    }

    /* 슬라이더 */
    .close-modal-slider-wrap { padding: 8px 0 18px; position: relative; }
    .close-modal-slider {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 3px;
      background: #4a5060; border-radius: 2px; outline: none; cursor: pointer;
    }
    .close-modal-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 11px; height: 11px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #ffffff;
      cursor: pointer;
      box-shadow: 0 0 4px rgba(255,255,255,0.2);
    }
    .close-modal-slider-labels {
      display: flex; justify-content: space-between;
      font-size: 12px; font-weight: 600; color: #5a6070; margin-top: 10px;
    }
    .close-modal-slider-labels span { cursor: pointer; }
    .close-modal-slider-labels span:hover { color: #eaecef; }

    /* 버튼 */
    .close-modal-buttons {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; margin-top: 8px;
    }
    .close-modal-btn {
      padding: 14px; border-radius: 50px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      transition: opacity 0.15s, transform 0.1s;
      letter-spacing: 0.2px;
    }
    .close-modal-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .close-modal-btn-cancel {
      background: #2f3743 !important;
      border: none !important;
      color: #EAECEF !important;
    }
    .close-modal-btn-cancel:hover { border-color: #6a7080; color: #eaecef; }
    .close-modal-btn-confirm,
    .close-modal-btn-confirm.long-confirm,
    .close-modal-btn-confirm.short-confirm {
      background: #f0b90b !important;
      color: #202630 !important;
      border: 2px solid transparent !important;
      font-weight: 700 !important;
    }

    /* ===== TP/SL MODAL ===== */
    #tpslModal {
      display: none; position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.75); z-index: 1000;
      justify-content: center; align-items: center;
    }
    #tpslModal.active { display: flex !important; }

    .tpsl-modal-box {
      background: #202630;
      border: none;
      border-radius: 12px;
      padding: 24px 24px 20px;
      width: 480px; max-width: 96vw;
      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
      animation: modalSlideIn 0.2s ease-out;
      max-height: 90vh; overflow-y: auto;
    }
    .tpsl-modal-header {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 16px;
    }
    .tpsl-modal-header h3 {
      font-size: 20px; font-weight: 700; color: #ffffff; margin: 0;
    }
    .tpsl-modal-x {
      background: none; border: none; color: #5a6070;
      font-size: 22px; cursor: pointer; padding: 0 2px; line-height: 1;
    }
    .tpsl-modal-x:hover { color: #eaecef; }

    .tpsl-modal-subtitle {
      font-size: 15px; font-weight: 700; color: #eaecef;
      margin-bottom: 14px;
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .tpsl-modal-subtitle .cm-long  { color: #0ecb81; }
    .tpsl-modal-subtitle .cm-short { color: #f6465d; }
    .tpsl-modal-subtitle .cm-lev   { color: #0ecb81; }

    .tpsl-modal-info { margin-bottom: 16px; }
    .tpsl-modal-info-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid #242830;
    }
    .tpsl-modal-info-row:last-child { border-bottom: none; }
    .tpsl-modal-info-row span:first-child {
      font-size: 13px; color: #848e9c; font-weight: 500;
    }
    .tpsl-modal-info-row span:last-child {
      font-size: 14px; color: #eaecef; font-weight: 700;
    }
    .tpsl-modal-info-row.liq-row span:last-child { color: #FF693D; }

    /* Entire / Partial 탭 */
    .tpsl-modal-tabs {
      display: flex; border-bottom: 1px solid #363c46; margin-bottom: 16px;
    }
    .tpsl-modal-tab {
      background: none; border: none;
      font-size: 14px; font-weight: 600; color: #5a6070;
      padding: 8px 18px 10px; cursor: pointer;
      position: relative;
    }
    .tpsl-modal-tab.active { color: #eaecef; }
    .tpsl-modal-tab.active::after {
      content: ''; position: absolute;
      bottom: -1px; left: 14px; right: 14px;
      height: 2px; background: #ffffff; border-radius: 2px;
    }

    /* Partial size 섹션 */
    .tpsl-partial-section { display: none; margin-bottom: 14px; }
    .tpsl-partial-section.visible { display: block; }
    .tpsl-modal-input-box {
      background: #181c24;
      border: 1px solid #363c46;
      border-radius: 8px;
      padding: 11px 14px;
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 8px;
      cursor: text;
    }
    .tpsl-modal-input-box:focus-within {
      border-color: #f0b90b;
    }
    .tpsl-modal-input-box input:focus {
      outline: none;
    }
    .tpsl-modal-input-box label {
      font-size: 13px; font-weight: 600; color: #848e9c;
    }
    .tpsl-modal-input-box .cm-val {
      font-size: 14px; font-weight: 700; color: #eaecef;
    }
    .tpsl-modal-amount {
      font-size: 13px; color: #848e9c; font-weight: 500; margin-bottom: 14px;
    }
    .tpsl-modal-amount b { color: #eaecef; font-weight: 700; }

    /* TP / SL 라벨 */
    .tpsl-section-label {
      font-size: 13px; font-weight: 700; color: #c8ccd4;
      margin-bottom: 8px; margin-top: 4px;
      text-transform: uppercase; letter-spacing: 0.5px;
    }

    /* TP / SL 입력 */
    .tpsl-input-row {
      background: #181c24;
      border: 1px solid #363c46;
      border-radius: 8px;
      padding: 11px 14px; margin-bottom: 10px;
      display: flex; align-items: center; gap: 8px;
    }
    .tpsl-input-row:focus-within { border-color: #f0b90b; }
    .tpsl-input-row input,
    .tpsl-input-row input[type="number"],
    .tpsl-input-row input[type="text"] {
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      -moz-appearance: textfield !important;
      color: #eaecef !important;
      font-size: 14px; font-weight: 600;
      text-align: right;
      flex: 1; min-width: 0; width: 100%;
    }
    .tpsl-input-row input::-webkit-outer-spin-button,
    .tpsl-input-row input::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
    .tpsl-input-row input::placeholder { color: #4a5265; }
    .tpsl-input-row .tpsl-unit {
      font-size: 13px; color: #848e9c; font-weight: 600;
    }
    .tpsl-divider { height: 1px; background: #363c46; margin: 14px 0; }

    /* 버튼 */
    .tpsl-modal-buttons {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; margin-top: 20px;
    }
    .tpsl-modal-btn {
      padding: 14px; border-radius: 50px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      transition: opacity 0.15s, transform 0.1s;
      letter-spacing: 0.2px;
    }
    .tpsl-modal-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .tpsl-modal-btn-cancel {
      background: #2f3743 !important;
      border: none !important;
      color: #EAECEF !important;
    }
    .tpsl-modal-btn-cancel:hover { border-color: #6a7080; color: #eaecef; }
    .tpsl-modal-btn-confirm { background: #f0b90b !important; color: #202630 !important; border: 2px solid transparent !important; font-weight: 700 !important; }
    
    .positions-content::-webkit-scrollbar,
    .orderbook-section::-webkit-scrollbar,
    .order-form-section::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    .positions-content::-webkit-scrollbar-track,
    .orderbook-section::-webkit-scrollbar-track,
    .order-form-section::-webkit-scrollbar-track {
      background: #0a0a0a;
    }
    
    .positions-content::-webkit-scrollbar-thumb,
    .orderbook-section::-webkit-scrollbar-thumb,
    .order-form-section::-webkit-scrollbar-thumb {
      background: #333;
      border-radius: 3px;
    }
    
    .positions-content::-webkit-scrollbar-thumb:hover,
    .orderbook-section::-webkit-scrollbar-thumb:hover,
    .order-form-section::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    .liquidation-badge {
      display: inline-block;
      background: rgba(255, 107, 107, 0.3);
      color: #f6465d;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: bold;
    }

    .binance-badge {
      display: inline-block;
      background: rgba(0, 212, 255, 0.2);
      color: #00d4ff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: bold;
      margin-left: 10px;
    }
  
/* TP/SL responsiveness */
#tpSlRow .tpsl-inline input { min-width: 0; }

/* TP/SL 옵션 UI */
.tpsl-pct{
  height:38px;
  border-radius:10px;
  border:1px solid #2b2b2b;
  background:#141414;
  color:#ddd;
  padding:0 10px;
  cursor:pointer;
  min-width:96px;
}
.tpsl-keep{
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 8px;
  border-radius:10px;
  border:1px solid #2b2b2b;
  background:#141414;
  color:#cfcfcf;
  user-select:none;
  white-space:nowrap;
  font-size:12px;
}

.tpsl-keep input{ width:14px; height:14px; accent-color:#00bcd4; }

/* 드래그 툴팁 */
#lwDragTip{
  position:fixed;
  z-index:9999;
  display:none;
  pointer-events:none;
  padding:5px 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.10);
  background:#1a1d27;
  color:#fff;
  font-size:12px;
  font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,0.55);
  white-space:nowrap;
  gap:4px;
  transition:none;
}

    /* Binance-style TP/SL block (row grid, no overlap, vertical SET) */
    .tpsl-block{
      display:grid;
      grid-template-columns: minmax(54px, 1fr) minmax(86px, 0.9fr) minmax(86px, 0.9fr) 46px;
      grid-template-rows: auto auto;
      gap:6px;
      align-items:stretch;
      border:1px solid rgba(255,255,255,0.10);
      border-radius:12px;
      padding:8px;
      background:rgba(0,0,0,0.20);
      min-width:0;
      overflow:visible;
    }

    /* Common input/select look */
    .tpsl-input,
    .tpsl-pct{
      width:100%;
      height:34px;
      border-radius:10px;
      border:1px solid #2b2b2b;
      background:#0f0f0f;
      color:#ddd;
      padding:0 10px;
      outline:none;
      box-sizing:border-box;
      min-width:0;
    }

    /* Make TP%/SL% text fit (prevent % clipping) */
    .tpsl-pct{
      font-size: 10px;
      padding: 0 8px;
      letter-spacing: -0.2px;
    }

    /* Keep toggle cell */
    .tpsl-keep{
      width:100%;
      height:34px;
      border-radius:10px;
      border:1px solid #2b2b2b;
      background:#0f0f0f;
      color:#cfcfcf;
      padding:0 8px;
      box-sizing:border-box;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      user-select:none;
      cursor:pointer;
      white-space:nowrap;
      font-size:12px;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .tpsl-keep input{ width:14px; height:14px; accent-color:#00bcd4; }

    /* Grid placement */
    #tpPrice{ grid-column:1; grid-row:1; }
    #tpPctSelect{ grid-column:2; grid-row:1; }
    #tpKeepToggleLabel{ grid-column:3; grid-row:1; }

    #slPrice{ grid-column:1; grid-row:2; }
    #slPctSelect{ grid-column:2; grid-row:2; }
    #slKeepToggleLabel{ grid-column:3; grid-row:2; }

    /* Vertical SET button */
    .tpsl-set{
      grid-column:4;
      grid-row:1 / span 2;
      width:100%;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.06);
      color:#eaeaea;
      cursor:pointer;
      box-sizing:border-box;

      display:flex;
      align-items:center;
      justify-content:center;

      writing-mode: vertical-rl;
      text-orientation: upright;
      font-weight:900;
      font-size:18px;
      padding:6px 0;
    }
    .tpsl-set:hover{ background:rgba(255,255,255,0.10); }

    /* Slightly tighter on smaller panels */
    

    /* Extra narrow: stack rows, SET becomes full-width */
    

/* ===== Position Size % Bar (inline, minimal) ===== */
.possize-inline{
  margin-top: 11px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  overflow: visible !important;
}
.possize-inline #posSizePct{
  width: 100%;
  height: 12px;
  appearance: none;
  -webkit-appearance: none;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  outline: none;
}
.possize-inline #posSizePct::-webkit-slider-runnable-track{
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  height: 12px;
}
.possize-inline #posSizePct::-webkit-slider-thumb{
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: #f0b90b;
  border: 2px solid #0a0a0a;
  transform: rotate(45deg);
  cursor: pointer;
  margin-top: -1px;
}
.possize-inline #posSizePct::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: #f0b90b;
  border: 2px solid #0a0a0a;
  transform: rotate(45deg);
  cursor: pointer;
}
.possize-inline #posSizeMaxBtn{
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.possize-inline #posSizeMaxBtn:hover{ background: #1a1e27; }

/* === v18 patch: stabilize positions table widths (prevent layout shift) === */
.positions-table { table-layout: fixed; width: 100%; min-width: 900px; }
.positions-table.tbl-assets, .positions-table.tbl-transactions { min-width: 0 !important; } /* [p3189] */
.positions-table th, .positions-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.positions-table td { font-variant-numeric: tabular-nums; font-family: 'IBM Plex Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
/* Time 컬럼 min-width는 인라인 style="width:170px"로 개별 적용 — 여기서 전체 적용 안 함 */

/* === v18 patch: Orderbook header colors === */
.orderbook-table th:nth-child(2),
.orderbook-table th:nth-child(3) { color: #666; }

    /* ===== v19 UI polish: stable numbers + pnl/roi coloring/flash (no layout change) ===== */
    .orderbook-table, .positions-table, .stat-item .value, .stat-item .sub-pnl, .current-price {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
    }
    .pnl-positive { color: #0ecb81 !important; }
    .pnl-negative { color: #f6465d !important; }

    @keyframes flashPos {
      0% { text-shadow: none; }
      50% { text-shadow: 0 0 12px rgba(14, 203, 129, 0.9); }
      100% { text-shadow: none; }
    }
    @keyframes flashNeg {
      0% { text-shadow: none; }
      50% { text-shadow: 0 0 12px rgba(246, 70, 93, 0.9); }
      100% { text-shadow: none; }
    }
    .flash-positive { animation: flashPos 0.4s ease-out 1; }
    .flash-negative { animation: flashNeg 0.4s ease-out 1; }

/* =====================
   UI polish (non-breaking, CSS-only)
   - Equalize order buttons size
   - Use flatter pill style like reference
   ===================== */
.order-buttons, .close-buttons{
  gap: 10px;
}

.btn-open-long, .btn-open-short, .btn-close-long, .btn-close-short{
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease;
}

.btn-open-long{ background: #2ebd85; }
.btn-open-short{ background: #f6465d; }
/* Close buttons: short close = green (buy back), long close = red (sell) */
.btn-close-long{ background: #2ebd85; }
.btn-close-short{ background: #f6465d; }

.btn-open-long:hover, .btn-open-short:hover, .btn-close-long:hover, .btn-close-short:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Make the 4 buttons feel like one block */
.order-buttons, .close-buttons{ margin-top: 15px; }

/* === v43 UI hotfix (CSS-only) ===
   1) Leverage slider track and leverage input (10 box) vertical align
   2) TP/SL SET button integrity (prevent clipping) while keeping vertical text
*/
.leverage-input-row{
  align-items:center !important;
}
.leverage-slider-container{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.leverage-slider{
  margin:0 !important;
}
#leverageInput{
  height:38px !important;
  line-height:38px !important;
  align-self:center !important;
  box-sizing:border-box !important;
}

/* TP/SL SET button - keep vertical but ensure it doesn't look broken/clipped */
.tpsl-block{
  align-items:center !important;
}
.tpsl-set{
  align-self:stretch !important;
  min-height:82px !important; /* 38+38+gap(6) approximated */
  padding:4px 0 !important;
  line-height:1 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* === v45 UI hotfix (CSS-only) ===
   Goal:
   - Remove unwanted vertical scrollbar on the right trading panel (no right-side bar)
   - Keep buttons away from Windows taskbar with a "reasonable" bottom breathing room
   - Keep leverage slider + input perfectly aligned
   NOTE: No JS/HTML structure changes.
*/

/* 1) Prevent page-level vertical scrollbar */
html, body{
  height: 100%;
  overflow: hidden !important;
}
.main-container{
  height: 100vh !important;
  overflow: hidden !important;
}

/* 2) Give bottom breathing room WITHOUT forcing scroll */
.order-panel .panel-content{
  padding-bottom: 22px !important; /* reasonable */
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Slightly tighten vertical spacing above to compensate (keeps everything fitting) */
.order-panel .form-section{ 
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.order-panel .form-row{ 
  margin-bottom: 16px !important;
}
#tpslSection {
  margin-top: 16px !important;
}
#limitPriceRow {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
#sizeFormRow {
  margin-bottom: 0 !important;
}
.order-buttons, .close-buttons{ 
  margin-top: 10px !important;
}

/* 3) Leverage row alignment (ensure slider track and input box center-align) */
.leverage-input-row{
  display: flex !important;
  align-items: center !important;
}
.leverage-slider{
  display:block !important;
  margin: 0 !important;
}
#leverageInput{
  height: 38px !important;
  line-height: 38px !important;
  align-self: center !important;
}

/* === v46 UI tweak (CSS-only) ===
   - Leverage slider bar width matches Position Size bar (same 1fr layout)
   - Leverage numeric box width reduced to ~1/2
   - Does NOT alter JS/HTML logic.
*/
.leverage-input-row{
  display: grid !important;
  grid-template-columns: 1fr 44px !important; /* ~half-size box */
  gap: 12px !important;
  align-items: center !important;
}
.leverage-slider-container{
  width: 100% !important;
  min-width: 0 !important;
}
#leverageInput{
  width: 44px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === v47 UI hotfix (CSS-only) ===
   - Fix leverage input text alignment (centered, proper padding)
   - Ensure NO vertical scrollbar appears on the right panel (and page)
   - Keep previous sizing changes intact
*/

/* 1) Absolutely prevent page-level scrollbar */
html, body{
  height: 100% !important;
  overflow: hidden !important;
}
.main-container{
  height: 100vh !important;
  overflow: hidden !important;
}

/* If any wrapper was reintroducing scroll, clamp it */
.main-content, .content-wrapper, .right-panel {
  overflow: hidden !important;
}
.order-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 2) Right trading panel internal spacing without scroll */
.order-panel .panel-content{
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding-bottom: 22px !important;
}

/* 3) Leverage input: center the number visually */
#leverageInput{
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  line-height: 38px !important;
}

/* Some browsers style number inputs differently; normalize */
#leverageInput::-webkit-outer-spin-button,
#leverageInput::-webkit-inner-spin-button{
  margin: 0 !important;
}

/* === v56 Slider ticks (overlay, no logic break) ===
   - Dots stay strictly over the actual range track width (not including MAX/inputs)
   - Does NOT modify existing slider listeners or trade logic
*/
.slider-overlay-track{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 0;
  pointer-events: none;
  z-index: 8;
}

.slider-overlay-track .slider-dot{
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: auto;
  cursor: pointer;
}

.slider-overlay-track .slider-dot.active{
  background: rgba(0, 192, 135, 0.9);
  border-color: rgba(0, 192, 135, 0.9);
  box-shadow: 0 0 0 4px rgba(0, 192, 135, 0.18);
}

.slider-overlay-track .slider-dot::after{
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.78);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.slider-overlay-track .slider-dot:hover::after{ opacity: 1; }

.slider-overlay-float{
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.78);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  z-index: 9;
  pointer-events: none;
  white-space: nowrap;
}

/* === v59 slider stability ===
   - Slightly larger thumb hit area for easier dragging (visual kept similar)
   - Ticks are visual only; no overlap from multiple systems
*/
.possize-inline input[type="range"]::-webkit-slider-thumb,
.leverage-input-row input[type="range"]::-webkit-slider-thumb{
  width: 14px !important;
  height: 14px !important;
  border-radius: 0 !important;
  background: #f0b90b !important;
  transform: rotate(45deg) !important;
  border: 2px solid #0a0a0a !important;
  box-shadow: none !important;
}
.possize-inline input[type="range"]::-moz-range-thumb,
.leverage-input-row input[type="range"]::-moz-range-thumb{
  width: 14px !important;
  height: 14px !important;
  border-radius: 0 !important;
  background: #f0b90b !important;
  transform: rotate(45deg) !important;
  border: 2px solid #0a0a0a !important;
  box-shadow: none !important;
}

/* New v59 tick visuals */
.slider-v59-track{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:0;
  pointer-events:none;
  z-index:8;
}
.slider-v59-dot{
  position:absolute;
  top:0;
  transform:translate(-50%,-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.18);
}
.slider-v59-dot.active{
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.18);
  box-shadow: none;
}
.slider-v59-dot::after{
  content: attr(data-label);
  position:absolute;
  left:50%;
  top:-18px;
  transform:translateX(-50%);
  font-size:11px;
  line-height:1;
  padding:4px 6px;
  border-radius:8px;
  background: rgba(0,0,0,0.78);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
}
.slider-v59-dot:hover::after{ opacity:1; }

.slider-v59-float{
  position:absolute;
  top:-20px;
  transform:translateX(-50%);
  font-size:11px;
  line-height:1;
  padding:4px 6px;
  border-radius:8px;
  background: rgba(0,0,0,0.78);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  z-index:9;
  pointer-events:none;
  white-space:nowrap;
}

/* === v67 helpers === */
.hide-when-zero{ display:none !important; }
.no-tooltip .slider-v59-dot::after{ opacity:0 !important; }

/* === v68: extra ghost guards === */
.slider-v59-float:empty,
.slider-overlay-float:empty,
.slider-float:empty{
  display:none !important;
}

/* === v69: tooltip/ghost helpers === */
.no-tooltip .slider-v59-dot::after,
.no-tooltip .slider-dot-hit::after,
.no-tooltip .slider-dot::after{
  opacity:0 !important;
}

/* TP/SL percent fixed display (100% only) */
.tpsl-pct.fixed100{
  pointer-events:none;
  cursor:default;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  /* div-based fixed display: keep layout identical while centering text */
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:0 10px;
  line-height:1;
  user-select:none;
}

/* hide legacy select arrow (IE/Edge legacy) */
.tpsl-pct.fixed100::-ms-expand{ display:none; }

/* FIX76I: spacing between tab bar and action buttons (match reference) */
.order-tabs { margin-bottom: 32px !important; }
#openOrderButtons, #closePositionButtons { margin-top: 15px !important; }

/* FIX76I: stronger active highlight for tabs/buttons (exclude Open/Close tabs) */
.margin-tab.active, .order-type-tab.active, .order-tab.active, .order-tab-btn.active {
  background: #3a4149 !important;
  color: #fff !important;
  box-shadow: none !important;
}
#tabOpenBtn.active, #tabCloseBtn.active {
  background: #3a4149 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
#tabOpenBtn:not(.active), #tabCloseBtn:not(.active) {
  background: transparent !important;
  color: #848e9c !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* FIX84C: hide top header Symbol/PRICE block (keep DOM for JS) */
.top-header .symbol-info{display:none !important;}

/* FIX84C: ensure overlay positions relative to chart */
#chart{position:relative;}

/* ===== OrderBook UI enhancements (Gate-style) ===== */
.orderbook-table th{
  text-transform:none !important;
  font-weight:600 !important;
  color:#666 !important;
}
.orderbook-divider.ob-mid{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  font-size:20px;
  font-weight:700;
  text-align:left;
}
.orderbook-divider.ob-mid.pos{ color:#0ecb81; }
.orderbook-divider.ob-mid.neg{ color:#f6465d; }
.ob-mid-arrow{
  width:18px;
  display:inline-block;
  text-align:center;
  opacity:0.9;
}
#obMarkPrice{
  font-weight:200;
}
.orderbook-table td{
  font-variant-numeric: tabular-nums;
}
.orderbook-table td.ob-cell{
  position:relative;
  overflow:hidden;
  padding-right:14px !important;
}
.ob-bar{
  position:absolute;
  top:2px;
  bottom:2px;
  right:8px;
  border-radius:4px;
  opacity:0.22;
  pointer-events:none;
}
.ob-bar.ask{ left:auto; }
.ob-bar.bid{ left:auto; }
.ob-txt{
  position:relative;
  z-index:1;
}
.orderbook-ratio{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0px 8px;
  background:#0a0a0a;
  border:none;
  margin-left:-18px;
  margin-top:0px;
}
.orderbook-ratio .bar{
  width:60%;
  flex:none;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  background: rgba(255,255,255,0.06);
}
.orderbook-ratio .bar .b{ background: rgba(93,237,93,0.85); }
.orderbook-ratio .bar .s{ background: rgba(255,107,107,0.85); }
.orderbook-ratio .txt{
  font-size:11px;
  color:#cfcfcf;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* ===================== FIX87 OrderBook stability ===================== */
.orderbook-container{ height:100%; display:flex; flex-direction:column; min-height:0; }
.orderbook-section{ flex:1 1 0; min-height:0; overflow:hidden; }

/* Keep columns perfectly aligned & prevent number "jump" */
.orderbook-table{ table-layout: fixed; }
.orderbook-table th, .orderbook-table td{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.orderbook-table th{ white-space:nowrap; }
#obSizeHeader, #obSumHeader{ color:#666 !important; }

/* Explicit column widths */
.orderbook-table th:nth-child(1), .orderbook-table td:nth-child(1){ width: 34%; text-align:left; padding-left:10px; }
.orderbook-table th:nth-child(2), .orderbook-table td:nth-child(2){ width: 33%; text-align:right; }
.orderbook-table th:nth-child(3), .orderbook-table td:nth-child(3){ width: 33%; text-align:right; }

/* Row height — driven by CSS variable (set by JS __obAdjustRowHeight) */
.orderbook-table td{ line-height: 1; }
.orderbook-table td{ padding-top:var(--ob-pad-v, 4px); padding-bottom:var(--ob-pad-v, 4px); }
.orderbook-table th{ padding-top:4px; padding-bottom:4px; }
.orderbook-table tbody tr{ height: var(--ob-row-h, 22px); border: none !important; }

/* Bars: visible + animated + smooth width transitions */
.ob-bar{ background: rgba(255,255,255,0.12); transition: width 160ms linear; }
.ob-bar.ask{ background: rgba(246,70,93,0.25); }
.ob-bar.bid{ background: rgba(14,203,129,0.25); }
.ob-bar::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-60%;
  width:60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.25), rgba(255,255,255,0.0));
  animation: obwave 1.2s linear infinite;
  opacity: 0.45;
}
@keyframes obwave{
  from{ transform: translateX(0); }
  to{ transform: translateX(220%); }
}

/* Prevent mid divider stealing too much height */
.orderbook-divider{ flex:0 0 auto; }

/* Ratio bar pinned at bottom of container */
/* Ratio bar — fully controlled by JS inline style */

/* Never clip bottom digits */
.orderbook-panel, .panel-content{ min-height:0; }

/* FIX88: Orderbook header controls */
.ob-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ob-header .ob-title{ font-weight:700; font-size:13.2px; }
.ob-controls{ display:flex; align-items:center; gap:8px; }
.ob-steps, .ob-view{ display:flex; gap:4px; align-items:center; }
.ob-step-btn, .ob-view-btn{
  height:22px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0a0a0a;
  color:#cfd6df;
  font-size:11px;
  cursor:pointer;
}
.ob-view-btn{
  display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.ob-view-btn svg{ opacity:0.6; }
.ob-view-btn.active svg{ opacity:1; }
.ob-step-btn.active, .ob-view-btn.active{
  background: rgba(255,255,255,0.10);
  color:#fff;
}

/* FIX89: Size/Sum numbers must be white (Binance feel) */
.orderbook-table td:nth-child(2),
.orderbook-table td:nth-child(3){
  color:#fff !important;
}
.orderbook-table thead th:nth-child(2),
.orderbook-table thead th:nth-child(3){
  color:#666 !important;
}

/* FIX89: Gate.io-style B/S ratio bar at bottom */
.ob-bs{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.ob-bs-txt{ font-size:11px; color:#cfd6df; min-width:44px; }
.ob-bs-bar{
  position:relative;
  flex:1;
  height:10px;
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
}
.ob-bs-bar .b, .ob-bs-bar .s{
  position:absolute;
  top:0;
  bottom:0;
  transition: width 260ms ease;
}
.ob-bs-bar .b{ left:0; background:rgba(0, 192, 135, 0.75); }
.ob-bs-bar .s{ right:0; background:rgba(246, 70, 93, 0.75); }

/* FIX88: Horizontal orderbook layout option */
.orderbook-container.ob-horizontal{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:0;
}
.orderbook-container.ob-horizontal .orderbook-section{ flex:1 1 0; min-width:0; }
.orderbook-container.ob-horizontal .orderbook-divider{
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid #222;
  border-right:1px solid #222;
  margin:0;
}
.orderbook-container.ob-horizontal .orderbook-divider .mid-wrap{ text-align:center; }

/* FIX88: make size bars more visible than sum bars */
.ob-bar{ opacity:0.28; }
.ob-bar::before{ opacity:0.55; }

/* FIX90: Orderbook header controls */
.ob-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ob-title{ font-weight:700; }
.ob-controls{ display:flex; align-items:center; gap:10px; }
.ob-controls .ob-group, .ob-controls .ob-layout{ display:flex; gap:6px; }
.ob-ctrl-btn{
  background:#0b0f14;
  border:1px solid rgba(255,255,255,0.14);
  color:#cfd6df;
  font-size:11px;
  padding:4px 7px;
  border-radius:8px;
  cursor:pointer;
  line-height: 14px;
}
.ob-ctrl-btn:hover{ border-color: rgba(255,255,255,0.26); }
.ob-ctrl-btn.active{
  background:#121823;
  border-color: rgba(255,255,255,0.28);
  color:#ffffff;
}

/* FIX90: Orderbook size/sum numbers must be white like Binance */
.orderbook-table td.ob-cell .ob-txt{ color:rgba(255,255,255,0.85); }
.orderbook-table td.ob-cell{ color:rgba(255,255,255,0.85); }

/* FIX93: Gate-like Orderbook typography (Inter + tabular nums) */
.orderbook-table td,
.orderbook-table td .ob-txt,
.orderbook-table th{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.orderbook-table td{ font-size: var(--ob-font-size, 12px); }
.orderbook-table th{ font-size: 12px; font-weight: 600; color: #666; }
/* Price column colors — one step lighter */
.orderbook-table td.ask{ color:rgba(246,70,93,0.85) !important; }
.orderbook-table td.bid{ color:rgba(14,203,129,0.85) !important; }

/* FIX90: ratio bar colors */
.orderbook-ratio .lbl{ font-size:11px; color:#cfd6df; min-width:48px; line-height:1; }
.orderbook-ratio #obRatioB{ min-width:68px; text-align:right; padding-right:0; }
.orderbook-ratio .bar{ position:relative; background:#111; border:1px solid #222; height:5px; }
.orderbook-ratio .bar-b{ position:absolute; left:0; top:0; bottom:0; background: rgba(0,192,135,0.95); }
.orderbook-ratio .bar-s{ position:absolute; right:0; top:0; bottom:0; background: rgba(246,70,93,0.95); }

/* FIX90: simple horizontal toggle (optional) */
.orderbook-container.horizontal{
  display:flex;
  flex-direction:row;
  gap:6px;
}
.orderbook-container.horizontal .orderbook-section{ flex:1; }
.orderbook-container.horizontal .orderbook-divider{
  width: 12px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* Chart Info panel (separate box, does not touch chart overlay) */
.chart-info-box{
  position: fixed;
  right: 16px;
  top: 120px;
  width: 320px;
  max-height: 70vh;
  overflow: auto;
  background: rgba(16,18,22,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 9999;
  color: #cfd6df;
  font-family: inherit;
}
.chart-info-box.hidden{ display:none; }
.chart-info-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.chart-info-title{ font-weight:700; font-size:13px; }
.chart-info-close{
  background: transparent;
  border: 0;
  color:#9aa6b2;
  cursor:pointer;
  font-size:14px;
  padding:4px 6px;
  border-radius:8px;
}
.chart-info-close:hover{ background: rgba(255,255,255,0.06); }
.chart-info-body{
  padding: 10px 12px 12px;
  font-size: 12px;
  line-height: 1.45;
}
.chart-info-body .row{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.08); }
.chart-info-body .row:last-child{ border-bottom:0; }
.chart-info-body .k{ color:#9aa6b2; }
.chart-info-body .v{ color:#e6edf5; font-weight:600; text-align:right; }

/* AUTO 버튼 활성화 스타일 */
.tvui-auto.active {
  color: #2962FF !important;
  border-color: #2962FF !important;
}

/* p36: righttabs 70px left */
.tvui-righttabs {
  margin-right: 0 !important;
  visibility: hidden;
}

/* p183: Funding badge box — move down 2px */
.tvui-funding{ margin-top:2px !important; }

/* p183: Favorites bar — move up 2px */
.tvui-favbar{ margin-top:-2px !important; }

/* p191: Chart topbar symbol — max brightness */
.tvui-symbol, .tvui-symbol span#tvuiSymbol{ color:#ffffff !important; }

/* ===== H-mode Orderbook (Gate-style) ===== */
.ob-h-wrapper{
  display:flex; flex-direction:column; height:100%; width:100%; background:#0a0a0a;
}
.ob-h-top{
  flex:0 0 auto; padding:6px 10px; display:flex; align-items:baseline; gap:8px;
  border-bottom:1px solid #222;
}
.ob-h-price{
  font-size:20px; font-weight:700; color:#0ecb81;
  font-variant-numeric:tabular-nums;
}
.ob-h-price.neg{ color:#f6465d; }
.ob-h-price.pos{ color:#0ecb81; }
.ob-h-mark{
  font-size:13px; font-weight:200; color:#888;
  min-width:90px; text-align:right;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.ob-h-header{
  flex:0 0 auto; display:flex; padding:3px 0; border-bottom:1px solid #222;
  font-size:12px; color:#666; font-weight:600; text-transform:none;
}
.ob-h-hdr-left, .ob-h-hdr-right{
  flex:1; display:flex; justify-content:space-between; padding:0 8px; gap:8px;
}
.ob-h-body{
  flex:1 1 0; min-height:0; display:flex; gap:0; overflow:hidden;
}
.ob-h-bids, .ob-h-asks{
  flex:1; display:flex; flex-direction:column; overflow:hidden;
}
.ob-h-bids{ border-right:1px solid #222; }
.ob-h-row{
  display:flex; align-items:center; position:relative; cursor:pointer;
  height:var(--ob-h-row-h, 22px);
  font-size:var(--ob-h-font, 12px);
  font-variant-numeric:tabular-nums;
  padding:0 8px;
  border:none;
}
.ob-h-row:hover{ background:rgba(255,255,255,0.04); }
.ob-h-bar-wrap{
  position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; pointer-events:none;
}
.ob-h-bid .ob-h-bar-wrap{ direction:rtl; }
.ob-h-bar{
  position:absolute; top:0; bottom:0; transition:width 160ms linear;
}
.ob-h-bar.bid{ right:0; background:rgba(14,203,129,0.35); }
.ob-h-bar.ask{ left:0; background:rgba(246,70,93,0.35); }
.ob-h-bar::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-60%;
  width:60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.25), rgba(255,255,255,0.0));
  animation: obwave 1.2s linear infinite;
  opacity: 0.45;
}
.ob-h-amt{
  position:relative; z-index:3; flex:1; color:rgba(255,255,255,1.0);
}
.ob-h-bid .ob-h-amt{ text-align:left; }
.ob-h-ask .ob-h-amt{ text-align:right; }
.ob-h-px{
  position:relative; z-index:3; flex:1;
}
.ob-h-bid .ob-h-px{ text-align:right; color:rgba(14,203,129,1.0); }
.ob-h-ask .ob-h-px{ text-align:left; color:rgba(246,70,93,1.0); }
.ob-h-ratio{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:0 8px; background:#0a0a0a; height:20px;
  border:none; margin-left:-18px; margin-top:0;
}
.ob-h-ratio-lbl{ font-size:11px; min-width:48px; font-variant-numeric:tabular-nums; }
.ob-h-ratio-bar{
  flex:1; height:5px; border-radius:999px; overflow:hidden; display:flex;
  background:rgba(255,255,255,0.06);
}
.ob-h-ratio-b{ background:rgba(0,192,135,0.95); transition:width 300ms; }
.ob-h-ratio-s{ background:rgba(246,70,93,0.95); transition:width 300ms; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* p431: topbar position:relative - 변동금액 absolute 배치용 */
#tvOverlayUI .tvui-topbar {
  position: relative !important;
  overflow: visible !important;
}

/* ===== p366: positions 세로 스크롤 복원 ===== */
.positions-section {
  overflow: visible !important;
}
.content-wrapper.v13-grid .positions-section {
  overflow: visible !important;
}
/* positions-content: p405 바디스크롤로 대체됨 */
.positions-content {
  height: auto;
  overflow-y: auto;
  overflow-x: auto;
  flex: none;
}

/* ===== p372: Switch 버튼 배경 투명 ===== */
#__switchBtn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
#__switchBtn:hover { filter: brightness(1.2); }

/* ==========================================================
   [SCROLL p395]
   - 페이지: 최대 높이까지만 스크롤 (무한정 X)
   - 포지션 많으면: 포지션 영역 안에서 스크롤바
   ========================================================== */

/* 1) 페이지 스크롤 허용 */
html, body {
  height: auto !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

/* 2) 앱 컨테이너 */
.main-container {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* 3) 그리드: 1행 고정(min-content 방지), 2행 auto */
.content-wrapper.v13-grid {
  grid-template-columns: 1fr 350px 370px !important;
  grid-template-rows: minmax(clamp(420px, 62vh, 680px), clamp(420px, 62vh, 680px)) auto !important;
  height: auto !important;
  overflow: visible !important;
  min-height: 0 !important;
}

/* 4) 상단 1행 패널들: row 높이 채우기, 절대 줄어들지 않도록 */
.content-wrapper.v13-grid .left-col,
.content-wrapper.v13-grid .orderbook-panel {
  min-width: 0 !important;
  min-height: clamp(420px, 62vh, 680px) !important;
  height: clamp(420px, 62vh, 680px) !important;
  overflow: hidden !important;
}

/* 5) 차트: row1 안에서만 렌더 */
.content-wrapper.v13-grid .chart-section { height: 100% !important; min-height: 0 !important; }
.content-wrapper.v13-grid #chart { height: 100% !important; min-height: 0 !important; }

/* 5-1) 주문패널: 포지션 영역 포함 전체 높이로 늘어남 */
.content-wrapper.v13-grid .order-panel {
  min-width: 0 !important;
  height: auto !important;
  min-height: clamp(420px, 62vh, 680px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-self: stretch !important;
}

/* 5-2) positions-section 고정 200px 해제 */
.content-wrapper.v13-grid .positions-section {
  height: auto !important;
}

/* 6) 포지션 영역: 탭헤더 고정 + 컨텐츠 max-height 제한 */
.content-wrapper.v13-grid .positions-section {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 7) 포지션 컨텐츠 래퍼 */
.positions-content-wrap {
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 8) 포지션 컨텐츠: max-height 제한 + 내부 스크롤 */
.content-wrapper.v13-grid .positions-section .positions-content {
  height: auto !important;
  max-height: 400px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  display: block !important;
}
/* p634: Conditional 탭 활성 시 Basic 숨김 */
.content-wrapper.v13-grid .positions-section .positions-content.__cond-hidden {
  display: none !important;
}

    
    .close-modal-input-box input,
    .tpsl-modal-input-box input,
    .tpsl-input-row input,
    .close-modal-box input[type="number"],
    .tpsl-modal-box input[type="number"] {
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }
/* p439: 슬라이더 tick dots */
    .slider-dots-row {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 0 1px;
      margin-top: -10px;
      margin-bottom: 4px;
      pointer-events: none;
    }
    .slider-dot-tick {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #4a5265;
      flex-shrink: 0;
      margin-top: 0;
    }
    /* 슬라이더 트랙 아래 구분선 */
    .close-modal-slider-labels,
    .tpsl-modal-slider-labels {
      margin-top: 6px;
    }
/* ===== p436: Gate.io style Toast Notifications ===== */
#toastContainer {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  background: #1e2329;
  border: 1px solid #2b3139;
  border-radius: 8px;
  padding: 12px 40px 12px 14px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  pointer-events: all;
  position: relative;
  animation: toastIn 0.22s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}
.toast-item.toast-hiding {
  opacity: 0;
  transform: translateX(20px);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-close {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: none;
  color: #848e9c; font-size: 14px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.toast-close:hover { color: #eaecef; }
.toast-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.toast-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.toast-icon-filled  { background: #0ecb81; color: #fff; }
.toast-icon-submit  { background: #1890ff; color: #fff; }
.toast-icon-sl      { background: #f6465d; color: #fff; }
.toast-icon-liq     { background: #f6465d; color: #fff; }
.toast-title {
  font-size: 14px; font-weight: 700; color: #eaecef;
}
.toast-divider {
  width: 1px; height: 14px;
  background: #3c4148; margin: 0 4px;
}
.toast-symbol {
  font-size: 14px; font-weight: 700; color: #eaecef;
}
.toast-tag {
  font-size: 11px; color: #848e9c;
  background: #2b3139; border-radius: 3px;
  padding: 1px 6px;
}
.toast-body {
  font-size: 14px; font-weight: 600; color: #c8ccd4;
  padding-left: 28px; margin-top: 2px;
}

/* === Trading Settings Panel Animation === */
@keyframes __slideInRight {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1;   }
}

/* ── p514: 상단 3버튼 바 ── */
#topControlBar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
}
#topControlBar button:hover {
  background: #363c45 !important;
  color: #fff !important;
}

/* #orderTabBar → theme.css에서 관리 */

.order-type-tabs {
  display: none !important;
}

/* Buy Long / Sell Short 버튼 width 100% 꽉차게 */
.order-buttons {
  display: flex !important;
  gap: 8px !important;
  padding: 0 0px !important;
  margin-top: 12px !important;
}
.btn-open-long, .btn-open-short {
  flex: 1 !important;
  width: 100% !important;
  border-radius: 6px !important;
  height: 44px !important;
  font-size: 14px !important;
}

/* ── p524: 상단 UI 간격 + Limit/Market 언더라인 (theme.css가 Open/Close 담당) ── */

#topControlBar {
  margin-bottom: 10px !important;
}

#orderTypeTabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2b2b2b !important;
  padding: 0 !important;
  margin: -3px 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
}
#orderTypeLimit, #orderTypeMarket, #orderTypeConditional {
  display: inline-block;
  border-bottom: 2px solid transparent;
  padding: 10px 12px 8px;
  font-size: 13px;
  color: #848e9c;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: -1px;
  user-select: none;
  text-align: center;
}
#orderTypeLimit.active-tab, #orderTypeMarket.active-tab, #orderTypeConditional.active-tab {
  color: #fff;
  font-weight: 700;
}
/* 밑줄을 글자 너비에만 적용 */
#orderTypeLimit .tf-label, #orderTypeMarket .tf-label, #orderTypeConditional .tf-label {
  border-bottom: 2px solid transparent;
  padding-bottom: 8px;
}
#orderTypeLimit.active-tab .tf-label, #orderTypeMarket.active-tab .tf-label, #orderTypeConditional.active-tab .tf-label {
  border-bottom: 2px solid #fff;
}
/* 외부 span border-bottom 제거 */
#orderTypeLimit, #orderTypeMarket, #orderTypeConditional {
  border-bottom: none !important;
  margin-bottom: 0;
}

/* ===== p1041: Conditional dropdown ===== */
.cond-drop-item {
  padding: 9px 14px;
  font-size: 13px;
  color: #d1d4dc;
  cursor: pointer;
  white-space: nowrap;
}
.cond-drop-item:hover {
  background: #2b3139;
  color: #fff;
}
#conditionalOrderForm input[type="text"] {
  outline: none !important;
  transition: border-color 0.15s;
}
#conditionalOrderForm input[type="text"]:focus {
  border-color: #f0b90b !important;
}
#conditionalOrderForm .form-row {
  margin-bottom: 8px;
}
#conditionalOrderForm input[type="text"] {
  width: 100%;
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border-radius: 8px !important;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  box-sizing: border-box;
}
#conditionalOrderForm input[type="text"]:hover,
#conditionalOrderForm input[type="text"]:focus {
  border-color: #f0b90b !important;
  outline: none;
}
/* ===== end p1041 ===== */
#limitPrice {
  height: 36px !important;
}

/* p638: Limit Price 박스 호버 노란 테두리 + 스피너 제거 + 폰트 크기 */
#limitPrice {
  height: 36px !important;
  font-size: 16px !important;
  -moz-appearance: textfield !important;
}
#limitPrice::-webkit-outer-spin-button,
#limitPrice::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
#limitPrice:hover,
#limitPrice:focus {
  border-color: #f0b90b !important;
  outline: none !important;
}
/* Conditional 탭 입력박스 hover/focus */
#condStopPriceDefault:hover, #condStopPriceDefault:focus,
#condPriceDefault:hover, #condPriceDefault:focus,
#condTriggerPriceSM:hover, #condTriggerPriceSM:focus,
#condTriggerPriceSL:hover, #condTriggerPriceSL:focus,
#condLimitPriceSL:hover, #condLimitPriceSL:focus {
  border-color: #f0b90b !important;
  outline: none !important;
}
/* marketPrice 스피너도 제거 */
#marketPrice::-webkit-outer-spin-button,
#marketPrice::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* p645: TP/SL 바이낸스 스타일 입력창 */
.tpsl-input-new {
  width: 100% !important;
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border-radius: 8px !important;
  height: 36px !important;
  font-size: 14px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield !important;
  display: block !important;
}
.tpsl-input-new::-webkit-outer-spin-button,
.tpsl-input-new::-webkit-inner-spin-button { -webkit-appearance: none !important; }
.tpsl-input-new:hover,
.tpsl-input-new:focus { border-color: #f0b90b !important; outline: none !important; }
.tpsl-input-new::placeholder { color: #4a5265; }

/* p646: 커스텀 체크박스 - 검정 바탕 흰 테두리 */
.custom-chk {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  background: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
}
.custom-chk:checked {
  background: #f0b90b !important;
  border-color: #f0b90b !important;
}
.custom-chk:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 4px !important;
  height: 8px !important;
  border: 2px solid #000 !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
}

/* [p699] 툴바 버튼 간격 통일 - 10px */
#tvuiVolBtn      { margin-left: 10px !important; }
#tvuiSettingsBtn { margin-left: 10px !important; }

/* [p814] 심볼 topbar 흰색 테두리 제거 */
#tvOverlayUI .tvui-topbar {
  border: none !important;
  background: #0a0a0a !important;
}

/* [p814] timebar 흰색 테두리 제거 */
.tvui-timebar {
  border: none !important;
  background: #0a0a0a !important;
}

/* [p814] 바이낸스 스타일 TF바 - 박스 제거, 위아래 얇은 선만 */
#tvOverlayUI .tvui-row {
  margin-top: 0 !important;
  padding: 4px 8px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: #0a0a0a !important;
  gap: 0 !important;
  align-items: center !important;
}
.tvui-timebar {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  top: 0 !important;
  padding: 0 4px !important;
}
.tvui-righttabs {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  top: 0 !important;
  padding: 0 4px !important;
}


/* p1060: TF active 초기 깜빡임 방지 — timebar 전체를 숨겼다가 복원 후 표시 */
html.__p1060tf-init .tvui-timebar {
  visibility: hidden !important;
}
html.__p1060tf-init .tvui-btn.active {
  color: #848e9c !important;
  border-bottom: none !important;
  font-weight: normal !important;
}

/* p1060h: LWC 내장 TV attribution 텍스트 로고 숨김 (둥근 PNG 로고는 유지) */
#chart a[href*="tradingview.com"]:not([title]) {
  display: none !important;
}

/* p1060m: 풀화면 확대 시 Funding 영역 완전 숨김 */
body:has(#__expandWrap) #tvuiFunding,
body:has(#__expandWrap) .tvui-funding {
  display: none !important;
}

/* [v4j] Anti-flicker: Hide positions/orders content until auth-ui.js finishes auth check.
 *       auth-ui.js runs late (loaded at end of body) and toggles .auth-hidden AFTER
 *       receiving /auth/check response — during that window, .positions-content-wrap
 *       is briefly visible causing header flash on page load.
 *       This rule in main.css (loaded in <head>) takes effect from the very first paint.
 *       auth-ui.js adds .__auth-ready class to <body> after applyPositionsContent runs,
 *       at which point this rule stops applying and normal .auth-hidden logic governs.
 */
body:not(.__auth-ready) .positions-content-wrap {
  visibility: hidden !important;
}