:root {
  --bg: #1b1510;
  --card: rgba(255, 250, 240, 0.9);
  --card-dark: rgba(42, 32, 24, 0.88);
  --text: #2b2118;
  --muted: #7c6b5a;
  --line: rgba(96, 71, 49, 0.18);
  --primary: #7b3f1d;
  --primary-2: #d88943;
  --cream: #fff4df;
  --green: #36533a;
  --shadow: 0 24px 70px rgba(28, 18, 10, 0.2);
  --radius: 28px;
}

* { box-sizing: border-box; }
.auth-gate { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(27,21,16,.72); backdrop-filter:blur(12px); }
.auth-card { width:min(440px,100%); padding:28px; border-radius:28px; background:var(--cream); box-shadow:var(--shadow); }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 15% 5%,rgba(216,137,67,.42),transparent 30%),linear-gradient(135deg,#20160f,#4a2c19 55%,#efe0c5); }
.auth-card { border:1px solid rgba(255,255,255,.6); }
.auth-card h1 { color:var(--text); font-size:34px; letter-spacing:-.04em; }.auth-card .eyebrow{color:var(--primary);opacity:1}.auth-card .actions{margin-top:6px}.auth-card .primary-btn{width:auto;flex:1}.admin-stats{display:flex;gap:12px;margin-bottom:20px}.admin-stats div{flex:1;padding:18px;border-radius:18px;background:#ead8bb}.admin-stats strong,.admin-stats span{display:block}.admin-stats strong{font-size:28px}table{width:100%;border-collapse:collapse}th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
.auth-card h2 { margin:6px 0 8px; }.auth-card p { color:var(--muted); margin-bottom:18px; }.auth-card input { width:100%; margin:0 0 10px; padding:13px; border:1px solid var(--line); border-radius:14px; }.auth-card small { color:#8e3325; display:block; margin-top:10px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(216,137,67,.35), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(54,83,58,.38), transparent 30%),
    linear-gradient(135deg, #20160f 0%, #4a2c19 48%, #efe0c5 100%);
}

.app-shell { width: min(980px, 100%); margin: 0 auto; padding: 28px 18px 64px; }

.hero-card, .mood-card, .input-card, .result-card, .share-card, .history-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 18px;
  backdrop-filter: blur(18px);
}

.hero-card { color: var(--cream); background: linear-gradient(145deg, rgba(31,23,17,.96), rgba(89,53,29,.92)); overflow: hidden; position: relative; }
.creator-promise { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; position:relative; z-index:1; }
.creator-promise span { border:1px solid rgba(255,244,223,.2); background:rgba(255,255,255,.08); border-radius:999px; padding:7px 10px; font-size:12px; font-weight:800; }
.hero-card:after { content:""; position:absolute; right:-80px; bottom:-90px; width:260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(216,137,67,.42), transparent 64%); }
.hero-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; position:relative; z-index:1; }
.eyebrow { letter-spacing: .16em; font-size: 12px; opacity: .72; margin-bottom: 16px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(34px, 7vw, 64px); line-height: 1.04; margin-bottom: 18px; letter-spacing: -0.05em; }
h2 { font-size: 20px; margin-bottom: 4px; }
p { opacity: .78; line-height: 1.8; margin-bottom:0; max-width: 720px; }

.seed-orbit { width:104px; height:104px; border:1px solid rgba(255,244,223,.22); border-radius:50%; position:relative; flex:0 0 auto; }
.seed-orbit span { position:absolute; width:18px; height:18px; border-radius:50%; background:var(--primary-2); box-shadow:0 0 30px rgba(216,137,67,.9); }
.seed-orbit span:nth-child(1){ left:42px; top:-9px; }
.seed-orbit span:nth-child(2){ right:0; bottom:18px; background:#e9d19c; }
.seed-orbit span:nth-child(3){ left:10px; bottom:8px; background:#6f8a54; }

.hero-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:22px; position:relative; z-index:1; }
.hero-stats div { padding:14px; border:1px solid rgba(255,244,223,.14); background:rgba(255,255,255,.06); border-radius:20px; }
.hero-stats strong { display:block; font-size:28px; }
.hero-stats span { display:block; font-size:12px; opacity:.72; margin-top:3px; }

.section-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:16px; }
.section-head span { color: var(--muted); font-size:13px; line-height:1.6; }
.compact { align-items:center; }

.mood-grid, .role-cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.mood, .role-card {
  border:1px solid var(--line); background:rgba(255,255,255,.58); color:var(--text);
  border-radius:20px; padding:14px 12px; cursor:pointer; text-align:left; transition:.18s ease; min-height:76px;
}
.mood b, .role-card strong { display:block; font-size:20px; margin-bottom:6px; }
.mood small, .role-card span { color:var(--muted); font-size:12px; }
.mood.active, .role-card.active { background:#2b2118; color:var(--cream); transform:translateY(-2px); box-shadow:0 16px 30px rgba(43,33,24,.2); }
.mood.active small, .role-card.active span { color:rgba(255,244,223,.68); }

label { display:block; font-size:14px; font-weight:800; margin-bottom:10px; }
textarea, select {
  width:100%; border:1px solid var(--line); background:rgba(255,255,255,.72); color:var(--text);
  border-radius:18px; padding:15px; font-size:16px; outline:none;
}
textarea { min-height:150px; resize:vertical; line-height:1.75; margin-bottom:16px; }
textarea:focus, select:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(123,63,29,.10); }
.voice-input-wrap { position:relative; }
.voice-input-wrap textarea { padding-bottom:62px; }
.voice-btn {
  position:absolute; right:12px; bottom:28px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(123,63,29,.22); border-radius:999px; padding:9px 12px;
  background:rgba(255,244,223,.96); color:var(--primary); font-size:13px; font-weight:900; cursor:pointer;
  box-shadow:0 8px 18px rgba(58,34,18,.12); transition:transform .15s ease, background .15s ease, color .15s ease;
}
.voice-btn:hover { transform:translateY(-1px); background:#fff; }
.voice-icon { width:12px; height:12px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(123,63,29,.13); }
.voice-btn.is-listening { background:#8e3325; color:#fff4df; animation:voice-pulse 1.25s ease-in-out infinite; }
.voice-btn.is-listening .voice-icon { box-shadow:0 0 0 4px rgba(255,244,223,.25); }
.voice-btn.is-unavailable { opacity:.48; cursor:not-allowed; }
.voice-status { min-height:20px; margin:-7px 0 16px; color:var(--muted); font-size:12px; line-height:1.5; }
.ai-does-it { margin:4px 0 16px; padding:14px 16px; border-radius:18px; background:rgba(54,83,58,.08); border:1px solid rgba(54,83,58,.16); }
.ai-does-it strong { display:block; color:var(--green); font-size:14px; margin-bottom:5px; }
.ai-does-it span { display:block; color:var(--muted); font-size:13px; line-height:1.65; }
@keyframes voice-pulse { 50% { box-shadow:0 0 0 7px rgba(142,51,37,.12), 0 8px 18px rgba(58,34,18,.12); } }
.row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.row.single { grid-template-columns:1fr; }

.primary-btn, .secondary-btn, .text-btn { border:0; cursor:pointer; font-weight:900; border-radius:999px; transition:transform .15s ease, opacity .15s ease; }
.primary-btn { width:100%; background:linear-gradient(135deg, #2b2118, #7b3f1d); color:var(--cream); padding:17px 20px; font-size:17px; display:flex; justify-content:center; gap:10px; align-items:center; }
.primary-btn em { font-style:normal; opacity:.75; }
.secondary-btn { background:#ead8bb; color:#2b2118; padding:12px 16px; }
.text-btn { background:transparent; color:var(--muted); padding:8px 10px; }
button:active { transform:scale(.98); }
button:disabled { opacity:.62; cursor:not-allowed; }

.result-output { white-space:pre-wrap; line-height:1.85; background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(250,238,216,.72)); border:1px solid var(--line); border-radius:22px; padding:20px; }
.result-output::first-line { font-weight:900; }
.result-output h3 { margin:18px 0 8px; color:var(--primary); font-size:17px; }
.result-output h3:first-child { margin-top:0; }
.result-output p { margin:0 0 9px; opacity:1; }
.result-gap { height:8px; }
.result-list { padding-left:4px; }
.result-workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.9fr); gap:16px; align-items:start; }
.result-save-row { display:flex; justify-content:center; margin-top:18px; }
.result-save-row .primary-btn { min-width:220px; }
.refine-panel { position:sticky; top:16px; padding:18px; border:1px solid rgba(123,63,29,.16); border-radius:24px; background:linear-gradient(180deg,rgba(255,250,240,.92),rgba(242,230,209,.72)); box-shadow:0 14px 34px rgba(70,43,22,.08); }
.refine-panel > strong { display:block; font-size:16px; color:var(--text); }
.refine-panel > p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.chat-messages { max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:9px; margin:14px 0; }
.chat-bubble { max-width:94%; padding:10px 12px; border-radius:15px; font-size:13px; line-height:1.6; }
.chat-bubble.ai { align-self:flex-start; background:#f2e6d1; }
.chat-bubble.user { align-self:flex-end; background:#2b2118; color:var(--cream); }
.chat-input-wrap { position:relative; }
.chat-input-wrap textarea { min-height:94px; margin:0; padding:11px 13px 53px; border-radius:16px; font-size:13px; background:rgba(255,255,255,.82); }
.chat-input-wrap .voice-btn { position:absolute; right:10px; bottom:10px; padding:8px 11px; box-shadow:0 5px 14px rgba(58,34,18,.1); }
.refine-submit { width:100%; margin-top:9px; border:0; border-radius:999px; padding:12px; background:var(--green); color:var(--cream); font-weight:900; cursor:pointer; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.share-card-inner { width:min(560px,100%); min-height:360px; margin:0 auto; padding:34px; border-radius:30px; background:radial-gradient(circle at 20% 0%, rgba(216,137,67,.45), transparent 36%), linear-gradient(150deg, #221811, #543117 60%, #203523); color:var(--cream); display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 30px 80px rgba(31,23,17,.28); }
.share-kicker { font-size:13px; letter-spacing:.18em; opacity:.68; }
.share-content { font-size:26px; line-height:1.5; font-weight:900; margin:32px 0; letter-spacing:-.03em; }
.share-footer { font-size:13px; opacity:.68; }
.tip { text-align:center; color:var(--muted); margin-top:12px; }
.history-list.empty { color:var(--muted); }
.history-item { border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:10px; background:rgba(255,255,255,.55); cursor:pointer; }
.history-item:hover { background:rgba(255,255,255,.8); }
.history-item time { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.history-item .tag { display:inline-block; font-size:12px; padding:3px 8px; border-radius:999px; background:#ead8bb; margin-bottom:8px; color:#5b331e; }
.history-item div { line-height:1.65; }
.seed-open-hint { margin-top:8px; color:var(--primary); font-size:13px; font-weight:800; }
.hidden { display:none; }

@media (max-width: 720px) {
  .hero-top { display:block; }
  .seed-orbit { display:none; }
  .mood-grid, .role-cards, .row, .hero-stats { grid-template-columns:1fr 1fr; }
  .hero-card, .mood-card, .input-card, .result-card, .share-card, .history-card { padding:20px; }
  .share-card-inner { min-height:300px; padding:26px; }
  .share-content { font-size:22px; }
  .result-workspace { grid-template-columns:1fr; }
  .refine-panel { position:static; }
}

.seed-idea { line-height:1.65; margin-bottom:10px; }
.seed-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.seed-actions button { border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius:999px; padding:7px 10px; font-size:12px; color:var(--text); cursor:pointer; }
.seed-actions button:hover { background:#fff5df; }
.seed-direction-detail { margin-top:16px; padding:14px; border-radius:18px; background:rgba(255,255,255,.45); border:1px solid var(--line); }
.seed-direction-detail strong { display:block; margin-bottom:8px; color:var(--primary); }
.seed-direction-detail p { margin:0; white-space:pre-wrap; line-height:1.7; color:var(--text); }
.seed-platform-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.seed-platform-actions button { border:1px solid var(--line); background:rgba(255,255,255,.76); color:var(--text); border-radius:999px; padding:9px 14px; font-weight:900; cursor:pointer; }
.seed-platform-actions button:hover, .seed-platform-actions button.active { background:var(--primary); color:#fffaf0; border-color:var(--primary); }
.title-setting { display:none; }
.seed-direction { margin:11px 0; border-radius:12px; background:rgba(255,255,255,.36); }
.seed-direction summary { padding:9px 10px; color:var(--primary); font-size:12px; font-weight:800; cursor:pointer; }
.seed-direction div { white-space:pre-wrap; padding:0 10px 11px; color:var(--muted); font-size:12px; line-height:1.65; }

.studio-shell { max-width:900px; }
.studio-hero { color:var(--cream); padding:14px 4px 24px; }
.studio-hero h1 { font-size:clamp(36px,7vw,62px); margin:18px 0 12px; }
.back-link { color:var(--cream); text-decoration:none; font-size:14px; font-weight:800; }
.seed-summary, .studio-card, .library-card { background:var(--card); border:1px solid rgba(255,255,255,.55); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:18px; }
.seed-summary { border-left:4px solid var(--primary-2); }
.seed-summary p { color:var(--text); font-size:17px; font-weight:700; margin:12px 0 0; opacity:1; }
.content-editor { min-height:460px; margin:0; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(250,238,216,.78)); }
.writing-settings { margin-bottom:16px; padding:16px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.42); }
.writing-settings h3 { margin:0 0 12px; font-size:15px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.settings-grid label { display:flex; flex-direction:column; gap:7px; margin:0; font-size:12px; color:var(--muted); }
.settings-grid input, .settings-grid select { margin:0; padding:11px 12px; border-radius:13px; font-size:14px; }
.compact-primary { width:auto; padding:13px 18px; font-size:15px; }
.studio-workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.9fr); gap:16px; margin-top:16px; align-items:stretch; }
.article-panel { min-height:0; display:flex; }
.article-panel .content-editor { flex:1; margin:0; }
.result-actions-bottom,.studio-actions-bottom { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.result-actions-bottom .primary-btn,.studio-actions-bottom .primary-btn { min-width:220px; }
.studio-refine { position:sticky; top:16px; height:100%; display:flex; flex-direction:column; }
.studio-refine .chat-messages { flex:1; min-height:120px; }
.studio-refine .refine-form { margin-top:auto; }
.studio-refine .chat-input-wrap textarea { height:260px; min-height:260px; max-height:260px; resize:none; }
.content-library { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.content-library.empty { display:block; color:var(--muted); }
.library-item { background:rgba(255,255,255,.58); border:1px solid var(--line); border-radius:20px; padding:16px; }
.library-item strong { display:block; margin:12px 0 6px; font-size:16px; }
.library-item p { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 12px; }
.library-item button { border:0; background:transparent; color:var(--primary); padding:0; font-size:13px; font-weight:900; cursor:pointer; }
@media (max-width:720px) { .content-library { grid-template-columns:1fr; } .content-editor { min-height:380px; } .seed-summary, .studio-card, .library-card { padding:20px; } }
@media (max-width:720px) { .studio-workspace { grid-template-columns:1fr; } .studio-refine { position:static; } .studio-refine .chat-input-wrap textarea { height:180px; min-height:180px; max-height:180px; } }
@media (max-width:520px) { .settings-grid { grid-template-columns:1fr; } }