/* ============================================================
       AUTO BOOK WRITER — Auth pages (login / register)
       三方审查优化 2026-08-04：减层级、减阴影、减 accent 泛滥
       2026-08-14：升级为分栏品牌布局（左：编辑风品牌区 / 右：表单），
       窄屏自动折叠为顶部紧凑品牌行。表单组件维持既有打磨。
       ============================================================ */

    *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%}
    body.auth-shell{
      font-family:var(--sans);color:var(--ink);
      margin:0;min-height:100vh;
      display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;
      background:var(--paper);
      -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    }

    /* ---------- 左：品牌区（编辑杂志风，安静而有分量） ---------- */
    body.auth-shell .auth-brand{
      display:flex;flex-direction:column;justify-content:space-between;gap:32px;
      padding:clamp(36px,5vw,64px);
      background:var(--paper-2);
      background-image:
        radial-gradient(680px 380px at 85% -6%,var(--accent-soft),transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      border-right:1px solid var(--line);
    }
    .auth-brand-mark{display:flex;align-items:center;gap:12px}
    .auth-brand-mark svg{width:40px;height:40px;flex:none}
    .auth-brand-wordmark{font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
    .auth-brand-title{font-family:var(--serif-display,var(--serif));
      margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);
      font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.22;letter-spacing:-.02em;
    }
    .auth-brand-title em{font-style:normal;color:var(--accent)}
    .auth-brand-copy{
      margin:18px 0 0;max-width:34em;color:var(--ink-soft);
      font-family:var(--ui-sans);font-size:var(--text-sm);line-height:1.85;
    }
    .auth-brand-stats{display:grid;gap:0;margin:0;padding:0;list-style:none}
    .auth-brand-stats li{
      display:flex;align-items:baseline;gap:14px;
      padding:13px 0;border-top:1px solid var(--line);
      font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);
    }
    .auth-brand-stats li:last-child{border-bottom:1px solid var(--line)}
    .auth-brand-stats b{
      font-family:var(--serif-display,var(--serif));
      font-family:var(--serif);font-weight:700;font-size:var(--text-xl);color:var(--ink);
      letter-spacing:-.02em;min-width:3.2em;font-variant-numeric:tabular-nums;
    }
    .auth-brand-foot{font-family:var(--ui-sans);font-size:var(--text-2xs);letter-spacing:.04em;color:var(--ink-mute);opacity:.85}

    /* ---------- 右：表单区 ---------- */
    body.auth-shell .auth-main{
      display:flex;align-items:center;justify-content:center;padding:40px 24px;
      background:var(--paper);
      background-image:radial-gradient(700px 380px at 88% 0%,color-mix(in srgb,var(--accent-soft) 45%,transparent),transparent 68%);
    }
    ::selection{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--ink)}

    /* ---------- Card ---------- */
    body.auth-shell .login-container,
    body.auth-shell .register-container{
      position:relative;width:100%;max-width:400px;
      background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
      padding:34px 34px 28px;
      box-shadow:var(--shadow-lg);
      animation:authSlideUp .28s ease;
    }
    @keyframes authSlideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

    /* ---------- Logo ---------- */
    body.auth-shell .logo{text-align:center;margin-bottom:16px}
    body.auth-shell .logo-icon{
      display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:var(--text-xl);
      border-radius:var(--radius-md);background:var(--accent);color:var(--paper-2);border:0;
      box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 20%,transparent);
    }
    body.auth-shell .brand-text{font-family:var(--sans);font-size:var(--text-sm);color:var(--ink-mute);letter-spacing:.04em;margin-top:6px}

    /* ---------- Headings ---------- */
    body.auth-shell h1{
      margin:0 0 6px;text-align:center;color:var(--ink);
      font-family:var(--serif);font-weight:600;font-size:1.7rem;letter-spacing:-.02em;line-height:1.15;
    }
    body.auth-shell .subtitle{
      margin:0 0 22px;text-align:center;color:var(--ink-mute);
      font-family:var(--ui-sans);font-size:var(--text-xs);letter-spacing:.08em;font-weight:500;
    }

    /* ---------- Guest notice（降噪为辅助提示，非告警） ---------- */
    body.auth-shell .guest-notice{
      padding:9px 0;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      border-radius:0;margin-bottom:18px;color:var(--ink-mute);
      font-size:var(--text-xs);line-height:1.5;text-align:center;
    }
    body.auth-shell .guest-notice strong{color:var(--ink-soft);font-weight:600;font-size:var(--text-xs)}

    /* ---------- Form ---------- */
    body.auth-shell .form-group{margin-bottom:16px}
    body.auth-shell .password-wrap{position:relative}
    body.auth-shell .password-wrap .form-input{padding-right:44px}
    body.auth-shell .password-toggle{
      position:absolute;top:50%;right:5px;transform:translateY(-50%);
      display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
      border:0;background:transparent;color:var(--ink-mute);cursor:pointer;border-radius:var(--radius-sm);transition:color .15s,background .15s;
    }
    body.auth-shell .password-toggle:hover{color:var(--accent);background:var(--paper-3)}
    body.auth-shell .password-toggle.is-visible{color:var(--accent)}
    body.auth-shell .password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
    body.auth-shell .form-label{
      display:block;color:var(--ink-soft);font-family:var(--ui-sans);font-weight:500;font-size:var(--text-xs);margin-bottom:7px;letter-spacing:0;
    }
    body.auth-shell .form-input{
      width:100%;min-height:46px;padding:11px 13px;font-family:var(--ui-sans);font-size:var(--text-base);font-weight:400;line-height:1.5;color:var(--ink);
      background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;
      box-shadow:none;
      transition:border-color .15s,box-shadow .15s,background .15s;
      -webkit-font-smoothing:antialiased;
    }
    body.auth-shell .form-input::placeholder{color:color-mix(in srgb,var(--ink-mute) 82%,var(--paper));font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:400;opacity:1}
    body.auth-shell .form-input:-webkit-autofill,body.auth-shell .form-input:-webkit-autofill:hover,body.auth-shell .form-input:-webkit-autofill:focus{
      -webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--paper) inset;caret-color:var(--ink);transition:background-color 9999s ease-out 0s;
    }
    body.auth-shell .form-input:hover{border-color:var(--ink-mute)}
    body.auth-shell .form-input:focus{
      outline:none;border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);
    }

    /* ---------- Button ---------- */
    body.auth-shell .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      font-family:var(--sans);font-weight:600;font-size:var(--text-sm);cursor:pointer;
      padding:13px 18px;border-radius:10px;border:1px solid transparent;margin-top:0;min-height:46px;
      transition:background .18s,border-color .18s,box-shadow .18s,transform var(--transition-fast);
    }
    body.auth-shell .btn.w-full{width:100%}
    body.auth-shell .btn.btn-primary{
      background:var(--accent);color:var(--paper-2);border-color:color-mix(in srgb,var(--accent) 86%,#000);
      box-shadow:0 1px 2px rgba(0,0,0,.08);
    }
    body.auth-shell .btn.btn-primary:hover:not(:disabled){background:var(--accent-ink);border-color:var(--accent-ink)}
    body.auth-shell .btn.btn-primary:active:not(:disabled){transform:scale(.985)}
    body.auth-shell .btn.btn-primary:disabled{opacity:.5;cursor:not-allowed}
    body.auth-shell .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

    /* ---------- Divider / links ---------- */
    body.auth-shell .divider{display:flex;align-items:center;margin:22px 0;color:var(--ink-mute);font-size:var(--text-2xs);font-family:var(--ui-sans)}
    body.auth-shell .divider::before,body.auth-shell .divider::after{content:'';flex:1;height:1px;background:var(--line)}
    body.auth-shell .divider span{padding:0 14px}

    body.auth-shell .register-link,body.auth-shell .login-link,body.auth-shell .auth-foot{text-align:center;color:var(--ink-soft);font-size:var(--text-sm);margin-top:18px}
    body.auth-shell .register-link a,body.auth-shell .login-link a,body.auth-shell .auth-foot a{color:var(--accent);text-decoration:none;font-weight:600}
    body.auth-shell .register-link a:hover,body.auth-shell .login-link a:hover,body.auth-shell .auth-foot a:hover{text-decoration:underline}

    body.auth-shell .back-link{text-align:center;margin-top:16px}
    body.auth-shell .back-link a{color:var(--ink-mute);text-decoration:none;font-size:var(--text-xs);font-family:var(--ui-sans);transition:color .15s}
    body.auth-shell .back-link a:hover{color:var(--accent)}

    /* ---------- Alert ---------- */
    body.auth-shell .alert{padding:10px 13px;border-radius:9px;margin-bottom:14px;font-size:var(--text-sm);font-weight:500;border:1px solid;animation:authFadeIn .2s ease}
    @keyframes authFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
    body.auth-shell .alert-success{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
    body.auth-shell .alert-error{background:var(--err-soft);border-color:var(--err);color:var(--err)}

    body.auth-shell .required{color:var(--ink-mute);font-weight:400;margin-left:3px;font-size:var(--text-xs)}
    body.auth-shell .form-error{color:var(--err);font-size:var(--text-xs);margin:5px 0 0;min-height:0;font-weight:500}

    /* ---------- Password strength ---------- */
    body.auth-shell .password-strength{display:flex;gap:5px;margin-top:8px}
    body.auth-shell .password-strength span{flex:1;height:3px;border-radius:3px;background:var(--line);transition:background .25s}
    body.auth-shell .password-strength span[data-level="1"].active{background:var(--warn)}
    body.auth-shell .password-strength span[data-level="2"].active{background:var(--accent)}
    body.auth-shell .password-strength span[data-level="3"].active{background:var(--ok)}

    /* ---------- 按钮加载/成功态（Stripe 式内联指示，零布局跳动） ---------- */
    body.auth-shell .btn .btn-spin{
      width:15px;height:15px;flex:none;border-radius:50%;
      border:2px solid color-mix(in srgb,currentColor 30%,transparent);
      border-top-color:currentColor;
      animation:authSpin .7s linear infinite;
    }
    body.auth-shell .btn.is-loading{opacity:.85;pointer-events:none}
    body.auth-shell .btn.is-loading .btn-spin{border-color:color-mix(in srgb,var(--paper-2) 35%,transparent);border-top-color:var(--paper-2)}
    body.auth-shell .btn.is-success{background:var(--ok);border-color:var(--ok);color:var(--paper-2)}
    @keyframes authSpin{to{transform:rotate(360deg)}}

    @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

    /* ---------- 窄屏：品牌区折叠为紧凑顶行 ---------- */
    @media (max-width:880px){
      body.auth-shell{grid-template-columns:1fr}
      body.auth-shell .auth-brand{
        border-right:0;border-bottom:1px solid var(--line);
        padding:20px 22px;gap:0;
      }
      .auth-brand-mark svg{width:30px;height:30px}
      .auth-brand-title{font-size:var(--text-lg);margin-top:12px}
      .auth-brand-copy{display:none}
      .auth-brand-stats{display:none}
      .auth-brand-foot{display:none}
      body.auth-shell .auth-main{padding:28px 18px 40px}
    }
    @media (max-width:480px){
      body.auth-shell .login-container,body.auth-shell .register-container{padding:28px 22px 24px}
      body.auth-shell h1{font-size:var(--text-2xl)}
      body.auth-shell .form-input{font-size:var(--text-base)}
    }

/* ---------- 页角偏好：语言胶囊 + 主题色卡（右上角，不占表单流） ---------- */
.auth-prefs{position:fixed;top:16px;right:18px;z-index:50;display:flex;align-items:center;gap:8px}
.auth-prefs-sep{width:1px;height:16px;background:var(--line)}
.auth-prefs .theme-segmented{display:inline-flex;align-items:center;gap:3px}
@media (max-width:640px){
  .auth-prefs{top:10px;right:12px;gap:6px}
  .auth-prefs .theme-seg-label{display:none}
  .auth-prefs .theme-seg-btn{padding:5px 8px 7px}
}