:root {
  --bg: #f6f8fc;
  --surface: #fff;
  --surface-2: #f0f4fb;
  --surface-3: #e8eef8;
  --text: #1b1d22;
  --muted: #626a78;
  --line: #e1e6ef;
  --primary: #0b57d0;
  --primary-soft: #e8f0fe;
  --success: #168744;
  --success-soft: #e7f5eb;
  --warning: #a05c00;
  --warning-soft: #fff1d8;
  --danger: #ba1a1a;
  --danger-soft: #ffebee;
  --violet: #6941c6;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(26, 31, 44, .05), 0 12px 32px rgba(26, 31, 44, .07);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.quiet { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.boot-screen { min-height: 100vh; display: grid; place-content: center; grid-template-columns: auto auto; gap: 14px; align-items: center; }
.boot-screen p { margin: 4px 0 0; color: var(--muted); }
.logo-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg,#2868df,#704be9); color:#fff; font-weight:900; box-shadow: var(--shadow); }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); }
.auth-brand { padding: 9vw 8vw; color:#fff; background: radial-gradient(circle at 20% 10%,rgba(255,255,255,.22),transparent 28%), linear-gradient(145deg,#123f9e,#6f4bd8 80%); display:flex; flex-direction:column; justify-content:space-between; }
.auth-brand .logo-mark { background:#fff; color:var(--primary); }
.auth-brand h1 { margin: 40px 0 14px; max-width: 540px; font-size: clamp(38px,5vw,64px); line-height:1.05; letter-spacing:-.04em; }
.auth-brand p { max-width: 520px; font-size:18px; line-height:1.7; color:rgba(255,255,255,.82); }
.auth-points { display:grid; gap:12px; margin-top:34px; }
.auth-point { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.9); }
.auth-point i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); font-style:normal; }
.auth-card-wrap { display:grid; place-items:center; padding:48px; }
.auth-card { width:min(440px,100%); background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:var(--shadow); }
.auth-card h2 { margin:0; font-size:28px; }
.auth-card > p { margin:8px 0 24px; color:var(--muted); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; background:var(--surface-2); padding:4px; border-radius:12px; margin-bottom:22px; }
.auth-tabs button { border:0; background:transparent; padding:10px; border-radius:9px; color:var(--muted); }
.auth-tabs button.active { background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(20,30,55,.12); }

.field { display:grid; gap:7px; margin-bottom:15px; }
.field span { font-size:13px; font-weight:700; }
.input, .select, .textarea { width:100%; border:1px solid #ccd3df; border-radius:11px; background:#fff; color:var(--text); padding:11px 13px; outline:0; transition:.15s ease; }
.textarea { min-height:130px; resize:vertical; line-height:1.6; }
.input:focus, .select:focus, .textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(11,87,208,.12); }
.textarea.compact { min-height:86px; }
.copy-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; }
.check-row { display:flex; align-items:center; gap:9px; padding:9px 0; font-size:13px; font-weight:700; }

.btn { min-height:40px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--text); padding:8px 14px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover { background:#0847ad; }
.btn.tonal { background:var(--primary-soft); border-color:transparent; color:var(--primary); }
.btn.danger { background:#fff; color:var(--danger); border-color:#f0b7b7; }
.btn.sm { min-height:34px; padding:6px 10px; font-size:12px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.52; cursor:not-allowed; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.app-shell.focus { grid-template-columns:76px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; background:#fff; border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; padding:4px 8px 18px; }
.brand strong { display:block; font-size:17px; }
.brand span { font-size:11px; color:var(--muted); }
.new-create { margin:2px 4px 18px; }
.nav-title { padding:10px 12px 6px; font-size:11px; color:#8a92a2; font-weight:800; letter-spacing:.08em; }
.nav { display:grid; gap:3px; }
.nav button { border:0; background:transparent; min-height:43px; padding:0 12px; border-radius:12px; display:flex; align-items:center; gap:11px; color:#565e6b; text-align:left; }
.nav button:hover { background:var(--surface-2); }
.nav button.active { background:var(--primary-soft); color:var(--primary); font-weight:800; }
.nav-icon { width:25px; text-align:center; font-size:17px; }
.nav-label { white-space:nowrap; }
.sidebar-spacer { flex:1; }
.quota-mini { border:1px solid var(--line); background:var(--surface-2); border-radius:14px; padding:12px; margin:10px 4px; }
.quota-track, .progress { height:7px; border-radius:10px; background:#dce4ef; overflow:hidden; margin-top:9px; }
.quota-track span, .progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#714be8); }
.profile { display:flex; align-items:center; gap:10px; padding:10px 8px; }
.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg,#e7efff,#dacdff); color:#4338a0; display:grid; place-items:center; font-weight:900; }
.app-shell.focus .brand-copy, .app-shell.focus .nav-label, .app-shell.focus .nav-title, .app-shell.focus .quota-mini, .app-shell.focus .profile-copy { display:none; }
.app-shell.focus .brand, .app-shell.focus .profile, .app-shell.focus .nav button { justify-content:center; padding-left:0; padding-right:0; }
.app-shell.focus .new-create { padding-left:0; padding-right:0; }

.content { min-width:0; }
.topbar { height:70px; display:flex; align-items:center; gap:16px; padding:0 28px; border-bottom:1px solid var(--line); background:rgba(246,248,252,.9); backdrop-filter:blur(15px); position:sticky; top:0; z-index:4; }
.topbar-title { font-weight:850; font-size:17px; }
.topbar-spacer { flex:1; }
.topbar-user { font-size:13px; color:var(--muted); }
.main { padding:30px; max-width:1520px; margin:0 auto; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.page-title { margin:0; font-size:30px; letter-spacing:-.03em; }
.page-desc { margin:7px 0 0; color:var(--muted); }
.head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.section { margin-top:24px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:13px; }
.section-title { font-size:17px; font-weight:850; }

.grid { display:grid; gap:16px; }
.grid.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 1px rgba(20,30,55,.025); }
.card.pad { padding:18px; }
.metric { padding:18px; }
.metric-label { color:var(--muted); font-size:13px; }
.metric-value { font-size:30px; font-weight:900; margin:9px 0 5px; letter-spacing:-.04em; }
.metric-foot { color:var(--muted); font-size:12px; }
.quick-card { padding:18px; text-align:left; border:1px solid var(--line); background:#fff; border-radius:16px; min-height:145px; }
.quick-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.quick-icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-size:20px; margin-bottom:18px; }
.quick-title { font-weight:850; font-size:16px; }
.quick-desc { margin-top:6px; color:var(--muted); font-size:13px; line-height:1.55; }
.empty { text-align:center; padding:50px 20px; color:var(--muted); }
.empty .quick-icon { margin:0 auto 14px; }

.badge { display:inline-flex; align-items:center; min-height:24px; border-radius:99px; padding:3px 9px; font-size:11px; font-weight:800; background:var(--surface-2); color:var(--muted); white-space:nowrap; }
.badge.success { background:var(--success-soft); color:var(--success); }
.badge.info { background:var(--primary-soft); color:var(--primary); }
.badge.warning { background:var(--warning-soft); color:var(--warning); }
.badge.danger { background:var(--danger-soft); color:var(--danger); }
.badge.violet { background:#f0eaff; color:var(--violet); }

.list { overflow:hidden; }
.list-row { display:grid; grid-template-columns:minmax(260px,1.6fr) minmax(120px,.7fr) 110px minmax(140px,.8fr) auto; align-items:center; gap:16px; padding:14px 17px; border-top:1px solid var(--line); }
.list-row:first-child { border-top:0; }
.list-row.header { background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:800; }
.row-title { min-width:0; }
.row-title b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-meta { margin-top:5px; color:var(--muted); font-size:12px; }
.row-actions { display:flex; gap:6px; }

.source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.source-choice { min-height:138px; border:1px solid var(--line); border-radius:15px; background:#fff; padding:17px; text-align:left; }
.source-choice.selected { border-color:var(--primary); box-shadow:0 0 0 3px rgba(11,87,208,.1); background:#fbfdff; }
.source-choice b { display:block; margin:13px 0 5px; }
.source-choice span { color:var(--muted); font-size:12px; line-height:1.5; }
.create-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.6fr); gap:18px; align-items:start; }
.sticky { position:sticky; top:94px; }
.step-list { display:grid; gap:12px; }
.step-item { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; }
.step-number { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-weight:900; font-size:12px; }
.info, .warning { padding:13px 14px; border-radius:12px; font-size:13px; line-height:1.6; }
.info { background:var(--primary-soft); color:#294b80; }
.warning { background:var(--warning-soft); color:#744300; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

.editor-grid { display:grid; grid-template-columns:minmax(360px,1fr) minmax(320px,.85fr); gap:16px; }
.editor-pane { padding:18px; }
.editor-pane .textarea { min-height:520px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.article-preview { max-width:720px; margin:0 auto; color:#2c2e33; line-height:1.85; font-size:16px; }
.article-preview h1 { margin:1.7em 0 .8em; font-size:1.65em; border-bottom:3px solid var(--accent,#0b57d0); padding-bottom:.4em; }
.article-preview h2 { margin:1.6em 0 .7em; font-size:1.35em; color:var(--accent,#0b57d0); }
.article-preview h3 { margin:1.4em 0 .6em; font-size:1.14em; }
.article-preview h4,.article-preview h5,.article-preview h6 { margin:1.25em 0 .5em; }
.article-preview a { color:var(--accent,#0b57d0); text-decoration-thickness:1px; text-underline-offset:3px; }
.article-preview hr { border:0; border-top:1px solid #dfe4ec; margin:1.8em 0; }
.article-preview blockquote { margin:1.2em 0; padding:12px 15px; border-left:4px solid var(--accent,#0b57d0); background:#f2f5fb; border-radius:0 9px 9px 0; color:#4a5260; }
.article-preview pre { overflow:auto; padding:14px; border-radius:10px; background:#1f2430; color:#e6edf3; }
.article-preview code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.article-preview p { margin:1em 0; }

.skill-grid, .template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.skill-card, .template-card { padding:18px; }
.card-name { font-size:17px; font-weight:850; margin:15px 0 7px; }
.card-desc { min-height:44px; color:var(--muted); font-size:13px; line-height:1.55; }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }
.template-paper { min-height:180px; border-radius:12px; background:#fff; border:1px solid var(--line); padding:18px; box-shadow:inset 0 0 0 8px #f6f8fb; overflow:hidden; }
.template-paper h3 { color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:7px; margin:4px 0 12px; }
.template-paper p { color:#4d5562; font-size:12px; line-height:1.7; }
.template-paper blockquote { margin:10px 0 0; padding:8px 10px; border-left:3px solid var(--accent); background:#f4f6fa; font-size:11px; color:#5e6673; }

.storage-head { display:flex; align-items:center; gap:18px; }
.storage-head > div:first-child { flex:1; }
.asset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.asset-card { padding:14px; }
.asset-thumb { height:120px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg,#edf2fb,#dce7f8); color:#6c7890; font-size:32px; overflow:hidden; }
.asset-thumb img { width:100%; height:100%; object-fit:cover; }
.asset-name { font-weight:800; margin-top:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-meta { color:var(--muted); font-size:11px; margin-top:5px; }

.modal-overlay { position:fixed; inset:0; z-index:50; background:rgba(22,27,38,.42); backdrop-filter:blur(5px); display:grid; place-items:center; padding:24px; }
.modal { width:min(760px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 24px 80px rgba(10,20,40,.28); }
.modal.wide { width:min(1180px,100%); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 21px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; }
.modal-title { font-weight:900; font-size:18px; }
.icon-btn { width:36px; height:36px; border:0; border-radius:10px; background:transparent; display:grid; place-items:center; }
.icon-btn:hover { background:var(--surface-2); }
.modal-body { padding:21px; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:15px 21px; border-top:1px solid var(--line); position:sticky; bottom:0; background:#fff; }
.split-editor { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.skill-source { min-height:560px; }
.chat-box { background:var(--surface-2); border-radius:14px; padding:14px; min-height:180px; max-height:260px; overflow:auto; display:grid; align-content:start; gap:9px; }
.chat-message { max-width:88%; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.5; }
.chat-message.bot { background:#fff; border:1px solid var(--line); }
.chat-message.user { justify-self:end; background:var(--primary); color:#fff; }
.diff-box { border:1px solid #b9d0ff; background:#f5f8ff; border-radius:13px; padding:13px; margin-top:12px; }
.style-editor { display:grid; grid-template-columns:350px 1fr; gap:16px; }
.style-controls { display:grid; gap:13px; }
.color-row { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border:3px solid #fff; border-radius:9px; box-shadow:0 0 0 1px var(--line); background:var(--swatch); }
.swatch.selected { box-shadow:0 0 0 2px var(--primary); }
.phone-preview { background:#eef2f8; border-radius:16px; padding:22px; min-height:650px; }
.phone-paper { max-width:430px; min-height:600px; margin:auto; background:#fff; padding:27px; box-shadow:var(--shadow); }
.template-live-preview { max-height:none; }

.toast-stack { position:fixed; right:20px; bottom:20px; z-index:100; display:grid; gap:9px; }
.toast { background:#20242c; color:#fff; border-radius:12px; padding:12px 15px; box-shadow:var(--shadow); font-size:13px; animation:toast-in .2s ease; max-width:380px; }
.toast.error { background:#8f1717; }
.toast.success { background:#176d3a; }
@keyframes toast-in { from { transform:translateY(8px); opacity:0; } }
.spinner { width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.mobile-nav { display:none; }
@media (max-width:1100px) {
  .grid.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .skill-grid,.template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .asset-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:780px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-brand { display:none; }
  .auth-card-wrap { padding:22px; }
  .app-shell, .app-shell.focus { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .topbar { height:60px; padding:0 16px; }
  .topbar-user { display:none; }
  .main { padding:19px 14px 86px; }
  .page-head { display:block; }
  .head-actions { margin-top:14px; }
  .grid.metrics,.grid.two,.grid.three,.source-grid,.skill-grid,.template-grid,.asset-grid { grid-template-columns:1fr; }
  .create-layout,.editor-grid,.split-editor,.style-editor { grid-template-columns:1fr; }
  .sticky { position:static; }
  .list-row { grid-template-columns:minmax(0,1fr) auto; }
  .list-row > :not(.row-title):not(.row-actions) { display:none; }
  .list-row.header { display:none; }
  .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(4,1fr); left:0; right:0; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--line); padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); }
  .mobile-nav button { border:0; background:transparent; color:var(--muted); padding:7px 3px; display:grid; gap:3px; justify-items:center; font-size:11px; }
  .mobile-nav button.active { color:var(--primary); font-weight:800; }
  .modal-overlay { padding:0; align-items:end; }
  .modal,.modal.wide { width:100%; max-height:95vh; border-radius:20px 20px 0 0; }
  .skill-source { min-height:360px; }
  .copy-field { grid-template-columns:1fr; }
}