:root{--max-width: 1100px;--space-xxs: 4px;--space-xs: 8px;--space-s: 12px;--space-m: 16px;--space-l: 24px;--radius-s: 6px;--radius-m: 10px;--color-bg: #f7f8fa;--color-text: #1f2328;--color-muted: #6b7280;--color-border: #e5e7eb;--color-primary: #1677ff;--color-primary-hover: #3d8bfd;--color-primary-active: #0b5bd3;--shadow-s: 0 1px 2px rgba(0,0,0,.06);--shadow-m: 0 6px 12px rgba(0,0,0,.08)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Microsoft YaHei,sans-serif;color:var(--color-text);background:var(--color-bg)}.layout{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}.header{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--color-border);padding:var(--space-s) var(--space-m);display:flex;align-items:center;justify-content:space-between;background:#fff;-webkit-backdrop-filter:saturate(180%) blur(4px);backdrop-filter:saturate(180%) blur(4px)}.nav a{margin-right:var(--space-m);color:#333;text-decoration:none;padding:var(--space-xxs) var(--space-xs);border-radius:var(--radius-s)}.nav a:hover{background:#f0f3f9}.main h1 a,.main h2 a,.main h3 a,.card h1 a,.card h2 a,.card h3 a{text-decoration:none;color:inherit}.main h1 a:hover,.main h2 a:hover,.main h3 a:hover,.card h1 a:hover,.card h2 a:hover,.card h3 a:hover{opacity:.85}.header a,.auth-link{text-decoration:none}.header a:hover,.auth-link:hover{text-decoration:none;opacity:.9}.category-link{text-decoration:none;color:var(--color-text)}.category-link:hover{text-decoration:none;opacity:.9}.user-name{font-weight:600;color:var(--color-primary);text-decoration:none}.user-name:hover{text-decoration:underline}.login-module{position:fixed;top:16px;right:20px;z-index:1000}.login-toggle{display:none;padding:var(--space-xs) var(--space-s);border:1px solid var(--color-border);border-radius:var(--radius-s);background:#fff}.login-content{display:flex;align-items:center;gap:var(--space-s)}.auth-actions{display:flex;align-items:center;gap:var(--space-s);font-size:16px}.auth-link{text-decoration:none;color:var(--color-text)}.auth-link:hover{text-decoration:none;color:var(--color-primary)}.aux{display:flex;align-items:center;gap:var(--space-s)}.remember input{margin-right:6px}.social{display:flex;align-items:center;gap:6px}.social-btn{padding:6px 10px;border:1px solid var(--color-border);border-radius:999px;background:#fff}.user-area{display:flex;align-items:center;gap:var(--space-xs);position:relative}.avatar{width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}.user-name-btn{background:transparent;border:none;color:var(--color-text);font-weight:600;font-size:16px;cursor:pointer}.user-name-btn:hover{text-decoration:underline}.dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-s);box-shadow:var(--shadow-s);padding:var(--space-xs);min-width:120px}.dropdown,.dropdown li{list-style:none;margin:0;padding:0}.dropdown-item{width:100%;text-align:left;padding:6px 8px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-s)}.dropdown-item:hover{background:#f8fafc}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center}.modal{width:360px;max-width:92vw;background:#fff;border-radius:var(--radius-m);padding:var(--space-m);box-shadow:var(--shadow-m)}@media (max-width: 640px){.login-toggle{display:inline-block}.login-content{display:none}.login-content.open{display:grid;gap:var(--space-s);grid-auto-flow:row;justify-items:end;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-s);padding:var(--space-s);margin-top:var(--space-xs)}.auth-actions{font-size:16px}}.main{width:100%;max-width:var(--max-width);margin:0 auto;padding:var(--space-m)}.footer{border-top:1px solid var(--color-border);padding:var(--space-s);text-align:center;color:var(--color-muted);background:#fff}.card{border:1px solid var(--color-border);border-radius:var(--radius-m);padding:var(--space-m);margin-bottom:var(--space-m);background:#fff;box-shadow:var(--shadow-s);transition:box-shadow .2s ease,transform .2s ease}.card:hover{box-shadow:var(--shadow-m);transform:translateY(-1px)}.grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-m)}@media (max-width: 900px){.grid{grid-template-columns:1fr}}.btn{padding:var(--space-xs) var(--space-m);border:1px solid var(--color-border);border-radius:var(--radius-s);background:#fff;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .02s ease;min-height:36px}.btn:hover{background:#f8fafc}.btn:active{transform:scale(.98)}.btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn.primary:active{background:var(--color-primary-active);border-color:var(--color-primary-active)}.btn[disabled]{opacity:.6;cursor:not-allowed}.input{width:100%;padding:var(--space-xs) var(--space-s);border:1px solid var(--color-border);border-radius:var(--radius-s);background:#fff;min-height:38px;transition:border-color .2s ease,box-shadow .2s ease}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #1677ff1f}.input.invalid{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441f}.row{display:flex;gap:var(--space-s);align-items:center}.space{height:var(--space-xs)}.muted{color:var(--color-muted);font-size:14px}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.loader{width:24px;height:24px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:var(--color-primary);animation:spin .8s linear infinite;margin:var(--space-s) auto}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{height:16px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:shimmer 1.2s ease infinite;border-radius:var(--radius-s);margin:var(--space-xxs) 0}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}.hero{border:1px solid var(--color-border);border-radius:var(--radius-m);padding:var(--space-l);background:linear-gradient(135deg,#f9fafb,#eef2ff)}.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--color-border);background:#fff;font-size:13px;margin:4px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .02s ease}.chip:hover{background:#f8fafc}.meta{color:var(--color-muted);font-size:13px;margin-top:6px}.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3446ad;font-size:12px;margin-left:8px}[data-theme=dark]{--color-bg: #0f1115;--color-text: #e5e7eb;--color-muted: #9ca3af;--color-border: #1f232b;--shadow-s: 0 1px 2px rgba(0,0,0,.5);--shadow-m: 0 6px 12px rgba(0,0,0,.5)}[data-theme=dark] .header,[data-theme=dark] .footer,[data-theme=dark] .card,[data-theme=dark] .input,[data-theme=dark] .btn{background:#0f131a}[data-theme=dark] .hero{background:linear-gradient(135deg,#10141a,#0f1115)}[data-theme=dark] .nav a:hover{background:#131821}