/* Generative Fill Al — reference-image layout overrides */
html { --ref-bg:#050506; --ref-card:#0b0b0d; --ref-line:#29292d; --ref-line2:#36363b; --ref-text:#f2f2f3; --ref-muted:#96969d; --ref-orange:#ff7733; }
html, body { background:var(--ref-bg)!important; color:var(--ref-text)!important; }
#main-page { background:var(--ref-bg)!important; }
#main-page>.container { width:calc(100% - 32px)!important; max-width:900px!important; min-width:0!important; margin:0 auto!important; padding:0 16px 18px!important; background:var(--ref-bg)!important; }
.credits-drawer-wrapper, .tab-container, #gf-billing-card { display:none!important; }
.main-top-bar { min-height:104px!important; margin:0 -16px 14px!important; padding:24px 18px 20px!important; background:#070708!important; border-top:1px solid #1b1b1e!important; border-bottom:0!important; display:flex!important; justify-content:space-between!important; gap:10px!important; align-items:flex-start!important; }
.main-brand { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:5px!important; min-width:0!important; max-width:none!important; }
.main-brand-name { display:block!important; max-width:none!important; white-space:nowrap!important; word-break:normal!important; color:#f7f7f8!important; font-size:21px!important; line-height:1.15!important; font-weight:700!important; letter-spacing:.2px!important; }
.local-brand-accent { color:var(--ref-orange)!important; }
.local-brand-subtitle { display:block!important; color:#74747c!important; font-size:12px!important; font-weight:400!important; white-space:nowrap!important; }
.main-top-actions { display:flex!important; gap:12px!important; align-items:center!important; padding-top:0!important; }
.main-top-action-btn { min-width:102px!important; height:42px!important; padding:0 18px!important; background:#080809!important; border:1px solid rgba(255,119,51,.72)!important; border-radius:8px!important; color:#ff9566!important; font-size:13px!important; box-shadow:inset 0 0 0 1px rgba(255,119,51,.06)!important; }
.main-top-action-btn:hover { background:rgba(255,119,51,.08)!important; color:#ffad85!important; }
.main-top-action-btn.logout { color:#ff9566!important; border-color:rgba(255,119,51,.72)!important; }
#tab-generative-fill { margin:0!important; padding:0!important; }
.gf-panel { padding-top:0!important; }
.gf-card, .gf-control-deck { background:var(--ref-card)!important; border:1px solid var(--ref-line)!important; border-radius:11px!important; box-shadow:none!important; }
.gf-prompt-card { margin:0 0 12px!important; padding:16px 16px 14px!important; }
.gf-card-title { color:var(--ref-text)!important; font-size:15px!important; line-height:1.3!important; margin-bottom:12px!important; }
.gf-card-title::first-letter { color:var(--ref-orange)!important; }
.local-prompt-desc { margin:-1px 0 12px!important; color:#b0b0b5!important; font-size:12px!important; line-height:1.45!important; }
.gf-price { display:none!important; }
.gf-free-remaining { display:none!important; }
.gf-prompt-shell { position:relative!important; min-height:154px!important; background:#050506!important; border:1px solid var(--ref-line2)!important; border-radius:8px!important; box-shadow:none!important; }
.gf-prompt-shell:focus-within { border-color:#5e3a2a!important; box-shadow:0 0 0 1px rgba(255,119,51,.10)!important; }
textarea.gf-prompt { min-height:132px!important; padding:13px 14px 28px!important; color:#e7e7e9!important; font-size:12px!important; line-height:1.55!important; }
textarea.gf-prompt::placeholder { color:#68686f!important; font-style:italic!important; }
.local-char-count { position:absolute!important; right:11px!important; bottom:8px!important; color:#929299!important; font-size:10px!important; pointer-events:none!important; }
.gf-preset-bar { margin-top:13px!important; padding-top:0!important; border-top:0!important; }
.gf-preset-head { display:flex!important; align-items:center!important; min-height:34px!important; color:#e1e1e3!important; }
.gf-preset-label { font-size:12px!important; }
.gf-preset-label::before { content:'▢'; margin-right:7px; color:#c3c3c7; }
.gf-preset-save { min-width:130px!important; height:34px!important; padding:0 14px!important; background:#09090a!important; border:1px solid rgba(255,119,51,.78)!important; border-radius:8px!important; color:var(--ref-orange)!important; font-size:12px!important; }
.gf-preset-chips { margin-top:7px!important; }
.gf-control-deck { padding:16px!important; margin-bottom:0!important; }
.local-settings-title { margin:0 0 14px!important; color:#f0f0f1!important; font-size:15px!important; font-weight:650!important; }
.local-settings-title span { color:var(--ref-orange)!important; }
.gf-generate-count-card { padding:0!important; margin:0!important; background:transparent!important; border:0!important; border-radius:0!important; }
.gf-count-options { display:flex!important; justify-content:flex-start!important; gap:28px!important; padding:0!important; background:transparent!important; border:0!important; }
.gf-count-btn { flex:0 0 auto!important; display:flex!important; gap:7px!important; padding:0!important; background:transparent!important; border:0!important; color:#e8e8ea!important; font-size:13px!important; box-shadow:none!important; }
.gf-count-btn.active { background:transparent!important; color:#fff!important; box-shadow:none!important; }
.gf-count-dot { width:18px!important; height:18px!important; border:2px solid #606067!important; background:transparent!important; }
.gf-count-btn.active .gf-count-dot { border-color:var(--ref-orange)!important; }
.gf-count-btn.active .gf-count-dot-inner { width:8px!important; height:8px!important; background:var(--ref-orange)!important; }
.gf-count-tip { margin:9px 0 11px!important; color:#b0b0b5!important; font-size:11px!important; }
.gf-safe-mode-row { height:39px!important; margin:0 0 13px!important; padding:0 10px!important; background:#0d0d0f!important; border:1px solid var(--ref-line)!important; border-radius:7px!important; color:#c9c9cd!important; }
.gf-safe-mode-label { font-size:12px!important; }
.gf-safe-mode-label input { width:16px!important; height:16px!important; accent-color:var(--ref-orange)!important; }
.gf-help-tip { width:18px!important; height:18px!important; background:var(--ref-orange)!important; border:0!important; color:#111!important; font-weight:800!important; }
.gf-bottom { display:block!important; }
.gf-actions-row { display:grid!important; gap:6px!important; margin:0 0 7px!important; }
.gf-main-actions { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
.gf-batch-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
.gf-act { min-height:49px!important; margin:0!important; padding:0 5px!important; background:#111114!important; border:1px solid #313136!important; border-radius:7px!important; color:#d3d3d6!important; font-size:12px!important; box-shadow:none!important; }
.gf-act:hover { border-color:#6d422d!important; color:#ff9566!important; }
#gf-remove-btn { background:#100b09!important; border-color:rgba(255,119,51,.82)!important; color:var(--ref-orange)!important; }
#gf-remove-btn::before { content:'✣ '; }
#gf-start-btn { background:#111114!important; border:1px solid #313136!important; color:#d3d3d6!important; box-shadow:none!important; }
#gf-start-btn::before { content:'♙ '; color:#77777f; }
#gf-expand-btn::before { content:'♧ '; color:#77777f; }
#gf-remove-bg-btn::before { content:'♧ '; color:#77777f; }
.gf-progress-section { margin:9px 0 0!important; padding:0!important; }
.gf-progress-wrap { padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; }
.gf-progress-top { margin-bottom:6px!important; }
.gf-progress-label, .gf-progress-percent { color:#b0b0b5!important; font-size:11px!important; }
.gf-progress-track { height:8px!important; background:#101012!important; border-radius:3px!important; overflow:hidden!important; }
.gf-progress-bar { background:linear-gradient(90deg,#ff6e2b,#ff8a42)!important; box-shadow:none!important; }
.local-package-status { display:grid!important; grid-template-columns:1.1fr .8fr 1.2fr!important; gap:1px!important; margin:0 0 12px!important; overflow:hidden!important; background:var(--ref-line)!important; border:1px solid var(--ref-line)!important; border-radius:10px!important; }
.local-status-item { min-width:0!important; padding:11px 13px!important; background:var(--ref-card)!important; }
.local-status-label { display:block!important; margin-bottom:4px!important; color:#77777f!important; font-size:10px!important; }
.local-status-value { display:block!important; overflow:hidden!important; color:#ededee!important; font-size:12px!important; font-weight:600!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
.local-status-value.accent { color:var(--ref-orange)!important; }
.gf-package-dialog, .vip-modal { background:#0b0b0d!important; border:1px solid var(--ref-line)!important; border-radius:12px!important; }
#gf-local-card-redeem { border-color:var(--ref-line)!important; }
#local-vip-card-area { padding:16px!important; background:#0f0f12!important; border:1px solid var(--ref-line)!important; border-radius:10px!important; }
#local-vip-card-area .local-vip-desc { margin-bottom:12px!important; color:#9999a1!important; font-size:12px!important; line-height:1.55!important; }
#local-vip-card-area .local-vip-form { display:flex!important; gap:8px!important; }
#local-vip-card-input { flex:1!important; min-width:0!important; padding:10px 12px!important; background:#050506!important; border:1px solid #38383e!important; border-radius:7px!important; color:#eee!important; }
#local-vip-card-redeem { padding:10px 15px!important; background:#100b09!important; border:1px solid var(--ref-orange)!important; border-radius:7px!important; color:var(--ref-orange)!important; }
#btn-vip-pay { background:#100b09!important; border:1px solid var(--ref-orange)!important; color:var(--ref-orange)!important; box-shadow:none!important; }
#vip-pay-method, #vip-qrcode, .vip-comparison-section, .pricing-notice, .vip-promotion-notice { display:none!important; }

/* ===== 登录 / 注册 / 找回密码页（黑橙） ===== */
#login-page { background: var(--ref-bg)!important; display: flex!important; align-items: center!important; justify-content: center!important; min-height: 100vh!important; }
#login-page .login-container { width: 100%!important; max-width: 340px!important; margin: 0 auto!important; padding: 30px 22px 24px!important; background: #0b0b0d!important; border: 1px solid var(--ref-line)!important; border-radius: 14px!important; box-shadow: 0 10px 30px rgba(0,0,0,.45)!important; box-sizing: border-box!important; }
#login-page .logo-container { display: flex!important; flex-direction: column!important; align-items: center!important; margin-bottom: 24px!important; }
#login-page .banana-logo { display: none!important; }
#login-page .logo-container::before { content: '✦'; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--ref-orange); border: 1px solid #3b2a22; border-radius: 13px; background: #101014; margin-bottom: 14px; }
#login-page .app-title { color: #f3f3f4!important; font-size: 20px!important; font-weight: 700!important; margin: 0 0 6px!important; }
#login-page .app-subtitle { color: #74747c!important; font-size: 11px!important; margin: 0!important; }
#login-page .auth-form .form-group { margin-bottom: 12px!important; }
#login-page .auth-form input { width: 100%!important; padding: 12px 13px!important; background: #050506!important; border: 1px solid #2c2c31!important; border-radius: 8px!important; color: #e7e7e9!important; font-size: 13px!important; outline: none!important; box-sizing: border-box!important; }
#login-page .auth-form input:focus { border-color: #5e3a2a!important; box-shadow: 0 0 0 1px rgba(255,119,51,.10)!important; }
#login-page .auth-form input::placeholder { color: #68686f!important; }
#login-page .auth-form .btn-primary { width: 100%!important; padding: 12px!important; background: #100b09!important; border: 1px solid var(--ref-orange)!important; border-radius: 8px!important; color: var(--ref-orange)!important; font-size: 14px!important; font-weight: 700!important; margin-top: 4px!important; box-sizing: border-box!important; }
#login-page .auth-form .btn-primary:hover { background: rgba(255,119,51,.08)!important; }
#login-page .form-links { display: flex!important; justify-content: space-between!important; margin-top: 16px!important; }
#login-page .form-links a { color: #8a8a92!important; font-size: 12px!important; text-decoration: none!important; }
#login-page .form-links a:hover { color: var(--ref-orange)!important; }
#login-page .form-hint-warning { color: #e0a97a!important; font-size: 11px!important; margin: 0 0 10px!important; }

@media (max-width:420px) {
  #login-page .login-container { max-width: none!important; margin: 12px!important; }
  #main-page>.container { width:calc(100% - 14px)!important; max-width:900px!important; padding:0 7px 10px!important; }
  .local-package-status { margin-bottom:8px!important; }
  .local-status-item { padding:8px 7px!important; }
  .local-status-label { font-size:8px!important; }
  .local-status-value { font-size:9px!important; }
  .main-top-bar { min-height:70px!important; margin:0 -7px 8px!important; padding:12px 9px 10px!important; align-items:flex-start!important; }
  .main-brand { flex:1 1 auto!important; min-width:0!important; gap:2px!important; }
  .main-brand-name { font-size:15px!important; white-space:nowrap!important; letter-spacing:-.2px!important; }
  .local-brand-subtitle { font-size:9px!important; white-space:nowrap!important; letter-spacing:-.15px!important; }
  .main-top-actions { flex:0 0 auto!important; gap:6px!important; }
  .main-top-action-btn { min-width:64px!important; width:auto!important; height:31px!important; padding:0 8px!important; border-radius:6px!important; font-size:10px!important; }
  .gf-prompt-card, .gf-control-deck { padding:12px!important; border-radius:9px!important; }
  .gf-prompt-card { margin-bottom:8px!important; }
  .gf-card-title, .local-settings-title { font-size:13px!important; margin-bottom:8px!important; }
  .local-prompt-desc { margin-bottom:8px!important; font-size:10px!important; }
  .gf-prompt-shell { min-height:104px!important; }
  textarea.gf-prompt { min-height:82px!important; padding:9px 10px 24px!important; font-size:10px!important; }
  .gf-preset-bar { margin-top:8px!important; }
  .gf-preset-head { min-height:28px!important; }
  .gf-preset-save { min-width:100px!important; height:28px!important; padding:0 9px!important; font-size:10px!important; }
  .gf-count-options { gap:20px!important; }
  .gf-count-btn { font-size:11px!important; }
  .gf-count-dot { width:15px!important; height:15px!important; }
  .gf-count-btn.active .gf-count-dot-inner { width:7px!important; height:7px!important; }
  .gf-count-tip { margin:6px 0 8px!important; font-size:9px!important; }
  .gf-safe-mode-row { height:32px!important; margin-bottom:9px!important; padding:0 7px!important; }
  .gf-safe-mode-label { font-size:10px!important; }
  .gf-main-actions { grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:5px!important; }
  .gf-batch-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:5px!important; }
  .gf-act { min-height:39px!important; padding:0 2px!important; border-radius:6px!important; font-size:10px!important; }
  .gf-progress-section { margin-top:6px!important; }
  .gf-progress-label, .gf-progress-percent { font-size:9px!important; }
  .gf-progress-track { height:6px!important; }
}