/* ===== 福仔 App Styles ===== */
:root {
  --accent: #6366f1; --accent-strong: #4f46e5; --accent-soft: #eef2ff;
  --warm: #f97316; --warm-soft: #fff7ed;
  --green: #22c55e; --green-soft: #f0fdf4;
  --red: #ef4444; --red-soft: #fef2f2;
  --paper: #fbfcf9; --paper-strong: #fff;
  --ink: #17202b; --ink-soft: #253244; --muted: #647181;
  --line: #d6ddd8; --line-strong: #bcc8c0;
  --font-display: 'Fraunces', ui-serif, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --radius: .75rem; --shadow: 0 4px 12px rgba(0,0,0,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6}
a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none}

/* ─── App Shell ─── */
.app-shell{min-height:100vh}
.app-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1.5rem;height:3.5rem;padding:0 1.5rem;background:rgba(251,252,249,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.app-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:1.25rem;font-weight:700;flex-shrink:0}
.app-logo{width:2rem;height:2rem;border-radius:.4rem;object-fit:cover}
.app-nav-links{display:flex;gap:.25rem;flex:1}
.nav-btn{padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;color:var(--muted);transition:all .15s}
.nav-btn:hover,.nav-btn.active{color:var(--accent-strong);background:var(--accent-soft)}
.app-nav-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.user-name{font-size:.875rem;font-weight:600;color:var(--ink-soft)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.25rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;transition:all .15s}
.btn-primary{color:#fff;background:var(--accent);box-shadow:0 2px 8px rgba(99,102,241,.2)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px)}
.btn-outline{color:var(--accent-strong);border:2px solid var(--accent)}
.btn-outline:hover{background:var(--accent-soft)}
.btn-ghost{color:var(--muted)} .btn-ghost:hover{color:var(--ink);background:var(--accent-soft)}
.btn-sm{padding:.35rem .75rem;font-size:.8rem}
.btn-lg{padding:.75rem 1.75rem;font-size:1rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ─── Main Content ─── */
.app-main{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}
.page-header{margin-bottom:2rem}
.page-header h1{font-family:var(--font-display);font-size:2rem;margin-bottom:.25rem}
.page-header p{color:var(--muted)}
.loading,.error,.empty{text-align:center;padding:4rem 2rem;color:var(--muted);font-size:1.125rem}
.error{color:var(--red)}

/* ─── Article Grid ─── */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.article-card{padding:1.25rem;background:var(--paper-strong);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:all .2s}
.article-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.article-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.article-card h3{font-size:1rem;font-weight:700;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-meta{display:flex;gap:1rem;font-size:.8125rem;color:var(--muted)}
.article-platform-badge{padding:.2rem .6rem;border-radius:1rem;font-size:.75rem;font-weight:600;background:var(--accent-soft);color:var(--accent-strong)}
.article-platform-badge.wechat{background:#e7f7e8;color:#166534}
.article-platform-badge.zhihu{background:var(--accent-soft);color:var(--accent-strong)}
.article-platform-badge.xiaohongshu{background:var(--red-soft);color:#b91c1c}
.article-platform-badge.community{background:var(--warm-soft);color:#c2410c}
.article-status{padding:.2rem .6rem;border-radius:1rem;font-size:.75rem;font-weight:600}
.article-status.ready{background:var(--green-soft);color:#166534}
.article-status.generating{background:#fef9c3;color:#854d0e;animation:pulse 1.5s infinite}
.article-status.draft{background:#f3f4f6;color:#6b7280}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ─── Editor ─── */
.article-editor{max-width:900px;margin:0 auto}
.editor-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.editor-toolbar select{padding:.4rem .75rem;border:1px solid var(--line);border-radius:var(--radius);font-size:.875rem;background:var(--paper-strong)}
.editor-title{width:100%;padding:.75rem;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:.75rem;background:var(--paper-strong)}
.editor-title:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.editor-content{width:100%;min-height:60vh;padding:1rem;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;line-height:1.8;resize:vertical;background:var(--paper-strong)}
.editor-content:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.editor-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;font-size:.8125rem;color:var(--muted)}

/* ─── Create Form ─── */
.create-form{max-width:700px;margin:0 auto}
.create-form label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.9375rem}
.create-form .form-input,.create-form .form-textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--radius);font-size:1rem;font-family:var(--font-body);margin-bottom:1rem;background:var(--paper-strong)}
.create-form .form-input:focus,.create-form .form-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.gen-output{margin-top:1.5rem;padding:1.5rem;background:var(--paper-strong);border:1px solid var(--line);border-radius:var(--radius);max-height:60vh;overflow-y:auto}
.gen-output h2{font-family:var(--font-display);margin-bottom:.75rem}
.gen-content{line-height:1.8}

/* ─── Styles ─── */
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-bottom:2rem}
.style-card-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:var(--paper-strong);border:1px solid var(--line);border-radius:var(--radius)}
.style-card-item strong{display:block;font-size:.9375rem}
.style-card-item small{color:var(--muted);font-size:.8125rem}
.style-avatar{width:2.5rem;height:2.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-right:.75rem;flex-shrink:0}
.style-avatar.official{background:var(--accent-soft)}
.style-avatar:not(.official){background:var(--warm-soft)}
.style-card-header{display:flex;align-items:center}
.create-style-form{max-width:500px;padding:1.5rem;background:var(--paper-strong);border:1px solid var(--line);border-radius:var(--radius)}
.create-style-form h3{margin-bottom:1rem}
.form-input,.form-textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:.5rem;font-size:.9375rem;font-family:var(--font-body);margin-bottom:.75rem;background:var(--paper-strong)}
.form-textarea{resize:vertical}

/* ─── Toast ─── */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);padding:.75rem 1.5rem;border-radius:2rem;font-weight:600;font-size:.875rem;transition:all .3s;z-index:999;opacity:0}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{background:#166534;color:#fff}
.toast.err{background:#b91c1c;color:#fff}

/* ─── Auth Overlay (landing page login/register) ─── */
.auth-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.auth-overlay.show{display:flex}
.auth-modal{background:var(--paper-strong);border-radius:1rem;padding:2rem;width:90%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.auth-modal h2{font-family:var(--font-display);font-size:1.5rem;margin-bottom:1.5rem;text-align:center}
.auth-modal .form-input{margin-bottom:.75rem}
.auth-modal .btn{width:100%;justify-content:center;margin-top:.5rem}
.auth-switch{text-align:center;margin-top:1rem;font-size:.875rem;color:var(--muted)}
.auth-switch a{color:var(--accent);font-weight:600;cursor:pointer}
.auth-switch a:hover{text-decoration:underline}

/* ─── Admin Table ─── */
.admin-table-wrap{overflow-x:auto;background:var(--paper-strong);border-radius:var(--radius);border:1px solid var(--line)}
.admin-table{width:100%;border-collapse:collapse;font-size:.875rem}
.admin-table th{padding:.75rem 1rem;text-align:left;font-weight:700;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--line);background:var(--paper)}
.admin-table td{padding:.75rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.admin-table tbody tr:hover{background:var(--accent-soft)}
.admin-table tbody tr:last-child td{border-bottom:none}

@media(max-width:768px){
  .app-nav{gap:.5rem;padding:0 .75rem}
  .app-nav-links{overflow-x:auto}
  .nav-btn{padding:.35rem .65rem;font-size:.8rem;white-space:nowrap}
  .app-main{padding:1rem .75rem}
  .article-grid{grid-template-columns:1fr}
  .editor-toolbar{flex-direction:column;align-items:stretch}
}