/* 麦田格 AI 内容增长工作台 — 暖色调（橙黄×橙红）/ 字号加大版 */
:root {
  --bg: #FBF5EC; --card: #FFFDF8; --border: #EFE4D2; --border-strong: #E3D3BA;
  --text: #2A2014; --text-2: #5F5039; --text-3: #7A6849;
  --green: #D9542B; --green-h: #B93F1A; --green-bg: #FBEAE0;
  --gold: #E8961E; --gold-bg: #FCF1DB;
  --red: #B4381F; --red-bg: #FAE7E0;
  --blue: #B8801C; --blue-bg: #FCF1DB;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(90,60,30,.05), 0 4px 16px rgba(90,60,30,.06);
  --shadow-lg: 0 8px 40px rgba(90,60,30,.16);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size:16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: #C04318; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size:15.5px; color: var(--text); }

/* ============ 布局 ============ */
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 208px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; }
.logo { display: flex; align-items: center; gap: 9px; padding: 4px 8px 18px; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #E8961E 0%, #D9542B 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size:16.5px; }
.logo-name { font-size:16px; font-weight: 700; letter-spacing: .3px; }
.logo-sub { font-size:13px; color: var(--text-3); margin-top: -2px; }
.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-2); font-size:16px; cursor: pointer; border: none; background: none; text-align: left; transition: all .12s; }
.nav-item:hover { background: #F7EDDD; color: var(--text); }
.nav-item.active { background: var(--green-bg); color: var(--green); font-weight: 700; }
.nav-item .ico { font-size:16.5px; width: 18px; text-align: center; }
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px 8px 4px; font-size:14.5px; color: var(--text-3); }
.sidebar-foot .user-row { display: flex; align-items: center; justify-content: space-between; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-size:13.5px; font-weight: 700; }

.main { flex: 1; overflow-y: auto; min-width: 0; }
.page { max-width: none; margin: 0; padding: 26px 38px 60px; }
.page.full { max-width: none; padding: 0; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.page-title { font-size:22px; font-weight: 800; letter-spacing: .2px; }
.page-desc { font-size:14.5px; color: var(--text-3); margin-top: 3px; }

/* ============ 通用组件 ============ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 14px; }
.card-title { font-size:16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.card-title .hint { font-weight: 400; font-size:14px; color: var(--text-3); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font-size:15.5px; transition: all .12s; }
.btn:hover { border-color: var(--gold); color: var(--green); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--green-h); color: #fff; }
.btn.ai { background: linear-gradient(135deg, #E8961E, #D9542B); border: none; color: #fff; font-weight: 600; }
.btn.ai:hover { filter: brightness(1.06); }
.btn.sm { padding: 4px 10px; font-size:14.5px; border-radius: 6px; }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: #F7EDDD; color: var(--text); }
.input, .select, .textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); outline: none; transition: border .12s; }
.input::placeholder, .textarea::placeholder { color: #8A7A5E; opacity: 1; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); }
.textarea { resize: vertical; min-height: 70px; line-height: 1.6; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size:14.5px; color: var(--text-2); margin-bottom: 5px; font-weight: 600; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size:13.5px; font-weight: 600; white-space: nowrap; }
.badge.gray { background: #F1E8D8; color: #665540; }
.badge.blue { background: var(--blue-bg); color: #8A6012; }
.badge.orange { background: var(--gold-bg); color: #94560C; }
.badge.purple { background: #FBE7D6; color: #9E4716; }
.badge.green { background: var(--green-bg); color: #B03E17; }
.badge.dark-green { background: #F5D9C8; color: #822C12; }
.badge.red { background: var(--red-bg); color: #9E3018; }
/* 内容状态专用徽章：六态互异（浅金/描边/实心金/实心橙红/实心深棕），避免相近色混淆 */
.badge.gold { background: #FCE8C2; color: #8A5A0C; }
.badge.outline { background: var(--card); color: #A64B12; border: 1.5px dashed #D97A2E; }
.badge.solid-gold { background: #A8700F; color: #fff; }
.badge.solid { background: #C04318; color: #fff; }
.badge.solid-dark { background: #7E3414; color: #fff; }

/* 平台品牌标识图标（品牌官方色圆角块），flex 容器保证图标与文字垂直居中 */
.plat-cell { display: inline-flex; align-items: center; gap: 7px; }
.plat-ico { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.plat-ico.xhs { background: #FF2442; }
.plat-ico.channels { background: #07C160; font-size: 10px; }
.plat-ico.douyin { background: #161823; }
.plat-ico.manual { background: #A89880; }

.tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size:13.5px; background: #F6EDDE; color: var(--text-2); border: 1px solid var(--border); }

.empty { text-align: center; padding: 40px 20px; color: var(--text-3); font-size:15.5px; }
.empty .ico { font-size:31px; display: block; margin-bottom: 8px; opacity: .75; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* toast */
#toast-box { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { padding: 9px 18px; background: #3A2C1C; color: #fff; border-radius: 9px; font-size:15.5px; box-shadow: var(--shadow-lg); animation: fadeUp .2s; max-width: 520px; }
.toast.err { background: #8A3A20; }
.toast.ok { background: #B93F1A; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px); } }

/* modal */
.modal-mask { position: fixed; inset: 0; background: rgba(60,40,20,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 30px; }
.modal { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; animation: fadeUp .18s; }
.modal-head { padding: 16px 22px 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size:17.5px; }
.modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* markdown */
.md { font-size:16px; line-height: 1.8; word-break: break-word; }
.md h1, .md h2, .md h3, .md h4 { margin: 14px 0 7px; font-weight: 700; line-height: 1.4; }
.md h1 { font-size:18.5px; } .md h2 { font-size:17.5px; } .md h3 { font-size:16.5px; } .md h4 { font-size:16px; color: var(--text-2); }
.md h1:first-child, .md h2:first-child, .md h3:first-child { margin-top: 0; }
.md p { margin: 6px 0; }
.md ul, .md ol { padding-left: 20px; margin: 6px 0; }
.md li { margin: 3px 0; }
.md code { background: #F6EDDD; padding: 1px 5px; border-radius: 4px; font-size:15px; }
.md pre { background: #F9F2E3; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size:15px; }
.md th, .md td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
.md th { background: #F9F2E3; font-weight: 600; }
.md hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.md blockquote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--text-2); margin: 8px 0; }

/* ============ 登录 ============ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #FBF0DC 0%, #FBF6EC 50%, #F9E4CE 100%); }
.login-card { width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 36px 34px; box-shadow: var(--shadow-lg); }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.login-logo .logo-mark { width: 46px; height: 46px; border-radius: 12px; font-size:23px; }
.login-title { font-size:19.5px; font-weight: 800; }
.login-sub { font-size:14.5px; color: var(--text-3); }
.login-tip { margin-top: 14px; text-align: center; font-size:14px; color: var(--text-3); }

/* ============ 首页 ============ */
.grid-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; cursor: pointer; transition: all .12s; }
.stat-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.stat-num { font-size:25px; font-weight: 800; letter-spacing: -.5px; }
.stat-num.warn { color: #C07414; }
.stat-label { font-size:14px; color: var(--text-3); margin-top: 1px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.grid-2 > *, .grid-stats > *, .radar-grid > * { min-width: 0; }
.advice-card { background: linear-gradient(135deg, #FEFBF3 0%, #FCF3E0 100%); border: 1px solid #F0DFC0; border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; }
.advice-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), var(--green)); }
.ai-chip { display: inline-flex; align-items: center; gap: 5px; font-size:13.5px; font-weight: 700; color: #94560C; background: var(--gold-bg); border-radius: 99px; padding: 2px 9px; }
.src-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--border); font-size:15.5px; }
.src-row:last-child { border-bottom: none; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--border); font-size:15.5px; cursor: pointer; }
.list-row:hover { background: #FCF6E9; }
.list-row:last-child { border-bottom: none; }

/* ============ 创作室三栏 ============ */
.studio { display: flex; height: 100vh; }
.studio-side { width: 216px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.studio-side-head { padding: 14px 14px 10px; display: flex; align-items: center; justify-content: space-between; }
.studio-side-head .t { font-size:15.5px; font-weight: 700; }
.session-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.session-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.session-item:hover { background: #F7EDDD; }
.session-item.active { background: var(--green-bg); }
.session-item .name { font-size:15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.session-item .del { opacity: 0; border: none; background: none; color: var(--text-3); font-size:14.5px; padding: 0 2px; }
.session-item:hover .del { opacity: 1; }
.session-item .del:hover { color: var(--red); }
.studio-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 22px 26px; }
.chat-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-3); gap: 8px; }
.chat-sug { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; width: 340px; }
.chat-sug button { border: 1px solid var(--border-strong); background: var(--card); border-radius: 9px; padding: 8px 13px; font-size:15px; color: var(--text-2); text-align: left; }
.chat-sug button:hover { border-color: var(--gold); color: var(--green); }
.msg { margin-bottom: 16px; display: flex; gap: 10px; }
.msg .who { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size:13.5px; }
.msg.user { flex-direction: row-reverse; }
.msg.user .who { background: #F0E6D2; color: var(--text-2); border-radius: 50%; }
.msg.user .bubble { background: #F4ECDC; border-radius: 14px 14px 4px 14px; padding: 9px 14px; max-width: 70%; font-size:16px; white-space: pre-wrap; }
.msg.ai .who { background: linear-gradient(135deg, #E8961E, #D9542B); color: #fff; }
.msg.ai .bubble { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 12px 16px; }
.msg.ai .bubble.streaming { border-color: #E8CFA4; }
.cursor-blink { display: inline-block; width: 7px; height: 14px; background: var(--gold); vertical-align: -2px; animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.chat-input-wrap { padding: 14px 22px 18px; }
.chat-input-box { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-end; transition: border .12s; }
.chat-input-box:focus-within { border-color: var(--gold); }
.chat-input-box textarea { flex: 1; border: none; outline: none; resize: none; font-size:16px; line-height: 1.55; max-height: 140px; background: none; }
.chat-input-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 0 2px; font-size:13.5px; color: var(--text-3); }
.studio-editor { width: 372px; flex-shrink: 0; display: flex; flex-direction: column; background: #FDFAF3; }
.editor-head { padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--card); }
.editor-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 30px; }
.editor-field { margin-bottom: 11px; }
.editor-field label { font-size:14px; font-weight: 700; color: var(--text-2); display: block; margin-bottom: 4px; }
.editor-field label .ai-mark { color: #94560C; font-weight: 600; font-size:13px; }
.editor-field input, .editor-field textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 9px; font-size:15px; background: var(--card); outline: none; }
.editor-field input:focus, .editor-field textarea:focus { border-color: var(--gold); }
.editor-field textarea { resize: vertical; min-height: 58px; line-height: 1.6; }
.editor-field textarea.tall { min-height: 160px; }
.adopt-bar { padding: 11px 16px; border-top: 1px solid var(--border); background: var(--card); display: flex; gap: 8px; align-items: center; }
.adopt-bar .select { flex: 1; padding: 6px 8px; font-size:14.5px; }
.ver-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; font-size:14.5px; cursor: pointer; background: var(--card); }
.ver-item:hover { border-color: var(--gold); }
.ver-item.current { border-color: var(--green); background: var(--green-bg); }

/* ============ 雷达 ============ */
.radar-grid { display: grid; grid-template-columns: 400px 1fr; gap: 16px; align-items: start; }
.radar-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 8px; background: var(--card); display: flex; gap: 9px; align-items: flex-start; }
.radar-item .txt { flex: 1; font-size:15px; line-height: 1.55; }
.radar-item .meta { font-size:13.5px; color: var(--text-3); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ============ 资产库 ============ */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.tab-bar { display: flex; gap: 4px; background: #F3EADA; padding: 3px; border-radius: 9px; }
.tab-bar button { border: none; background: none; padding: 5px 13px; border-radius: 7px; font-size:15px; color: var(--text-2); }
.tab-bar button.active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(90,60,30,.08); }
.table { width: 100%; border-collapse: collapse; font-size:15.5px; }
.table th { text-align: left; font-size:14px; color: var(--text-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr.rowlink { cursor: pointer; }
.table tr.rowlink:hover td { background: #FCF6E9; }
.num { font-variant-numeric: tabular-nums; }

/* ============ 复盘 ============ */
.kpi-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 10px 16px; min-width: 108px; }
.kpi .v { font-size:21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .k { font-size:13.5px; color: var(--text-3); }
.monospace-note { font-size:14.5px; color: var(--text-2); background: #F9F2E3; border-radius: 6px; padding: 8px 10px; }

/* 响应式 */
@media (max-width: 1100px) {
  .grid-stats { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .radar-grid { grid-template-columns: 1fr; }
  .studio-editor { width: 320px; }
  .studio-side { width: 180px; }
}
@media (max-width: 860px) {
  .sidebar { width: 60px; padding: 12px 8px; }
  .logo-name, .logo-sub, .nav-item span.txt, .sidebar-foot { display: none; }
  .nav-item { justify-content: center; }
  .studio { flex-direction: column; }
  .studio-side, .studio-editor { width: 100%; }
  .page { padding: 18px 16px 40px; }
}