:root { --bg-body:#f5f7fa; --bg-card:#fff; --text-primary:#333; --text-secondary:#888; --border-color:#d0d7de; --accent:#0088cc; --accent-hover:#0077b3; --danger:#d32f2f; --success:#2e7d32; --shadow:0 2px 8px rgba(0,0,0,0.1); --tab-bg:#e9ecf0; --tab-active:#0088cc; --input-bg:#fff; }
body.dark { --bg-body:#1a1a1a; --bg-card:#2d2d2d; --text-primary:#e0e0e0; --text-secondary:#aaa; --border-color:#444; --accent:#ff8c00; --accent-hover:#e67e00; --danger:#ff4444; --success:#44bb44; --shadow:0 2px 8px rgba(0,0,0,0.5); --tab-bg:#3a3a3a; --tab-active:#ff8c00; --input-bg:#3a3a3a; }
* { box-sizing:border-box; margin:0; }
body { background-color:var(--bg-body); font-family:Arial,sans-serif; padding:16px; color:var(--text-primary); transition:background .3s,color .3s; min-height:100vh; }
.container { max-width:800px; margin:0 auto; }
.card { background:var(--bg-card); border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:var(--shadow); transition:background .3s,box-shadow .3s; }
.tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tab { flex:1; min-width:70px; padding:10px 0; text-align:center; background:var(--tab-bg); border-radius:10px; cursor:pointer; font-weight:bold; transition:.2s; color:var(--text-primary); }
.tab.active { background:var(--tab-active); color:#fff; }
.tab-content { display:none; }
.tab-content.active { display:block; }
input,select,button,textarea { width:100%; padding:12px; margin:6px 0; border:1px solid var(--border-color); border-radius:10px; font-size:16px; background:var(--input-bg); color:var(--text-primary); }
button { background:var(--accent); color:#fff; border:none; font-weight:bold; cursor:pointer; transition:background .2s; }
button:hover { background:var(--accent-hover); }
button.danger { background:var(--danger); }
button.success { background:var(--success); }
.balance-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border-color); }
.wallet-number { background:var(--bg-body); padding:12px; border-radius:10px; font-family:monospace; font-size:18px; text-align:center; }
.total-balance { font-size:28px; font-weight:bold; color:var(--accent); }
.rate-info { font-size:14px; color:var(--text-secondary); margin-top:4px; }
.order-card,.deal-card { border:1px solid var(--border-color); border-radius:12px; padding:16px; margin-bottom:12px; background:var(--bg-card); }
.badge { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:bold; }
.badge-pending { background:#ffc107; color:#000; }
.badge-waiting_payment { background:#ff9800; color:#fff; }
.badge-paid_by_buyer { background:#2196f3; color:#fff; }
.badge-completed { background:#4caf50; color:#fff; }
.badge-disputed { background:#f44336; color:#fff; }
.badge-cancelled { background:#9e9e9e; color:#fff; }
.badge-active { background:#4caf50; color:#fff; }
.badge-filled { background:#9e9e9e; color:#fff; }
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:1000; }
.modal.show { display:flex; }
.modal-content { background:var(--bg-card); padding:24px; border-radius:16px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; color:var(--text-primary); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header h2 { margin:0; }
.close-btn { background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-primary); }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; }
.filter-row select,.filter-row input { width:auto; flex:1; min-width:120px; }
.pagination { display:flex; justify-content:center; gap:4px; margin-top:16px; }
.pagination button { width:auto; padding:8px 12px; margin:0; }
.loading { text-align:center; padding:40px; color:var(--text-secondary); }
.error { color:var(--danger); background:rgba(211,47,47,0.1); padding:12px; border-radius:8px; }
.login-btn { display:inline-block; background:var(--accent); color:#fff; padding:12px 24px; border-radius:30px; text-decoration:none; font-weight:bold; margin:10px 0; }
.theme-toggle { display:flex; align-items:center; justify-content:flex-end; gap:8px; cursor:pointer; user-select:none; font-size:14px; margin-bottom:8px; }
.theme-toggle span { font-size:24px; }
.theme-toggle .label { font-weight:bold; color:var(--text-secondary); }
.copy-btn { background:none; border:none; cursor:pointer; font-size:16px; margin-left:4px; }
.exchange-rate-info { background:var(--bg-body); padding:10px; border-radius:8px; margin:8px 0; text-align:center; }
.chat-box { max-height:300px; overflow-y:auto; border:1px solid var(--border-color); border-radius:8px; padding:8px; margin-bottom:8px; background:var(--bg-body); }
.chat-msg { padding:4px 8px; margin:4px 0; border-radius:6px; }
.chat-msg.admin { background:#ffc107; color:#000; }
.chat-msg.buyer { background:#2196f3; color:#fff; }
.chat-msg.seller { background:#4caf50; color:#fff; }
.online-dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; }
.online { background:#4caf50; }
.offline { background:#ccc; }