/* ==========================================================================
   BINANCE AUTOTRADER PRO - UPBIT-STYLE EXCHANGE INTERFACE
   Clean, authentic Korean crypto exchange visual design (Red Up / Blue Down)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Upbit Signature Navy & Accents */
    --upbit-navy: #093687;
    --upbit-navy-dark: #052661;
    --upbit-navy-light: #1049ad;
    --upbit-blue-accent: #00c1ff;

    /* Korean Exchange Standards: Red = Up/Yangbong, Blue = Down/Eumbong */
    --color-up: #c84a31;
    --color-up-dark: #b13c24;
    --color-up-bg: #fcf0f0;
    --color-up-bar: rgba(200, 74, 49, 0.12);

    --color-down: #1261c4;
    --color-down-dark: #0c4da0;
    --color-down-bg: #edf4fb;
    --color-down-bar: rgba(18, 97, 196, 0.12);

    --color-even: #333333;

    /* Surfaces & Borders */
    --bg-page: #e9ecf1;
    --bg-card: #ffffff;
    --bg-sub: #f8f9fb;
    --bg-hover: #f3f6fa;
    --border-card: #e0e5ee;
    --border-light: #edf0f5;
    --border-input: #d5dbe4;
    --border-focus: #093687;

    /* Typography */
    --text-primary: #2b2b2b;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    /* Metrics & Radii */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 5px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.16);

    --font-sans: 'Noto Sans KR', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, Menlo, monospace;
}

/* Optional Dark Theme Mode */
body.upbit-dark {
    --bg-page: #0b0e14;
    --bg-card: #151a24;
    --bg-sub: #1b212e;
    --bg-hover: #222a3a;
    --border-card: #262e3d;
    --border-light: #1f2633;
    --border-input: #2f394a;
    --text-primary: #f0f3f8;
    --text-secondary: #9aa7b9;
    --text-muted: #6b7788;
    --color-up: #ef5350;
    --color-up-dark: #d32f2f;
    --color-up-bg: rgba(239, 83, 80, 0.16);
    --color-down: #388eff;
    --color-down-dark: #1e88e5;
    --color-down-bg: rgba(56, 142, 255, 0.16);
    --color-even: #9aa7b9;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select {
    font-family: inherit;
    font-size: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   1. GNB TOP HEADER (Upbit Signature Navy #093687)
   ========================================================================== */
.upbit-header {
    width: 100%;
    height: 56px;
    background-color: var(--upbit-navy);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.header-inner {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Branding */
.upbit-logo {
    display: flex;
    align-items: baseline;
    gap: 5px;
    text-decoration: none;
    user-select: none;
}

.logo-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.logo-dot {
    width: 5px;
    height: 5px;
    background-color: var(--upbit-blue-accent);
    border-radius: 50%;
    display: inline-block;
    align-self: flex-end;
    margin-bottom: 3px;
}

.logo-sub {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    letter-spacing: 0.4px;
}

/* Main GNB Nav Links */
.gnb-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gnb-link {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 500;
    height: 56px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.gnb-link:hover, .gnb-link.active {
    color: #ffffff;
    font-weight: 700;
}

.gnb-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bot Badges in Header */
.header-bot-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.upbit-badge,
.badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.badge-paper {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.badge-futures {
    background: var(--upbit-blue-accent) !important;
    color: var(--upbit-navy-dark) !important;
    font-weight: 800 !important;
    border: none !important;
}

.badge-running {
    background: var(--color-up) !important;
    color: #ffffff !important;
    border: none !important;
}

.badge-stopped {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

.badge-live {
    background: #dc3545 !important;
    color: #ffffff !important;
    border: none !important;
}

.badge-spot {
    background: #6c757d !important;
    color: #ffffff !important;
    border: none !important;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

/* Header Bot Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.upbit-btn-bot,
#btnToggleBot,
.btn-danger,
.btn.btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: var(--color-up) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

.upbit-btn-bot:hover,
#btnToggleBot:hover,
.btn-danger:hover,
.btn.btn-danger:hover {
    background: var(--color-up-dark) !important;
}

.upbit-btn-bot.btn-start,
#btnToggleBot.btn-start,
#btnToggleBot.btn-primary,
.btn.btn-primary {
    background: var(--color-down) !important;
    color: #ffffff !important;
}

.upbit-btn-bot.btn-start:hover,
#btnToggleBot.btn-start:hover,
#btnToggleBot.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--color-down-dark) !important;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.icon-btn.btn-settings {
    width: auto;
    padding: 0 8px;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

.btn-label {
    font-size: 11px;
}

/* ==========================================================================
   2. NOTICE BAR
   ========================================================================== */
.upbit-notice-bar {
    width: 100%;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-card);
    padding: 6px 0;
}

.notice-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notice-badge {
    background-color: #edf4fb;
    color: var(--upbit-navy);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
}

.notice-ticker {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.notice-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.notice-close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}

.notice-close:hover {
    color: var(--text-primary);
}

/* Mobile Tabs Bar */
.mobile-nav-tabs {
    display: none;
}

/* ==========================================================================
   3. MAIN EXCHANGE LAYOUT (Upbit 2-Column Desktop Grid)
   ========================================================================== */
.upbit-main-container {
    max-width: 1440px;
    margin: 8px auto 20px auto;
    padding: 0 12px;
}

.exchange-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 8px;
    align-items: start;
}

.trading-desk-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card Common */
.coin-summary-card,
.upbit-chart-card,
.upbit-panel,
.upbit-market-card,
.kpi-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

/* ==========================================================================
   3-0. ACCOUNT ASSETS & DAILY PNL KPI CARDS (총 평가 자산 & 금일 실현 손익)
   ========================================================================== */
.kpi-banner-section {
    margin-bottom: 8px;
    width: 100%;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.kpi-card {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.clickable-kpi {
    cursor: pointer;
}

.clickable-kpi:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
    transform: translateY(-1px);
    border-color: var(--upbit-blue-accent);
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.kpi-badge-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-sub);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.kpi-value-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-value {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.kpi-value.highlight {
    font-size: 16px;
    color: var(--upbit-navy);
}

.kpi-krw {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.kpi-footer {
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    padding-top: 6px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kpi-footer .sub-label {
    font-size: 11px;
    color: var(--text-muted);
}

.kpi-footer strong {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
}

.kpi-footer .sub-sep {
    color: var(--border-input);
    margin: 0 2px;
}

.kpi-balance-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    line-height: 1.3;
}

.kpi-balance-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.kpi-balance-footer .kpi-eval-tag {
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}

.kpi-balance-footer .kpi-eval-tag strong {
    font-size: 10.5px;
    font-weight: 700;
}

.kpi-balance-footer .kpi-eval-tag .eval-pnl {
    font-weight: 700;
    font-size: 9.5px;
    margin-left: 2px;
}

.kpi-eval-tag.eval-profit,
.kpi-eval-tag.eval-profit strong,
.kpi-eval-tag.eval-profit .eval-pnl {
    color: var(--color-up, #c84a31);
}

.kpi-eval-tag.eval-loss,
.kpi-eval-tag.eval-loss strong,
.kpi-eval-tag.eval-loss .eval-pnl {
    color: var(--color-down, #1261c4);
}

body.upbit-dark .kpi-eval-tag.eval-profit,
body.upbit-dark .kpi-eval-tag.eval-profit strong,
body.upbit-dark .kpi-eval-tag.eval-profit .eval-pnl {
    color: #ef5350;
}

body.upbit-dark .kpi-eval-tag.eval-loss,
body.upbit-dark .kpi-eval-tag.eval-loss strong,
body.upbit-dark .kpi-eval-tag.eval-loss .eval-pnl {
    color: #388eff;
}

.gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 600;
}

.lbl-sell { color: var(--color-down); }
.lbl-neutral { color: var(--text-muted); }
.lbl-buy { color: var(--color-up); }

.signal-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 2px;
}

.signal-tag.buy {
    background: rgba(200, 74, 49, 0.15);
    color: var(--color-up);
}

.signal-tag.sell {
    background: rgba(18, 97, 196, 0.15);
    color: var(--color-down);
}

.signal-tag.neutral {
    background: var(--bg-sub);
    color: var(--text-secondary);
}

body.upbit-dark .kpi-card {
    background: #181d27;
    border-color: #262f3f;
}

body.upbit-dark .kpi-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.upbit-dark .kpi-badge-pill {
    background: #1e2433;
    border-color: #333d52;
    color: #9aa7b9;
}

body.upbit-dark .kpi-value.highlight {
    color: #38bdf8;
}

body.upbit-dark .kpi-footer {
    border-top-color: #262f3f;
}

/* ==========================================================================
   3-A. COIN SUMMARY HEADER CARD
   ========================================================================== */
.coin-summary-card {
    padding: 14px 16px 10px 16px;
}

.coin-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
}

.coin-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-star-fav {
    background: none;
    border: none;
    font-size: 16px;
    color: #ffc107;
    cursor: pointer;
    line-height: 1;
}

.coin-name-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.coin-kr-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.coin-symbol-pair {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.coin-sub-tabs {
    display: flex;
    gap: 4px;
}

.sub-tab-btn {
    background: none;
    border: none;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 2px;
}

.sub-tab-btn:hover {
    color: var(--text-primary);
}

.sub-tab-btn.active {
    background: var(--bg-sub);
    color: var(--upbit-navy);
    font-weight: 700;
}

/* Price & Stats Row */
.coin-price-stats-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 10px;
}

.main-price-box {
    display: flex;
    flex-direction: column;
}

.price-krw-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.big-price-krw {
    font-size: 30px;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1.1;
    color: var(--color-even);
}

.unit-krw {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.price-change-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.change-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.change-pct {
    font-weight: 700;
}

.change-icon {
    font-size: 11px;
}

.change-diff {
    font-weight: 700;
}

.price-usdt-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Korean Colors: Red = UP, Blue = DOWN */
.price-up {
    color: var(--color-up) !important;
}

.price-down {
    color: var(--color-down) !important;
}

.price-even {
    color: var(--color-even) !important;
}

/* 4 Metrics Grid (2x2) */
.market-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 4px;
    min-width: 320px;
}

.metric-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 2px 0;
    border-bottom: 1px solid var(--border-light);
}

.metric-lbl {
    color: var(--text-secondary);
    font-weight: 500;
}

.metric-val {
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* Header Account & Bot Strip (Compact 1-row summary) */
.header-account-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 6px 10px;
    background: var(--bg-sub);
    border-radius: var(--radius-sm);
    font-size: 11px;
    border: 1px solid var(--border-light);
}

.account-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.acc-lbl {
    color: var(--text-muted);
}

.acc-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
}

.acc-krw {
    color: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-mono);
}

.acc-fee-note {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 3px;
}

.badge-strategy {
    background: #edf4fb;
    color: var(--upbit-navy);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 10px;
}

.badge-tf {
    background: var(--border-input);
    color: var(--text-primary);
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
}

.clickable-pnl {
    cursor: pointer;
    border-bottom: 1px dashed var(--text-muted);
}

/* ==========================================================================
   3-B. UPBIT CHART CARD
   ========================================================================== */
.upbit-chart-card {
    padding: 10px 14px 12px 14px;
}

.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.tf-btn-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.tf-btn {
    background: none;
    border: 1px solid transparent;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
}

.tf-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tf-btn.active {
    background: var(--upbit-navy);
    color: #ffffff;
    font-weight: 700;
}

.upbit-select-tf {
    border: 1px solid var(--border-input);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 2px;
    margin-left: 4px;
}

.chart-tools-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.indicator-pills {
    display: flex;
    gap: 3px;
}

.ind-pill {
    background: none;
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 2px;
    cursor: pointer;
}

.ind-pill.active {
    background: #edf4fb;
    color: var(--upbit-navy);
    border-color: var(--upbit-navy);
    font-weight: 700;
}

body.upbit-dark .ind-pill {
    background: #1e2433;
    border-color: #333d52;
    color: #9aa7b9;
}

body.upbit-dark .ind-pill:hover {
    background: #283244;
    color: #ffffff;
}

body.upbit-dark .ind-pill.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
    font-weight: 800;
}

.zoom-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-sub);
    padding: 2px 4px;
    border-radius: 2px;
    border: 1px solid var(--border-light);
}

.btn-tool {
    background: none;
    border: none;
    padding: 2px 5px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 2px;
}

.btn-tool:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.zoom-badge-pill {
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0 4px;
}

.btn-refresh {
    font-size: 12px;
}

/* Canvas Wrapper */
.canvas-chart-wrapper {
    width: 100%;
    height: 420px;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

#tradingCanvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

.chart-tooltip {
    position: absolute;
    display: none;
    background: rgba(33, 37, 41, 0.95);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 11px;
    font-family: var(--font-mono);
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5;
}

/* ==========================================================================
   3-C. ORDER BOOK & ORDER FORM (SPLIT 50:50)
   ========================================================================== */
.orderbook-and-trade-section {
    width: 100%;
}

.split-trade-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.upbit-panel {
    display: flex;
    flex-direction: column;
}

/* Panel Tab Bar */
.panel-tab-bar {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-sub);
}

.ptab-btn {
    background: none;
    border: none;
    height: 100%;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
}

.ptab-btn:hover {
    color: var(--text-primary);
}

.ptab-btn.active {
    color: var(--upbit-navy);
    font-weight: 700;
}

.ptab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--upbit-navy);
}

.ob-stream-indicator {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #28a745;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ob-stream-indicator .pulse-dot {
    background: #28a745;
}

/* Order Book Widget Layout */
.orderbook-widget {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
}

.ob-table-header {
    display: grid;
    grid-template-columns: 30% 22% 24% 24%;
    padding: 5px 10px;
    background: var(--bg-sub);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.ob-col-h.price-col { text-align: left; }
.ob-col-h.pct-col { text-align: right; }
.ob-col-h.amount-col { text-align: right; }
.ob-col-h.total-col { text-align: right; }

.orderbook-list {
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

/* Asks & Bids Rows */
.ob-row {
    position: relative;
    display: grid;
    grid-template-columns: 30% 22% 24% 24%;
    padding: 4px 10px;
    height: 26px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    align-items: center;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.orderbook-asks .ob-row {
    background-color: var(--color-down-bg);
}

.orderbook-bids .ob-row {
    background-color: var(--color-up-bg);
}

.ob-row:hover {
    filter: brightness(0.95);
}

/* Depth Bars behind the text */
.ob-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
}

.ob-ask-bar {
    background-color: var(--color-down-bar);
}

.ob-bid-bar {
    background-color: var(--color-up-bar);
}

.ob-price, .ob-pct, .ob-amount, .ob-total {
    position: relative;
    z-index: 2;
}

.ob-ask-price {
    color: var(--color-down);
    text-align: left;
}

.ob-bid-price {
    color: var(--color-up);
    text-align: left;
}

.ob-pct {
    text-align: right;
    font-size: 10px;
    font-weight: 500;
}

.ob-pct.up { color: var(--color-up); }
.ob-pct.down { color: var(--color-down); }

.ob-amount {
    text-align: right;
    color: var(--text-primary);
}

.ob-total {
    text-align: right;
    color: var(--text-muted);
}

.ob-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* Mid Price / Spread in Orderbook */
.orderbook-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    height: 36px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-input);
    border-bottom: 1px solid var(--border-input);
    z-index: 5;
}

.ob-mid-left {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.ob-mid-right {
    display: flex;
    align-items: center;
}

.ob-mid-price {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.ob-mid-arrow {
    font-size: 11px;
    font-weight: 700;
}

.ob-mid-krw {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.ob-spread {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Bottom summary in Orderbook */
.ob-bottom-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 6px 10px;
    background: var(--bg-sub);
    border-top: 1px solid var(--border-card);
    font-size: 11px;
}

.ob-sum-cell {
    display: flex;
    flex-direction: column;
}

.ob-sum-cell.center {
    align-items: center;
}

.ob-sum-cell.right {
    align-items: flex-end;
}

.ob-sum-lbl {
    color: var(--text-muted);
    margin-bottom: 2px;
    font-size: 10px;
}

.ob-sum-val {
    font-family: var(--font-mono);
    font-weight: 700;
}

.ask-color { color: var(--color-down); }
.bid-color { color: var(--color-up); }

/* ==========================================================================
   3-C (2). UPBIT ORDER FORM (주문창)
   ========================================================================== */
.orderform-panel {
    background: var(--bg-card);
}

.order-main-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 38px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-sub);
}

.otab-btn {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.otab-btn:hover {
    color: var(--text-primary);
}

/* Buy Tab Active: Red */
.otab-btn.buy-tab.active {
    color: var(--color-up);
    font-weight: 800;
    background: var(--bg-card);
}

.otab-btn.buy-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-up);
}

/* Sell Tab Active: Blue */
.otab-btn.sell-tab.active {
    color: var(--color-down);
    font-weight: 800;
    background: var(--bg-card);
}

.otab-btn.sell-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-down);
}

.otab-btn.shortcut-tab.active,
.otab-btn.history-tab.active {
    color: var(--upbit-navy);
    font-weight: 800;
    background: var(--bg-card);
}

.otab-btn.shortcut-tab.active::after,
.otab-btn.history-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--upbit-navy);
}

.order-form-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Order Type Radios */
.order-type-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.radio-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
}

.radio-lbl input:checked + span {
    color: var(--text-primary);
    font-weight: 700;
}

/* Balance Row */
.form-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
}

.lbl-avail {
    font-size: 12px;
    color: var(--text-secondary);
}

.val-avail-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-mono);
}

.val-avail {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.val-avail-krw {
    font-size: 11px;
    color: var(--text-muted);
}

/* Input Groups */
.order-input-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.input-lbl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.coin-unit {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.upbit-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s;
    text-align: right;
}

.upbit-input:focus {
    border-color: var(--border-focus);
}

.upbit-input[readonly] {
    background: var(--bg-sub);
    color: var(--text-primary);
}

/* Stepper Wrappers */
.input-stepper-wrap {
    display: flex;
    position: relative;
}

.input-stepper-wrap .upbit-input {
    padding-right: 68px;
}

.stepper-btns {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    border-left: 1px solid var(--border-input);
}

.step-btn {
    width: 32px;
    background: var(--bg-sub);
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}

.step-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.step-btn:first-child {
    border-right: 1px solid var(--border-light);
}

.input-sub-krw {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    font-family: var(--font-mono);
}

/* Percentage Quick Buttons */
.pct-btn-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 4px;
}

.upbit-pct-btn {
    height: 26px;
    background: var(--bg-sub);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s;
}

.upbit-pct-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.upbit-pct-btn.active {
    background: var(--upbit-navy);
    color: #ffffff;
    border-color: var(--upbit-navy);
}

/* Primary Action Submit Button */
.order-submit-wrap {
    margin-top: 4px;
}

.upbit-submit-btn {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.2px;
}

.btn-buy-primary {
    background-color: var(--color-up);
}

.btn-buy-primary:hover {
    background-color: var(--color-up-dark);
}

.btn-sell-primary {
    background-color: var(--color-down);
}

.btn-sell-primary:hover {
    background-color: var(--color-down-dark);
}

/* Secondary Bot Quick Actions Bar */
.bot-quick-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 5px;
    margin-top: 2px;
}

.btn-sub-action {
    height: 30px;
    background: var(--bg-sub);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-sub-action:hover {
    background: var(--bg-hover);
}

.btn-danger-action {
    background: #fff0f0;
    color: var(--color-up);
    border-color: #ffd2d2;
}

.btn-danger-action:hover {
    background: #ffe0e0;
}

/* Radar Mini Card */
.radar-mini-card {
    background: var(--bg-sub);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}

.radar-top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.radar-lbl {
    color: var(--text-muted);
}

.radar-val {
    font-family: var(--font-mono);
    color: var(--upbit-navy);
}

.radar-state {
    font-weight: 600;
    color: var(--text-secondary);
}

.signal-gauge-container {
    width: 100%;
}

.signal-gauge-bar {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--color-down), #ffc107, var(--color-up));
    border-radius: 2px;
    position: relative;
}

.gauge-marker {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 2px solid #333333;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: left 0.3s;
}

.radar-sub-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
}

/* ==========================================================================
   3-D. ACTIVITY & HISTORY SECTION (체결 / 일별 / 포지션 / 로그)
   ========================================================================== */
.activity-history-section {
    width: 100%;
}

.history-panel {
    background: var(--bg-card);
}

.history-tab-bar {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-sub);
}

.htab-btn {
    background: none;
    border: none;
    height: 100%;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
}

.htab-btn:hover {
    color: var(--text-primary);
}

.htab-btn.active {
    color: var(--upbit-navy);
    font-weight: 700;
}

.htab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--upbit-navy);
}

.history-extra-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-fee-toggle, .btn-ghost-sm {
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-fee-toggle:hover, .btn-ghost-sm:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.history-content-tab {
    display: block;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Upbit Common Table */
.upbit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.upbit-table th {
    background: var(--bg-sub);
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.upbit-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.upbit-table tr:hover td {
    background-color: var(--bg-hover);
}

.data-table-clickable tbody tr {
    cursor: pointer;
}

.trade-badge {
    display: inline-block;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
}

.trade-buy {
    background: var(--color-up-bg);
    color: var(--color-up);
}

.trade-sell {
    background: var(--color-down-bg);
    color: var(--color-down);
}

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
}

/* Empty Positions Box */
.upbit-pos-empty {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.empty-icon {
    font-size: 24px;
}

.empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.empty-params {
    display: flex;
    gap: 14px;
    background: var(--bg-sub);
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 11px;
    margin: 6px 0;
    border: 1px solid var(--border-light);
}

.empty-actions {
    display: flex;
    gap: 8px;
}

.positions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

/* Logs Console */
.logs-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-sub);
    border-bottom: 1px solid var(--border-light);
}

.logs-live-tag {
    font-size: 11px;
    font-weight: 700;
    color: #28a745;
}

.upbit-logs-console {
    height: 160px;
    overflow-y: auto;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.log-entry {
    padding: 2px 0;
    border-bottom: 1px solid var(--border-light);
}

.log-info {
    color: var(--text-primary);
}

/* ==========================================================================
   4. RIGHT COLUMN: MARKET / COIN LIST SIDEBAR
   ========================================================================== */
.market-sidebar-col {
    position: sticky;
    top: 64px;
}

.upbit-market-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Search Box */
.market-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-card);
}

.search-input-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.market-search-input {
    width: 100%;
    height: 32px;
    padding: 0 24px 0 26px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-sub);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.market-search-input:focus {
    border-color: var(--upbit-navy);
    background: var(--bg-card);
}

.btn-clear-search {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.btn-market-setting {
    background: none;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-market-setting:hover {
    background: var(--bg-hover);
}

/* Market Tabs (KRW / USDT / BTC / 보유 / 관심) */
.market-tab-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 34px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-sub);
}

.mtab-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.mtab-btn:hover {
    color: var(--text-primary);
}

.mtab-btn.active {
    color: var(--upbit-navy);
    font-weight: 700;
    background: var(--bg-card);
}

.mtab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--upbit-navy);
}

/* Table Header */
.market-table-header {
    display: grid;
    grid-template-columns: 34% 24% 20% 22%;
    padding: 6px 10px;
    background: var(--bg-sub);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    user-select: none;
}

.mth-col {
    cursor: pointer;
}

.mth-col.name-col { text-align: left; }
.mth-col.price-col { text-align: right; }
.mth-col.chg-col { text-align: right; }
.mth-col.vol-col { text-align: right; }

/* Market Coin List Items */
.market-coin-list {
    max-height: 680px;
    overflow-y: auto;
    background: var(--bg-card);
}

.market-coin-row {
    display: grid;
    grid-template-columns: 34% 24% 20% 22%;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.market-coin-row:hover {
    background: var(--bg-hover);
}

.market-coin-row.active {
    background: #edf4fb;
    border-left: 3px solid var(--upbit-navy);
}

.mc-col-name {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.mc-kr-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.mc-sym-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.mc-col-price {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
}

.mc-col-chg {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

.mc-col-vol {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
}

.market-loading {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* ==========================================================================
   5. CLEAN MINIMAL BOT FOOTER (NO Dunamu, NO fake corporate text)
   ========================================================================== */
.bot-minimal-footer {
    width: 100%;
    height: 38px;
    background: #ffffff;
    border-top: 1px solid var(--border-card);
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.footer-bot-title {
    font-weight: 700;
    color: var(--upbit-navy);
}

.footer-sep {
    color: var(--border-input);
}

/* ==========================================================================
   6. MODALS & POPUPS (Upbit Dialog Style)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal-container.upbit-dialog {
    background: #ffffff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-popup);
    width: 90%;
    max-width: 580px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-card);
}

.receipt-dialog {
    max-width: 500px;
    width: 92%;
}

/* Receipt Card & Layout */
.receipt-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.receipt-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 4px;
}

.receipt-symbol-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.receipt-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 8px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.receipt-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.receipt-item-row span:first-child {
    color: var(--text-secondary);
}

.receipt-item-row .mono {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.receipt-item-row .mono.strong {
    font-weight: 700;
    color: var(--text-primary);
}

.receipt-item-row.strong {
    font-weight: 700;
    color: var(--text-primary);
    padding: 9px 0;
}

.receipt-item-row.pnl-row {
    font-size: 14px;
    background: var(--bg-sub);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin: 4px 0;
    border-bottom: none;
    border: 1px solid var(--border-card);
}

.receipt-item-row.pnl-row span:first-child {
    font-weight: 700;
    color: var(--text-primary);
}

.receipt-item-row.pnl-row .mono {
    font-size: 16px;
    font-weight: 800;
}

.receipt-divider {
    height: 1px;
    background: var(--border-card);
    margin: 8px 0;
    width: 100%;
}

.receipt-divider.dashed {
    border-top: 1px dashed var(--border-input);
    background: none;
    height: 0;
    margin: 8px 0;
}

/* Payout Result Banner Box */
.receipt-payout-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-sub);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-top: 10px;
}

body.upbit-dark .receipt-payout-box {
    background: #0e121a;
    border-color: #262e3d;
}

.receipt-payout-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.receipt-payout-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.receipt-payout-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.receipt-payout-value {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.receipt-payout-amount {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.receipt-payout-krw {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 500;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-sub);
}

.modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 18px;
    overflow-y: auto;
}

.form-section {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--upbit-navy);
    margin-bottom: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.form-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.form-control:focus {
    border-color: var(--border-focus);
}

/* Modal quick pct & leverage buttons */
.label-with-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge-preview {
    font-size: 10px;
    color: var(--upbit-navy);
    background: #edf4fb;
    padding: 1px 4px;
    border-radius: 2px;
}

.input-pct-wrapper, .input-leverage-wrapper {
    display: flex;
    gap: 6px;
}

.quick-pct-buttons {
    display: flex;
    gap: 3px;
    flex: 1;
}

.btn-pct, .btn-lev {
    flex: 1;
    height: 34px;
    background: var(--bg-sub);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.btn-pct:hover, .btn-lev:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-pct.active, .btn-lev.active {
    background: var(--upbit-navy);
    color: #ffffff;
    border-color: var(--upbit-navy);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid var(--border-card);
    background: var(--bg-sub);
}

.modal-footer-actions {
    display: flex;
    gap: 6px;
}

.btn {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--upbit-navy);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--upbit-navy-dark);
}

.btn-secondary {
    background: var(--border-input);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: #c3cbda;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ==========================================================================
   6-B. DARK THEME MODAL & INPUT OVERRIDES
   ========================================================================== */
body.upbit-dark .modal-container.upbit-dialog {
    background: #151a24;
    border: 1px solid #2f394a;
    color: #f0f3f8;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

body.upbit-dark .modal-header {
    background: #11151e;
    border-bottom: 1px solid #232a38;
}

body.upbit-dark .modal-title {
    color: #ffffff;
}

body.upbit-dark .modal-subtitle {
    color: #9aa7b9;
}

body.upbit-dark .modal-close {
    color: #9aa7b9;
}

body.upbit-dark .modal-close:hover {
    color: #ffffff;
}

body.upbit-dark .modal-body {
    background: #151a24;
    color: #f0f3f8;
}

body.upbit-dark .form-section {
    border-bottom: 1px solid #232a38;
}

body.upbit-dark .form-section-title {
    color: #38bdf8;
    font-weight: 700;
}

body.upbit-dark .form-group label {
    color: #cbd5e1;
}

body.upbit-dark .form-control {
    background: #1e2433;
    border: 1px solid #333d52;
    color: #ffffff;
}

body.upbit-dark .form-control:focus {
    border-color: #38bdf8;
    background: #22293a;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

body.upbit-dark .form-control::placeholder {
    color: #64748b;
}

body.upbit-dark select.form-control option {
    background: #1e2433;
    color: #ffffff;
}

body.upbit-dark .badge-preview {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

body.upbit-dark .quick-pct-buttons .btn-pct,
body.upbit-dark .quick-pct-buttons .btn-lev {
    background: #1e2433;
    border: 1px solid #333d52;
    color: #cbd5e1;
}

body.upbit-dark .quick-pct-buttons .btn-pct:hover,
body.upbit-dark .quick-pct-buttons .btn-lev:hover {
    background: #2a3346;
    color: #ffffff;
}

body.upbit-dark .quick-pct-buttons .btn-pct.active,
body.upbit-dark .quick-pct-buttons .btn-lev.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
    font-weight: 800;
}

body.upbit-dark .modal-footer {
    background: #11151e;
    border-top: 1px solid #232a38;
}

body.upbit-dark .btn-outline {
    background: transparent;
    border: 1px solid #333d52;
    color: #9aa7b9;
}

body.upbit-dark .btn-outline:hover {
    background: #1e2433;
    color: #ffffff;
}

body.upbit-dark .btn-secondary {
    background: #2a3346;
    color: #f0f3f8;
    border: 1px solid #364154;
}

body.upbit-dark .btn-secondary:hover {
    background: #364154;
}

body.upbit-dark .btn-primary {
    background: #0284c7;
    color: #ffffff;
}

body.upbit-dark .btn-primary:hover {
    background: #0369a1;
}

/* Dark Mode Dashboard Components Polish */
body.upbit-dark .upbit-notice-bar {
    background: #151a24;
    border-bottom: 1px solid #232a38;
}

body.upbit-dark .notice-badge {
    background: #1e293b;
    color: #38bdf8;
}

body.upbit-dark .bot-minimal-footer {
    background: #11151e;
    border-top: 1px solid #232a38;
    color: #64748b;
}

body.upbit-dark .footer-bot-title {
    color: #38bdf8;
}

body.upbit-dark .market-coin-row.active {
    background: #1a2332;
    border-left: 3px solid #38bdf8;
}

body.upbit-dark .order-main-tabs,
body.upbit-dark .panel-tab-bar,
body.upbit-dark .history-tab-bar,
body.upbit-dark .market-tab-bar {
    background: #11151e;
    border-color: #232a38;
}

body.upbit-dark .otab-btn.buy-tab.active,
body.upbit-dark .otab-btn.sell-tab.active,
body.upbit-dark .otab-btn.shortcut-tab.active,
body.upbit-dark .otab-btn.history-tab.active,
body.upbit-dark .ptab-btn.active,
body.upbit-dark .htab-btn.active,
body.upbit-dark .mtab-btn.active {
    background: #151a24;
}

body.upbit-dark .ptab-btn.active,
body.upbit-dark .htab-btn.active,
body.upbit-dark .mtab-btn.active {
    color: #38bdf8;
}

body.upbit-dark .ptab-btn.active::after,
body.upbit-dark .htab-btn.active::after,
body.upbit-dark .mtab-btn.active::after {
    background: #38bdf8;
}

body.upbit-dark .receipt-dialog {
    background: #151a24;
    border: 1px solid #2f394a;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
}

body.upbit-dark .receipt-dialog .modal-header {
    background: #10141d;
    border-bottom: 1px solid #232a38;
}

body.upbit-dark .receipt-header-row {
    border-bottom: 1px solid #262e3d;
}

body.upbit-dark .receipt-item-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.upbit-dark .receipt-item-row.pnl-row {
    background: #18202d;
    border: 1px solid #2a3547;
}

body.upbit-dark .receipt-divider {
    background: #232b3a;
}

body.upbit-dark .receipt-divider.dashed {
    border-top: 1px dashed #2d3748;
}

body.upbit-dark .receipt-payout-box {
    background: #0f131b;
    border: 1px solid #263142;
}

body.upbit-dark .receipt-dialog .modal-footer {
    background: #10141d;
    border-top: 1px solid #232a38;
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: rgba(33, 37, 41, 0.95);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.toast-fade-out {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PNL SETTLEMENT ALERT HUD (익절 / 손절 스르륵 나타났다 사라지는 화면 정중앙 HUD 알림)
   ========================================================================== */
.pnl-alert-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    max-width: 92vw;
    width: 460px;
}

.pnl-alert-card {
    pointer-events: auto;
    position: relative;
    width: 100%;
    background: rgba(18, 24, 38, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    animation: pnlCenterIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pnl-alert-card:hover {
    transform: scale(1.02);
}

.pnl-alert-card.fade-out {
    animation: pnlCenterOut 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 익절 (Take Profit) */
.pnl-alert-card.pnl-take_profit {
    border: 1.5px solid rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(15, 23, 42, 0.98) 65%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(16, 185, 129, 0.28);
}
.pnl-alert-card.pnl-take_profit .pnl-alert-tag {
    background: rgba(16, 185, 129, 0.22);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.pnl-alert-card.pnl-take_profit .pnl-alert-amount {
    color: #10b981;
    text-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}
.pnl-alert-card.pnl-take_profit .pnl-progress-bar {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* 손절 (Stop Loss) */
.pnl-alert-card.pnl-stop_loss {
    border: 1.5px solid rgba(239, 68, 68, 0.6);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(15, 23, 42, 0.98) 65%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(239, 68, 68, 0.28);
}
.pnl-alert-card.pnl-stop_loss .pnl-alert-tag {
    background: rgba(239, 68, 68, 0.22);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.pnl-alert-card.pnl-stop_loss .pnl-alert-amount {
    color: #ef4444;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}
.pnl-alert-card.pnl-stop_loss .pnl-progress-bar {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* 본절컷 (Breakeven) */
.pnl-alert-card.pnl-breakeven {
    border: 1.5px solid rgba(59, 130, 246, 0.6);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(15, 23, 42, 0.98) 65%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(59, 130, 246, 0.28);
}
.pnl-alert-card.pnl-breakeven .pnl-alert-tag {
    background: rgba(59, 130, 246, 0.22);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.4);
}
.pnl-alert-card.pnl-breakeven .pnl-alert-amount {
    color: #3b82f6;
    text-shadow: 0 0 14px rgba(59, 130, 246, 0.5);
}
.pnl-alert-card.pnl-breakeven .pnl-progress-bar {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* 라이트 모드 지원 */
body:not(.upbit-dark) .pnl-alert-card {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body:not(.upbit-dark) .pnl-alert-card.pnl-take_profit {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(255, 255, 255, 0.98) 65%);
}
body:not(.upbit-dark) .pnl-alert-card.pnl-stop_loss {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(255, 255, 255, 0.98) 65%);
}
body:not(.upbit-dark) .pnl-alert-card.pnl-breakeven {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(255, 255, 255, 0.98) 65%);
}

.pnl-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pnl-alert-tag {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

.pnl-alert-coin {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    margin-left: 8px;
}

.pnl-alert-side {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.pnl-alert-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.pnl-alert-amount {
    font-size: 28px;
    font-weight: 800;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.5px;
}

.pnl-alert-pct {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.pnl-alert-krw {
    font-size: 13.5px;
    color: #94a3b8;
    margin-left: auto;
    font-family: var(--font-mono, monospace);
}

.pnl-alert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pnl-alert-reason {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65%;
}

.pnl-alert-price {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}

.pnl-alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.pnl-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    animation: pnlProgress 4.5s linear forwards;
}

@keyframes pnlCenterIn {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(24px);
    }
    60% {
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pnlCenterOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.88) translateY(-20px);
    }
}

@keyframes pnlProgress {
    0% { width: 100%; }
    100% { width: 0%; }
}

.mobile-action-bar {
    display: none;
}

/* ==========================================================================
   7. POSITION CARDS & REALTIME FLASH UTILITIES
   ========================================================================== */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orderbook-panel {
    display: flex;
    flex-direction: column;
}

.tab-content {
    display: flex;
    flex-direction: column;
}

@keyframes flashGreen {
    0% { background-color: rgba(200, 74, 49, 0.35); }
    100% { background-color: transparent; }
}

@keyframes flashRed {
    0% { background-color: rgba(18, 97, 196, 0.35); }
    100% { background-color: transparent; }
}

.flash-green {
    animation: flashGreen 0.6s ease-out;
}

.flash-red {
    animation: flashRed 0.6s ease-out;
}

/* Position Pro Cards */
.position-card-pro {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-pro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pos-pro-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-symbol-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.pos-symbol-name:hover {
    color: #4A90E2;
    background: rgba(9, 54, 135, 0.35);
    border-color: rgba(74, 144, 226, 0.6);
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.35);
    transform: translateY(-1px);
}

.pos-symbol-name:active {
    transform: translateY(0);
}

.pos-symbol-name .sym-chart-tag {
    font-size: 10px;
    font-weight: 600;
    color: #4A90E2;
    background: rgba(74, 144, 226, 0.15);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: -0.2px;
    transition: all var(--transition-fast);
}

.pos-symbol-name:hover .sym-chart-tag {
    background: #093687;
    color: #FFFFFF;
}

.pos-qty {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.pos-pro-pnl-wrap {
    text-align: right;
}

.pos-pro-pnl {
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.pos-pro-pnl-krw {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.trade-fee-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.trade-fee-sub .fee-net-pnl {
    font-weight: 700;
}

.badge-net-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(14, 203, 129, 0.15);
    color: #0ECB81;
    border: 1px solid rgba(14, 203, 129, 0.3);
    vertical-align: middle;
    margin-left: 4px;
}

.badge-gross-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(240, 185, 11, 0.15);
    color: #F0B90B;
    border: 1px solid rgba(240, 185, 11, 0.3);
    vertical-align: middle;
    margin-left: 4px;
}

.pos-reason-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-sub);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    border: 1px solid var(--border-light);
}

.pos-reason-pill {
    font-weight: 700;
    color: var(--upbit-navy);
    white-space: nowrap;
}

.pos-reason-text {
    color: var(--text-secondary);
}

.pos-gauge-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: var(--font-mono);
}

.pos-lbl-sl { color: var(--color-down); }
.pos-lbl-entry { color: var(--text-primary); font-weight: 700; }
.pos-lbl-tp { color: var(--color-up); }
.gauge-sub-krw { color: var(--text-muted); }

.pos-gauge-track {
    width: 100%;
    height: 6px;
    background: var(--bg-sub);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.pos-gauge-progress {
    height: 100%;
    transition: width 0.3s ease;
}

.pos-pro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--bg-sub);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.pos-grid-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pos-grid-lbl {
    font-size: 10px;
    color: var(--text-muted);
}

.pos-grid-val {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.grid-sub-krw {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.pos-card-close-btn {
    align-self: flex-end;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    background: #fff0f0;
    color: var(--color-up);
    border: 1px solid #ffd2d2;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.pos-card-close-btn:hover {
    background: #ffe0e0;
}

.badge-lev {
    background: var(--upbit-navy);
    color: #ffffff;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
}

.badge-live {
    background: #dc3545;
    color: #ffffff;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
}

.badge-spot {
    background: #6c757d;
    color: #ffffff;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
}

.btn-fee-toggle.active-fee-mode {
    background: #edf4fb;
    color: var(--upbit-navy);
    border-color: var(--upbit-navy);
    font-weight: 700;
}

/* ==========================================================================
   Top Active Positions Section (Pinned below KPI Banner)
   ========================================================================== */
.top-positions-section {
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: all 0.3s ease;
}

.top-pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    background: var(--bg-sub);
    border-bottom: 1px solid var(--border-card);
}

.top-pos-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-pos-icon {
    font-size: 13px;
}

.top-pos-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.top-pos-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-hover);
    color: var(--text-muted);
    border-radius: 10px;
    border: 1px solid var(--border-input);
}

.top-pos-count-badge.has-pos {
    background: var(--color-up-bg);
    color: var(--color-up);
    border-color: var(--color-up);
    animation: pulsePosBadge 2s infinite;
}

@keyframes pulsePosBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.top-pos-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* Compact Empty State */
.upbit-pos-empty.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    min-height: auto;
    background: var(--bg-card);
    gap: 12px;
}

.empty-compact-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}

.empty-icon-mini {
    font-size: 15px;
}

.empty-text-main {
    font-weight: 700;
    color: var(--text-primary);
}

.empty-text-sub {
    color: var(--text-muted);
    font-size: 11px;
}

.empty-compact-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.btn-sub-action-sm {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-input);
    background: var(--bg-sub);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sub-action-sm:hover {
    background: var(--bg-hover);
    border-color: var(--upbit-navy);
}

/* Bottom panel redirect box */
.pos-panel-redirect-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-sub);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-input);
    margin: 12px;
}

.redirect-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.redirect-icon {
    font-size: 24px;
}

.redirect-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.redirect-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ==========================================================================
   Strategy Optimal Preset Filter & Chips (전략 원클릭 최적화 필터)
   ========================================================================== */
.kpi-card-clickable {
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kpi-card-clickable:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 144, 226, 0.6) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.kpi-pill-setting {
    background: rgba(9, 54, 135, 0.3);
    color: #4A90E2;
    border: 1px solid rgba(74, 144, 226, 0.4);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.section-badge-hint {
    font-size: 11px;
    color: #0ECB81;
    background: rgba(14, 203, 129, 0.12);
    border: 1px solid rgba(14, 203, 129, 0.25);
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.strategy-filter-group {
    margin-bottom: 14px;
}
.filter-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.strategy-preset-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.btn-strat-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}
.btn-strat-chip:hover {
    background: rgba(9, 54, 135, 0.2);
    border-color: rgba(74, 144, 226, 0.5);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.btn-strat-chip.active {
    background: rgba(9, 54, 135, 0.4);
    border-color: #4A90E2;
    box-shadow: 0 0 12px rgba(9, 54, 135, 0.4);
    color: #FFFFFF;
}
.btn-strat-chip .chip-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.btn-strat-chip .chip-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.btn-strat-chip .chip-name {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-strat-chip .chip-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-strat-chip.active .chip-sub {
    color: #93C5FD;
}

/* Dynamic Optimal Strategy Info Card */
.strategy-optimal-card {
    background: linear-gradient(135deg, rgba(9, 54, 135, 0.22) 0%, rgba(14, 203, 129, 0.06) 100%);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.strat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.strat-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #F0B90B;
}
.custom-hint {
    font-size: 11px;
    font-weight: normal;
    color: var(--text-muted);
    margin-left: 6px;
}
.btn-reset-optimal {
    font-size: 11px;
    font-weight: 600;
    color: #4A90E2;
    background: rgba(74, 144, 226, 0.12);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-reset-optimal:hover {
    background: #093687;
    color: #FFFFFF;
    border-color: #4A90E2;
}
.strat-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.strat-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.strat-badge.badge-rr {
    background: rgba(240, 185, 11, 0.15);
    color: #F0B90B;
    border: 1px solid rgba(240, 185, 11, 0.4);
}
.strat-badge.badge-tf {
    background: rgba(74, 144, 226, 0.15);
    color: #60A5FA;
    border: 1px solid rgba(74, 144, 226, 0.4);
}
.strat-badge.badge-lev {
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.4);
}
.strat-badge.badge-pct {
    background: rgba(59, 130, 246, 0.15);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.4);
}
.strat-badge.badge-tp {
    background: rgba(14, 203, 129, 0.15);
    color: #0ECB81;
    border: 1px solid rgba(14, 203, 129, 0.4);
}
.strat-badge.badge-sl {
    background: rgba(246, 70, 93, 0.15);
    color: #F6465D;
    border: 1px solid rgba(246, 70, 93, 0.4);
}
.strat-badge.badge-be {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.5);
}
.strat-badge.badge-dir {
    background: rgba(234, 179, 8, 0.15);
    color: #FACC15;
    border: 1px solid rgba(234, 179, 8, 0.4);
}
.strat-card-footer {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Surge Scalper Radar Live Badge in Empty State */
.surge-live-radar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 203, 129, 0.14);
    border: 1px solid rgba(14, 203, 129, 0.4);
    color: #0ECB81;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
}
.radar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ECB81;
    box-shadow: 0 0 8px #0ECB81;
    animation: radar-pulse 1.4s infinite ease-in-out;
}
@keyframes radar-pulse {
    0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 2px #0ECB81; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #0ECB81; }
    100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 2px #0ECB81; }
}
.surge-criteria-hint {
    color: #94A3B8;
    font-size: 11px;
    margin-left: 2px;
}

.surge-live-radar-badge.radar-short {
    background: rgba(246, 70, 93, 0.14);
    border: 1px solid rgba(246, 70, 93, 0.4);
    color: #F6465D;
}
.surge-live-radar-badge.radar-short .radar-dot {
    background: #F6465D;
    box-shadow: 0 0 8px #F6465D;
    animation: radar-pulse-red 1.4s infinite ease-in-out;
}
@keyframes radar-pulse-red {
    0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 2px #F6465D; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #F6465D; }
    100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 2px #F6465D; }
}

.reset-balance-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-krw-reset {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.28));
    border: 1px solid #f59e0b;
    color: #fbbf24;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.btn-krw-reset:hover {
    background: #f59e0b;
    color: #11151e;
    border-color: #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

.btn-krw-reset:active {
    transform: translateY(0);
}

.btn-outline-sm {
    background: transparent;
    border: 1px solid #333d52;
    color: #9aa7b9;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-outline-sm:hover {
    background: #1e2433;
    color: #ffffff;
    border-color: #4b5563;
}

/* Win Rate Pill Badge in Daily KPI Card */
.kpi-pill-winrate {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(14, 203, 129, 0.15);
    color: #0ECB81;
    border: 1px solid rgba(14, 203, 129, 0.4);
    box-shadow: 0 0 8px rgba(14, 203, 129, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: -0.2px;
}

.kpi-pill-winrate.winrate-low {
    background: rgba(246, 70, 93, 0.15);
    color: #F6465D;
    border-color: rgba(246, 70, 93, 0.4);
    box-shadow: 0 0 8px rgba(246, 70, 93, 0.2);
}