/* dumbpipe gateway admin UI. No inline styles or scripts: the page ships under a
   strict Content-Security-Policy, so everything lives in this file. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1d212b;
  --line: #262c38;
  --text: #e6e9ef;
  --muted: #8b93a7;
  --accent: #6ea8fe;
  --danger: #ff6b6b;
  --ok: #4ade80;
}

* { box-sizing: border-box; }

/* Author rules like `.login { display: flex }` beat the user agent's [hidden]
   rule, so the attribute has to win explicitly or panels never disappear. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mono, code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.wrap { word-break: break-all; }

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login h1 { font-size: 18px; margin: 0; }

input, select, button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}

input:focus, select:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button { cursor: pointer; }
button[type=submit] { background: var(--accent); color: #0b1220; border-color: transparent; font-weight: 600; }
button.ghost { background: transparent; }
button.ghost:hover { background: var(--panel-2); }
button.danger { color: var(--danger); border-color: #4a2b2b; }
button.danger:hover { background: #2a1a1a; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

header h1 { font-size: 16px; margin: 0; }
.header-right { display: flex; align-items: center; gap: 10px; }

nav { display: flex; gap: 4px; padding: 12px 24px 0; border-bottom: 1px solid var(--line); }

.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  padding: 10px 14px;
}

.tab.active { color: var(--text); border-bottom-color: var(--accent); }

main { padding: 24px; max-width: 1200px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 28px 0 12px; }
h2:first-child { margin-top: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.card .label { color: var(--muted); font-size: 12px; }

.copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.copy-row code { flex: 1; min-width: 0; }

table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
td.mono-cell { font-family: ui-monospace, monospace; font-size: 12px; }
td.wrap-cell { font-family: ui-monospace, monospace; font-size: 12px; white-space: normal; word-break: break-all; }
.table-wrap { overflow-x: auto; }

form#settings-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
form#settings-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
form#settings-form .hint { color: var(--muted); opacity: .8; }
form#settings-form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
form#settings-form input[type=checkbox] { width: auto; }
form#settings-form button[type=submit] { align-self: flex-start; }

.logs-header { display: flex; align-items: center; gap: 16px; }
.logs-header h2 { margin: 0; }
.logs-header .check { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }

pre#logs {
  background: #0b0e13;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  height: 60vh;
  overflow: auto;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 12px 0 0;
}

.lvl-ERROR { color: var(--danger); }
.lvl-WARN { color: #fbbf24; }
.lvl-INFO { color: var(--ok); }
.lvl-DEBUG, .lvl-TRACE { color: var(--muted); }

/* 내장 관리 콘솔: 네트워크 요청 없이 시스템 글꼴과 CSS만 사용한다. */
:root { --bg:#101419; --panel:#181e26; --panel-2:#202833; --line:#303b48; --text:#eaf0f5; --muted:#a3b0bd; --accent:#72dbc0; }
body { font-size:15px; line-height:1.6; }
button, input, select { min-height:44px; transition:background .18s, border-color .18s; }
button:disabled { opacity:.55; cursor:wait; }
input:hover, select:hover { border-color:#647689; }
input { min-width:0; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent); color:#10271f; font:bold 30px/1 ui-monospace,monospace; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand h1 { font-size:21px; letter-spacing:-.7px; }
.brand .muted { font-size:11px; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:1.3px; font-weight:700; margin:0 0 10px; }
.badge { display:inline-flex; align-items:center; width:fit-content; padding:5px 10px; border:1px solid #35584f; border-radius:6px; color:#a1efd9; background:#19352c; font-size:12px; white-space:nowrap; }
.badge.offline { color:#ffd38b; background:#372e1c; border-color:#665332; }
.status-dot { display:inline-block; width:7px; height:7px; background:var(--accent); border-radius:50%; margin-right:8px; }
.login { max-width:1100px; margin:auto; padding:48px 32px; gap:90px; }
.login-intro { flex:1; }
.login-intro .brand-mark { margin-bottom:36px; }
.login-intro h1 { font-size:clamp(36px,5vw,58px); line-height:1.2; letter-spacing:-2px; margin:20px 0; }
.login-intro p { line-height:1.9; }
.login-path { display:flex; gap:12px; align-items:center; margin-top:40px; font-size:12px; color:var(--muted); }
.login-path strong { padding:9px 14px; border:1px solid var(--line); border-radius:8px; color:var(--accent); }
.login form { width:390px; padding:32px; gap:16px; box-shadow:0 20px 70px #0003; }
.login form h2 { font-size:24px; color:var(--text); margin:8px 0 0; letter-spacing:-.7px; }
.login form p { margin:0; font-size:13px; }
.login form label { font-size:13px; margin-top:12px; }
.login form button { margin-top:6px; }
.login-footnote { font-size:11px!important; color:var(--muted); text-align:center; }
#app { display:grid; grid-template-columns:220px minmax(0,1fr); grid-template-rows:88px 1fr; min-height:100vh; }
header { grid-column:1/-1; background:#141a21; padding:20px 28px; position:sticky; top:0; z-index:3; }
nav { flex-direction:column; padding:28px 16px; background:#141a21; border-bottom:0; border-right:1px solid var(--line); gap:6px; }
.nav-label { margin:6px 14px 8px; font-size:10px; color:var(--muted); letter-spacing:1px; }
.nav-label:not(:first-child) { margin-top:28px; }
.tab { border:1px solid transparent; border-radius:8px; text-align:left; padding:11px 14px; color:var(--muted); display:flex; align-items:center; gap:12px; }
.tab span { font-size:20px; width:22px; text-align:center; }
.tab:hover { background:var(--panel); color:var(--text); }
.tab.active { color:var(--accent); border:1px solid #33564d; background:#1b302b; }
.sidebar-note { margin-top:auto; padding:40px 12px 8px; font-size:11px; line-height:2; }
.sidebar-note small { display:block; color:var(--muted); font-size:10px; }
main { width:100%; max-width:1400px; margin:0 auto; padding:36px 40px; min-width:0; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.page-heading h2 { margin:0; color:var(--text); font-size:28px; letter-spacing:-1px; }
.page-heading p.muted { margin:8px 0 0; font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:32px; }
.metric { padding:22px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(130deg,#1e2930,var(--panel)); display:flex; flex-direction:column; gap:10px; }
.metric .label { font-size:12px; color:var(--muted); }
.metric strong { font-size:32px; font-weight:600; letter-spacing:-1px; line-height:1.2; }
.metric:last-child strong { color:var(--accent); font-size:25px; padding:4px 0; }
.metric .muted { font-size:11px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 14px; }
.section-heading h2 { margin:0; color:var(--text); font-size:16px; }
.section-heading .muted { font-size:11px; }
.section-heading input { max-width:340px; width:100%; font-size:12px; }
.cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.card { padding:18px 20px; gap:8px; }
.card code { font-size:12px; overflow-wrap:anywhere; }
h2 { color:var(--text); font-size:16px; letter-spacing:0; }
.copy-row { padding:16px 18px; gap:20px; background:#12191f; }
.copy-row code { font-size:12px; line-height:1.9; color:#b5cbd5; }
.table-wrap { background:var(--panel); border:1px solid var(--line); border-radius:12px; }
th { background:#202833; padding:14px 18px; }
td { padding:18px; font-size:13px; }
tbody tr:hover { background:#202731; }
tbody tr:last-child td { border-bottom:0; }
td.wrap-cell { max-width:230px; color:var(--muted); }
.empty-state { border:1px dashed var(--line); border-radius:12px; padding:60px 20px; text-align:center; font-size:16px; }
.empty-state .muted { font-size:12px; display:inline-block; margin-top:8px; }
.notice { border:1px solid #35554e; border-left:3px solid var(--accent); padding:16px 20px; border-radius:8px; background:#192c27; color:#bbe4d5; font-size:12px; margin-bottom:28px; }
form#settings-form { max-width:700px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; gap:22px; }
form#settings-form label { font-size:13px; gap:10px; }
form#settings-form label.check { border-top:1px solid var(--line); padding-top:20px; }
input[type=checkbox] { min-height:auto; width:18px; height:18px; accent-color:var(--accent); }
.form-actions { display:flex; align-items:center; gap:18px; }
.form-actions span { font-size:12px; }
.logs-header { justify-content:space-between; flex-wrap:wrap; }
pre#logs { padding:24px; line-height:1.9; background:#10161c; height:60vh; }
.toast { position:fixed; bottom:28px; right:28px; z-index:10; padding:14px 20px; background:#244439; color:#d0fae7; border:1px solid #568976; border-radius:10px; box-shadow:0 12px 32px #0005; max-width:calc(100vw - 40px); }
.toast.error { background:#482829; border-color:#9d5559; color:#ffd3d5; }
@media(max-width:1100px) { main { padding:28px 24px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } #app { grid-template-columns:190px minmax(0,1fr); } }
@media(max-width:760px) { #app { display:block; } header { position:relative; flex-wrap:wrap; padding:18px; } .header-right { width:100%; gap:8px; flex-wrap:wrap; } .header-right button { margin-left:auto; } .header-right #logout { margin-left:0; } nav { flex-direction:row; overflow-x:auto; padding:12px; border-right:0; border-bottom:1px solid var(--line); } .nav-label,.sidebar-note { display:none; } .tab { white-space:nowrap; flex-shrink:0; padding:9px 12px; } .tab span { display:none; } main { padding:24px 18px; } .page-heading { align-items:flex-start; } .page-heading>.badge { display:none; } .page-heading h2 { font-size:25px; } .cards { grid-template-columns:1fr; } .metric { padding:16px; } .metric strong { font-size:28px; } .section-heading { flex-wrap:wrap; } .section-heading input { max-width:none; } .login { flex-direction:column; gap:28px; padding:28px 20px; } .login-intro { width:100%; max-width:390px; } .login-intro h1 { font-size:36px; } .login-intro .brand-mark { margin-bottom:18px; } .login-path { display:none; } .login form { width:100%; max-width:390px; padding:24px; } .copy-row { align-items:flex-start; padding:14px; gap:10px; } form#settings-form { padding:20px; } .form-actions { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }