/* ==========================================================================
   Premium Dark Theme - Trader Han's Box Trading (Web)
   Build Identifier: V7-ULTRA-RECOVERY-STABLE
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
    /* --- 1. Typography System (Responsive) --- */
    /* PC Standard */
    --base-size: 13.5px;

    /* Scale Ratios */
    --text-xs: 0.75rem;
    /* 11.25px */
    --text-sm: 0.875rem;
    /* 13.125px */
    --text-base: 1rem;
    /* 15px */
    --text-lg: 1.125rem;
    /* 16.875px */
    --text-xl: 1.35rem;
    /* 20.25px */
    --text-2xl: 1.75rem;
    /* 26.25px */

    /* Semantic sizing */
    --text-label: var(--text-xs);
    --text-body: var(--text-sm);
    --text-button: var(--text-sm);
    --text-heading: var(--text-lg);
    --text-value: var(--text-base);
    --text-price: var(--text-xl);
    --text-profit: var(--text-xl);
    --text-balance: var(--text-lg);
    --text-logo: var(--text-xl);
    --text-hero: var(--text-2xl);
}

/* Typography utility classes for critical data */
.text-price {
    font-size: var(--text-price) !important;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
}

.text-profit {
    font-size: var(--text-profit) !important;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
}

.text-balance {
    font-size: var(--text-balance) !important;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
}

.text-critical {
    font-size: var(--text-price) !important;
    font-weight: 700;
}

.text-secondary-data {
    font-size: var(--text-body) !important;
    color: var(--text-secondary);
}

/* Container overflow prevention */
.text-container {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    hyphens: auto;
}

.flex-text-container {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.grid-text-container {
    min-width: 0;
    overflow: hidden;
}

/* Responsive container adjustments */
.responsive-container {
    container-type: inline-size;
    min-width: 0;
}

/* Accessibility and touch target compliance */
.min-touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accessible-text {
    font-size: max(var(--text-xs), 0.75rem);
    /* Ensure minimum 12px */
}

.interactive-element {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
}

/* Ensure interactive text elements are accessible */
a,
button,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
    font-size: max(var(--text-body), 0.75rem);
}

/* Browser zoom compatibility */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    /* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
        --border-color: #ffffff;
        --text-secondary: #ffffff;
    }
}

/* Respect user's font size preferences */
@media (min-resolution: 2dppx) {
    /* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
        /* Slightly larger text on high-DPI displays */
        font-size: calc(var(--text-base) * 1.05);
    }
}

/* Performance optimizations */
.text-container,
.flex-text-container,
.grid-text-container {
    contain: layout style;
    will-change: font-size;
}

/* Optimize font rendering */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize reflow during viewport changes */
.responsive-text {
    contain: layout;
}

/* Reduce layout thrashing */
.metric-value,
.p-row span,
.market-value {
    contain: layout style;
}

/* Error handling for extreme viewport sizes */
@media screen and (max-width: 240px) {
    /* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
        font-size: 12px !important;
    }

    * {
        font-size: 12px !important;
        min-width: 0 !important;
        word-break: break-all !important;
    }
}

@media screen and (min-width: 2560px) {
    /* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
        font-size: 18px !important;
    }
}

/* --- Utility Classes --- */
.flex-center-gap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flex-start-gap-10 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.label-auto {
    width: auto !important;
}

.label-xs {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.input-xs {
    padding: 2px 4px !important;
    height: 28px !important;
}

.margin-left-auto {
    margin-left: auto;
}

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

/* Modern browsers with clamp() support - REMOVED because it caused massive text and stability issues */
/* Back to stable step-down system */

/* Color Palette - moved outside @supports block */
/* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
    --bg-main: #0b0e11;
    /* Binance Dark */
    --bg-panel: #1e2329;
    /* Binance Panel */
    --bg-input: #2b3139;
    --bg-hover: #474d57;
    --border-color: #474d57;
    --text-primary: #eaecef;
    /* Binance White */
    --text-secondary: #848e9c;
    /* Binance Gray */
    --accent-color: #fcd535;
    /* Binance Yellow */
    --success-color: #0ecb81;
    --danger-color: #f6465d;
    --warning-color: #fcd535;
    --sidebar-width: 20vw;
    --header-height: 60px;
}

* {
    box-sizing: border-box;
}

/* Apply base font size to HTML for rem calculations */
html {
    font-size: var(--base-size);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-size: var(--text-body);
    height: 100vh;
    overflow: hidden;
}

/* ==========================================================================
   Layout (Split Screen)
   ========================================================================== */
.split-screen-layout {
    display: flex;
    width: 100%;
    /* Changed from 100vw to allow better fit */
    height: 100vh;
    overflow: hidden;
    position: relative;
}






.resizer {
    width: 8px;
    /* Width of the sidebar resizer */
    cursor: col-resize;
    background-color: var(--bg-main);
    border-left: 1px solid var(--border-color);
    z-index: 999;
    transition: background 0.2s;
    flex-shrink: 0;
}

/* Consolidated Trade Stats Rules moved below to line 1718 area */

.resizer:hover {
    background-color: var(--accent-color);
}

.right-ui-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 100px;
    /* Reduced from 400px to allow more resizer movement */
    height: 100%;
    background-color: var(--bg-main);
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.top-header {
    min-height: var(--header-height);
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    flex-wrap: nowrap;
    gap: 8px;
    z-index: 1000;
    overflow-x: auto;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-left {
    flex-shrink: 0;
}

.header-center {
    flex: 1;
    min-width: 0;
}

.header-right {
    flex-shrink: 0;
}

.app-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo-emblem {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    /* Binance Yellow */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--bg-main);
    /* Dark icon on yellow background */
    box-shadow: 0 4px 15px rgba(252, 213, 53, 0.3);
    transition: all 0.3s ease;
}

.logo-emblem:hover {
    transform: scale(1.05) rotate(5deg);
}

.emblem-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 12px;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

/* Fix for V2 layout */
.main-title,
.logo-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    /* Prevent wrapping */
}

.logo-title .highlight {
    color: var(--accent-color);
}

.logo-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    margin-top: 4px;
    white-space: nowrap;
}

/* Account Panel Styling */
.account-info-panel {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.account-label {
    display: flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid #475569;
    padding-right: 10px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.status-dot {
    width: 10px;
    height: 10px;
    background-color: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 5px #ef4444;
    flex-shrink: 0;
}

.account-metric {
    text-align: right;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 1;
}

@media screen and (max-width: 1200px) {
    .account-metric:last-child {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .account-metric:nth-last-child(2) {
        display: none;
    }
}

.metric-label {
    font-size: var(--text-label);
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.metric-value {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: var(--text-balance);
    color: #f8fafc;
}

.metric-value.positive {
    color: var(--success-color);
}

.metric-value.negative {
    color: var(--danger-color);
}

.metric-value span {
    font-size: var(--text-label);
    color: #64748b;
}

/* Header Right Groupings */
.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-controls input {
    background: #1e293b;
    color: white;
    border: 1px solid #475569;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: var(--text-body);
    width: 140px;
    min-height: 36px;
    touch-action: manipulation;
}

.header-user-info {
    text-align: right;
    font-size: var(--text-label);
    color: var(--text-secondary);
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    /* Prevent vertical stretching */
}

.header-actions .btn {
    height: 40px;
    /* Fixed height to prevent stretching */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: fit-content;
    touch-action: manipulation;
}

/* Header Button Standardization */
.header-nav-btn {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    min-width: 70px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}


/* Quick Settings */
.quick-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2px;
}

.quick-settings-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-body);
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 44px;
    padding: 8px;
    touch-action: manipulation;
}

.quick-settings-row input[type="checkbox"] {
    accent-color: var(--accent-color);
    width: 18px;
    height: 18px;
    cursor: pointer;
    touch-action: manipulation;
}

.btn {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    /* ~12px */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

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

.btn-start {
    border-color: var(--success-color);
    color: var(--success-color);
    background: rgba(16, 185, 129, 0.1);
}

.btn-stop {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.1);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
    border: none;
}

.btn-outline-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: all 0.2s ease;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

#btnToggleChartHeader {
    margin-right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#btnToggleChartHeader i {
    font-size: 1.1rem;
}

/* Main App Layout */
.split-screen-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #0d1117;
    /* Fallback bg */
}

/* Ensure right panel takes full space if it's the only child */
.right-ui-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    /* Prevent flex overflow */
    height: 100%;
    background-color: var(--bg-main);
}

.app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    /* Prevent body scroll */
}

.content-area {
    flex: 1 !important;
    min-width: 0;
    overflow-y: auto !important;
    /* RESTORE SCROLL */
    padding: 20px;
}

.sidebar {
    width: 25%;
    /* Initial value, will be 20% via logic or default */
    background-color: #162032;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* Layout 40:60 Initialization - Sidebar takes remaining space */
.live-chart-panel {
    width: 40%;
    flex: none;
}

/* [FIX] Chart visibility toggle */
/* PC: shrink to zero width so sidebar auto-expands to fill space */
.live-chart-panel.chart-hidden {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0;
    pointer-events: none;
    transition: width 0.25s ease, opacity 0.25s ease;
}

/* Also hide the resizer when the PC chart panel is hidden */
.live-chart-panel.chart-hidden+.chart-resizer {
    /* display: none !important; */
}

/* Mobile: just hide it */
#liveChartMobile.chart-hidden {
    display: none !important;
}

.position-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 6px 16px;
    /* Reduced from 12px 16px */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-height: 100px;
    /* Reduced from 130px */
    display: flex;
    flex-direction: column;
}


/* Position Card Values */
.p-row span:last-child {
    font-size: 1.0rem;
    /* ~16px */
    font-weight: 700;
    color: white;
}

/* Highlight Profit - Larger for visibility */
.p-row.highlight span:last-child {
    font-size: 1.15rem;
    /* ~18px */
}

/* [NEW] Grid layout for position stats (v7-Layout) - Responsive & Full Width */
.p-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 12px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.p-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.p-stat-item:last-child {
    border-right: none;
}

.p-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.p-stat-value {
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    font-size: 1.0rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


.p-stat-value.highlight {
    font-size: 1.05rem;
    color: var(--accent-color);
}

/* Adjust original p-row for monitoring and other full-width rows */
.p-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    min-height: 24px;
}

.p-row.entry-reason-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}



/* Components */
.panel-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

.panel-section h3 {
    margin: 0 0 10px 0;
    font-size: var(--text-body);
    color: var(--accent-color);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

/* Status Grid - Vertical Stack */
.status-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 2-Row Grid Layout for each Card */
.status-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    overflow: hidden;
    min-height: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    grid-gap: 4px 6px;
    align-items: center;
    transition: all 0.3s ease;
}

/* Row 1 Elements */
.sc-header { grid-column: 1 / 3; display: flex; align-items: center; gap: 4px; overflow: visible; white-space: nowrap; }
.sc-name { font-weight: 700; font-size: 0.8rem; color: var(--accent-color); white-space: nowrap; }
.sc-select { grid-column: 3 / 4; width: 66%; font-size: 0.7rem; padding: 2px 4px; background: #334155; color: white; border: 1px solid #475569; border-radius: 4px; margin: 0 0 0 auto !important; }
.sc-toggle { grid-column: 4; grid-row: 1 / 3; display: flex; justify-content: center; align-items: center; }

/* Row 2 Elements */
.sc-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sub1/Sub2 카드: boxStatus 셀에 토글이 추가되므로 컬럼 비율 조정 */
#status7, #status8 {
    grid-template-columns: 1.6fr 0.8fr 1fr auto;
}
.sc-label { font-size: 0.55rem; color: #64748b; text-transform: uppercase; line-height: 1; }
.sc-value { font-size: 0.8rem; font-weight: 700; color: white; line-height: 1.2; }

/* Responsive Adjustments */
@media screen and (max-width: 900px) {
    .status-card {
        padding: 4px;
        grid-gap: 2px 4px;
        min-height: 50px;
    }
    .sc-name { font-size: 0.7rem; }
    .sc-select { font-size: 0.6rem; }
    .sc-label { font-size: 0.5rem; }
    .sc-value { font-size: 0.7rem; }
}

.status-card.long-tone {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
}

.status-card.short-tone {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)) !important;
}

.status-card.border-green {
    border: 3px solid var(--success-color) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), inset 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

.status-card.border-red {
    border: 3px solid var(--danger-color) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--accent-color);
    font-size: 0.85rem;
    min-height: 24px;
}

.card-header .icon {
    font-size: var(--text-value);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-row {
    font-size: 0.75rem;
    /* ~12px (Restored from 0.7rem) */
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: var(--text-secondary);
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 0;
    white-space: nowrap;
}

.card-row>* {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Position Cards */
.positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 15px;
    width: 100%;
}

.position-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    min-height: 100px;
    /* Reduced from 160px */
    display: flex;
    flex-direction: column;
    min-width: 280px;
    flex: 1 1 300px;
    /* Allow growth, allow shrink, sets base width */
    max-width: 100%;
    /* Prevent horizontal overflow */
}

.position-card.long {
    border-left: 8px solid var(--success-color);
}

.position-card.short {
    border-left: 8px solid var(--danger-color);
}

.position-card.active {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.position-card.long-tone {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
    border-left: 8px solid var(--success-color);
}

.position-card.short-tone {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
    border-left: 8px solid var(--danger-color);
}

.position-card.border-green {
    border: 3px solid var(--success-color);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), inset 0 0 15px rgba(16, 185, 129, 0.3);
}

.position-card.border-red {
    border: 3px solid var(--danger-color);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.7), inset 0 0 15px rgba(239, 68, 68, 0.3);
}

.p-card-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.p-card-buttons .btn {
    min-width: 44px;
    /* Even smaller */
    height: 22px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.p-card-header {
    background: #0f172a;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    gap: 2px;
    /* Ultra tight gap */
    flex-wrap: nowrap;
    min-height: 32px;
    overflow: hidden;
}

.p-direction {
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Compact badges */
.p-direction span {
    font-size: 0.65rem !important;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
}

.long .p-direction {
    color: var(--success-color);
}

.short .p-direction {
    color: var(--danger-color);
}

.p-status {
    min-height: 24px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    flex-shrink: 0;
    min-width: 60px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.p-status.active {
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.p-status.p-profit {
    background: var(--success-color) !important;
    color: white !important;
}

.p-status.p-loss {
    background: var(--danger-color) !important;
    color: white !important;
}

/* ??�?諛곗?????媛€�???�씠?꾩씐 理쒖???*/
@media screen and (max-width: 1100px) {
    .p-card-body {
        justify-content: space-around;
        gap: 15px;
    }
}

.p-card-body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 columns for desktop density */
    padding: 8px 10px;
    align-items: center;
    gap: 8px;
}

.p-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center align for clean look */
    gap: 2px;
    margin-bottom: 0;
    overflow: hidden;
}

/* [NEW] Pending Entry Card Harmonization */
.pending-card {
    filter: brightness(0.8) saturate(0.85);
    opacity: 0.95;
    transition: all 0.3s ease;
}

.pending-card:hover {
    filter: brightness(0.9) saturate(0.9);
    opacity: 1;
}

.pending-card.long-tone {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0, 0, 0, 0.5)) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.pending-card.short-tone {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(0, 0, 0, 0.5)) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.p-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    /* Prevent wrapping like "$2982.9 \n 0" */
    line-height: 1.2;
}

.entry-reason-row,
.gate-row,
.guardian-row {
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    margin-top: 8px;
    padding-top: 10px !important;
    display: flex !important;
    /* Keep internal flex for label/value */
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    grid-column: 1 / -1;
    /* Span full width in grid */
    min-width: 100% !important;
    gap: 12px !important;
}

.row-label {
    width: auto !important;
    text-align: left !important;
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    flex-shrink: 0;
    font-weight: 600 !important;
}

.row-status {
    font-size: 0.9rem !important;
    text-align: left !important;
    word-break: break-all !important;
    white-space: normal !important;
    font-weight: 700 !important;
    flex: 1;
}

.entry-reason-row span:first-child {
    width: auto !important;
    text-align: left !important;
    font-size: 0.85rem !important;
    /* Increased font size */
    color: #94a3b8 !important;
    flex-shrink: 0;
    font-weight: 600 !important;
}

.entry-reason-row span:last-child {
    font-size: 0.9rem !important;
    /* Increased font size */
    color: #f8fafc;
    /* Brighter color */
    text-align: left !important;
    /* Left direct alignment */
    word-break: break-all !important;
    white-space: normal !important;
    font-weight: 700 !important;
    flex: 1;
}

.p-row span:first-child {
    font-size: var(--text-xs);
    color: #94a3b8;
}

.p-row span:last-child {
    font-size: 1.0rem;
    /* ~16px */
    font-weight: 700;
    color: white;
}

/* Highlight Profit - Adjusted to match price size */
.p-row.highlight span:last-child {
    font-size: 1.15rem;
    /* ~18px */
}

.p-profit.profit {
    color: var(--success-color);
    font-weight: 800;
}

.p-profit.loss {
    color: var(--danger-color);
    font-weight: 800;
}

/* Manual Exit Button */
.btn-manual-exit {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0 10px;
    border-radius: 4px;
    /* Unified radius */
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
    height: 28px;
    min-height: 28px;
    min-width: 60px;
    /* Unified min-width */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    box-sizing: border-box;
}

.btn-manual-exit:hover {
    background: #dc2626;
}

/* Manual Entry Buttons */
.manual-entry-buttons {
    display: flex;
    gap: 8px;
}

.section-header-with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-header-with-actions h2 {
    margin-bottom: 0;
}

.btn-manual-entry {
    background: var(--bg-input);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    /* Unified min-width */
    justify-content: center;
    height: 28px;
    /* Unified height */
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-manual-entry.switch {
    background: rgba(148, 163, 184, 0.15); /* Slate 400 faint */
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.btn-manual-entry.switch:hover {
    background: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

/* Mini Toggle Switch for Chart Resurrection */
.switch-xs {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle;
}
.switch-xs input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-xs .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #475569;
  transition: .2s;
  border-radius: 16px;
}
.switch-xs .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: #cbd5e1;
  transition: .2s;
  border-radius: 50%;
}
.switch-xs input:checked + .slider {
  background-color: #3b82f6; /* Blue for ON */
}
.switch-xs input:checked + .slider:before {
  transform: translateX(12px);
  background-color: white;
}

.btn-manual-entry.switch.old-style {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3);
}

.btn-manual-entry.switch.old-style:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.5);
}

.btn-manual-entry.long {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #34d399;
}

.btn-manual-entry.long:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Trend LED Styles */
.trend-led-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trend-led,
.ch-slope-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.trend-led.long {
    background: #10b981;
    box-shadow: 0 0 10px #10b981, inset 0 0 2px rgba(255, 255, 255, 0.5);
    animation: led-pulse-green 2s infinite;
}

.trend-led.short {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444, inset 0 0 2px rgba(255, 255, 255, 0.5);
    animation: led-pulse-red 2s infinite;
}

.trend-led.none,
.ch-slope-led.none {
    background: #475569;
    box-shadow: none;
    animation: none;
}

/* [NEW] Channel Slope LED Colors */
.ch-slope-led.up {
    background: #38bdf8; /* Sky Blue for C-Up */
    box-shadow: 0 0 10px #38bdf8, inset 0 0 2px rgba(255, 255, 255, 0.5);
    animation: led-pulse-sky 2s infinite;
}

.ch-slope-led.down {
    background: #fb923c; /* Orange for C-Down */
    box-shadow: 0 0 10px #fb923c, inset 0 0 2px rgba(255, 255, 255, 0.5);
    animation: led-pulse-orange 2s infinite;
}

.trend-text {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.trend-led.long+.trend-text {
    color: #10b981;
}

.trend-led.short+.trend-text {
    color: #ef4444;
}

@keyframes led-pulse-green {
    0% {
        opacity: 1;
        box-shadow: 0 0 5px #10b981;
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 12px #10b981;
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 5px #10b981;
    }
}

@keyframes led-pulse-sky {
    0% { opacity: 1; box-shadow: 0 0 5px #38bdf8; }
    50% { opacity: 0.6; box-shadow: 0 0 12px #38bdf8; }
    100% { opacity: 1; box-shadow: 0 0 5px #38bdf8; }
}

@keyframes led-pulse-orange {
    0% { opacity: 1; box-shadow: 0 0 5px #fb923c; }
    50% { opacity: 0.6; box-shadow: 0 0 12px #fb923c; }
    100% { opacity: 1; box-shadow: 0 0 5px #fb923c; }
}

@keyframes led-pulse-red {
    0% {
        opacity: 1;
        box-shadow: 0 0 5px #ef4444;
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 12px #ef4444;
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 5px #ef4444;
    }
}

/* Channel Slope LED - 채널 기울�??�호??(VIDYA?� 구분: ?�안/주황) */
.trend-led.ch-up {
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff, inset 0 0 2px rgba(255, 255, 255, 0.5);
    animation: led-pulse-cyan 2s infinite;
}

.trend-led.ch-down {
    background: #fb923c;
    box-shadow: 0 0 10px #fb923c, inset 0 0 2px rgba(255, 255, 255, 0.5);
    animation: led-pulse-orange 2s infinite;
}

.trend-led.ch-up + .trend-text {
    color: #00e5ff;
}

.trend-led.ch-down + .trend-text {
    color: #fb923c;
}

@keyframes led-pulse-cyan {
    0%   { opacity: 1; box-shadow: 0 0 5px #00e5ff; }
    50%  { opacity: 0.6; box-shadow: 0 0 12px #00e5ff; }
    100% { opacity: 1; box-shadow: 0 0 5px #00e5ff; }
}

@keyframes led-pulse-orange {
    0%   { opacity: 1; box-shadow: 0 0 5px #fb923c; }
    50%  { opacity: 0.6; box-shadow: 0 0 12px #fb923c; }
    100% { opacity: 1; box-shadow: 0 0 5px #fb923c; }
}



.btn-manual-entry.short {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #f87171;
}

.btn-manual-entry.short:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Signal Stack (Horizontal Compact) */
.signal-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.signal-item {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.signal-item.unconfirmed {
    border: 1px dashed #94a3b8;
    color: #94a3b8;
    opacity: 0.8;
    animation: signal-pulse 2s infinite;
}

.signal-item.rocket {
    color: #fcd535;
    border-color: rgba(252, 213, 53, 0.3);
}

.signal-item.bomb {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.signal-item.vidya {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.signal-item.vidya.short {
    color: #ef4444;
}

@keyframes signal-pulse {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.98);
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* ==========================================================================
   Webhook Setup Grid (Refined Desktop Parity)
   ========================================================================== */
.webhook-config-section h2,
.active-positions-section h2,
.trading-results-section h2 {
    font-size: var(--text-heading);
    margin-bottom: 8px;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.webhook-config-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.webhook-config-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: var(--shadow-sm);
    min-width: 0 !important;
    overflow: hidden;
}

.webhook-card-body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    align-content: flex-start;
    gap: 6px;
}

/* Input Rows (Horizontal: Label | Input) */
.input-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Changed from space-between to allow natural flow */
    flex-wrap: wrap;             /* [NEW] Allow wrapping when items don't fit */
    gap: 12px 16px;              /* [NEW] Row and column gap */
    min-height: 28px;
    margin-bottom: 8px;          /* Increased from 2px for better row separation */
    min-width: 0;
}

.input-label {
    font-size: var(--text-label);
    color: var(--text-secondary);
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-input,
.wh-input-select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    /* ~12px */
    height: 28px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

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

.wh-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
    vertical-align: middle;
}

.label-xs {
    font-size: var(--text-xs);
    color: #94a3b8;
}

.input-xs {
    width: 60px !important;
    flex: none !important;
}

/* Sidebar Fixes for Density */
.quick-settings-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    font-size: var(--text-body);
    margin-top: 5px;
}

.market-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
    margin-top: 5px;
    overflow: hidden;
}

.market-item {
    padding: 8px 4px;
    text-align: center;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
    min-width: 0;
    overflow: hidden;
}

.market-item>* {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.market-change {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 2px;
}


.market-label {
    font-size: var(--text-label) !important;
    color: #94a3b8;
}

.market-value {
    font-size: var(--text-value) !important;
    font-weight: 700;
    color: #f8fafc;
}

/* Log Tabs */
.log-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

.log-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 8px;
    cursor: pointer;
    font-size: var(--text-label);
    font-weight: 600;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.log-tab.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

.log-list {
    font-family: 'Roboto Mono', monospace;
    font-size: var(--text-xs);
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.log-list::-webkit-scrollbar {
    width: 4px;
}

.log-list::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 2px;
}


/* Trade Stats Flex (Adaptive Scaling v0144) */
.trade-stats-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 12px;
    width: 100%;
}

.stat-card {
    flex: 1 1 150px;
    /* Grow/Shrink, base width 150px */
    max-width: 250px;
    /* Don't let them become excessively huge */
    min-width: 100px;
    padding: 6px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    min-height: 52px;
}

.stat-label {
    font-size: 0.7rem;
    /* Smaller */
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.stat-value {
    font-size: 1.1rem;
    /* Slightly smaller from var(--text-xl) */
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
}

/* Stat card color variants */
.stat-card.success {
    border-color: var(--success-color);
    background: rgba(16, 185, 129, 0.05);
}

.stat-card.success .stat-value {
    color: var(--success-color);
}

.stat-card.danger {
    border-color: var(--danger-color);
    background: rgba(239, 68, 68, 0.05);
}

.stat-card.danger .stat-value {
    color: var(--danger-color);
}

.stat-card.warning {
    border-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.05);
}

.stat-card.warning .stat-value {
    color: var(--warning-color);
}

/* Trading History Table Refinements */
.trading-history-table {
    margin-top: 15px;
    overflow-x: auto;
    min-width: 0;
}

.trading-history-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
    table-layout: fixed;
    min-width: 450px;
    /* Reduced from 500px to avoid massive overflow before scroll kicks in */
}

.trading-history-table th {
    background-color: var(--bg-panel);
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 10px 8px;
    font-size: 0.75rem;
    /* Reduced to fit better */
    border-bottom: 2px solid var(--border-color);
}

.trading-history-table td {
    border-bottom: 1px solid #334155;
    padding: 8px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trading History Colors */
.trading-history-table .direction-long {
    color: var(--success-color);
    font-weight: 600;
}

.trading-history-table .direction-short {
    color: var(--danger-color);
    font-weight: 600;
}

.trading-history-table .profit-positive {
    color: var(--success-color);
    font-weight: 700;
    font-size: var(--text-lg);
    /* 2x up from xs/sm base */
}

.trading-history-table .profit-negative {
    color: var(--danger-color);
    font-weight: 700;
    font-size: var(--text-lg);
    /* 2x up */
}

/* Text color utility classes */
.text-green {
    color: var(--success-color) !important;
}

.text-red {
    color: var(--danger-color) !important;
}

.text-white {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: #64748b !important;
}

.text-xs {
    font-size: var(--text-xs) !important;
}

.font-medium {
    font-weight: 500 !important;
}

/* Trade Filter Toolbar */
/* Trade Filter Toolbar - Adjusted for single line */
.trade-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-wrap: nowrap;
    /* Force single line */
    overflow-x: auto;
}

.filter-dynamic-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Redundant media queries removed v0142 */
.btn-stat-action {
    padding: 0 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    height: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    white-space: nowrap;
    flex-shrink: 0;
}

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

.btn-reset {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.1);
}

.btn-export {
    border-color: var(--success-color);
    color: var(--success-color);
    background: rgba(16, 185, 129, 0.1);
}

.btn-primary {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
    padding: 0 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    height: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-primary:hover {
    background: #2563eb;
}

@media screen and (max-width: 768px) {

    /* Precise grid for toolbar to prevent detachment */
    .trade-filter-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .trade-filter-toolbar select,
    .trade-filter-toolbar .filter-dynamic-inputs {
        grid-column: span 2 !important;
        width: 100% !important;
    }

    .btn-filter-apply {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .btn-stat-action {
        flex: 1 !important;
        font-size: 0.75rem !important;
    }
}

/* Webhook Send History (Inside Config Cards) */
.history-list {
    flex: 1 1 100%;
    width: 100%;
    min-height: 30px;
    border-top: 1px solid var(--border-color);
    padding: 4px 8px;
    font-size: var(--text-label);
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.2);
    margin-top: 4px;
    border-radius: 4px;
    max-height: 80px;
    overflow-y: auto;
}

.history-list:empty::before {
    content: "No recent history.";
    color: #475569;
    font-style: italic;
    display: block;
    text-align: center;
    padding: 4px;
}

.trading-history-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.input-url-header {
    width: 200px;
}

/* Logs */
.log-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.log-list {
    flex: 1;
    max-height: 400px;
    /* ??�씠吏€媛€ 湲몄뼱吏???寃껋??諛⑹? */
    overflow-y: auto;
    background: #000;
    padding: 5px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--text-xs);
}

.webhook-entry {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #333;
    padding: 2px 0;
}

.webhook-entry .time {
    color: #64748b;
}

.webhook-entry .event {
    color: #f8fafc;
    font-weight: bold;
}

.webhook-entry .chart {
    color: var(--accent-color);
}

.webhook-entry .text-green {
    color: var(--success-color);
}

.webhook-entry .text-red {
    color: var(--danger-color);
}

/* Chart Visibility Toggle - See main definition above (.live-chart-panel.chart-hidden) */

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   Custom Modal Dialogs (Centered)
   ========================================================================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

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

.modal-dialog {
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    min-width: 320px;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-title {
    font-size: var(--text-heading);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.modal-message {
    font-size: var(--text-value);
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-buttons {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-primary {
    background: var(--accent-color);
    color: white;
}

.modal-btn-primary:hover {
    background: #2563eb;
}

.modal-btn-danger {
    background: var(--danger-color);
    color: white;
}

.modal-btn-danger:hover {
    background: #dc2626;
}

/* ========== Chat Widget ========== */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: transform 0.2s;
}

.chat-toggle:hover {
    transform: scale(1.1);
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    border: 2px solid #1e293b;
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    height: 450px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-header {
    padding: 15px;
    background: #0f172a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: bold;
}

.chat-header button {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-msg {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.chat-msg.me {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-msg.other {
    align-self: flex-start;
    background: #334155;
    color: #e2e8f0;
    border-bottom-left-radius: 2px;
}

.chat-msg-time {
    font-size: 0.7rem;
    margin-top: 4px;
    opacity: 0.7;
    display: block;
    text-align: right;
}

.chat-input-area {
    padding: 10px;
    display: flex;
    gap: 8px;
    background: #0f172a;
}

.chat-input-area input {
    flex: 1;
    background: #1e293b;
    border: 1px solid #475569;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.chat-input-area button {
    background: var(--accent);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

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

.modal-btn-secondary:hover {
    background: var(--bg-hover);
}

/* Live Chart Modal Styles */
#liveChartModal .modal-dialog {
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.2s ease-out;
    display: flex;
    flex-direction: column;
}

#liveChartModal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#connectionStatus {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

/* ==========================================================================
   Live Chart Panel Styles
   ========================================================================== */

/* PC Live Chart Panel */
.live-chart-panel {
    width: 50%;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease, height 0.3s ease;
    position: relative;
    z-index: 1;
}

.live-chart-panel.minimized {
    height: 44px !important;
    min-height: 44px !important;
}

.live-chart-panel.chart-hidden {
    display: none !important;
}

/* Hide resizer when chart is hidden */
.live-chart-panel.chart-hidden+#chartResizer {
    /* display: none !important; */
}

.live-chart-panel.minimized .live-chart-content,
.live-chart-panel.minimized #streamWarning {
    display: none !important;
}

.live.p-card-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.p-card-header {
    background: #0f172a;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.live-chart-header {
    padding: 10px 15px;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.live-chart-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--accent-color);
    font-size: var(--text-body);
}

.live-chart-controls {
    display: flex;
    gap: 5px;
}

.live-chart-content {
    flex: 1;
    position: relative;
    background: var(--bg-main);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 紐⑤�??�뿉????�씠?�뚯�??以묒�??뺣젹 */
@media screen and (max-width: 900px) {
    .live-chart-panel {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .live-chart-content {
        justify-content: center !important;
        align-items: center !important;
    }

    .live-chart-image {
        margin: 0 auto !important;
        display: block !important;
    }
}

.live-chart-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg-main);
    display: block;
    margin: 0 auto;
}

.live-chart-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
}

.placeholder-content {
    text-align: center;
    color: var(--text-secondary);
}

.connection-status {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-label);
    font-weight: 600;
}

.connection-status .status-dot {
    width: clamp(8px, 0.5rem + 0.2vw, 12px);
    height: clamp(8px, 0.5rem + 0.2vw, 12px);
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}

.status-dot.connected {
    background: var(--success-color);
    box-shadow: 0 0 5px var(--success-color);
}

.status-dot.connecting {
    background: var(--warning-color);
    animation: pulse 1.5s infinite;
}

.status-dot.disconnected {
    background: var(--danger-color);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Consolidated Chart Resizer */
.chart-resizer {
    width: 6px !important;
    min-width: 6px !important;
    cursor: col-resize;
    background-color: #1e293b !important;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    z-index: 999999 !important;
    pointer-events: auto !important;
    transition: all 0.2s;
    flex-shrink: 0;
    margin: 0;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Add a visual drag handle to the resizer */
.chart-resizer::before {
    content: '';
    width: 2px;
    height: 30px;
    background-color: #64748b !important;
    border-radius: 2px;
    z-index: 1000000;
}

/* [FIX] Expand hit area for easier grabbing */
.chart-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    bottom: 0;
    z-index: 999999 !important;
    pointer-events: auto !important;
    cursor: col-resize;
}

.chart-resizer:hover,
.chart-resizer.active {
    background-color: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-color);
}

/* Mobile Live Chart */
.live-chart-mobile {
    display: none;
}

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

.live-chart-header-mobile h3 {
    margin: 0;
}

.live-chart-controls-mobile {
    display: flex;
    gap: 5px;
}

.live-chart-content-mobile {
    position: relative;
    height: 200px;
    background: var(--bg-main);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-status-mobile {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Fullscreen Modal */
.fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-main);
    z-index: 9999999 !important;
    flex-direction: column;
}

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

.fullscreen.top-header {
    height: var(--header-height);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    flex-wrap: wrap;
    /* Allow wrapping */
}

.fullscreen-header {
    padding: 15px 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.fullscreen-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--accent-color);
}

.fullscreen-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fullscreen-content {
    flex: 1;
    position: relative;
    background: var(--bg-main);
    overflow: hidden;
}

/* Button Styles */
.btn-xs {
    padding: 6px 8px;
    font-size: var(--text-xs);
    min-height: 36px;
    /* Slightly smaller but still accessible */
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-success {
    background: var(--success-color);
    color: white;
    border: 1px solid var(--success-color);
}

.btn-success:hover {
    background: #059669;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    border: 1px solid var(--danger-color);
}

.btn-danger:hover {
    background: #dc2626;
}

/* ==========================================
   20. New User Infrastructure Styles (Enhanced)
   ========================================== */

.webhook-header-info {
    margin-bottom: 20px;
    padding: 12px 15px;
    /* Reduced from 20px */
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.webhook-url-display {
    display: flex;
    align-items: center;
    gap: 12px;
}

.webhook-url-display .label {
    font-size: 0.9em;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.webhook-url-display code {
    background: #0f172a;
    padding: 8px 15px;
    border-radius: 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.2);
    flex-grow: 1;
    word-break: break-all;
}

/* Binance API Bar (Full Width & Consistent Style) - Slimmed */
.binance-api-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #0f172a;
    padding: 4px 12px;
    /* Drapstic reduction from 6px 15px */
    border-radius: 6px;
    border: 1px solid rgba(37, 99, 235, 0.3);
    flex-wrap: nowrap;
    margin-top: 12px;
}

.bar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #93c5fd;
    white-space: nowrap;
    font-size: 0.9em;
}

.bar-inputs {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
    justify-content: flex-end;
}

.bar-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bar-input-group .label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.wh-input-compact {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    padding: 4px 10px;
    /* Reduced padding */
    border-radius: 6px;
    font-size: 0.85rem;
    width: 150px;
    /* Reduced from 200px */
    transition: all 0.2s;
}

.wh-input-compact:focus {
    border-color: var(--primary-color);
    outline: none;
    background: #1e293b;
}

/* ==========================================
   Restored & Utility
   ========================================== */

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE OVERHAUL (STEP-DOWN STRATEGY)
   ========================================================================== */

/* Notebook / Large Tablet */
@media screen and (max-width: 1200px) {
    .sidebar {
        width: 300px !important;
    }
}



/* Mobile & Tablet Devices (Unified Responsive) */
@media screen and (max-width: 900px) {
    /* BASE HIDDEN LIVE CHART MOBILE */
.live-chart-mobile { display: none !important; }

:root {
        --base-size: 15px !important;
        font-size: 15px !important;
    }

    body,
    html {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    /* ========== CRITICAL: Unlock ALL layout containers ========== */
    .split-screen-layout {
        display: flex !important;
        flex-direction: column !important;
        /* CRITICAL FIX: Stacks sidebar and main panel vertically */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    .app-container,
    .app-layout,
    .right-ui-panel {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ========== Mobile Layout Ordering (Strict) ========== */
    /* 1. Simplify structures to ensure 100% width compliance */
    .sidebar,
    .content-area {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .app-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        min-height: initial !important;
        /* Fixed lint warning */
    }

    /* 2. Assign Order to SECTIONS */

    /* Order 1: Live Chart */
    .live-chart-mobile {
        order: 1 !important;
        margin-bottom: 15px !important;
    }

    /* Order 2: Chart Status (2x2) */
    .section-status {
        order: 2 !important;
        margin-bottom: 20px !important;
    }

    /* Order 3: Webhook Logs */
    .section-logs {
        order: 3 !important;
        margin-bottom: 20px !important;
    }

    /* Order 4: Webhook Settings (Inputs) */
    .webhook-config-section {
        order: 6 !important;
        margin-bottom: 20px !important;
    }

    /* Order 5: Active Positions (Cards) */
    .active-positions-section {
        order: 5 !important;
        margin-bottom: 20px !important;
    }

    /* Order 6: Stats (Market Data) */
    .section-market {
        order: 4 !important;
        margin-bottom: 20px !important;
    }

    /* Also include trade-stats-grid if it exists separately */
    .panel-section:has(.trade-stats-grid) {
        order: 4 !important;
    }

    /* Order 7: History (Table) */
    .trading-results-section {
        order: 7 !important;
        margin-bottom: 40px !important;
        padding-bottom: 40px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .trading-history-table th {
        font-size: 0.6rem !important;
        /* Extreme reduction for mobile */
        padding: 6px 4px !important;
    }

    .trading-history-table td {
        font-size: 0.65rem !important;
        padding: 6px 4px !important;
    }

    /* ========== 紐⑤�????�뜑: ??�퉬 ?�좎????�젣 ========== */
    .top-header {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 8px !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* 1�? 濡쒓??+ ??��??+ 踰꾪???*/
    .header-left {
        flex: 0 0 auto !important;
        order: 1 !important;
    }

    .header-right {
        flex: 1 1 auto !important;
        order: 2 !important;
        justify-content: flex-end !important;
        gap: 2px !important;
    }

    /* 濡쒓??- ?꾩씠??+ ??�뒪????�떆 */
    .logo-text-group {
        display: flex !important;
        flex-direction: column !important;
    }

    .app-logo-wrapper {
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo-icon {
        font-size: 1.3rem !important;
        display: inline-block !important;
    }

    .logo-title {
        font-size: 0.8rem !important;
    }

    .logo-subtitle {
        font-size: 0.5rem !important;
    }

    /* ??��????? (?�듦�??뺣낫) */
    .header-user-info {
        display: none !important;
    }

    /* 踰꾪??理쒖???*/
    .header-actions {
        gap: 2px !important;
    }

    .header-actions .btn {
        padding: 3px 6px !important;
        font-size: 0.6rem !important;
        min-height: 26px !important;
        min-width: auto !important;
        height: 26px !important;
    }

    /* 2�? 諛붿??몄뒪 ?뺣낫 (?꾩껜 ??�퉬) */
    .header-center {
        flex: 1 1 100% !important;
        order: 3 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 4px !important;
        border-radius: 6px !important;
        margin-top: 2px !important;
    }

    /* 諛붿??몄뒪 ?뺣낫 媛€�?諛곗�?*/
    .account-info-panel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 2px !important;
        width: 100% !important;
        justify-content: space-between !important;
        border: none !important;
        background: transparent !important;
    }

    .account-label {
        display: flex !important;
        border-right: none !important;
        padding-right: 4px !important;
        flex-shrink: 0 !important;
        font-size: 0.55rem !important;
    }

    .account-metric {
        flex: 1 1 0 !important;
        text-align: center !important;
        min-width: 0 !important;
        display: block !important;
    }

    .metric-label {
        font-size: 0.5rem !important;
        display: block !important;
    }

    .metric-value {
        font-size: 0.65rem !important;
        display: block !important;
    }

    /* ========== 李⑦??곹솴??1??(媛€??�꽦 ?뺣낫) ========== */
    /* ========== 李⑦??곹솴??2x2 ?�? (??????붿껌) ========== */
    /* ========== 차트?�황??구형 CSS ?�거??========== */
        margin-bottom: 2px;
    }

    /* ========== ?��??�카??2x1 ?��? (700px 미만?�서�?1?? ========== */
    .positions-grid {
        gap: 15px !important;
    }

    .position-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ?????移�?�???�?: 媛€�?諛곗???�???�릺 ?고듃 ?????�? */
    .p-card-body {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 12px 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Header rows only (진입가, ?�재가, ?�익�? ?�상?�익, 보유?�간) */
    .p-row:not(.gate-row):not(.guardian-row):not(.guardian-detail-row):not(.entry-reason-row) {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 5px 2px !important;
        min-width: 0 !important;
    }

    /* Header row labels (진입가, ?�재가 etc.) */
    .p-row:not(.gate-row):not(.guardian-row):not(.guardian-detail-row):not(.entry-reason-row) span:first-child {
        font-size: 0.65rem !important;
        color: #94a3b8 !important;
        margin-bottom: 2px !important;
        display: block !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }

    /* Header row values ($2817.07 etc.) */
    .p-row:not(.gate-row):not(.guardian-row):not(.guardian-detail-row):not(.entry-reason-row) span:last-child {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: white;
        display: block !important;
    }

    /* ===== STATUS ROWS: Full width + horizontal layout ===== */
    .p-row.gate-row,
    .p-row.guardian-row,
    .p-row.guardian-detail-row,
    .p-row.entry-reason-row {
        flex: 0 0 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 6px 8px !important;
        min-width: 0 !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        gap: 8px !important;
    }

    /* Status row label (메인추세 �?��관�? 가?�언 모니?�링 etc.) */
    .p-row.gate-row .row-label,
    .p-row.guardian-row .row-label,
    .p-row.entry-reason-row span:first-child {
        font-size: 0.7rem !important;
        color: #94a3b8 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        width: auto !important;
        margin-right: 8px !important;
    }

    /* Status row value (inline, no wrapping) */
    .p-row.gate-row .row-status,
    .p-row.guardian-row .row-status,
    .p-row.guardian-detail-row .row-status,
    .p-row.entry-reason-row span:last-child {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Inner spans within status rows - NEVER fragment */
    .p-row.gate-row .row-status span,
    .p-row.guardian-row .row-status span,
    .p-row.guardian-detail-row .row-status span {
        display: inline !important;
        white-space: nowrap !important;
        width: auto !important;
    }


    /* ===== Mobile: status rows (forced horizontal) ===== */
    .p-card-body {
        flex-wrap: wrap !important;
    }

    .p-card-body .p-row.entry-reason-row,
    .p-card-body .p-row.gate-row,
    .p-card-body .p-row.guardian-row,
    .p-card-body .p-row.guardian-detail-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        flex-direction: row !important;
        /* FORCED horizontal */
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 4px 8px !important;
    }

    .row-label {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        width: auto !important;
        /* FIXED: Prevent full width stacking */
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
    }

    .row-status {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        /* FIXED: Prevent full width stacking */
        text-align: left !important;
    }

    .row-status span {
        white-space: nowrap !important;
        width: auto !important;
        /* FIXED: Prevent span stacking */
        display: inline-block !important;
    }

    [id$='GuardianDetailStatus'] {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    [id$='TakeProfitStatus'] {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Label: fixed width, no wrap */
    .p-row.highlight .p-profit {
        font-size: 1.0rem !important;
        /* Verified Size for Mobile */
    }

    .p-profit.profit {
        color: var(--success-color) !important;
    }

    .p-profit.loss {
        color: var(--danger-color) !important;
    }

    /* ========== ??�씡/?�?�� ??�긽 ??�낵 (紐⑤�??蹂꾨�?媛뺥?? ========== */
    /* ?????移�?�????��??�??�묒�?洹밸???*/
    .position-card.border-green {
        border: 3px solid var(--success-color);
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), inset 0 0 15px rgba(16, 185, 129, 0.3);
        background: linear-gradient(145deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.12)) !important;
    }

    .position-card.border-red {
        border: 3px solid var(--danger-color);
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.7), inset 0 0 15px rgba(239, 68, 68, 0.3);
        background: linear-gradient(145deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.12)) !important;
    }

    /* 李⑦??곹솴?????��??�??�묒�?媛€�?*/
    .status-card.border-green {
        border: 3px solid var(--success-color) !important;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.6) !important;
    }

    .status-card.border-red {
        border: 3px solid var(--danger-color) !important;
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
    }

    /* PC????씠??李⑦????꼸 ??? (紐⑤??뿉?? */
    .live-chart-panel {
        display: none !important;
    }

    /* 李⑦???ъ궗??? ??? (紐⑤??뿉?? */
    .chart-resizer,
    #chartResizer {
        /* display: none !important; */
    }

    /* 紐⑤??슜 ??씠??李⑦????떆 */
    .live-chart-mobile {
        display: block !important;
        width: 100% !important;
        min-height: 400px !important;
        margin-bottom: 15px !important;
    }

    .live-chart-content-mobile {
        position: relative;
        width: 100%;
        height: 350px;
        background: var(--bg-main);
        border-radius: 8px;
        overflow: hidden;
    }

    .live-chart-header-mobile {
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .live-chart-header-mobile h3 {
        margin: 0;
        font-size: 0.9rem;
    }

    .live-chart-controls-mobile {
        display: flex;
        gap: 5px;
    }

    /* ?뱁썒 ??�젙 1??- ??�젰�??�? */
    .webhook-config-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .webhook-config-card {
        padding: 10px !important;
        width: 100% !important;
        overflow: visible !important;
        /* Fix: Allow content to overflow if needed (e.g. dropdowns/tooltips) */
        height: auto !important;
        /* Ensure height adjusts to content */
    }

    .input-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* LEFT ALIGNED */
        gap: 12px !important;
        /* Consistent gap */
        margin-bottom: 12px !important;
        /* More breathing room */
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .input-row label,
    .input-label {
        width: 95px !important;
        /* FIXED WIDTH for alignment */
        min-width: 95px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        color: var(--text-secondary);
        text-align: left;
    }

    .flex-center-gap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        /* Fix: Don't force 100% width on mobile options */
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }

    .wh-input,
    .wh-input-select {
        flex: 1 !important;
        width: auto !important;
        min-height: 32px !important;
        font-size: 0.8rem !important;
        padding: 4px 6px !important;
    }

    .input-xs {
        flex: 0 0 auto !important;
        width: 70px !important;
    }

    /* Checkbox rows - keep inline and wrap tightly */
    .checkbox-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px 18px !important;
        /* Row gap and Column gap */
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-top: 4px !important;
        justify-content: flex-start !important;
    }

    /* Webhook Logs Scroll Restoration */
    .log-list {
        overflow-y: auto !important;
        overflow-x: auto !important;
        width: 100% !important;
        max-height: 220px !important;
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 5px !important;
        display: block !important;
        /* Ensure it's not display:contents or something else */
    }

    /* Checkbox & Small UI elements */
    .label-xs {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
    }

    .btn-xs-ghost {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
        min-height: 28px !important;
        width: auto !important;
        min-width: 55px !important;
        /* Prevent vertical stretching */
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .webhook-entry {
        min-width: 300px !important;
        flex-wrap: nowrap !important;
        font-size: 0.65rem !important;
        padding: 5px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .service-horizontal-grid {
        grid-template-columns: 1fr !important;
    }

    /* Mobile Binance Bar Fix */
    .binance-api-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .bar-inputs {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .bar-input-group {
        justify-content: space-between !important;
    }

    .wh-input-compact {
        width: 100% !important;
    }
}

/* ========== Custom Modal Dialog ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background: #1e293b;
    /* Dark Slate Blue/Grey */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 95%;
    max-width: 420px;
    padding: 30px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-dialog {
    transform: scale(1);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.modal-message {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 24px;
    line-height: 1.5;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.modal-btn-primary {
    background: #3b82f6;
    color: white;
}

.modal-btn-primary:hover {
    background: #2563eb;
}

.modal-btn-secondary {
    background: #334155;
    color: #f1f5f9;
}

.modal-btn-secondary:hover {
    background: #475569;
}

.modal-btn-danger {
    background: #ef4444;
    color: white;
}

.modal-btn-danger:hover {
    background: #dc2626;
}

@keyframes emergency-flash {
    0% {
        background: rgba(0, 0, 0, 0.8);
    }

    50% {
        background: rgba(139, 0, 0, 0.9);
    }

    100% {
        background: rgba(0, 0, 0, 0.8);
    }
}

.emergency-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    animation: emergency-flash 1s infinite;
    backdrop-filter: blur(10px);
}

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

.emergency-content {
    max-width: 500px;
    padding: 40px;
    background: rgba(20, 0, 0, 0.8);
    border: 2px solid #ff0000;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
}

.siren-icon {
    font-size: 4rem;
    color: #ff0000;
    margin-bottom: 20px;
    text-shadow: 0 0 20px #ff0000;
}

.emergency-warning {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ff4444;
    margin: 20px 0;
}

.emergency-last-seen {
    font-family: monospace;
    opacity: 0.7;
    margin-bottom: 30px;
}

/* Chat Widget Styles - Appended */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.chat-toggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #FFD700;
    /* Yellow */
    color: #000;
    /* Black icon */
    border: none;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.chat-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #1e293b;
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.chat-header {
    padding: 15px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.chat-header button {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Global Ghost Button Fix */
.btn-xs-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-xs-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Binance Premium Account Header Panel - V11 */
.binance-premium-account {
    background: rgba(15, 23, 42, 0.8) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.3s ease;
    margin: 0 10px;
}

.account-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.account-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.account-uid-minimal {
    font-size: 0.65rem;
    color: #64748b;
    font-family: "Roboto Mono", monospace;
}

.account-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.metric-item .label {
    font-size: 0.58rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.metric-item .value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f1f5f9;
    font-family: "Roboto Mono", monospace;
}

.metric-item .value.highlight {
    color: #fbbf24;
    font-size: 1rem;
}

.metric-item .value span {
    font-size: 0.65rem;
    color: #475569;
}

.metric-item.address-box {
    grid-column: span 3;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 6px;
    margin-top: 2px;
}

.address-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.address-text {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

@keyframes valueFlash {
    0% {
        background: rgba(251, 191, 36, 0.3);
    }

    100% {
        background: transparent;
    }
}

.value-flash {
    animation: valueFlash 0.6s ease;
}

.positive {
    color: #10b981 !important;
}

.negative {
    color: #ef4444 !important;
}

@media screen and (max-width: 1400px) {
    .binance-premium-account {
        min-width: 400px;
    }
}

@media screen and (max-width: 1200px) {
    .header-center {
        display: none !important;
    }
}


/* Binance Horizontal Stats Bar - V12 */
.binance-horizontal-stats {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    padding: 10px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 30px;
    width: fit-content;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-divider {
    width: 1px;
    height: 25px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.stats-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.stats-group.identity {
    width: 100px;
}

.stats-group .label {
    font-size: 0.52rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.stats-group .value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #f8fafc;
    font-family: "Roboto Mono", monospace;
    white-space: nowrap;
}

.stats-group .value.highlight {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.stats-group .value span {
    font-size: 0.6rem;
    color: #64748b;
    margin-left: 3px;
}

.stats-group.address {
    min-width: 250px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.stats-group.address:hover {
    background: rgba(0, 0, 0, 0.4);
}

.stats-group.address .address-container {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.stats-group.address .address-text {
    font-size: 0.72rem;
    color: #cbd5e1;
    font-family: "Roboto Mono", monospace;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-group.address i {
    font-size: 0.65rem;
    color: #475569;
}

/* Hide old styles to prevent conflict */
.binance-premium-account {
    display: none !important;
}

@media screen and (max-width: 1600px) {
    .binance-horizontal-stats {
        gap: 20px;
        padding: 10px 15px;
    }

    .stats-group.address {
        min-width: 200px;
    }
}

@media screen and (max-width: 1400px) {
    .stats-divider {
        display: none;
    }

    .binance-horizontal-stats {
        gap: 15px;
    }
}

@media screen and (max-width: 1200px) {
    .header-center {
        display: flex !important;
        order: 3;
        /* Move below logo/user if necessary in mobile flex-direction: column */
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .binance-horizontal-stats {
        width: 100%;
        max-width: none;
        border-radius: 10px;
        padding: 8px 15px;
        flex-wrap: wrap;
        /* Allow wrapping on mobile */
        justify-content: center;
        gap: 15px 25px;
    }

    .stats-group {
        align-items: center;
        text-align: center;
    }

    .stats-group.address {
        min-width: 100%;
        /* Address takes full width on mobile or wraps */
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .binance-horizontal-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 10px;
    }

    .stats-group.address {
        grid-column: span 2;
    }

    .stats-divider {
        display: none;
    }

    .stats-group .value {
        font-size: 0.85rem;
    }

    .stats-group .label {
        font-size: 0.45rem;
    }
}

@media screen and (min-width: 901px) {

    /* 1. Root Containers */
    .split-screen-layout {
        width: 100vw !important;
        height: 100vh !important;
        display: flex !important;
        overflow: hidden !important;
        background-color: #000;
    }

    .right-ui-panel {
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-main);
    }

    .app-container {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* 2. Header (Safe Layout) */
    .top-header {
        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 15px !important;
        background-color: var(--bg-panel);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        z-index: 50 !important;
    }

    .header-left {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-right: 20px !important;
        max-width: 60% !important;
        overflow: hidden !important;
    }

    .main-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 1.2rem !important;
        margin-right: 15px !important;
    }

    .header-right {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        gap: 10px !important;
        margin-left: auto !important;
    }

    /* 3. Main Body Structure (3 Columns) */
    .app-layout {
        width: 100% !important;
        height: calc(100% - 60px) !important;
        display: flex !important;
        flex-direction: row !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    /* Column 1: Live Chart */
    .live-chart-panel {
        width: 40%;
        /* V1 fixed % - No !important to allow resize */
        height: 100% !important;
        flex: none !important;
        display: block !important;
        background-color: #0d1117;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Column 2: Sidebar (Controls) */
    .sidebar {
        width: 20%;
        /* V1 fixed % - No !important to allow resize */
        min-width: 360px !important;
        flex: none !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: #162032 !important;
        border-left: 1px solid #334155 !important;
        border-right: 1px solid #334155 !important;
        z-index: 20 !important;
    }

    /* Column 3: Main Content (Dashboard) - UNHIDDEN! */
    .content-area {
        flex: 1;
        min-height: 0;
        display: block !important;
        overflow-y: auto !important;
        padding: 10px !important;
        background-color: var(--bg-main) !important;
        min-width: 0 !important;
    }

    /* RESIZER HANDLES */
    .resizer {
        width: 6px !important;
        min-width: 6px !important;
        cursor: col-resize;
        background-color: #334155;
        transition: background-color 0.2s;
        z-index: 100 !important;
        position: relative;
    }
    
    .chart-resizer {
        width: 6px !important;
        min-width: 6px !important;
        cursor: col-resize;
        background-color: #334155 !important;
        transition: background-color 0.2s;
        z-index: 999999 !important;
        pointer-events: auto !important;
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .chart-resizer::before {
        content: '';
        width: 2px;
        height: 30px;
        background-color: #94a3b8 !important;
        border-radius: 2px;
        z-index: 1000000;
    }

    .chart-resizer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        right: -10px;
        bottom: 0;
        z-index: 999999 !important;
        pointer-events: auto !important;
        cursor: col-resize;
    }

    .resizer::before {
        content: '';
        width: 2px;
        height: 30px;
        background-color: #94a3b8;
        border-radius: 2px;
        z-index: 1000000;
    }

    .resizer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        right: -10px;
        bottom: 0;
        z-index: 999999 !important;
        pointer-events: auto !important;
        cursor: col-resize;
    }

    .chart-resizer:hover,
    .resizer:hover {
        background-color: #3b82f6;
        opacity: 1;
    }

    .chart-resizer {
        /* Placed between Chart and Sidebar */
        flex: none !important;
        height: 100% !important;
        border-right: 1px solid #1e293b;
    }

    .resizer {
        /* Placed between Sidebar and Content */
        flex: none !important;
        height: 100% !important;
        border-right: 1px solid #1e293b;
    }
}


/* ==========================================================================
   MOBILE LAYOUT FIXES (Phase 4)
   ========================================================================== */

/* Mobile specific: Enable scrolling on body and containers */
@media screen and (max-width: 768px) {

    html,
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .app-layout {
        flex-direction: column !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    .live-chart-panel,
    .sidebar,
    .content-area {
        width: 100% !important;
        height: auto !important;
        min-height: 200px;
        flex: none !important;
        border: none !important;
    }

    .resizer,
    .chart-resizer {
        /* display: none !important; */
    }

    .split-screen-layout {
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }

    .right-ui-panel {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .app-container {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh;
    }

    /* [FIX] Mobile Header Visibility */
    .top-header {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: unset !important;
        overflow-x: visible !important;
        padding: 5px 10px !important;
        gap: 5px !important;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .header-user-info {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 0.75rem !important;
    }

    .main-content-wrapper {
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Stack manual entry buttons vertically on mobile */
    .manual-entry-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .section-header-with-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Increase touch targets for buttons */
    /* Position Card Header Cleaned Up (Now Global) */
    .p-card-header {
        justify-content: space-between !important;
    }

    .p-card-buttons {
        display: flex !important;
        gap: 4px !important;
        flex-shrink: 1 !important;
        align-items: center !important;
    }

    /* Stack positions vertically only below 700px */
    .positions-grid {
        gap: 12px;
    }

    /* Full-width cards on mobile */
    .position-card {
        min-width: 100% !important;
    }
}

/* ==========================================================================
   Surge Signal Indicators (Rocket ?? / Bomb ??
   ========================================================================== */

/* Surge signals container */
.surge-signals {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Surge item wrapper */
.surge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    line-height: 1;
}

/* Surge time display */
.surge-time {
    font-size: 0.55rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    margin-top: -1px;
    display: none;
    /* Hidden by default, shown when active */
}

.rocket .surge-time {
    color: #4ade80;
    /* Green for rocket */
}

.bomb .surge-time {
    color: #f87171;
    /* Red for bomb */
}

.surge-icon.active+.surge-time {
    display: inline;
}

/* Surge icon base style */
.surge-icon {
    font-size: 16px;
    opacity: 0.2;
    transition: opacity 0.3s ease, transform 0.2s ease, filter 0.3s ease;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

/* Active state */
.surge-icon.active {
    opacity: 1.0;
    animation: surgePulse 1.5s ease-in-out infinite;
}

/* Pulse animation */
@keyframes surgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* Rocket icon (green glow when active) */
.surge-icon.rocket.active {
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.8));
}

/* Bomb icon (yellow glow when active) */
.surge-icon.bomb.active {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}

/* Hover effect for inactive icons */
.surge-icon:not(.active):hover {
    opacity: 0.4;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .surge-signals {
        gap: 2px;
        margin-left: 4px;
    }

    .surge-icon {
        font-size: 14px;
    }
}

/* ==========================================================================
   Emergency Response System (Volatility Alert) Styling
   ========================================================================== */

.emergency-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease-out;
}

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

.emergency-content {
    background: #1e1e1e;
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.4);
    animation: sirenPulse 2s infinite ease-in-out, shake 0.5s infinite;
}

.siren-icon {
    font-size: 4rem;
    color: #ef4444;
    margin-bottom: 20px;
    animation: rotateSiren 1s infinite linear;
}

.emergency-content h2 {
    color: #ef4444;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.emergency-warning {
    color: #fbbf24;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 15px 0;
}

.emergency-last-seen {
    font-family: 'Roboto Mono', monospace;
    color: #94a3b8;
    margin-bottom: 20px;
}

@keyframes sirenPulse {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
        border-color: #ef4444;
    }

    50% {
        box-shadow: 0 0 70px rgba(239, 68, 68, 0.8);
        border-color: #fca5a5;
    }
}

@keyframes rotateSiren {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-2px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(2px, 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   WEBHOOK CONFIG ROW LAYOUT (New Implementation)
   ========================================================================== */

/* Remove any previous grid constraints if they clash */
.webhook-config-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

.wh-row-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

.wh-row-group .webhook-config-card {
    flex: 1 1 0; /* Distribute space equally */
    min-width: 0; /* Prevent flex blowout */
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1100px) {
    .wh-row-group {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }
    .wh-row-group .webhook-config-card {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Emergency Flashing Badge (V16) */
@keyframes badge-flash-red {
    0% {
        background-color: #ef4444;
        transform: scale(1.0);
        box-shadow: 0 0 5px #ef4444;
    }

    50% {
        background-color: #b91c1c;
        transform: scale(1.15);
        box-shadow: 0 0 30px #ef4444;
    }

    100% {
        background-color: #ef4444;
        transform: scale(1.0);
        box-shadow: 0 0 5px #ef4444;
    }
}

.badge-emergency-on {
    animation: badge-flash-red 0.8s infinite !important;
    font-size: 1.1rem !important;
    padding: 8px 20px !important;
    z-index: 1000;
    position: relative;
    border: 3px solid #fff !important;
    cursor: pointer !important;
    min-width: 150px;
    text-align: center;
    color: white !important;
}

.status-badge-healthy {
    background-color: #0369a1 !important;
    /* Deep Blue-Green */
    color: #f0f9ff !important;
    border: 2px solid #0ea5e9 !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
    font-size: 0.85rem !important;
    padding: 6px 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
}

.emerg-log-area {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    padding: 8px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #fca5a5;
    line-height: 1.4;
    display: none;
    /* Hidden by default */
}

.emerg-log-area.active {
    display: block;
}

/* Stats Font Size Adjustments (Reduced to ~2/3) */
.stat-value {
    font-size: 1.0rem !important;
}

.stat-label {
    font-size: 0.75rem !important;
}

.history-table td b,
.history-table td .font-medium {
    font-size: 0.85rem !important;
}

.history-table td {
    font-size: 0.8rem !important;
}

/* Dimmed border styles for consumed chart signals */
.border-green-dimmed {
    border: 2px solid rgba(74, 222, 128, 0.5) !important;
}

.border-red-dimmed {
    border: 2px solid rgba(248, 113, 113, 0.5) !important;
}

/* ==========================================
   Notice Board & Popup Styles
   ========================================== */

/* Popup Banner (Floating Pill Style at Bottom Right) */
.popup-banner {
    position: fixed;
    bottom: -60px;
    right: 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.3);
    z-index: 3000;
    width: max-content;
    max-width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-banner.active {
    bottom: 20px;
    display: flex !important;
}

.popup-content {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
}

.popup-content i {
    font-size: 1.2rem;
    animation: bounce 2s infinite;
}

#popupTitle {
    font-weight: 700;
    font-size: 0.95rem;
}

.popup-expand {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1;
    margin-left: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

.popup-expand:hover {
    background: rgba(0, 0, 0, 0.3);
}

.popup-close {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    margin-left: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

.popup-close:hover {
    background: rgba(0, 0, 0, 0.3);
}

.popup-body {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.popup-body img {
    max-width: 100%;
    border-radius: 6px;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(-3px);
    }
}

/* Board Overlay & Container */
.board-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999999 !important;
}

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

.board-container {
    background: var(--bg-card);
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.board-header {
    background: var(--bg-panel);
    padding: 15px 25px;
    border-bottom: 2px solid var(--accent-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.board-header h2 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1.3rem;
    font-weight: 700;
}

.board-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.8rem;
    cursor: pointer;
}

#boardMain {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
}

/* Board List */
.board-actions {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.board-list-table-wrapper {
    background: var(--bg-panel);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.board-table {
    width: 100%;
    border-collapse: collapse;
}

.board-table th,
.board-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.board-table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
}

.board-row {
    cursor: pointer;
    transition: background 0.2s;
}

.board-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.board-row.popup-row {
    background: rgba(245, 158, 11, 0.05);
}

.post-title-link {
    color: var(--text-main);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-popup {
    background: #f59e0b;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

/* Post Detail */
.detail-actions {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-detail-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.post-detail-header h1 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: var(--accent-color);
}

.post-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.post-detail-content {
    min-height: 200px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-main);
}

.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 15px 0;
}

/* Comments */
.post-comments-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px dashed var(--border-color);
}

.comments-list {
    margin-bottom: 30px;
}

.comment-item {
    margin-bottom: 20px;
    padding: 12px;
    background: var(--bg-panel);
    border-radius: 8px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.comment-author {
    font-weight: 600;
    color: var(--accent-color);
}

.comment-date {
    color: var(--text-secondary);
}

.comment-text {
    line-height: 1.4;
    white-space: pre-wrap;
}

.comment-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-input-wrapper textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: white;
    padding: 12px;
    height: 80px;
    resize: none;
}

/* Editor */
.editor-title-wrapper {
    margin: 20px 0;
}

.editor-title-wrapper input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 15px;
    font-size: 1.4rem;
    color: white;
    border-radius: 6px;
}

.editor-actions {
    display: flex;
    justify-content: space-between;
}

/* Quill Dark Theme Overrides */
.ql-toolbar.ql-snow {
    background: #f3f4f6;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.ql-container.ql-snow {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-family: inherit;
}

/* ==========================================
   Position Health Scoring System Styles
   ========================================== */

.health-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    cursor: default;
    display: inline-block;
    vertical-align: middle;
}

.health-badge.excellent {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #451a03;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
    animation: excellentPulse 2s infinite ease-in-out;
}

.health-badge.good {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.health-badge.poor {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

@keyframes excellentPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }
}

.health-settings-section {
    border-top: 1px dotted rgba(255, 255, 255, 0.1);
    margin-top: 6px;
    padding-top: 8px;
}

.health-settings-title {
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.health-settings-title.long { color: #60a5fa; }
.health-settings-title.short { color: #fb7185; }

.health-settings-row {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 15px;
    align-items: center;
}

.health-settings-row > div {
    height: auto !important;
    min-height: 24px;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important; /* Override inline space-between */
}

.health-flex-center {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wh-input.input-xs {
    height: 22px !important;
    padding: 0 5px !important;
    font-size: 0.75rem !important;
    border-radius: 3px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    text-align: center;
}

.wh-input.input-xs:focus {
    border-color: #3b82f6 !important;
    background: rgba(15, 23, 42, 0.9) !important;
}

.flex-start-gap-10 {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Force horizontal alignment for guardian setting rows */
.input-row.flex-start-gap-10 {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
}

/* Scoped Position Card Body Adjustment */
.position-card .p-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* ========== Active Positions 700px Breakpoint ========== */
@media screen and (max-width: 699px) {
    .positions-grid {
        grid-template-columns: 1fr !important;
    }
    .position-card {
        min-width: 100% !important;
    }
}

/* ============================================================ */
/* [NEW] AI Chatbot Floating Widget Styles                      */
/* ============================================================ */

/* FAB Button */
#ai-chat-fab {
    position: fixed;
    bottom: 90px; /* 기존 28px?�서 ?�업�?겹치지 ?�게 ?�림 */
    right: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}
#ai-chat-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.7);
}
#ai-chat-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #f87171;
    font-size: 0.9rem;
    line-height: 1;
}

/* Chat Panel */
.ai-chat-panel {
    position: fixed;
    top: calc(100vh - 736px); /* 100vh - 580px(height) - 156px(기존 bottom) */
    left: calc(100vw - 448px); /* 100vw - 420px(width) - 28px(기존 right) */
    width: 420px;
    height: 580px;
    min-width: 300px;
    min-height: 400px;
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.2);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease; /* ?�래�?부?�연?�러?� 방�?�??�해 transform transition ?�거 */
    overflow: hidden;
    resize: both; /* ?�기 조절 ?�용 */
}
.ai-chat-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

/* Header */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.15) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    cursor: grab; /* ?�래�?가?�함???��???*/
    user-select: none;
}
.ai-chat-header:active {
    cursor: grabbing;
}
.ai-chat-header-info { display: flex; align-items: center; gap: 6px; }
.ai-chat-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.95rem; flex-shrink: 0;
}
.ai-chat-title { font-weight: 700; font-size: 0.9rem; color: #f8fafc; }
.ai-chat-subtitle { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }
.ai-model-select {
    font-size: 0.72rem;
    color: #a5b4fc;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 6px;
    padding: 2px 6px;
    margin-top: 3px;
    cursor: pointer;
    outline: none;
    max-width: 180px;
}
.ai-model-select:hover { background: rgba(99,102,241,0.25); }
.ai-model-select option { background: #1e293b; color: #e2e8f0; }
.ai-chat-header-actions { display: flex; gap: 6px; }
.ai-chat-header-btn {
    background: rgba(255,255,255,0.08);
    border: none; border-radius: 6px;
    color: #94a3b8; cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; transition: background 0.15s, color 0.15s;
}
.ai-chat-header-btn:hover { background: rgba(255,255,255,0.15); color: #f8fafc; }

/* Context Bar */
.ai-context-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.ai-context-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: #94a3b8; cursor: pointer;
}
.ai-context-toggle input[type="checkbox"] { accent-color: #6366f1; cursor: pointer; }
.ai-context-badge {
    font-size: 0.7rem; color: #4ade80;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 10px; padding: 2px 8px;
}

/* Messages */
.ai-chat-messages {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 12px;
    scroll-behavior: smooth;
}
.ai-chat-messages::-webkit-scrollbar { width: 4px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.ai-msg { display: flex; align-items: flex-start; gap: 8px; }
.ai-msg-bot { }
.ai-msg-user { flex-direction: row-reverse; }

.ai-msg .ai-msg-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.8rem; flex-shrink: 0;
}
.ai-msg-user .ai-msg-avatar {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.ai-msg-bubble {
    max-width: 78%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 0.83rem;
    line-height: 1.55;
    word-break: break-word;
}
.ai-msg-bot .ai-msg-bubble {
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.2);
    color: #e2e8f0;
    border-top-left-radius: 4px;
}
.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, rgba(14,165,233,0.25), rgba(56,189,248,0.15));
    border: 1px solid rgba(56,189,248,0.3);
    color: #f0f9ff;
    border-top-right-radius: 4px;
    text-align: right;
}

/* Typing Indicator */
.ai-typing-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px 8px;
    flex-shrink: 0;
}
.ai-typing-dots { display: flex; gap: 4px; padding: 10px 12px; background: rgba(99,102,241,0.1); border-radius: 14px; border-top-left-radius: 4px; border: 1px solid rgba(99,102,241,0.2); }
.ai-typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #6366f1; animation: typing-bounce 1.2s infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* Input Area */
.ai-chat-input-area {
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    background: rgba(0,0,0,0.2);
}
.ai-quick-btns {
    display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.ai-quick-btns button {
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.25);
    color: #a5b4fc; border-radius: 8px;
    padding: 4px 10px; font-size: 0.72rem; cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.ai-quick-btns button:hover {
    background: rgba(99,102,241,0.25); color: #e0e7ff;
}
.ai-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ai-chat-textarea {
    flex: 1; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; color: #f8fafc;
    padding: 8px 12px; font-size: 0.82rem;
    resize: none; outline: none; font-family: inherit;
    line-height: 1.4; max-height: 100px;
    transition: border-color 0.15s;
}
.ai-chat-textarea:focus { border-color: rgba(99,102,241,0.5); }
.ai-chat-textarea::placeholder { color: #475569; }
.ai-send-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none; color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
    transition: transform 0.15s, opacity 0.15s;
}
.ai-send-btn:hover { transform: scale(1.05); }
.ai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Model tag in message */
.ai-model-tag {
    font-size: 0.65rem; color: #6366f1;
    background: rgba(99,102,241,0.1);
    border-radius: 4px; padding: 1px 5px;
    margin-top: 5px; display: inline-block;
}



/* =========================================
   [NEW] REFINED SUB-BOX LAYOUT FOR GROUPS
   ========================================= */
/* Style input-row to act as a sleek sub-box */
.entry-group .webhook-card-body > .input-row, .exit-group .webhook-card-body > .input-row {
    flex: 1 1 auto; width: fit-content;
    min-width: 250px;
    background: rgba(15, 23, 42, 0.4); /* Darker, sleek background */
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 8px;
    padding: 6px 10px !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}

.entry-group .webhook-card-body > .input-row, .exit-group .webhook-card-body > .input-row:hover {
    border-color: rgba(96, 165, 250, 0.4) !important;
    background: rgba(15, 23, 42, 0.6);
}

/* Ensure URL and Message fields span 100% without box styling */
.entry-group .webhook-card-body > .input-row:has(input[id^='url']), .exit-group .webhook-card-body > .input-row:has(input[id^='url']),
.entry-group .webhook-card-body > .input-row:has(input[id^='msg']), .exit-group .webhook-card-body > .input-row:has(input[id^='msg']) {
    flex: 1 1 100%;
    min-width: 100%;
    background: transparent;
    border: none !important;
    box-shadow: none;
    padding: 0 0 8px 0 !important;
}
.entry-group .webhook-card-body > .input-row:has(input[id^='url']):hover, .exit-group .webhook-card-body > .input-row:has(input[id^='url']):hover,
.entry-group .webhook-card-body > .input-row:has(input[id^='msg']):hover, .exit-group .webhook-card-body > .input-row:has(input[id^='msg']):hover {
    background: transparent;
    border: none !important;
}

/* Fix inner elements wrapping nicely */
.flex-start-gap-10, .flex-center-gap {
    flex-wrap: wrap;
}

/* Telegram and Trash container placed inside URL/Msg */
.margin-left-auto {
    margin-left: auto !important;
}

/* ============================================================
   Sub1 Shield Active: 프리미엄 네온 펄스 (숨쉬기) 효과
   ============================================================ */
/* .position-card와 결합하여 우선순위 높임 */
.position-card.sub1-shield-active {
    border-color: rgba(16, 185, 129, 1);
    animation: shieldBreathing 0.4s ease-in-out infinite alternate;
}

@keyframes shieldBreathing {
    0% {
        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2),
                    inset 0 0 10px rgba(16, 185, 129, 0.05);
        border-color: rgba(16, 185, 129, 0.4);
    }
    100% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.6),
                    0 0 30px rgba(16, 185, 129, 0.2),
                    inset 0 0 20px rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 1);
    }
}

.badge-blink-green {
    animation: badgeBlinkGreen 0.5s ease-in-out infinite alternate !important;
}

@keyframes badgeBlinkGreen {
    0% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
    }
    100% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 20px rgba(16, 185, 129, 1);
    }
}


/* ========================================= */
/* [HAN_SLIM] POI Ladder Unified Styles      */
/* ========================================= */
.section-poi {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 15px;
}
.section-poi h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.poi-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 5px 0 10px 0;
    min-height: 220px;
}
.poi-column {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.poi-column-title {
    font-size: 12px;
    font-weight: bold;
    color: #94a3b8;
    margin-bottom: 5px;
    text-align: center;
}
.poi-ladder-container {
    width: 100%;
    height: 190px;
    background-color: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.poi-empty { color: #64748b; font-size: 11px; text-align: center; line-height: 190px; }
.poi-track { position: relative; width: 100%; height: 100%; }
.poi-zone { position: absolute; left: 4px; right: 4px; display: flex; flex-direction: column; padding: 0 4px; box-sizing: border-box; transition: all 0.2s ease; z-index: 5; }
.poi-zone-label { font-size: 13px; font-weight: bold; opacity: 1; letter-spacing: 0.5px; }
.poi-zone-price { font-size: 14px; font-family: monospace; font-weight: bold; letter-spacing: 0.5px; }
.poi-touching { box-shadow: 0 0 8px currentColor; opacity: 0.8 !important; border: 1px solid currentColor !important; }
.poi-price-line { position: absolute; left: 2px; right: 2px; display: flex; align-items: center; z-index: 10; transition: top 0.2s ease-out; }
.poi-price-line-bar { flex-grow: 1; height: 1px; background-color: #fff; position: relative; box-shadow: 0 0 5px #fff; }
.poi-price-line-bar::before { content: ''; position: absolute; left: -2px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 5px #fff; }
.poi-price-tag { background-color: #fff; color: #000; padding: 2px 6px; font-size: 12px; font-weight: bold; border-radius: 3px; margin-left: 5px; white-space: nowrap; }

@keyframes flashLong { 0% { box-shadow: inset 0 0 0px rgba(34, 197, 94, 0); } 50% { box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.8); } 100% { box-shadow: inset 0 0 0px rgba(34, 197, 94, 0); } }
@keyframes flashShort { 0% { box-shadow: inset 0 0 0px rgba(239, 68, 68, 0); } 50% { box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.8); } 100% { box-shadow: inset 0 0 0px rgba(239, 68, 68, 0); } }
.poi-flash-long { animation: flashLong 1.5s ease-out; }
.poi-flash-short { animation: flashShort 1.5s ease-out; }