*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#0a0a0a;color:#e5e5e5;height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,2.5vh,24px);line-height:1.6;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:0;background-image:linear-gradient(to right,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.1) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,black 80%,transparent 100%);opacity:.6;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><line x1='8' y1='0' x2='8' y2='16' stroke='%23888' stroke-width='2'/><line x1='0' y1='8' x2='16' y2='8' stroke='%23888' stroke-width='2'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><line x1='8' y1='0' x2='8' y2='16' stroke='%23888' stroke-width='2'/><line x1='0' y1='8' x2='16' y2='8' stroke='%23888' stroke-width='2'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><line x1='8' y1='0' x2='8' y2='16' stroke='%23888' stroke-width='2'/><line x1='0' y1='8' x2='16' y2='8' stroke='%23888' stroke-width='2'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><line x1='8' y1='0' x2='8' y2='16' stroke='%23888' stroke-width='2'/><line x1='0' y1='8' x2='16' y2='8' stroke='%23888' stroke-width='2'/></svg>");background-position:16px 16px,calc(100% - 16px) 16px,16px calc(100% - 16px),calc(100% - 16px) calc(100% - 16px);background-repeat:no-repeat;background-size:16px 16px}

.card{position:relative;z-index:1;max-width:520px;width:100%;max-height:100%;background:#111;border:1px solid #1e1e1e;border-radius:16px;padding:clamp(20px,3.5vh,36px) clamp(20px,4vw,32px) clamp(18px,2.8vh,28px);text-align:center;overflow-y:auto}

.page-icon{margin-bottom:clamp(10px,1.8vh,20px)}
.page-icon svg{width:clamp(44px,6vh,60px);height:clamp(44px,6vh,60px)}
h1{font-size:clamp(17px,2.4vh,21px);font-weight:700;margin-bottom:6px;letter-spacing:-.3px}
.status{font-size:clamp(11px,1.4vh,12px);color:#888;margin-bottom:clamp(12px,1.8vh,18px);display:inline-flex;align-items:center;gap:5px;background:#1a1a1a;padding:3px 10px;border-radius:20px}
.status svg{width:12px;height:12px}
.desc{font-size:clamp(12px,1.6vh,14px);color:#b0b0b0;margin-bottom:clamp(14px,2.4vh,24px);padding:0 4px}

.error-box,.challenge-box{margin:clamp(12px,2vh,20px) auto;padding:clamp(10px,1.6vh,16px);border:1px solid #222;border-radius:12px;background:#161616}
.challenge-box{min-height:clamp(80px,11vh,130px);display:flex;align-items:center;justify-content:center}
.error-box{text-align:left;font-size:12px;line-height:1.6;color:#b0b0b0;word-break:break-all;max-height:50vh;overflow-y:auto}
.error-box h1,.error-box h2,.error-box h3{font-size:13px;font-weight:600;color:#e0e0e0;margin:0 0 6px;line-height:1.4}
.error-box p{margin:0 0 6px}
.error-box a{color:#9ad;text-decoration:none}
.error-box a:hover{text-decoration:underline}
.error-box dl{margin:6px 0;font-size:11px}
.error-box dt{color:#888;display:inline}
.error-box dd{display:inline;margin-left:4px;font-family:"SF Mono",Consolas,monospace;color:#e0e0e0}
.error-box dd::after{content:"";display:block;margin-bottom:3px}

.info{border-top:1px solid #222;padding-top:clamp(10px,1.6vh,16px);text-align:left;font-size:12px}
.info-row{display:flex;align-items:center;justify-content:space-between;padding:clamp(4px,.8vh,7px) 0;border-bottom:1px solid #1a1a1a}
.info-row:last-child{border-bottom:none}
.info-label{color:#888;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
.info-label svg{width:14px;height:14px;flex-shrink:0;opacity:.7}
.info-value{font-family:"SF Mono",Consolas,monospace;color:#e0e0e0;font-size:11px;word-break:break-all;text-align:right;margin-left:12px}
.info-value.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;direction:rtl;text-align:right}

.tips{margin-top:clamp(12px,2vh,20px);padding:clamp(10px,1.4vh,14px) 16px;background:#161616;border:1px solid #1e1e1e;border-radius:10px;text-align:left;font-size:clamp(11px,1.4vh,12px);color:#aaa}
.tips-title{font-weight:600;color:#e0e0e0;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.tips-title svg{width:14px;height:14px;opacity:.7}
.tips ul{padding-left:16px;margin:0}
.tips li{margin-bottom:4px;line-height:1.5}

.actions{margin-top:clamp(12px,2vh,20px);display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn{padding:8px 18px;border:1px solid #333;border-radius:8px;background:#1a1a1a;color:#e0e0e0;font-size:12px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn svg{width:14px;height:14px}
.btn:hover{background:#252525;border-color:#444}
.btn:active{background:#333;transform:scale(.98)}
.btn-primary{background:#e0e0e0;color:#0a0a0a;border-color:#e0e0e0}
.btn-primary:hover{background:#fff;border-color:#fff}

.legal{margin-top:clamp(12px,2vh,20px);padding:clamp(10px,1.4vh,14px) 16px;background:#161616;border:1px solid #1e1e1e;border-radius:10px;text-align:left;font-size:clamp(11px,1.4vh,12px);color:#aaa}
.legal-title{font-weight:600;color:#e0e0e0;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.legal-title svg{width:14px;height:14px;opacity:.7}
.indent{padding-left:14px;margin-top:6px}

.hint{margin-top:10px;font-size:11px;color:#666}
.spinner{width:42px;height:42px;border:3px solid #2a2a2a;border-top-color:#e0e0e0;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{position:relative;z-index:1;margin-top:clamp(12px,1.8vh,20px);font-size:10px;color:#555;display:flex;align-items:center;gap:4px;justify-content:center}
.footer svg{width:12px;height:12px;opacity:.5}

.lang-switch{position:fixed;top:clamp(10px,1.5vh,16px);right:clamp(10px,1.5vw,16px);z-index:2;display:flex;gap:4px;background:rgba(20,20,20,.8);border:1px solid #1e1e1e;border-radius:8px;padding:3px;backdrop-filter:blur(8px)}
.lang-switch a{color:#888;font-size:11px;padding:4px 8px;border-radius:5px;text-decoration:none;transition:all .15s;letter-spacing:.2px}
.lang-switch a:hover{color:#e0e0e0}
.lang-switch a[aria-current="true"]{background:#1f1f1f;color:#fff}

@media(max-width:560px){.card{border-radius:12px}.info-value{font-size:10px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}