@font-face { font-family:"Kalam Local"; src:url("/fonts/Kalam-Latin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
.backup-actions { display:flex; flex-wrap:wrap; gap:10px }
.backup-card { margin-top:14px }.backup-card h3,.backup-card p,.draft-notice p { margin:0 }.backup-card p,.draft-notice p { color:var(--muted); font-size:.875rem }
.draft-notice { margin-bottom:20px }.draft-notice[hidden] { display:none }.link-visibility { min-width:130px; max-width:50% }
:root {
  color-scheme: light dark;
  --bg: #f5f5f7; --surface: #fff; --surface-hover: #fafafa; --text: #1d1d1f; --muted: #6e6e73;
  --border: rgba(0,0,0,.1); --border-strong: rgba(0,0,0,.19); --shadow: 0 12px 38px rgba(0,0,0,.06);
  --focus: #0066cc; --status: #18864b; --control: rgba(0,0,0,.055); --danger: #c7352b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", "Yu Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#050505;--surface:#111;--surface-hover:#171717;--text:#f5f5f7;--muted:#a1a1a6;--border:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.24);--shadow:0 18px 55px rgba(0,0,0,.5);--focus:#2997ff;--status:#39c777;--control:rgba(255,255,255,.09);--danger:#ff6961 } }
:root[data-theme="dark"] { --bg:#050505;--surface:#111;--surface-hover:#171717;--text:#f5f5f7;--muted:#a1a1a6;--border:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.24);--shadow:0 18px 55px rgba(0,0,0,.5);--focus:#2997ff;--status:#39c777;--control:rgba(255,255,255,.09);--danger:#ff6961 }
:root[data-theme="light"] { color-scheme:light }
* { box-sizing:border-box }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
html { background:var(--bg); scroll-behavior:smooth }
body { margin:0; min-width:0; min-height:100vh; background:var(--bg); color:var(--text); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }
.public-page { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh }.public-page .contact-shell { flex:1 }.public-page footer { margin-top:auto }
button,input,textarea,select { font:inherit }
button,select { color:inherit }
a { color:inherit }
:focus-visible { outline:3px solid color-mix(in srgb,var(--focus) 65%,transparent); outline-offset:3px }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--text); color:var(--bg); text-decoration:none }
.skip-link:focus { top:16px }
.topbar { display:flex; justify-content:flex-end; width:min(100% - 40px,1080px); margin:0 auto; padding-top:22px }
.preferences { display:flex; gap:8px }
.preferences label { position:relative }
.preferences label>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.language-control svg { position:absolute; top:50%; left:11px; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; color:var(--muted); transform:translateY(-50%); pointer-events:none }
.language-icon { position:absolute; top:50%; left:11px; width:16px; height:16px; color:var(--muted); transform:translateY(-50%); pointer-events:none }
.preferences select { appearance:none; min-height:36px; padding:0 28px 0 34px; border:1px solid var(--border); border-radius:999px; background:var(--control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; font-size:.8125rem; font-weight:600; cursor:pointer }
.preferences select option { background:#fff; color:#111 }
.theme-toggle { display:flex; align-items:center; gap:6px; min-height:36px; padding:0 9px; border:1px solid var(--border); border-radius:999px; background:var(--control); color:var(--muted); cursor:pointer }.theme-toggle>span:not(.theme-track) { width:14px; font-size:.8rem; line-height:1 }.theme-track { position:relative; width:30px; height:18px; border-radius:99px; background:var(--border-strong) }.theme-track i { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--text); transition:transform .2s ease }.theme-toggle[aria-checked="true"] .theme-track i { transform:translateX(12px) }.theme-toggle[aria-checked="false"] .sun,.theme-toggle[aria-checked="true"] .moon { color:var(--text) }
.theme-toggle .sun,.theme-toggle .moon { display:grid; place-items:center }
.contact-shell { width:min(100% - 40px,600px); margin:clamp(52px,8vh,86px) auto 100px }
.identity { text-align:center }
.avatar-wrap { position:relative; display:grid; place-items:center; width:120px; height:120px; margin:0 auto 28px; padding:0; border:1px solid var(--border); border-radius:50%; background:transparent; color:inherit; box-shadow:0 0 0 8px var(--control); cursor:default }
.avatar { position:absolute; inset:0; width:120px; height:120px; border-radius:50%; object-fit:cover; border:1px solid var(--border); box-shadow:var(--shadow) }
.avatar-fallback { display:grid; place-items:center; background:var(--text); color:var(--bg); font-size:1.65rem; font-weight:650; letter-spacing:-.03em }
h1 { margin:0; font-size:clamp(2.3rem,7vw,4rem); line-height:1.04; letter-spacing:-.055em; font-weight:650 }
.identity h1 { font-family:"Kalam Local",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:400; line-height:1.2; letter-spacing:0 }
.bio { max-width:610px; margin:18px auto 0; color:var(--muted); font-size:clamp(1.0625rem,2.5vw,1.25rem); line-height:1.62; white-space:pre-line; overflow-wrap:anywhere; text-wrap:balance }
.status { display:inline-flex; align-items:center; gap:9px; margin:24px 0 0; padding:8px 13px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted); font-size:.875rem; font-weight:550; box-shadow:0 1px 0 rgba(255,255,255,.08) inset }
.status>span:first-child { width:7px; height:7px; border-radius:50%; background:var(--status); box-shadow:0 0 0 4px color-mix(in srgb,var(--status) 12%,transparent) }
.links-hub { margin-top:50px }
.link-list { display:grid; grid-template-columns:1fr; gap:10px }
.site-card { display:grid; grid-template-columns:36px minmax(0,1fr) 18px; align-items:center; gap:12px; min-height:64px; padding:10px 14px; border:1px solid var(--border); border-radius:13px; background:var(--surface); box-shadow:0 1px 0 rgba(255,255,255,.12) inset; text-decoration:none; transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease }
.site-card:hover { transform:translateY(-2px); background:var(--surface-hover); border-color:var(--border-strong); box-shadow:var(--shadow) }
.site-card.disabled { background:color-mix(in srgb,var(--surface) 56%,transparent); color:var(--muted); box-shadow:none; cursor:not-allowed }
.site-card.disabled:hover { transform:none; border-color:var(--border); box-shadow:none }
.site-card.disabled .link-icon,.site-card.disabled .arrow { opacity:.55 }
.link-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--control) }.link-icon svg { width:20px; height:20px }
.link-copy { min-width:0 }
.link-copy strong,.link-copy small { display:block; overflow-wrap:anywhere }
.link-copy strong { font-size:.94rem; font-weight:600 }
.link-copy small { margin-top:1px; color:var(--muted); font-size:.78rem }
.arrow { color:var(--muted); transition:transform .2s ease }
.site-card:hover .arrow { transform:translate(2px,-2px) }
.contact-icons { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin:0 auto 28px }
button.contact-icon-button { padding:0; border:0; background:transparent; cursor:pointer }
.public-page .toast { max-width:calc(100vw - 48px); overflow-wrap:anywhere; user-select:text }.public-page .toast.show { pointer-events:auto }
.redirect-notice { position:fixed; bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px)); left:50%; transform:translateX(-50%); z-index:21; width:max-content; max-width:calc(100% - 32px); min-height:44px; padding:7px 16px; border:1px solid color-mix(in srgb,var(--text) 9%,transparent); border-radius:24px; background:var(--surface); color:var(--text); box-shadow:0 4px 18px #0001,inset 0 1px 0 #ffffff26; font:inherit; font-size:.75rem; font-weight:400; line-height:1.4; text-align:center; white-space:pre-line; overflow-wrap:anywhere; cursor:pointer; -webkit-tap-highlight-color:transparent }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .redirect-notice { background:color-mix(in srgb,var(--surface) 22%,transparent); -webkit-backdrop-filter:blur(1px) saturate(110%); backdrop-filter:blur(1px) saturate(110%) } }
@media (prefers-reduced-transparency:reduce) { .redirect-notice { background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none } }
.redirect-notice { font-variant-numeric:tabular-nums; transition:box-shadow .2s ease,border-color .2s ease }
.redirect-notice:not([hidden]) { animation:glass-arrive .22s ease-out }
.redirect-notice:active { box-shadow:0 2px 10px #0001,inset 0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent) }
@keyframes glass-arrive { from { transform:translate(-50%,calc(100% + 48px + env(safe-area-inset-bottom))) } to { transform:translate(-50%,0) } }
.redirect-border { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; fill:none; stroke:currentColor; opacity:.6 }
.redirect-border rect { width:calc(100% - 2px); height:calc(100% - 2px); stroke-width:1; stroke-linecap:round; stroke-dasharray:12 88; animation:glass-border-spin 2s linear infinite }
@keyframes glass-border-spin { from { stroke-dashoffset:0 } to { stroke-dashoffset:-100 } }
.redirect-message { position:relative; z-index:1 }
.redirect-notice::before { content:""; position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; pointer-events:none; background:color-mix(in srgb,var(--text) 5%,transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:glass-progress var(--redirect-duration,5s) linear both }
.redirect-notice[data-redirect-state="paused"]::before,.redirect-notice[data-redirect-state="paused"] .redirect-border rect { animation-play-state:paused }
@keyframes glass-progress { from { width:0 } to { width:100% } }
.redirect-notice[data-redirect-state="completing"]::before,.redirect-notice[data-redirect-state="exiting"]::before { animation:glass-complete 1s linear forwards }
.redirect-notice[data-redirect-state="exiting"] { animation:glass-depart .22s ease-in forwards }
.redirect-notice[data-redirect-state="completing"] .redirect-border rect,.redirect-notice[data-redirect-state="exiting"] .redirect-border rect { animation:glass-border-fill 1s linear forwards }
@keyframes glass-border-fill { from { stroke-dasharray:12 88; stroke-dashoffset:var(--border-fill-start,0) } to { stroke-dasharray:100 0; stroke-dashoffset:var(--border-fill-end,44) } }
@keyframes glass-complete { from { width:var(--cancel-width,0%) } to { width:100% } }
@keyframes glass-depart { from { transform:translate(-50%,0) } to { transform:translate(-50%,calc(100% + 48px + env(safe-area-inset-bottom))) } }
@media (prefers-reduced-transparency:reduce) { .redirect-notice::before { -webkit-backdrop-filter:none; backdrop-filter:none } }
.contact-icon-button { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:var(--text); text-decoration:none; transition:transform .18s ease,background .18s ease,opacity .18s ease }.contact-icon-button svg { width:30px; height:30px }.contact-icon-button:hover { transform:translateY(-2px); background:var(--control) }.contact-icon-button.disabled { opacity:.3; cursor:not-allowed }.contact-icon-button.disabled:hover { transform:none; background:transparent }.contact-icon-button::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); z-index:5; padding:5px 8px; border:1px solid var(--border); border-radius:7px; background:var(--text); color:var(--bg); font-size:.75rem; line-height:1; white-space:nowrap; opacity:0; transform:translate(-50%,4px); pointer-events:none; transition:opacity .15s ease,transform .15s ease }.contact-icon-button:hover::after,.contact-icon-button:focus-visible::after { opacity:1; transform:translate(-50%,0) }
.empty { grid-column:1/-1; margin:0; padding:26px; border:1px dashed var(--border); border-radius:20px; color:var(--muted); text-align:center }
footer { display:flex; justify-content:space-between; align-items:center; gap:20px; width:min(100% - 40px,1080px); margin:0 auto; padding:26px 0 34px; border-top:1px solid var(--border); color:var(--muted); font-size:.8125rem }.footer-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px }.footer-meta>*+* { position:relative }.footer-meta>*+*:before { content:"·"; position:absolute; left:-9px; color:var(--border-strong) }.footer-year { font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:.75rem; letter-spacing:.025em }.footer-credit,.footer-credit strong { color:inherit; font-weight:400 }.footer-link { color:color-mix(in srgb,var(--text) 65%,var(--muted)); font-weight:600; letter-spacing:.015em; text-underline-offset:4px; text-decoration-color:var(--border-strong) }.footer-link:hover { color:var(--text); text-decoration-color:currentColor }
.footer-visitors { position:relative; margin-left:auto; flex:none; font-size:.75rem; font-variant-numeric:tabular-nums }
.footer-visitors[hidden] { display:none }
.footer-visitors summary { display:grid; place-items:center; width:36px; height:36px; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--muted); list-style:none; cursor:pointer }
.footer-visitors summary svg { width:18px; height:18px; stroke-width:1.5; opacity:.65; transition:opacity .15s ease }
.footer-visitors summary::-webkit-details-marker { display:none }
.footer-visitors summary:hover,.footer-visitors[open] summary { color:var(--text); border-color:var(--border) }
.footer-visitors summary:hover svg,.footer-visitors[open] summary svg { opacity:1 }
.footer-visitor-count { position:absolute; right:0; bottom:calc(100% + 8px); z-index:5; padding:7px 10px; border-radius:8px; background:var(--text); color:var(--bg); white-space:nowrap; visibility:hidden; opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .15s ease,transform .15s ease,visibility .15s ease }
.footer-visitors:hover:not([data-suppress-hover]) .footer-visitor-count,.footer-visitors[open] .footer-visitor-count { visibility:visible; opacity:1; transform:none }
.reveal { animation:reveal .65s cubic-bezier(.2,.75,.25,1) both }.reveal-2 { animation-delay:.12s }
@keyframes reveal { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }

.admin-shell { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh }
.admin-sidebar { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; padding:28px 18px; border-right:1px solid var(--border); background:color-mix(in srgb,var(--surface) 72%,transparent) }
.admin-brand { display:flex; align-items:center; gap:11px; padding:0 9px; text-decoration:none }.admin-brand-avatar { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border-radius:50%; background:var(--text); color:var(--bg); font-size:.75rem; font-weight:700 }.admin-brand-avatar img { width:100%; height:100%; object-fit:cover }.admin-brand b { overflow:hidden; font-size:.95rem; letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap }
.admin-nav { display:grid; gap:4px; margin-top:36px }.admin-nav button { padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--muted); text-align:left; font-size:.9rem; cursor:pointer }.admin-nav button:hover,.admin-nav button.active { background:var(--control); color:var(--text) }
.sidebar-footer { display:grid; gap:4px; margin-top:auto }.view-site,.sidebar-footer button { display:block; width:100%; padding:10px 12px; border:0; background:transparent; color:var(--muted); font-size:.875rem; text-align:left; text-decoration:none; cursor:pointer }.view-site:hover,.sidebar-footer button:hover { color:var(--text) }
.admin-main { width:min(100%,920px); margin:0 auto; padding:50px clamp(28px,6vw,72px) 90px }
.admin-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px }.admin-header h1 { font-size:1.85rem; line-height:1.2; letter-spacing:-.03em }
.admin-actions { display:flex; align-items:center; gap:8px }.mobile-logout { display:none }
.save-button { min-width:112px }
.editor-section { display:none }.editor-section.active { display:block }.section-heading { margin-bottom:20px }.section-heading h2 { margin:0; font-size:1.35rem; line-height:1.3; letter-spacing:-.02em }.section-heading p { margin:6px 0 0; color:var(--muted) }.section-heading-actions { display:flex; flex-direction:column; align-items:stretch; gap:16px }.link-add-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,600px) }.link-add-actions .add-link-button { width:100%; min-width:0; white-space:normal; text-align:center }
.form-card,.link-editor-card { padding:24px; border:1px solid var(--border); border-radius:20px; background:var(--surface) }.form-card { display:grid; gap:22px }
.field { display:grid; gap:8px }.field>span,fieldset legend { font-size:.875rem; font-weight:600 }.field input,.field textarea,.field select { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:var(--bg); color:var(--text); line-height:1.45 }.field textarea { min-height:120px; resize:vertical }.field input:hover,.field textarea:hover,.field select:hover { border-color:var(--border-strong) }.field small { color:var(--muted); font-size:.78rem }
.avatar-editor { display:flex; align-items:center; gap:18px; padding-bottom:22px; border-bottom:1px solid var(--border) }.avatar-preview { flex:0 0 auto; display:grid; place-items:center; width:84px; height:84px; overflow:hidden; border:1px solid var(--border); border-radius:50%; background:var(--text); color:var(--bg); font-weight:700 }.avatar-preview img { width:100%; height:100%; object-fit:cover }.avatar-editor strong,.avatar-editor small { display:block }.avatar-editor small { margin-top:3px; color:var(--muted); font-size:.78rem }.avatar-actions { display:flex; gap:8px; margin-top:12px }
fieldset { min-width:0; margin:0; padding:20px 0 0; border:0; border-top:1px solid var(--border) }.locale-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:12px }.locale-stack { gap:20px }
.links-editor { display:grid; gap:26px }.link-editor-group { display:grid; gap:12px }.link-editor-group>h3 { margin:0 0 2px; color:var(--muted); font-size:.82rem; letter-spacing:.04em }.link-editor-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px }.link-editor-head strong,.link-editor-head small { display:block }.link-editor-head small { margin-top:2px; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em }.link-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px }.link-fields .wide { grid-column:1/-1 }
.link-primary-fields { display:grid; align-content:start; gap:14px }.icon-field { min-width:0; margin:0; padding:0; border:0; align-self:start }.icon-field legend { margin-bottom:8px }.icon-selector { position:relative }.icon-selector>summary { display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg); font-size:.875rem; cursor:pointer; list-style:none }.icon-selector>summary::-webkit-details-marker { display:none }.icon-selector>summary:after { content:"⌄"; margin-left:auto; color:var(--muted) }.icon-selector>summary svg { width:22px; height:22px; flex:none }.icon-selector>summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.icon-selector[open]>summary { border-color:var(--border-strong) }.icon-picker { position:absolute; right:0; top:calc(100% + 8px); z-index:6; display:grid; width:min(420px,calc(100vw - 72px)); max-height:340px; overflow-y:auto; gap:12px; padding:12px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); box-shadow:var(--shadow) }.icon-picker-group { min-width:0 }.icon-picker-group>strong { display:block; margin:0 0 6px; color:var(--muted); font-size:.7rem; font-weight:600 }.icon-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:6px }.icon-choice { display:grid; place-items:center; min-width:36px; height:36px; padding:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer }.icon-choice svg { width:20px; height:20px }.icon-choice:hover { background:var(--control); color:var(--text) }.icon-choice[aria-pressed="true"] { border-color:var(--border-strong); background:var(--text); color:var(--bg) }
.switch { display:flex; align-items:center; gap:8px; cursor:pointer }.switch input { position:absolute; opacity:0 }.switch>span { position:relative; width:40px; height:24px; border-radius:99px; background:var(--control); border:1px solid var(--border); transition:.2s }.switch>span:after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:.2s }.switch input:checked+span { background:var(--text) }.switch input:checked+span:after { transform:translateX(16px); background:var(--bg) }.switch b { font-size:.8rem }
.order-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); color:var(--muted); font-size:.8rem }.order-actions div { display:flex; gap:6px }.order-actions button { width:34px; height:30px; border:1px solid var(--border); border-radius:9px; background:var(--control); cursor:pointer }.order-actions .remove-link { width:auto; padding:0 10px; color:var(--danger) }.order-actions button:disabled { opacity:.3; cursor:default }
.toast { position:fixed; right:24px; bottom:24px; z-index:20; padding:11px 16px; border:1px solid var(--border); border-radius:12px; background:var(--text); color:var(--bg); box-shadow:var(--shadow); opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s }.toast.show { opacity:1; transform:none }.toast.error { background:var(--danger); color:#fff }
.password-card { margin-top:14px }.password-card h3 { margin:0; font-size:1.05rem }.password-card>div>p { margin:5px 0 0; color:var(--muted); font-size:.875rem }
.footer-settings { margin-top:34px }.footer-settings .section-heading h3 { margin:0; font-size:1.15rem; letter-spacing:-.02em }.footer-links-editor { display:grid; gap:12px }.footer-links-empty { margin:0; padding:20px; border:1px dashed var(--border); border-radius:16px; color:var(--muted); text-align:center }.footer-link-card .link-fields { grid-template-columns:minmax(140px,.45fr) minmax(0,1fr) }

.login-page { display:grid; place-items:center; padding:24px }.login-shell { width:min(100%,420px); padding:clamp(26px,5vw,40px); border:1px solid var(--border); border-radius:28px; background:var(--surface); box-shadow:var(--shadow) }.login-mark { display:grid; place-items:center; width:48px; height:48px; overflow:hidden; border:1px solid var(--border); border-radius:50%; background:var(--text); color:var(--bg); font-size:.875rem; font-weight:700; text-decoration:none }.login-mark img { width:100%; height:100%; object-fit:cover }.login-heading { margin:34px 0 28px }.login-heading p { margin:0 0 6px; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.09em }.login-heading h1 { font-size:2rem }.login-heading span { display:block; margin-top:9px; color:var(--muted) }.login-form { display:grid; gap:18px }.login-form button { min-height:46px; margin-top:4px; border:0; border-radius:10px; background:var(--text); color:var(--bg); font-weight:600; cursor:pointer }.login-error { margin:-8px 0 20px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--danger) 30%,transparent); border-radius:11px; background:color-mix(in srgb,var(--danger) 8%,transparent); color:var(--danger); font-size:.875rem }.login-back { display:inline-block; margin-top:24px; color:var(--muted); font-size:.8125rem; text-decoration:none }.login-back:hover { color:var(--text) }

.error-page { display:grid; place-items:center; text-align:center }.error-page main { padding:40px }.error-code { margin:0 0 10px; color:var(--muted); font-size:.875rem; letter-spacing:.12em }.error-page h1 { font-size:clamp(2rem,7vw,3.5rem) }.error-detail { color:var(--muted) }.back-link { display:inline-block; margin-top:26px; color:var(--muted); text-decoration:none }.back-link:hover { color:var(--text) }
@media (max-width:720px) {
  .public-page footer { gap:8px }.footer-meta { min-width:0; flex-wrap:nowrap; white-space:nowrap }.footer-year { flex:none }.footer-credit,.footer-link { min-width:0; overflow:hidden; text-overflow:ellipsis }.footer-visitors { margin-left:auto }
  .topbar { width:min(100% - 28px,1080px); padding-top:14px }.contact-shell { width:min(100% - 28px,600px); margin-top:54px }.links-hub { margin-top:46px }footer { width:min(100% - 28px,1080px) }
  .admin-shell { display:block }.admin-sidebar { position:sticky; z-index:10; height:auto; padding:12px 14px; border-right:0; border-bottom:1px solid var(--border); backdrop-filter:blur(18px) }.admin-brand,.sidebar-footer { display:none }.admin-nav { display:flex; gap:4px; margin:0; overflow-x:auto }.admin-nav button { flex:0 0 auto; text-align:center }.admin-main { padding:34px 16px 70px }.admin-header { align-items:center; margin-bottom:34px }.admin-header h1 { font-size:1.7rem }.mobile-logout { display:block }.locale-grid,.link-fields,.footer-link-card .link-fields { grid-template-columns:1fr }.link-fields .wide { grid-column:auto }.form-card,.link-editor-card { padding:18px }
}
@media (max-width:420px) { .topbar>.preferences { width:100%; justify-content:space-between }.preferences select { max-width:128px }.contact-shell { margin-bottom:70px }.bio { font-size:1rem } .admin-header { gap:10px }.save-button { min-width:98px; padding:0 12px }.section-heading-actions { align-items:stretch; flex-direction:column } }
@media (prefers-reduced-motion:reduce) { :not(.redirect-notice, .redirect-notice *),:not(.redirect-notice, .redirect-notice *)::before,:not(.redirect-notice, .redirect-notice *)::after { scroll-behavior:auto!important; animation:none!important; transition:none!important } }


.admin-page :where(.save-button,.password-button,.add-link-button,.avatar-actions button,.backup-actions a,.backup-actions button,.mobile-logout button,.stats-refresh) { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px; border:1px solid var(--border); border-radius:10px; background:var(--control); color:var(--text); font:inherit; font-size:.875rem; font-weight:500; line-height:1.4; text-decoration:none; cursor:pointer }
.admin-page [hidden] { display:none }
.switch input:focus-visible+span { outline:3px solid color-mix(in srgb,var(--focus) 65%,transparent); outline-offset:3px }
.admin-page :is(.save-button,.password-button) { background:var(--text); color:var(--bg); border-color:transparent; font-weight:600 }
.admin-page :is(.save-button,.password-button):disabled { opacity:.55; cursor:wait }
.admin-page :is(.add-link-button,.avatar-actions button,.backup-actions a,.backup-actions button,.mobile-logout button,.stats-refresh):hover { background:var(--surface-hover); border-color:var(--border-strong) }
.help-details { margin-top:8px; color:var(--muted); font-size:.8125rem; line-height:1.6 }.help-details>summary { width:fit-content; cursor:pointer; text-underline-offset:3px }.help-details>summary:hover { color:var(--text) }.help-details>p { margin:10px 0 0; font-size:inherit }.help-details[open] { padding-bottom:4px }
.backup-card h3,.password-card h3,.footer-settings .section-heading h3 { font-size:1rem; line-height:1.4; letter-spacing:0 }
.contact-icon-button .hub-icon--brand { width:28px; height:28px }.contact-icon-button .hub-icon[data-icon="discord"] { width:30px; height:30px }.contact-icon-button .hub-icon[data-icon="email"] { width:32px; height:32px }
@media (max-width:420px) { .admin-page .link-add-actions { width:100% }.admin-page .link-add-actions .add-link-button { min-height:44px; padding:8px 6px; font-size:.8125rem } }