/* ── Tokens ── */
:root {
  --bg:       #0d181c;
  --card:     #132229;
  --border:   #1d363f;
  --text:     #D6E3E3;
  --muted:    #6B8E99;
  --primary:  #009FC1;
  --success:  #2ec28f;
  --danger:   #e05c5c;
  --warning:  #e0a85c;
  --radius:   8px;
  --font:     'Inter', system-ui, sans-serif;
}
.light {
  --bg:     #f0f4f5;
  --card:   #ffffff;
  --border: #d0e0e5;
  --text:   #0d181c;
  --muted:  #4a7080;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.container { max-width: 680px; margin: 0 auto; padding: 0 16px 48px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.logo svg { color: var(--primary); }
.header-right { display: flex; align-items: center; gap: 10px; }

/* ── Cards ── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 99px; }
.badge-connected   { background: rgba(46,194,143,.15); color: var(--success); }
.badge-disconnected{ background: rgba(107,142,153,.12); color: var(--muted); }

/* ── Buttons ── */
button, .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; border-radius: var(--radius); padding: 8px 16px; font-size: 13px; font-weight: 500; transition: opacity .15s; }
button:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-ghost    { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-danger   { background: rgba(224,92,92,.12); color: var(--danger); border: 1px solid rgba(224,92,92,.25); }
.btn-sm       { padding: 5px 11px; font-size: 12px; }
button:hover:not(:disabled), .btn:hover { opacity: .85; }

/* ── Forms ── */
label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 5px; }
input, select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 11px; border-radius: var(--radius); font-size: 13px; outline: none; transition: border-color .15s; }
input:focus, select:focus { border-color: var(--primary); }
select option { background: var(--card); }
.field { margin-bottom: 14px; }
.field-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }

/* ── Copy box ── */
.copy-box { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-family: 'Courier New', monospace; font-size: 12px; word-break: break-all; }
.copy-box code { flex: 1; color: var(--primary); }

/* ── Connect section ── */
.connect-section { text-align: center; padding: 32px 20px; }
.connect-section h2 { font-size: 18px; margin-bottom: 8px; }
.connect-section p  { color: var(--muted); margin-bottom: 20px; font-size: 13px; }
.connect-steps { text-align: left; max-width: 420px; margin: 0 auto 24px; }
.connect-steps li { color: var(--muted); font-size: 13px; margin-bottom: 6px; padding-left: 4px; list-style: decimal inside; }
.connect-steps li strong { color: var(--text); }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 0 8px 8px; }
td { padding: 8px 8px; border-top: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.status-ok      { color: var(--success); }
.status-error   { color: var(--danger); }
.status-dropped { color: var(--muted); }
.empty-row td { color: var(--muted); font-style: italic; padding: 16px 8px; }

/* ── Flash ── */
.flash { display: none; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 13px; }
.flash.show { display: block; }
.flash-success { background: rgba(46,194,143,.12); border: 1px solid rgba(46,194,143,.25); color: var(--success); }
.flash-error   { background: rgba(224,92,92,.12);  border: 1px solid rgba(224,92,92,.25);  color: var(--danger); }

/* ── Loading ── */
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { text-align: center; padding: 48px 0; }

/* ── Theme toggle ── */
.theme-btn { background: none; border: 1px solid var(--border); color: var(--muted); padding: 5px 8px; border-radius: var(--radius); cursor: pointer; font-size: 14px; }

/* ── Disconnect row ── */
.disconnect-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.connected-info  { display: flex; align-items: center; gap: 8px; font-size: 13px; }