:root {
  --fg: #1f2328; --muted: #6b7280; --line: #e5e7eb; --bg: #f0f4f4; --panel: #f9fafb; --hover: #e0e4e4;
  --accent: #0f766e; --danger: #b91c1c; --ok-bg: #ecfdf5; --ok-line: #6ee7b7;
  --err-bg: #fef2f2; --err-line: #fca5a5;
}
* { box-sizing: border-box; }
body { font: 15px/1.5 system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg);
       max-width: 980px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
header { display: flex; flex-wrap: wrap; gap: .15rem 1.25rem; align-items: baseline; margin-bottom: 1.5rem; }
header h1 { font-size: 1.35rem; margin: 0; }
/* Second line of the header: domain + ssh port, under the title. */
header .meta { flex-basis: 100%; color: var(--muted); font-size: .9rem; margin: 0; font-weight: normal }
header h1 .meta { margin-left: .5rem }
header nav { margin-left: auto; display: flex; gap: 1rem; align-items: baseline; font-size: .9rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
h2.with-action { display: flex; align-items: baseline; justify-content: space-between; }
h2.with-action button { font-size: .9rem; font-weight: normal; }
button.small { padding: .25rem .6rem; font-size: .85rem; }
/* Rows of every table (and the key list in its dialog) highlight on hover;
   header and "empty" rows don't. */
table tr:not(.empty):hover td { background: var(--hover); }
td.keys button { margin-left: .6rem; }
/* Key table in the "Keys of …" dialog: label (comment or type + tail of the
   key, full key in the title), when it was added, and a delete form per row. */
/* Edit dialog: one row per action (title + description, button on the right),
   like GitHub's repository settings. */
.settings { margin-top: 1rem; }
.settings form { display: flex; align-items: center; gap: 1rem; margin: 0; padding: .75rem 0; border-top: 1px solid var(--line); }
.settings form > div { flex: 1; font-size: .9rem; }
.settings b { display: block; font-size: 1rem; }
.settings button { white-space: nowrap; }
/* Client dialog: four traffic windows in a row, then the key table. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.stats > div { padding: .45rem .6rem; } /* same cell padding as tables, so both sections line up */
.stats > div:last-child { text-align: right; }
.stats .label { display: block; color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
table.keys td { vertical-align: middle; }
table.keys td.key { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                    font: .85em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
table.keys td:not(.key), table.keys th:not(:first-child) { white-space: nowrap; }
table.keys form { margin: 0; }
/* Time columns are re-rendered every minute ("9 minutes ago" → "10 minutes
   ago"): a fixed width wide enough for the longest form ("89 minutes ago",
   or the ISO fallback before the script runs) keeps the table from jumping. */
th.time, td.time { width: 10.5rem; white-space: nowrap; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .45rem .6rem; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
     border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.empty td { color: var(--muted); font-style: italic; }
a { color: var(--accent); }
code { font: .85em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel);
       padding: .1rem .35rem; border-radius: 4px; word-break: break-all; }
input, textarea, button { font: inherit; padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: 6px; }
input[type=text], input[type=password], textarea { width: 100%; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; resize: vertical; }
button { cursor: pointer; background: var(--panel); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { color: var(--danger); }
button.link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; }
button.link.danger { color: var(--danger); }
form.inline { display: inline; }
.panel { margin: 25vh auto 0; max-width: 360px; }
.panel .panel-foot { margin: .6rem 0; text-align: right }
.msg { padding: .55rem .9rem; border-radius: 6px; margin: 0 0 1rem; background: var(--ok-bg); border: 1px solid var(--ok-line); }
.msg.err { background: var(--err-bg); border-color: var(--err-line); }
/* Page-level message: pinned to the top edge, centered, over the content; the
   script adds .hide after 7 s and removes the element when the fade ends. */
.toast { position: fixed; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 10; margin: 0;
         max-width: calc(100vw - 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
         transition: opacity .3s; }
.toast.hide { opacity: 0; }
.muted { color: var(--muted); }

/* Modals: native <dialog>. Open with <button data-open="id">, close with
   <button data-close> (Cancel), Esc or a click on the backdrop; data-auto opens on
   load; data-forced can't be dismissed (used for the mandatory password change). */
dialog.modal { border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(440px, calc(100vw - 2rem));
               box-shadow: 0 20px 60px rgba(0,0,0,.25); color: inherit; }
dialog.modal.wide { width: min(620px, calc(100vw - 2rem)); } /* key lists, the add-key textarea */
dialog.modal::backdrop { background: rgba(107, 113, 137, .75); backdrop-filter: blur(1px); }
dialog.modal .modal-head { display: flex; align-items: center; justify-content: space-between;
                           padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
dialog.modal .modal-head h2 { margin: 0; font-size: 1.05rem; }
dialog.modal .modal-head .link { font-size: .9rem; }
dialog.modal .modal-body { padding: 1rem 1.25rem 1.25rem; }
dialog.modal .modal-body p { margin: .6rem 0; }
dialog.modal .modal-foot { display: flex; gap: .6rem; justify-content: flex-end; align-items: center; margin-top: 1rem; }
dialog.modal .modal-foot .spacer { margin-right: auto; }