/* Plain tilde-style front end. Loaded after the legacy stylesheet. */
:root {
    color-scheme: dark;
    --bg: #111311;
    --fg: #d5d8cf;
    --dim: #a4aaa0;
    --link: #e3b46a;
    --line: #475048;
    --input: #171a17;
    --bad: #efa6a1;
    --good: #b4d3a7;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.55 ui-monospace, Consolas, "Liberation Mono", Menlo, monospace;
    overflow-wrap: break-word;
}
.site-shell { max-width: 850px; margin: 0 auto; padding: 25px 22px 45px; }
.site-header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.site-name { margin: 0 0 15px; font-size: 21px; line-height: 1.35; font-weight: 700; }
.site-name span { color: var(--link); }
.site-nav, .account-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-shell .site-nav a, .site-shell .account-nav a { padding: 0; text-decoration: none; font-size: inherit; color: var(--dim); font-weight: 400; }
.site-shell .site-nav a:hover, .site-shell .site-nav a[aria-current="page"], .site-shell .account-nav a:hover { color: var(--link); text-decoration: underline; }
.site-shell main { min-height: 380px; padding: 24px 0 30px; }
.site-shell a { padding: 0; color: var(--link); text-underline-offset: 3px; }
.site-shell a:hover { color: #ffdc9b; }
.site-shell h1, .site-shell h2, .site-shell h3 { text-transform: none; font-family: inherit; line-height: 1.35; }
.site-shell h1 { margin: 0 0 14px; font-size: 20px; color: var(--fg); }
.site-shell h2 { margin: 30px 0 10px; font-size: 16px; font-weight: 700; color: var(--link); }
.site-shell h3 { margin: 20px 0 8px; font-size: 15px; color: var(--fg); }
.site-shell p { margin: 0 0 13px; }
.site-shell ul, .site-shell ol { margin: 0 0 18px; padding-left: 23px; }
.site-shell li { padding-left: 4px; margin-bottom: 7px; }
.site-shell .intro { max-width: 720px; }
.site-shell .muted, .site-shell small, .site-shell .help { color: var(--dim); }
.site-shell small, .site-shell .note { font-size: 13px; }
.site-shell .note { color: var(--dim); margin: 9px 0; }
.site-shell .links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 16px 0 22px; }
.site-shell .rule { border: 0; border-top: 1px solid var(--line); margin: 23px 0; }
.site-shell pre, .site-shell textarea.code-box {
    background: transparent;
    color: var(--fg);
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 9px 0;
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.site-shell .banner-frame { display: block; width: 468px; max-width: 100%; height: 60px; border: 0; }
.site-shell .banner-preview { display: block; max-width: 100%; height: auto; margin: 10px 0; }
.site-shell .form { max-width: 580px; }
.site-shell .form-group { margin: 0 0 18px; }
.site-shell .form-group label { display: block; font-weight: 700; margin-bottom: 5px; }
.site-shell .form-group small { display: block; margin-top: 4px; }
.site-shell input:not([type="hidden"]):not([type="checkbox"]),
.site-shell textarea,
.site-shell select {
    display: block;
    width: 100%;
    max-width: 100%;
    background: var(--input) !important;
    border: 1px solid #646b61 !important;
    border-radius: 0;
    color: var(--fg) !important;
    padding: 9px 10px;
    font: inherit;
}
.site-shell input[type="checkbox"] { width: auto; accent-color: var(--link); }
.site-shell input::placeholder { color: #8b968b; }
.site-shell input:focus-visible, .site-shell textarea:focus-visible,
.site-shell button:focus-visible, .site-shell a:focus-visible,
.site-shell summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.site-shell button {
    border: 1px solid #9c825a;
    border-radius: 0;
    background: #25251e;
    color: var(--link);
    padding: 7px 12px;
    font: inherit;
    cursor: pointer;
}
.site-shell button:hover { border-color: var(--link); color: #ffdc9b; }
.site-shell button:disabled { opacity: .5; cursor: not-allowed; }
.site-shell .action-small { padding: 3px 7px; font-size: 13px; }
.site-shell .notification,
.site-shell .notification.alert-warning,
.site-shell .notification.alert-success {
    position: static;
    display: block;
    width: auto;
    animation: none;
    z-index: auto;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--good);
    border-radius: 0;
    padding: 7px 0 7px 11px;
    margin: 0 0 18px;
    color: var(--fg);
    font-weight: 400;
}
.site-shell .notification.alert-warning { border-left-color: var(--bad); color: var(--bad); }
.site-shell .notice { border-left: 2px solid var(--good); padding: 7px 0 7px 11px; margin: 0 0 18px; }
.site-shell .notice.error { border-color: var(--bad); color: var(--bad); }
.site-shell table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 11px 0 21px; }
.site-shell th, .site-shell td { display: table-cell; border: 0; border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; background: transparent; color: var(--fg); }
.site-shell th { color: var(--dim); font-weight: 400; }
.site-shell th:last-child, .site-shell td:last-child { padding-right: 0; }
.site-shell .table-wrap { overflow-x: auto; max-width: 100%; }
.site-shell .stat-list { display: grid; grid-template-columns: 185px minmax(0,1fr); gap: 5px 15px; margin: 10px 0 20px; }
.site-shell .stat-list dt { color: var(--dim); }
.site-shell .stat-list dd { margin: 0; }
.site-shell details { margin: 19px 0; }
.site-shell summary { cursor: pointer; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.site-shell details .form { margin-top: 17px; }
.site-shell .account-nav { margin: 8px 0 20px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.site-shell .inline-controls { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.site-shell .inline-controls .form-group { flex: 1; margin-bottom: 0; }
.site-shell .admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.site-shell .admin-editor { border: 1px solid var(--line); padding: 15px; margin: 16px 0 30px; }
.site-shell .admin-editor h2 { margin-top: 0; }
.site-shell .form-inline-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px,1fr)); gap: 12px; }
.site-shell .form-inline-group .form-group { margin: 0 0 8px; }
.site-shell .delete-confirm { display: flex !important; gap: 8px; align-items: center; font-weight: 400 !important; }
.site-shell .delete-confirm input { flex: none; }
.site-shell .site-footer { border-top: 1px solid var(--line); padding-top: 13px; font-size: 13px; color: var(--dim); }
.site-footer a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
    .site-shell { padding: 17px 16px 32px; }
    body { font-size: 14px; }
    .site-name { font-size: 19px; }
    .site-shell h1 { font-size: 18px; }
    .site-shell .stat-list { grid-template-columns: 145px minmax(0,1fr); }
}
@media (max-width: 390px) {
    .site-shell .stat-list { display: block; }
    .site-shell .stat-list dd { margin-bottom: 8px; }
}

.site-shell textarea.code-box { background: transparent !important; border: 0 !important; border-left: 2px solid var(--line) !important; padding: 7px 12px; font-size: 13px; line-height: 1.55; min-height: 120px; }