* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: var(--font-sans);
            background: var(--color-bg);
            color: var(--color-text);
            min-height: 100vh;
            padding: var(--size-20);
        }
        .container { max-width: var(--size-1400); margin: 0 auto; }
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--size-24);
            padding-bottom: var(--size-16);
            border-bottom: var(--size-1) solid var(--color-border);
        }
        .logo-area { display: flex; align-items: center; gap: var(--size-16); }
        .logo { height: var(--size-40); width: auto; }
        .subtitle { font-size: var(--size-14); color: var(--color-text-muted); border-left: var(--size-1) solid var(--color-border); padding-left: var(--size-16); }
        h1 { font-size: var(--size-24); font-weight: 600; }
        .header-right { display: flex; align-items: center; gap: var(--size-16); }
        .last-update { font-size: var(--size-13); color: var(--color-text-muted); }
        .refresh-btn { background: var(--color-action); color: var(--color-on-action); border: none; padding: var(--size-8) var(--size-16); border-radius: var(--size-6); cursor: pointer; font-size: var(--size-14); }
        .refresh-btn:hover { background: var(--color-action-hover); }

        .tabs { display: flex; gap: var(--size-4); margin-bottom: var(--size-20); border-bottom: var(--size-1) solid var(--color-border); }
        .tab-btn { background: transparent; color: var(--color-text-muted); border: none; padding: var(--size-12) var(--size-20); cursor: pointer; font-size: var(--size-14); font-weight: 500; border-bottom: var(--size-2) solid transparent; }
        .tab-btn:hover { color: var(--color-text); }
        .tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }

        .filters { display: flex; gap: var(--size-12); margin-bottom: var(--size-20); flex-wrap: wrap; }
        .filter-group { display: flex; align-items: center; gap: var(--size-8); }
        .filter-group label { font-size: var(--size-13); color: var(--color-text-muted); }
        select, input { background: var(--color-surface-raised); border: var(--size-1) solid var(--color-border); color: var(--color-text); padding: var(--size-8) var(--size-12); border-radius: var(--size-6); font-size: var(--size-14); }
        select:focus, input:focus { outline: none; border-color: var(--color-accent); }

        .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-150), 1fr)); gap: var(--size-12); margin-bottom: var(--size-20); }
        .stat-card { background: var(--color-surface); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); padding: var(--size-16); text-align: center; }
        .stat-label { font-size: var(--size-12); color: var(--color-text-muted); margin-bottom: var(--size-4); }
        .stat-value { font-size: var(--size-20); font-weight: 600; }
        .stat-value.positive { color: var(--color-positive); }
        .stat-value.negative { color: var(--color-negative); }

        .countdown-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-180), 1fr)); gap: var(--size-12); margin-bottom: var(--size-20); }
        .countdown-card { background: var(--color-surface); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); padding: var(--size-16); text-align: center; }
        .countdown-label { font-size: var(--size-12); color: var(--color-text-muted); margin-bottom: var(--size-8); }
        .countdown-timer { font-size: var(--size-28); font-weight: 700; font-family: var(--font-mono); }
        .countdown-timer.warning { color: var(--color-negative); animation: blink 1s infinite; }
        @keyframes blink { 50% { opacity: 0.5; } }
        .countdown-exchanges { font-size: var(--size-11); color: var(--color-text-muted); margin-top: var(--size-8); }

        .table-container { overflow-x: auto; background: var(--color-surface); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); -webkit-overflow-scrolling: touch; }
        table { width: 100%; border-collapse: collapse; font-size: var(--size-13); }
        th, td { padding: var(--size-12) var(--size-16); text-align: left; border-bottom: var(--size-1) solid var(--color-border); white-space: nowrap; }
        th { background: var(--color-surface-raised); font-weight: 600; color: var(--color-text-muted); cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 10; }
        th:hover { color: var(--color-text); }
        th.sorted-asc::after { content: ' ▲'; color: var(--color-accent); }
        th.sorted-desc::after { content: ' ▼'; color: var(--color-accent); }
        tr:hover { background: var(--color-surface-hover); }

        .coin-cell { display: flex; align-items: center; gap: var(--size-8); }
        .coin-icon { width: var(--size-24); height: var(--size-24); border-radius: 50%; background: var(--color-border); display: flex; align-items: center; justify-content: center; font-size: var(--size-10); font-weight: 600; }
        .coin-logo { width: var(--size-24); height: var(--size-24); border-radius: 50%; }

        .exchange-badge { display: inline-flex; align-items: center; gap: var(--size-6); padding: var(--size-4) var(--size-10); border-radius: var(--size-4); font-size: var(--size-11); font-weight: 500; }
        .exchange-badge.cex { background: var(--color-cex-soft); color: var(--color-cex); }
        .exchange-badge.dex { background: var(--color-dex-soft); color: var(--color-dex); }
        .exchange-logo { width: var(--size-16); height: var(--size-16); border-radius: 50%; }

        .positive { color: var(--color-positive); }
        .negative { color: var(--color-negative); }
        .neutral { color: var(--color-text-muted); }
        .price-cell { font-family: var(--font-mono); font-size: var(--size-12); }

        .legend { margin-top: var(--size-16); display: flex; gap: var(--size-20); flex-wrap: wrap; font-size: var(--size-12); color: var(--color-text-muted); }
        .legend-item { display: flex; align-items: center; gap: var(--size-6); }
        .legend-dot { width: var(--size-8); height: var(--size-8); border-radius: 50%; }
        .legend-dot.cex { background: var(--color-cex); }
        .legend-dot.dex { background: var(--color-dex); }

        .empty-state { text-align: center; padding: var(--size-60) var(--size-20); color: var(--color-text-muted); }
        .empty-state-icon { font-size: var(--size-48); margin-bottom: var(--size-16); }

        .premium-bar { width: var(--size-100); height: var(--size-8); background: var(--color-border); border-radius: var(--size-4); overflow: hidden; display: inline-block; vertical-align: middle; }
        .premium-bar-fill { height: 100%; border-radius: var(--size-4); }
        .premium-bar-fill.positive { background: var(--color-positive); }
        .premium-bar-fill.negative { background: var(--color-negative); }
        .clickable-row {cursor: pointer;transition: background 0.2s;}
        
        .clickable-row:hover {background: var(--color-surface-hover);}
        
        
        /* History Section */
        .history-section { margin-top: var(--size-32); background: var(--color-surface); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); padding: var(--size-20); }
        .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--size-16); flex-wrap: wrap; gap: var(--size-8); }
        .history-header h3 { font-size: var(--size-16); font-weight: 600; margin: 0; }
        .history-desc { font-size: var(--size-12); color: var(--color-text-muted); }
        .history-stats { display: flex; gap: var(--size-24); margin-bottom: var(--size-16); padding-bottom: var(--size-16); border-bottom: var(--size-1) solid var(--color-border); }
        .history-stat { display: flex; flex-direction: column; gap: var(--size-4); }
        .history-stat-label { font-size: var(--size-12); color: var(--color-text-muted); }
        .history-stat-value { font-size: var(--size-18); font-weight: 600; }
        .history-list { max-height: var(--size-400); overflow-y: auto; display: flex; flex-direction: column; gap: var(--size-8); }
        .history-item { display: flex; justify-content: space-between; align-items: center; padding: var(--size-12) var(--size-16); background: var(--color-surface-raised); border-radius: var(--size-6); font-size: var(--size-13); cursor: pointer; transition: background 0.2s; position: relative; }
        .history-item:hover { background: var(--color-border); }
        .history-item-left { display: flex; align-items: center; gap: var(--size-12); }
        .history-item-time { color: var(--color-text-muted); font-size: var(--size-12); min-width: var(--size-140); }
        .history-item-pair { display: flex; align-items: center; gap: var(--size-6); }
        .history-item-coin { font-weight: 600; }
        .history-item-exchanges { color: var(--color-text-muted); font-size: var(--size-12); }
        .history-item-profit { font-weight: 600; font-size: var(--size-14); }
        .history-empty { text-align: center; padding: var(--size-40); color: var(--color-text-muted); }
        .history-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--color-surface-hover); border: var(--size-1) solid var(--color-border); border-radius: var(--size-6); padding: var(--size-12); font-size: var(--size-12); white-space: nowrap; z-index: 100; box-shadow: 0 var(--size-4) var(--size-12) var(--color-shadow); }
        .history-item:hover .history-tooltip { display: block; }
        .tooltip-row { display: flex; justify-content: space-between; gap: var(--size-16); padding: var(--size-2) 0; }
        .tooltip-label { color: var(--color-text-muted); }

        /* API Bot Password Overlay */
        .password-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay); display: flex; align-items: center; justify-content: center; z-index: 100; min-height: var(--size-500); border-radius: var(--size-8); }
        .password-modal { background: var(--color-surface); border: var(--size-1) solid var(--color-border); border-radius: var(--size-12); padding: var(--size-40); text-align: center; max-width: var(--size-400); width: 90%; }
        .password-modal h3 { font-size: var(--size-24); margin-bottom: var(--size-12); }
        .password-modal p { color: var(--color-text-muted); margin-bottom: var(--size-24); }
        .password-modal input { width: 100%; padding: var(--size-12) var(--size-16); margin-bottom: var(--size-16); font-size: var(--size-16); }
        .password-modal button { width: 100%; padding: var(--size-12); background: var(--color-action); color: var(--color-on-action); border: none; border-radius: var(--size-6); font-size: var(--size-16); cursor: pointer; }
        .password-modal button:hover { background: var(--color-action-hover); }
        .error-msg { color: var(--color-negative); font-size: var(--size-14); margin-top: var(--size-12); min-height: var(--size-20); }
        .hidden { display: none !important; }
        #apibot-tab { position: relative; min-height: var(--size-600); }

        /* API Section Styles */
        .api-sections { display: grid; gap: var(--size-24); }
        .api-section { background: var(--color-surface); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); padding: var(--size-20); }
        .api-section h3 { font-size: var(--size-16); margin-bottom: var(--size-16); display: flex; align-items: center; gap: var(--size-8); }
        .api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-280), 1fr)); gap: var(--size-16); }
        .api-card { background: var(--color-surface-raised); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); padding: var(--size-16); }
        .api-card-header { display: flex; align-items: center; gap: var(--size-10); margin-bottom: var(--size-12); }
        .api-card-header img { width: var(--size-24); height: var(--size-24); border-radius: 50%; }
        .api-card-header span { font-weight: 600; }
        .exchange-link { font-weight: 600; color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
        .exchange-link:hover { color: var(--color-accent-hover); text-decoration: underline; }
        .api-card-status { margin-left: auto; font-size: var(--size-12); padding: var(--size-4) var(--size-8); border-radius: var(--size-4); }
        .api-card-status.connected { background: var(--color-positive-soft); color: var(--color-positive); }
        .api-card-status.disconnected { background: var(--color-neutral-soft); color: var(--color-text-muted); }
        .api-input-group { margin-bottom: var(--size-12); }
        .api-input-group label { display: block; font-size: var(--size-12); color: var(--color-text-muted); margin-bottom: var(--size-4); }
        .api-input-group input { width: 100%; padding: var(--size-8) var(--size-12); font-size: var(--size-13); }
        .api-card-actions { display: flex; gap: var(--size-8); margin-top: var(--size-12); }
        .api-card-actions button { flex: 1; padding: var(--size-8); border-radius: var(--size-6); font-size: var(--size-13); cursor: pointer; border: none; }
        .btn-save { background: var(--color-action); color: var(--color-on-action); }
        .btn-save:hover { background: var(--color-action-hover); }
        .btn-test { background: var(--color-border); color: var(--color-text); }
        .btn-test:hover { background: var(--color-border-strong); }
        .btn-delete { background: var(--color-danger); color: var(--color-on-action); }
        .btn-delete:hover { background: var(--color-negative); }
        .api-saved-area { text-align: center; padding: var(--size-20) 0; }
        .saved-message { color: var(--color-positive); font-size: var(--size-14); margin-bottom: var(--size-16); }

        /* Bot Settings */
        .bot-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-200), 1fr)); gap: var(--size-16); margin-top: var(--size-20); }
        .setting-card { background: var(--color-surface-raised); border: var(--size-1) solid var(--color-border); border-radius: var(--size-8); padding: var(--size-16); }
        .setting-card label { display: block; font-size: var(--size-12); color: var(--color-text-muted); margin-bottom: var(--size-8); }
        .setting-card input, .setting-card select { width: 100%; }
        .bot-status-section { margin-top: var(--size-24); }
        .bot-controls { display: flex; gap: var(--size-12); margin-bottom: var(--size-20); }
        .btn-start { background: var(--color-action); color: var(--color-on-action); border: none; padding: var(--size-12) var(--size-32); border-radius: var(--size-6); font-size: var(--size-16); font-weight: 600; cursor: pointer; }
        .btn-start:hover { background: var(--color-action-hover); }
        .btn-start.running { background: var(--color-negative); }
        .btn-start.running:hover { background: var(--color-danger); }

        /* Mobile Bottom Tabs */
        .mobile-tabs { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: var(--size-1) solid var(--color-border); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
        .mobile-tabs-inner { display: flex; justify-content: space-around; align-items: center; height: var(--size-60); }
        .mobile-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-4); padding: var(--size-8) var(--size-4); background: none; border: none; color: var(--color-text-muted); font-size: var(--size-11); cursor: pointer; transition: color 0.2s; }
        .mobile-tab:hover, .mobile-tab.active { color: var(--color-accent); }
        .mobile-tab-icon { font-size: var(--size-20); }
        .mobile-tab-label { font-weight: 500; white-space: nowrap; }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            body { padding: var(--size-12); padding-bottom: var(--size-80); }
            .container { padding: 0; }
            .tabs { display: none; }
            .mobile-tabs { display: block; }
            header { flex-direction: column; gap: var(--size-12); align-items: flex-start; }
            .logo-area { flex-direction: column; align-items: flex-start; gap: var(--size-8); }
            .subtitle { border-left: none; padding-left: 0; }
            .header-right { width: 100%; justify-content: space-between; }
            .filters { flex-direction: column; gap: var(--size-12); }
            .filter-group { width: 100%; justify-content: space-between; }
            .filter-group select, .filter-group input { flex: 1; max-width: var(--size-150); }
            .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--size-8); }
            .stat-card { padding: var(--size-12); }
            .stat-value { font-size: var(--size-18); }
            .countdown-row { flex-direction: column; gap: var(--size-12); }
            .table-container { margin: 0 calc(-1 * var(--size-12)); border-radius: 0; border-left: none; border-right: none; }
            table { min-width: var(--size-600); font-size: var(--size-12); }
            th, td { padding: var(--size-10) var(--size-8); }
            .coin-cell { gap: var(--size-6); }
            .coin-logo, .coin-icon { width: var(--size-20); height: var(--size-20); }
            .exchange-badge { padding: var(--size-2) var(--size-6); font-size: var(--size-10); }
            .legend { flex-direction: column; gap: var(--size-8); }
            .history-section { margin: var(--size-24) calc(-1 * var(--size-12)) 0; border-radius: 0; border-left: none; border-right: none; padding: var(--size-16) var(--size-12); }
            .history-header { flex-direction: column; align-items: flex-start; }
            .history-stats { width: 100%; justify-content: space-between; }
            .history-item { flex-direction: column; align-items: flex-start; gap: var(--size-8); padding: var(--size-12); }
            .history-item-left { flex-wrap: wrap; width: 100%; }
            .history-item-time { width: 100%; min-width: auto; }
            .history-item-profit { align-self: flex-end; }
            .history-tooltip { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); bottom: auto; max-width: 90vw; }
            .api-grid { grid-template-columns: 1fr; }
            .bot-settings { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .stats-row { grid-template-columns: 1fr 1fr; }
            table { min-width: var(--size-500); }
        }