:root { --ink:#172033; --muted:#667085; --line:#d9deea; --panel:#ffffff; --bg:#f4f6fb; --primary:#2969dc; --primary-hover:#1d57bd; --error:#b42318; --success:#087443; --notice:#eef5ff; } * { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei",Arial,sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.68; } .admin-shell { width:min(100% - 32px,900px); min-height:100vh; margin:auto; display:grid; place-items:center; padding:48px 0; } .login-panel,.settings-panel { width:min(100%,700px); border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 18px 44px rgb(26 41 71 / 10%); } .login-panel { padding:36px; text-align:center; } .login-panel>img { width:58px; height:58px; object-fit:cover; border-radius:8px; } .login-panel>p { margin:8px 0 5px; color:var(--primary); font-weight:800; } .login-panel h1 { margin:0 0 25px; font-size:29px; } .login-panel form { max-width:380px; margin:auto; text-align:left; } label { display:grid; gap:8px; margin-bottom:17px; font-size:14px; font-weight:700; } input,select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); outline:0; background:#fff; } input[readonly] { color:var(--muted); background:#f8f9fc; } input:focus,select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgb(41 105 220 / 16%); } button { min-height:44px; padding:10px 15px; border:0; border-radius:6px; background:var(--primary); color:white; font-weight:800; } button:hover:not(:disabled) { background:var(--primary-hover); } .login-panel button { width:100%; } .form-message { min-height:20px; margin:13px 0 0; color:var(--error); font-size:13px; line-height:1.5; } .settings-panel { width:100%; overflow:hidden; } .settings-panel header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid var(--line); } .settings-panel header>div { display:flex; align-items:center; gap:10px; font-weight:800; } .settings-panel header img { width:30px; height:30px; object-fit:cover; border-radius:6px; } .secondary-button { min-height:auto; padding:7px 10px; background:white; color:var(--ink); border:1px solid var(--line); font-size:12px; } .secondary-button:hover:not(:disabled) { background:#f8f9fc; } .settings-content { padding:24px; } .status-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 14px; margin-bottom:25px; border-radius:6px; background:var(--notice); color:#174ea6; font-size:13px; line-height:1.5; } .status-row button { min-height:auto; flex:0 0 auto; padding:8px 12px; font-size:12px; } .settings-content form { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .full-width,.settings-content aside,.settings-content form>button,.settings-content form>.form-message { grid-column:1 / -1; } .settings-content aside { margin:5px 0 18px; padding:12px; border-radius:6px; background:#fff7ed; color:#9a3412; font-size:13px; line-height:1.65; } .settings-content code { font-family:Consolas,monospace; } :focus-visible { outline:3px solid #7aa7ff; outline-offset:2px; } @media(max-width:620px) { .admin-shell { width:min(100% - 24px,900px); padding:24px 0; } .login-panel { padding:28px 20px; } .settings-panel header,.settings-content { padding:18px; } .settings-content form { grid-template-columns:1fr; } .status-row { align-items:flex-start; flex-direction:column; } }