@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
:root { --paper:#FAF7F2; --ink:#2C2520; --subtle:#756B60; --line:#E3DBCF; --accent:#8C2222; --nav-height:68px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Noto Serif SC','Songti SC','STSong','Microsoft YaHei',serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.shell-body { overflow:hidden; }
.feature-area { position:fixed; inset:0 0 calc(var(--nav-height) + env(safe-area-inset-bottom)) 0; }
.feature-frame { display:block; width:100%; height:100%; border:0; background:var(--paper); }
.feature-frame[hidden] { display:none; }
.bottom-nav { position:fixed; z-index:2; right:0; bottom:0; left:0; height:calc(var(--nav-height) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:#fff; box-shadow:0 -5px 22px rgba(44,37,32,.035); }
.nav-inner { display:grid; grid-template-columns:1fr 1fr 54px; width:min(100%,500px); height:100%; margin:auto; }
.nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; padding:5px 2px; border:0; background:transparent; color:#918679; font-size:11px; white-space:nowrap; }
.nav-item:hover { color:#5E5347; }
.nav-item.active { color:var(--accent); font-weight:600; }
.nav-icon { display:block; width:23px; height:23px; }
.qimen-icon { border:1.5px solid currentColor; border-radius:5px; font-size:16px; font-weight:600; line-height:19px; text-align:center; }
.logout-form { display:flex; align-items:center; justify-content:center; margin:0; }
.logout-button { width:40px; min-height:35px; border:0; border-left:1px solid #EEE8E0; background:transparent; color:var(--subtle); font-size:11px; }
.logout-button:hover { color:var(--accent); }
.login-body { display:flex; min-height:100dvh; align-items:center; justify-content:center; padding:35px 18px; }
.login-wrap { width:min(100%,410px); text-align:center; }
.login-mark { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 16px; border:1px solid #C9A7A0; border-radius:50%; color:var(--accent); font-size:24px; }
.login-eyebrow { margin:0 0 6px; color:var(--accent); font-size:11px; letter-spacing:.24em; }
.login-wrap h1 { margin:0; font-size:clamp(24px,6vw,29px); font-weight:600; letter-spacing:.08em; }
.login-subtitle { margin:11px 0 25px; color:var(--subtle); font-size:13px; }
.login-card { display:grid; gap:8px; padding:27px 24px 25px; border:1px solid var(--line); border-radius:4px; background:#fff; box-shadow:0 4px 12px rgba(44,37,32,.03); text-align:left; }
.login-card label { margin-top:4px; color:#5E5347; font-size:13px; font-weight:600; }
.login-card input { width:100%; height:43px; padding:8px 11px; border:1px solid #D5C9B3; border-radius:2px; background:#FAFAFA; color:var(--ink); font-size:15px; }
.login-card button { height:44px; margin-top:13px; border:0; border-radius:2px; background:var(--accent); color:#fff; font-size:15px; font-weight:600; letter-spacing:.08em; }
.login-card button:hover { background:#751B1B; }
.login-error { margin:4px 0 0; color:var(--accent); font-size:12px; }