@import url("./fonts.css");

:root {
    --surface: #131313;
    --border: #252527;
    --accent: #ff6000;
    --accent-soft: rgba(255, 96, 0, 0.12);
    --danger: #f44336;
    --danger-soft: rgba(244, 67, 54, 0.12);
    --grad: linear-gradient(14deg, #ff9600 0%, #ff6000 100%);
    --text: #ffffff;
    --text-secondary: #9e9e9e;
    --text-muted: #757575;
}

html, body {margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;overscroll-behavior:none}
.err-page {height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;touch-action:pan-y;background:#000000;font-family:"K2D","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:300;-webkit-tap-highlight-color:transparent}
.err-page * {box-sizing:border-box}
.err-card {width:100%;max-width:520px;max-height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:var(--surface);border:2px solid var(--border);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.5);padding:48px 32px;text-align:center}
.err-card::-webkit-scrollbar {display:none}
.err-icon {width:64px;height:64px;line-height:64px;margin:0 auto 20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:28px;font-weight:700}
.err-icon--error {background:var(--danger-soft);color:var(--danger)}
.err-code {font-size:56px;font-weight:800;color:var(--accent);line-height:1.1;letter-spacing:2px}
.err-title {margin:12px 0 8px;font-size:20px;font-weight:700;color:var(--text)}
.err-msg {margin:0 0 12px;font-size:15px;line-height:1.8;color:var(--text-secondary);word-break:break-word}
.err-msg a {color:var(--accent);text-decoration:underline}
.err-count {font-weight:700;color:var(--accent)}
.err-countdown {color:var(--text-secondary)}
.err-actions {margin-top:24px}
.err-btn {display:inline-block;padding:10px 28px;margin:0 6px 8px;border-radius:10px;background:var(--grad);color:#ffffff;text-decoration:none;font-size:14px;font-weight:700;transition:filter .2s ease}
.err-btn:hover {filter:brightness(1.12)}
.err-btn--ghost {background:transparent;color:var(--accent);border:1px solid var(--accent)}
.err-btn--ghost:hover {background:var(--accent-soft);filter:none}
.err-footer {margin-top:28px;font-size:12px;color:var(--text-muted)}
@media (max-width:480px) {.err-page {padding:12px}
.err-card {padding:32px 18px}
.err-code {font-size:44px}
.err-icon {width:56px;height:56px;line-height:56px}
.err-title {font-size:18px}
.err-msg {font-size:14px}
.err-btn {padding:10px 22px}
	}
 
@media (max-height:640px) {.err-card {padding:24px 18px}
.err-icon {width:48px;height:48px;line-height:48px;margin-bottom:12px}
.err-code {font-size:40px}
.err-title {font-size:17px;margin:8px 0 6px}
.err-actions {margin-top:14px}
	}
@media (max-height:480px) {.err-page {padding:8px}
.err-card {padding:14px 16px}
.err-icon {width:36px;height:36px;line-height:36px;margin-bottom:8px;font-size:16px}
.err-code {font-size:30px}
.err-title {font-size:15px;margin:6px 0 4px}
.err-msg {font-size:12px;margin-bottom:8px;line-height:1.6}
.err-actions {margin-top:10px}
.err-btn {padding:7px 18px;margin:0 4px 6px;font-size:12px}
.err-footer {margin-top:12px;font-size:10px}
	}