:root { --ink:#17211d; --muted:#68736e; --line:#dde5e0; --paper:#f4f6f2; --card:#fff; --green:#176b4c; --green2:#0f553b; --soft:#e7f2ec; --red:#b42318; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button { border:1px solid var(--line); border-radius:9px; padding:9px 14px; background:#fff; color:var(--ink); cursor:pointer; }
button:hover { background:#f7f9f7; }
button.primary { background:var(--green); border-color:var(--green); color:#fff; }
button.primary:hover { background:var(--green2); }
button.danger { color:var(--red); border-color:#efc3bf; }
button.danger.solid { background:var(--red); color:#fff; border-color:var(--red); }
input,select { width:100%; border:1px solid #cbd5cf; border-radius:9px; padding:11px 12px; background:#fff; color:var(--ink); }
input:focus,select:focus { outline:3px solid #d9ece2; border-color:var(--green); }
label { display:block; margin:16px 0 5px; color:#4f5a55; font-size:13px; }
.password-field { display:block; position:relative; }
.password-field input { padding-right:48px; }
.password-toggle { position:absolute; right:7px; top:50%; width:38px!important; height:38px; margin:0!important; padding:8px!important; transform:translateY(-50%); border:0; background:transparent; color:#77817c; }
.password-toggle:hover { background:var(--soft); color:var(--green); }
.password-toggle:focus-visible { outline:3px solid #d9ece2; }
.password-toggle svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle.visible::after { content:""; position:absolute; left:8px; top:18px; width:22px; height:2px; border-radius:2px; background:currentColor; transform:rotate(-45deg); }
h1,h2,p { margin-top:0; }
.muted { color:var(--muted); }
.eyebrow { color:var(--green); font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; margin-bottom:8px; }
.mark { width:45px; height:45px; display:inline-flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; border-radius:13px; font-weight:800; }
.mark.small { width:31px; height:31px; border-radius:9px; margin-right:10px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 70% 15%,#dcece2 0,transparent 34%),var(--paper); }
.login-card { width:min(410px,100%); background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:0 18px 55px rgba(29,54,41,.10); }
.login-card h1 { margin:18px 0 6px; font-size:26px; }
.login-card button { width:100%; margin-top:20px; padding:12px; }
.slider-captcha { margin-top:18px; user-select:none; }
.captcha-heading { display:flex; align-items:center; justify-content:space-between; min-height:28px; color:#4f5a55; font-size:13px; }
.captcha-reload { width:30px!important; height:28px; margin:0!important; padding:0!important; border:0; background:transparent; color:var(--muted); font-size:21px; line-height:1; }
.captcha-stage { position:relative; width:100%; aspect-ratio:320/150; overflow:hidden; border-radius:11px; background:#dce4df; box-shadow:inset 0 0 0 1px rgba(23,33,29,.12); }
.captcha-background { display:block; width:100%; height:100%; }
.captcha-piece { position:absolute; z-index:2; left:0; top:0; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); cursor:grab; touch-action:none; }
.slider-captcha.dragging .captcha-piece { cursor:grabbing; }
.captcha-track { position:relative; height:46px; margin-top:9px; overflow:hidden; border:1px solid #cbd5cf; border-radius:9px; background:#f4f7f5; }
.captcha-progress { position:absolute; inset:0 auto 0 0; width:0; background:#dff0e7; }
.captcha-thumb { position:absolute; z-index:2; left:0; top:0; width:46px!important; height:44px; margin:0!important; padding:0!important; border:0; border-right:1px solid #cbd5cf; border-radius:8px; background:#fff; color:var(--green); font-weight:800; letter-spacing:-3px; touch-action:none; box-shadow:1px 0 4px rgba(0,0,0,.06); }
.captcha-thumb:focus-visible { outline:3px solid #bfe0cf; outline-offset:-3px; }
.captcha-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-left:48px; color:#74807a; font-size:12px; pointer-events:none; }
.captcha-status { min-height:18px; margin:7px 0 0; color:var(--muted); font-size:12px; }
.slider-captcha.loading .captcha-stage { opacity:.55; }
.slider-captcha.success .captcha-track { border-color:#76b895; background:#e4f4eb; }
.slider-captcha.success .captcha-thumb { left:calc(100% - 46px)!important; color:#fff; border-color:var(--green); background:var(--green); }
.slider-captcha.success .captcha-thumb::after { content:'✓'; font-size:19px; letter-spacing:0; }
.slider-captcha.success .captcha-thumb { font-size:0; }
.slider-captcha.success .captcha-progress { width:100%!important; }
.slider-captcha.success .captcha-status { color:var(--green); }
.slider-captcha.error .captcha-status { color:var(--red); }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.topbar>div { display:flex; align-items:center; }
.top-actions { gap:8px; }
.page { max-width:1240px; margin:auto; padding:36px 28px 70px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:25px; }
.hero h1 { font-size:32px; margin-bottom:8px; }
.hero p:last-child { margin-bottom:0; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.stats article { background:#1c2822; color:#fff; border-radius:14px; padding:19px 22px; }
.stats span,.stats small { display:block; color:#bfcac4; }
.stats b { display:block; font-size:30px; margin:5px 0 1px; }
.domain-card { background:#fff; border:1px solid var(--line); border-radius:15px; margin-bottom:18px; overflow:hidden; box-shadow:0 3px 12px rgba(30,47,38,.035); }
.domain-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.domain-head h2 { margin:0 0 4px; font-size:19px; }
.domain-head p { margin:0; color:var(--muted); font-size:13px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:740px; }
th,td { text-align:left; padding:14px 18px; border-bottom:1px solid #edf1ee; font-size:13px; }
th { color:var(--muted); font-weight:600; background:#fbfcfb; }
tr:last-child td { border-bottom:0; }
code { color:var(--green); background:var(--soft); border-radius:6px; padding:3px 7px; }
.actions { white-space:nowrap; }
.actions button { margin-right:5px; padding:7px 10px; }
.empty { color:var(--muted); text-align:center; padding:35px; }
.modal-layer { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(16,27,21,.55); backdrop-filter:blur(4px); }
.modal { width:min(590px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:17px; padding:25px; box-shadow:0 25px 80px rgba(0,0,0,.28); }
.modal-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.modal-head h2 { margin-bottom:5px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.input-action { display:flex; gap:8px; }
.input-action button { flex:none; }
.notice { margin:17px 0 0; padding:12px 14px; background:#f3f6f4; color:var(--muted); border-radius:9px; font-size:13px; line-height:1.6; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }
.danger-zone { background:#fff4f2; border:1px solid #f4c7c3; color:#7a271a; border-radius:11px; padding:16px; line-height:1.6; }
.danger-zone p { margin:12px 0 4px; }
.danger-text { color:var(--red); }
#toast { position:fixed; right:22px; bottom:22px; z-index:20; padding:11px 16px; border-radius:10px; color:#fff; background:#23352c; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; }
#toast.show { opacity:1; transform:none; }
#toast.error { background:var(--red); }
@media(max-width:760px) { .hero { align-items:stretch; flex-direction:column; } .hero button { width:100%; } .stats { grid-template-columns:1fr; } .grid { grid-template-columns:1fr; gap:0; } .page { padding:25px 14px 50px; } .topbar { padding:0 14px; } .domain-head { align-items:flex-start; gap:10px; flex-direction:column; } }