:root {
  --bg: #10141f;
  --bg-raised: #171c2b;
  --bg-inset: #0c0f18;
  --line: #262d42;
  --line-strong: #35405e;
  --ink: #e9ecf5;
  --muted: #8a93ad;
  --amber: #ffb454;
  --amber-deep: #e89a33;
  --ok: #46d183;
  --danger: #f26d6d;
  --font-display: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}

::selection { background: rgba(255, 180, 84, .28); }

.topbar { border-bottom: 1px solid var(--line); background: var(--bg-inset); position: sticky; top: 0; z-index: 10; }

.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1;
  color: var(--amber); transform: translateY(-2px);
}

.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.brand-text small { color: var(--muted); font-size: 10px; letter-spacing: .34em; font-family: var(--font-mono); }

.conn { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(70, 209, 131, .7); }
.dot.err { background: var(--danger); }

.layout {
  max-width: 1200px; margin: 0 auto; padding: 28px 24px 64px;
  display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start;
}

.sidebar { position: sticky; top: 76px; display: grid; gap: 16px; }

.panel {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}

.panel-title {
  margin: 0 0 16px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .06em;
}

.slash { color: var(--amber); font-weight: 700; margin-right: 6px; }

.field { display: block; margin-bottom: 14px; }

.field-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12.5px; }
.field-label em { font-style: normal; opacity: .65; }

input {
  width: 100%; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--bg-inset); color: var(--ink);
  font: inherit; transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: #525b73; }

input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 180, 84, .16); }

.btn-primary, .btn-ghost {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; font-size: 13.5px;
  border-radius: 9px; padding: 10px 18px; cursor: pointer; transition: transform .08s, background .15s, border-color .15s;
}

.btn-primary { width: 100%; border: none; background: linear-gradient(160deg, var(--amber), var(--amber-deep)); color: #201503; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(.98); }

.btn-ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

.hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.settings summary { cursor: pointer; list-style: none; }
.settings summary::-webkit-details-marker { display: none; }
.settings[open] summary { margin-bottom: 16px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }

.stat {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px;
}

.stat-num { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--amber); }
.stat-label { color: var(--muted); font-size: 12px; letter-spacing: .05em; }

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; min-width: 720px; }

th {
  text-align: left; font-size: 11.5px; letter-spacing: .12em; color: var(--muted);
  font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line);
}

td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }

tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255, 255, 255, .025); }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--font-mono); font-size: 13px; padding: 5px 10px;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--bg-inset);
  color: var(--ink); cursor: pointer; transition: border-color .12s, color .12s;
}

.chip .chip-slash { color: var(--amber); font-weight: 500; }
.chip:hover { border-color: var(--amber); }
.chip.copied { border-color: var(--ok); color: var(--ok); }
.chip.copied .chip-slash { color: var(--ok); }

.cell-target { max-width: 260px; }

.cell-target a {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); text-decoration: none;
}

.cell-target a:hover { color: var(--ink); text-decoration: underline; }

.cell-time { color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11.5px;
  border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap;
}

.badge.expired { border-color: rgba(242, 109, 109, .5); color: var(--danger); }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.btn-mini {
  font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  transition: color .12s, border-color .12s;
}

.btn-mini:hover { color: var(--ink); border-color: var(--muted); }
.btn-mini.danger:hover { color: var(--danger); border-color: var(--danger); }

.empty { margin: 28px 0 12px; text-align: center; color: var(--muted); }

.load-more-wrap { display: flex; justify-content: center; margin-top: 16px; }

#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: #20283e; border: 1px solid var(--line-strong); color: var(--ink);
  padding: 10px 20px; border-radius: 10px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 99;
  max-width: min(90vw, 480px);
}

#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#toast[data-type="ok"] { border-color: rgba(70, 209, 131, .55); }
#toast[data-type="err"] { border-color: rgba(242, 109, 109, .55); }

.reveal { animation: reveal .4s cubic-bezier(.2, .7, .3, 1) both; }
.reveal:nth-child(2) { animation-delay: .07s; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; order: 2; }
  .main { order: 1; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat { padding: 10px 12px; }
  .stat-num { font-size: 20px; }
}