/* ============================================================================
 * booking.freedns.my — freedns.my 经典版样式（逐字照抄，未改任何数值）
 *
 * 来源：freedns.my 的 inc/views.php → page_css()（第 339–422 行）
 * 目的：让预定站在外观上与 freedns 经典版完全一致
 *
 * 照抄的要点（这些就是「经典版」的样子）：
 *   等宽字体 15px / 行高 1.55 ✓ 内容宽 54em 居中 ✓
 *   链接保留浏览器默认三色：:link #0000EE · :visited #551A8B · :active #EE0000
 *   h2 全大写 ＋ 字距 .08em ✓ th 无边框 ＋ 大写小字 ✓ td 只留 #eee 细线 ✓
 *   .msg 左侧 4px 粗边（error 红 · info 灰 · ok 绿）✓
 *   输入框 max-width 32em ✓ 按钮即浏览器默认灰 ✓
 *   深色：.theme-dark 或系统偏好（@media prefers-color-scheme）✓
 *
 * 这一份是「共享底座」：下面的附加段只加预定位用到的几个类，不动上面任何一条。
 * ========================================================================== */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #111111;
  --link: #0000EE;
  --visited: #551A8B;
  --active: #EE0000;
  --muted: #444444;
  --hint: #555555;
  --border: #bbbbbb;
  --softline: #eeeeee;
  --panel: #fafafa;
  --code: #f2f2f2;
  --field: #ffffff;
  --fieldborder: #999999;
  --button: #f2f2f2;
  --buttonhover: #e4e4e4;
  --error: #990000;
  --ok: #006600;
  --infoline: #666666;
}

.theme-dark {
  color-scheme: dark;
  --bg: #111111;
  --fg: #e8e8e8;
  --link: #7ab7ff;
  --visited: #c9a0ff;
  --active: #ff8a8a;
  --muted: #b0b0b0;
  --hint: #a0a0a0;
  --border: #444444;
  --softline: #2a2a2a;
  --panel: #1a1a1a;
  --code: #1f1f1f;
  --field: #1a1a1a;
  --fieldborder: #555555;
  --button: #2a2a2a;
  --buttonhover: #333333;
  --error: #ff8080;
  --ok: #6fdc6f;
  --infoline: #9a9a9a;
}

/* 没有选择过主题时，跟随系统设置 */
@media (prefers-color-scheme: dark) {
  .theme-auto {
    color-scheme: dark;
    --bg: #111111;
    --fg: #e8e8e8;
    --link: #7ab7ff;
    --visited: #c9a0ff;
    --active: #ff8a8a;
    --muted: #b0b0b0;
    --hint: #a0a0a0;
    --border: #444444;
    --softline: #2a2a2a;
    --panel: #1a1a1a;
    --code: #1f1f1f;
    --field: #1a1a1a;
    --fieldborder: #555555;
    --button: #2a2a2a;
    --buttonhover: #333333;
    --error: #ff8080;
    --ok: #6fdc6f;
    --infoline: #9a9a9a;
  }
}

body { font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, "Courier New", monospace;
       font-size: 15px; line-height: 1.55; color: var(--fg); background: var(--bg); margin: 0; padding: 0; }
.wrap { max-width: 54em; margin: 0 auto; padding: 1.5em 1em 3em 1em; }
/* Links keep the classic browser colours, like nic.eu.org: blue, purple once visited. */
a:link { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); text-decoration: underline; }
a:hover { color: var(--link); text-decoration: underline; }
a:active { color: var(--active); }
h1 { font-size: 1.35em; margin: 0 0 .2em 0; letter-spacing: .02em; }
h2 { font-size: 1em; margin: 1.6em 0 .5em 0; text-transform: uppercase; letter-spacing: .08em; }
h3 { font-size: 1em; margin: 1.2em 0 .3em 0; }
p.sub { margin: 0 0 .5em 0; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }
p { margin: .5em 0; }
ul, ol { margin: .5em 0 .5em 1.4em; padding: 0; }
li { margin: .15em 0; }
table { border-collapse: collapse; width: 100%; margin: .6em 0; }
th, td { text-align: left; vertical-align: top; padding: .25em .8em .25em 0; }
th { border-bottom: 1px solid var(--border); font-weight: normal; text-transform: uppercase; font-size: .85em; letter-spacing: .05em; }
td { border-bottom: 1px solid var(--softline); }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
       font-family: inherit; font-size: inherit; color: var(--fg); background: var(--field);
       border: 1px solid var(--fieldborder); padding: .3em .4em; max-width: 100%; box-sizing: border-box; }
input[type=text], input[type=password], input[type=email], input[type=number] { width: 100%; max-width: 32em; }
textarea { width: 100%; }
input[type=submit], button { font-family: inherit; font-size: inherit; padding: .35em .9em;
       border: 1px solid var(--fieldborder); background: var(--button); color: var(--fg); cursor: pointer; }
input[type=submit]:hover, button:hover { background: var(--buttonhover); }
label { display: block; margin: .9em 0 .15em 0; }
label.inline { display: inline; margin: 0; }
.hint { color: var(--hint); font-size: .85em; }
.msg { border: 1px solid var(--fieldborder); border-left-width: 4px; padding: .5em .8em; margin: 1em 0; }
.msg.error { border-color: var(--error); }
.msg.info { border-color: var(--infoline); }
.msg.ok { border-color: var(--ok); }
.err { color: var(--error); }
.ok { color: var(--ok); }
.small { font-size: .88em; color: var(--muted); }
.mono-box { border: 1px solid var(--fieldborder); padding: .6em .8em; margin: 1em 0; background: var(--panel); }
pre.wrap { white-space: pre-wrap; word-wrap: break-word; margin: .6em 0; font-family: inherit; }
code { background: var(--code); padding: 0 .2em; }
.code-block { border: 1px solid var(--border); background: var(--panel); padding: .6em .8em; overflow-x: auto; }
.field-error { color: var(--error); font-size: .88em; }
td.actions { white-space: nowrap; }
form.inline { display: inline; }
.pill { border: 1px solid var(--fieldborder); padding: 0 .35em; font-size: .85em; }

/* ============================================================================
 * 以下为预定站附加（不动上面任何一条 ✓ 只是补几个预定页需要的排版）
 * 全部沿用同一套变量 ✓ 所以浅色/深色自动跟随 ✓
 * ========================================================================== */

/* 前缀输入与前缀后缀连写：tom . vc.ci */
.prefix-row { display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; }
.prefix-row input[type=text] { width: 16em; max-width: 100%; }
.prefix-row .sfx { font-size: 1.05em; }

/* 查重结果：可用 / 已被占 / 格式不合法 */
.check-ok { color: var(--ok); }
.check-no { color: var(--error); }
.check-wait { color: var(--hint); }

/* 已预定列表：名字列等宽一点，状态列不换行 */
table.list td.name { white-space: nowrap; }
table.list td.state { white-space: nowrap; }
table.list td.when { white-space: nowrap; color: var(--muted); font-size: .88em; }

/* 状态标签（复用 .pill 的观感 ✓ 只是加颜色） */
.pill.state-pending { border-color: var(--infoline); }
.pill.state-reserved { border-color: var(--ok); }
.pill.state-expired, .pill.state-released { border-color: var(--fieldborder); color: var(--hint); }
.pill.state-blocked { border-color: var(--error); color: var(--error); }

/* 两种登录入口并排（用 freedns 登录 / 填写信息） */
.auth-row { display: flex; gap: 1.2em; flex-wrap: wrap; align-items: baseline; }
.auth-row form { margin: 0; }

/* 页脚：与正文同宽同色，只用一条细线分隔 */
.site-foot { margin-top: 2.2em; padding-top: .8em; border-top: 1px solid var(--border); color: var(--muted); font-size: .88em; }

/* 顶部一行：站点名 ＋ 右侧链接（经典版就是把导航放在一条 p 里 ✓ 这里保持同样朴素） */
.topline { margin: 0 0 .2em 0; }