/* ========================================
   Variables & Reset
   ======================================== */
:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-input: #0d1117;
    --border: #30363d;
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-muted: #484f58;
    --blue: #58a6ff;
    --green: #3fb950;
    --red: #f85149;
    --yellow: #d29922;
    --purple: #8b5cf6;
    --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --radius: 12px;
    --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ======================================== Header */
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-brand { display: flex; align-items: center; gap: 12px; }
.header-brand .logo { font-size: 28px; }
.header-brand h1 { font-size: 20px; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.badge { padding: 2px 10px; background: rgba(99,102,241,.15); color: var(--purple); border-radius: 20px; font-size: 12px; font-weight: 600; }
.header-nav { display: flex; gap: 4px; }
.nav-link { padding: 8px 16px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; transition: .2s; cursor: pointer; }
.nav-link:hover, .nav-link.active { color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none; }

/* ======================================== Layout */
.app-main { padding: 24px; max-width: 1600px; margin: 0 auto; }
.main-grid { display: grid; grid-template-columns: 1fr 440px 1fr; gap: 24px; align-items: start; }
.panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-left, .panel-right { max-height: calc(100vh - 120px); overflow-y: auto; }

/* ======================================== Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--gradient); color: #fff; }
.btn-primary:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
.btn-success { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-trade { width: 100%; padding: 16px; font-size: 16px; background: var(--gradient); color: #fff; border-radius: var(--radius); margin-top: 16px; }
.btn-trade:hover:not(:disabled) { box-shadow: 0 0 20px rgba(99,102,241,.4); }

/* ======================================== Inputs */
.input-field { width: 100%; padding: 12px 16px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; transition: .2s; }
.input-field:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.input-field::placeholder { color: var(--text-muted); }

/* ======================================== Section header */
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.section-header h3 { font-size: 16px; }

/* ======================================== Wallet */
.wallet-panel { padding: 12px; }
.wallet-panel.disconnected { text-align: center; }
.wallet-panel.connected { display: flex; align-items: center; gap: 10px; }
.wallet-info { display: flex; align-items: center; gap: 6px; font-family: monospace; font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
.copy-btn { background: none; border: none; cursor: pointer; font-size: 14px; }
.eth-bal { font-size: 13px; color: var(--green); margin-left: auto; font-weight: 600; }

/* ======================================== Tokens */
.token-manager { padding-bottom: 12px; }
.token-search { padding: 12px 20px; }
.token-list { padding: 0 12px; }
.token-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm); transition: .2s; gap: 8px; }
.token-row:hover { background: var(--bg-tertiary); }
.token-info { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.token-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.token-symbol { font-weight: 600; font-size: 14px; display: block; }
.token-name { font-size: 12px; color: var(--text-secondary); display: block; }
.token-balance { font-family: monospace; font-size: 13px; color: var(--text-secondary); min-width: 80px; text-align: right; }
.token-actions { display: flex; gap: 4px; }

/* ======================================== Trade */
.trade-panel { padding: 20px; }
.order-type-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-tertiary); border-radius: var(--radius-sm); margin-bottom: 20px; }
.tab { flex: 1; padding: 10px; background: transparent; border: none; color: var(--text-secondary); font-weight: 600; cursor: pointer; border-radius: 6px; transition: .2s; }
.tab.active { background: var(--gradient); color: #fff; }
.trade-input-section { background: var(--bg-tertiary); border-radius: var(--radius); padding: 16px; margin-bottom: 4px; }
.trade-input-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); }
.trade-input-row { display: flex; align-items: center; gap: 8px; }
.trade-input { flex: 1; padding: 12px 0; background: transparent; border: none; color: var(--text-primary); font-size: 24px; font-weight: 600; outline: none; }
.trade-input::placeholder { color: var(--text-muted); }
.trade-input::-webkit-outer-spin-button, .trade-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.token-select-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: .2s; }
.token-select-btn:hover { border-color: var(--purple); }
.token-icon { width: 24px; height: 24px; border-radius: 50%; }
.max-btn { background: rgba(99,102,241,.15); color: var(--purple); border: none; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.swap-direction { display: flex; justify-content: center; margin: -12px 0; position: relative; z-index: 2; }
.swap-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-secondary); border: 4px solid var(--bg-secondary); color: var(--text-primary); font-size: 18px; cursor: pointer; transition: .3s; outline: 2px solid var(--border); }
.swap-btn:hover { background: var(--gradient); transform: rotate(180deg); color: #fff; }

/* slippage */
.slippage-section { margin: 16px 0; }
.slippage-header { padding: 8px 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.slippage-options { display: flex; gap: 8px; padding: 12px; align-items: center; flex-wrap: wrap; }
.slippage-btn { padding: 6px 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 13px; transition: .2s; }
.slippage-btn.active { background: var(--gradient); color: #fff; border-color: transparent; }
.slippage-custom { width: 80px; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; }

/* quote */
.quote-info { margin: 16px 0; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.quote-details .quote-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
.quote-details .quote-row span:last-child { color: var(--text-primary); }

/* status */
.trade-status { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; text-align: center; }
.trade-status.pending { background: rgba(210,153,34,.15); color: var(--yellow); border: 1px solid rgba(210,153,34,.3); }
.trade-status.success { background: rgba(63,185,80,.15); color: var(--green); border: 1px solid rgba(63,185,80,.3); }
.trade-status.error { background: rgba(248,81,73,.15); color: var(--red); border: 1px solid rgba(248,81,73,.3); }

/* ======================================== Limit Order Panel */
.limit-orders-panel { padding-bottom: 16px; }
.lo-table { padding: 0 16px; }
.lo-header, .lo-row { display: grid; grid-template-columns: 1fr .6fr 1.2fr 1fr .8fr .7fr .6fr; gap: 8px; padding: 8px 4px; align-items: center; font-size: 13px; }
.lo-header { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--border); }
.lo-row { border-bottom: 1px solid var(--border); }
.lo-row.cancelled { opacity: .45; }
.lo-row.expired { opacity: .45; }
.lo-pair { font-weight: 600; }
.sell-label { color: var(--red); font-weight: 700; font-size: 11px; }
.lo-price { color: var(--blue); }
.lo-expiry { color: var(--text-muted); font-size: 12px; }
.badge-open { color: var(--green); font-weight: 700; }
.badge-cancelled { color: var(--text-muted); }
.badge-expired { color: var(--yellow); }
.badge-filled { color: var(--blue); font-weight: 700; }

/* ======================================== Orderbook */
.orderbook-panel { padding-bottom: 16px; }
.orderbook-pair { padding: 12px 20px; font-weight: 600; border-bottom: 1px solid var(--border); }
.orderbook-header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.asks-header { color: var(--red); font-size: 13px; padding: 12px; }
.bids-header { color: var(--green); font-size: 13px; padding: 12px; }
.orderbook-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 4px 12px; font-size: 12px; font-family: monospace; transition: .15s; }
.orderbook-row:hover { background: var(--bg-tertiary); }
.ask-price { color: var(--red); }
.bid-price { color: var(--green); }
.orderbook-spread { padding: 8px; text-align: center; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0; }
.trade-history { padding: 0 12px; margin-top: 16px; }
.trade-history h4 { padding: 12px; font-size: 14px; border-bottom: 1px solid var(--border); }
.trade-history-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--border); }
.trade-type { padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 10px; text-transform: uppercase; }
.trade-type.market { background: rgba(88,166,255,.15); color: var(--blue); }
.trade-type.limit { background: rgba(139,92,246,.15); color: var(--purple); }
.trade-time { color: var(--text-muted); margin-left: auto; }

/* ======================================== Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }
.modal-content { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; }
.modal-body { padding: 20px; }
.modal-actions { display: flex; gap: 12px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.preview-card { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 16px; margin-top: 12px; }
.preview-card h4 { margin-bottom: 8px; color: var(--green); }
.preview-card p { font-size: 13px; padding: 2px 0; }
.warning { margin-top: 12px; padding: 8px 12px; background: rgba(210,153,34,.15); border-radius: 6px; font-size: 12px; color: var(--yellow); }
.token-select-list { max-height: 400px; overflow-y: auto; margin-top: 12px; }
.token-select-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); cursor: pointer; transition: .15s; }
.token-select-item:hover { background: var(--bg-tertiary); }
.token-select-info { display: flex; flex-direction: column; flex: 1; }

/* ======================================== Notifications */
.notifications-container { position: fixed; top: 76px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.notification { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; animation: slideIn .3s; min-width: 280px; max-width: 400px; }
.notification.info { background: rgba(88,166,255,.15); border: 1px solid rgba(88,166,255,.3); color: var(--blue); }
.notification.success { background: rgba(63,185,80,.15); border: 1px solid rgba(63,185,80,.3); color: var(--green); }
.notification.error { background: rgba(248,81,73,.15); border: 1px solid rgba(248,81,73,.3); color: var(--red); }
.notification.warning { background: rgba(210,153,34,.15); border: 1px solid rgba(210,153,34,.3); color: var(--yellow); }
.notification-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; margin-left: auto; }
.notification.fade-out { animation: fadeOut .3s forwards; }
@keyframes slideIn { from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1} }
@keyframes fadeOut { to{opacity:0;transform:translateY(-10px)} }

/* ======================================== Loading */
.loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; color: var(--text-secondary); gap: 16px; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ======================================== Utility */
.loading { text-align: center; padding: 16px; color: var(--text-secondary); }
.empty-state { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; }
.error-message { color: var(--red); font-size: 13px; padding: 8px 12px; background: rgba(248,81,73,.1); border-radius: 6px; margin-top: 8px; }
.muted { color: var(--text-muted); }
.app-footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 40px; }

/* scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }

/* ======================================== Responsive */
@media (max-width:1200px) { .main-grid { grid-template-columns:1fr 420px; } .panel-right { grid-column:1/-1; } }
@media (max-width:768px) {
    .main-grid { grid-template-columns:1fr; }
    .app-header { flex-wrap:wrap; height:auto; padding:12px; gap:8px; }
    .header-nav { order:3; width:100%; }
    .lo-header,.lo-row { grid-template-columns:1fr 1fr 1fr; font-size:12px; }
    .lo-header span:nth-child(n+4),.lo-row span:nth-child(n+4) { display:none; }
}
/* ======================================== Limit Order Info Box */
.limit-info-box {
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.limit-info-box p {
    margin: 4px 0;
}

.limit-info-box b {
    color: var(--text-primary);
}