:root {
  --bg: #0f1117;
  --surface: #1a1d2e;
  --border: #2a2d42;
  --text: #e2e4f0;
  --muted: #7880a0;
  --accent: #5b8ef5;
  --success: #4caf8e;
  --danger: #e05c5c;
  --warn: #e0a03c;
}

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

body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; font-size: 14px; }

/* ── 로그인 ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}

.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-card .subtitle { color: var(--muted); margin-bottom: 28px; font-size: 13px; }

/* ── 대시보드 ── */
.topnav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 16px; flex: 1; }
.saas-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.nav-user { color: var(--muted); font-size: 13px; }

.dash-body { display: flex; flex-direction: column; min-height: 100vh; }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
.card h2 { font-size: 15px; font-weight: 600; margin-bottom: 18px; color: var(--text); }

/* ── 폼 ── */
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; margin-top: 14px; }
label:first-of-type { margin-top: 0; }

input[type=email], input[type=password], input[type=text], select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--accent); }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; font-size: 13px; color: var(--text); }

/* ── 버튼 ── */
button { cursor: pointer; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; padding: 9px 18px; transition: opacity .15s; }
button:disabled { opacity: .5; cursor: default; }

.btn-primary { background: var(--accent); color: #fff; width: 100%; margin-top: 20px; padding: 11px; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-ghost   { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-sm      { padding: 6px 14px; font-size: 12px; }

/* ── 상태 뱃지 ── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-running  { background: #1a3d2e; color: var(--success); }
.badge-stopped  { background: #1e1e2e; color: var(--muted); }
.badge-starting { background: #1e2d3e; color: var(--accent); }
.badge-stop_requested { background: #2e1e1e; color: var(--warn); }

/* ── 유틸 ── */
.error   { color: var(--danger); font-size: 12px; margin-top: 10px; }
.muted   { color: var(--muted); font-size: 12px; }
.hidden  { display: none !important; }
.mt-12   { margin-top: 12px; }
.mt-16   { margin-top: 16px; }

.info-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row .key   { color: var(--muted); font-size: 12px; }
.info-row .value { font-size: 13px; font-family: monospace; }

.btn-row { display: flex; gap: 8px; margin-top: 16px; }

/* ── 대시보드 그리드 full-width ── */
.full-width { grid-column: 1 / -1; }

/* ── 포지션 행 ── */
.position-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.position-row:last-child { border-bottom: none; }
.pos-name { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.pos-detail { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }

/* ── 체결내역 테이블 ── */
.trade-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trade-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.trade-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.trade-table tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .trade-table th:nth-child(6), .trade-table td:nth-child(6) { display: none; }
}

/* ── PWA 설치 버튼 ── */
.btn-install {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.btn-install:hover { background: rgba(91,142,245,.1); }

.ios-tip {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(91,142,245,.08);
  border: 1px solid rgba(91,142,245,.25);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}
.ios-tip strong { color: var(--accent); }