:root {
    --bg: #dfdfdf; --fg: #434343; --muted: #272727; --accent: #e0b359;
    --card: rgba(255,255,255,.06); --border: rgba(255,255,255,.1);
    --glass-blur: 20px;
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: -apple-system, "PingFang SC", "Segoe UI", sans-serif; background: var(--bg); color: var(--fg); line-height:1.7; }

  /* === 导航 === */
  nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; background:rgba(17,17,17,.8); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
  nav .brand { font-size:20px; font-weight:800; letter-spacing:-.02em; color: aquamarine; }
  nav .brand span { color:var(--accent); }
  .login-trigger { background:none; border:1px solid var(--accent); color:var(--accent); padding:8px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; }
  .login-trigger:hover { background:var(--accent); color:var(--bg); }

  /* === 博客内容 === */
  main { max-width:760px; margin:0 auto; padding:100px 24px 60px; }
  .hero { margin-bottom:60px; }
  .hero h1 { font-size:clamp(32px,5vw,52px); font-weight:900; line-height:1.15; margin-bottom:16px; }
  .hero h1 span { color:var(--accent); }
  .hero p { font-size:18px; color:var(--muted); max-width:540px; }
  article { margin-bottom:48px; padding:32px; border-radius:16px; border:1px solid var(--border); background:var(--card); transition:transform .2s, border-color .2s; }
  article:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.18); }
  article .tag { display:inline-block; font-size:12px; color:var(--accent); border:1px solid rgba(0,224,158,.25); padding:2px 10px; border-radius:20px; margin-bottom:12px; }
  article h2 { font-size:22px; font-weight:700; margin-bottom:8px; }
  article p { color:var(--muted); font-size:15px; }
  article .meta { margin-top:16px; font-size:13px; color:#555; }

  /* === 遮罩 === */
  .overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
  .overlay.active { opacity:1; pointer-events:auto; }

  /* === 登录框 === */
  .login-modal { position:fixed; z-index:300; top:50%; left:50%; transform:translate(-50%,-50%) scale(.92); width:380px; max-width:90vw; padding:40px 36px 32px; border-radius:20px; background:rgba(30,30,30,.75); backdrop-filter:blur(var(--glass-blur)); border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(0,224,158,.05); opacity:0; pointer-events:none; transition:opacity .35s, transform .35s cubic-bezier(.16,1,.3,1); }
  .login-modal.active { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .login-modal::before { content:''; position:absolute; top:0; left:15%; right:15%; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); border-radius:2px; }

  .close-btn { position:absolute; top:16px; right:16px; width:32px; height:32px; border:none; background:rgba(255,255,255,.06); color:var(--muted); font-size:18px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; }
  .close-btn:hover { background:rgba(255,255,255,.12); color:var(--fg); }

  .modal-header { text-align:center; margin-bottom:28px; }
  .modal-header .logo { width:48px; height:48px; margin:0 auto 14px; border-radius:14px; background:linear-gradient(135deg,var(--accent),#00b4dc); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--bg); font-weight:900; }
  .modal-header h2 { font-size:22px; font-weight:800; }
  .modal-header p { font-size:13px; color:var(--muted); margin-top:4px; }

  .field { position:relative; margin-bottom:16px; }
  .field input { width:100%; padding:13px 14px 13px 40px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--fg); font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s; }
  .field input::placeholder { color:#555; }
  .field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,224,158,.15); }
  .field .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; pointer-events:none; transition:color .2s; }
  .field input:focus ~ .icon { color:var(--accent); }

  .aux { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:24px; color:wheat; }
  .aux label { display:flex; align-items:center; gap:6px; cursor:pointer; }
  .aux input[type=checkbox] { accent-color:var(--accent); }
  .aux a { color:var(--accent); text-decoration:none; }

  .submit-btn { width:100%; padding:13px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--accent),#00c8a0); color:var(--bg); font-size:15px; font-weight:700; cursor:pointer; transition:transform .15s, box-shadow .2s; position:relative; overflow:hidden; }
  .submit-btn:hover { transform:translateY(-1px); box-shadow:0 8px 30px rgba(0,224,158,.3); }
  .submit-btn:active { transform:scale(.98); }
  .submit-btn.loading { pointer-events:none; color:transparent; }
  .submit-btn.loading::after { content:''; position:absolute; top:0;left:0;right:0;bottom:0; margin:auto; width:20px;height:20px; border:2.5px solid rgba(17,17,17,.3); border-top-color:var(--bg); border-radius:50%; animation:spin .5s linear infinite; }
  @keyframes spin { to{transform:rotate(360deg)} }

  .modal-footer { text-align:center; margin-top:22px; font-size:12px; color:wheat; }
  .modal-footer a { color:var(--accent); text-decoration:none; font-weight:600; }

  /* === Toast === */
  .toast { position:fixed; top:24px; right:24px; z-index:400; padding:12px 22px; border-radius:10px; background:rgba(0,224,158,.12); border:1px solid rgba(0,224,158,.3); color:var(--accent); font-size:13px; font-weight:600; transform:translateX(140%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
  .toast.show { transform:translateX(0); }
  .toast.error { background:rgba(255,70,70,.12); border-color:rgba(255,70,70,.3); color:#ff5050; }