:root {
  --page: #f5faf7;
  --panel: #ffffff;
  --panel-soft: #f8fcfa;
  --line: #dcebe4;
  --text: #203d35;
  --muted: #779088;
  --primary: #42b883;
  --primary-dark: #218c63;
  --primary-pale: #eff9f2;
  --orange: #f39a58;
  --shadow: 0 18px 50px rgba(35, 86, 67, .09);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--page); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
.hidden { display: none !important; }
.toast-host { position: fixed; top: 20px; right: 24px; z-index: 30; }
.toast { padding: 12px 18px; border-radius: 12px; color: #fff; background: #244d3e; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.login-view { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 28px; background: radial-gradient(circle at 12% 12%, #dff7e7 0, transparent 32%), linear-gradient(145deg, #f8fffa, #eff9f2 52%, #fffaf4); }
.login-orb { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .65; }
.orb-one { width: 360px; height: 360px; right: -120px; top: -120px; background: #d4f0df; }
.orb-two { width: 260px; height: 260px; bottom: -100px; left: -80px; background: #f9e5cd; }
.login-card { position: relative; z-index: 1; width: min(430px, 100%); padding: 42px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: 0 28px 70px rgba(54, 102, 80, .15); backdrop-filter: blur(18px); }
.brand-lockup { display: flex; gap: 12px; align-items: center; }
.brand-lockup.centered { justify-content: center; margin-bottom: 38px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px 14px 14px 4px; color: #fff; font-size: 21px; font-weight: 900; background: linear-gradient(135deg, #6bd39c, #25976b); box-shadow: 0 9px 18px rgba(37,151,107,.22); }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-size: 17px; letter-spacing: .04em; }
.brand-lockup small { margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.login-heading { margin-bottom: 28px; text-align: center; }
.login-heading span, .eyebrow { color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.login-heading h1 { margin: 8px 0 5px; font-size: 29px; line-height: 1.2; }
.login-heading p { margin: 0; color: var(--muted); }
label { display: block; margin-bottom: 18px; color: #54756a; font-size: 12px; font-weight: 800; }
input, textarea, select { width: 100%; margin-top: 7px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background: #fbfefc; transition: .18s; }
input:focus, textarea:focus, select:focus { border-color: #80c9a6; box-shadow: 0 0 0 4px rgba(66,184,131,.12); background: #fff; }
textarea { resize: vertical; }
.primary, .secondary { min-height: 40px; padding: 0 18px; border-radius: 11px; font-weight: 800; }
.primary { color: #fff; background: linear-gradient(135deg, #55c891, #25976b); box-shadow: 0 9px 20px rgba(37,151,107,.18); }
.primary:hover { filter: brightness(1.04); }
.secondary { color: var(--primary-dark); background: var(--primary-pale); }
.wide { width: 100%; margin-top: 8px; }
.form-message { min-height: 20px; margin: 12px 0 0; color: #c85d45; font-size: 12px; }
.login-foot { position: absolute; bottom: 18px; margin: 0; color: #78968b; font-size: 12px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; display: flex; width: 250px; flex-direction: column; padding: 30px 20px 22px; background: #fbfffc; border-right: 1px solid var(--line); }
.sidebar .brand-lockup { padding: 0 10px 32px; }
.side-nav { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 15px; border-radius: 12px; color: #6f8b81; text-align: left; background: transparent; font-weight: 800; }
.nav-item i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #6e9183; background: #eef7f1; font-style: normal; font-size: 13px; }
.nav-item.active { color: var(--primary-dark); background: #eaf8ef; }
.nav-item.active i { color: #fff; background: var(--primary); }
.sidebar-note { display: flex; gap: 9px; align-items: center; margin: auto 8px 16px; padding: 13px 10px; border-radius: 12px; background: #f2faf5; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4bc184; box-shadow: 0 0 0 4px #dff5e7; }
.sidebar-note b, .sidebar-note small { display: block; }
.sidebar-note b { font-size: 11px; }
.sidebar-note small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.logout-button { min-height: 40px; border-radius: 11px; color: #79948b; background: #f4f8f6; font-weight: 800; }
.main-content { width: calc(100% - 250px); margin-left: 250px; padding: 32px 5vw 70px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.topbar h1, .section-toolbar h2 { margin: 5px 0 0; font-size: 28px; line-height: 1.2; }
.topbar-user { display: flex; gap: 9px; align-items: center; color: #54776b; font-size: 12px; font-weight: 800; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: #f09a59; }
.welcome-banner { display: flex; align-items: center; justify-content: space-between; min-height: 190px; padding: 32px 38px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #2da574, #54c891); box-shadow: 0 20px 34px rgba(45,165,116,.2); }
.welcome-banner h2 { margin: 8px 0 9px; font-size: 27px; }
.welcome-banner p { max-width: 620px; margin: 0; color: rgba(255,255,255,.8); }
.eyebrow.light { color: rgba(255,255,255,.72); }
.banner-mark { display: grid; width: 100px; height: 100px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: rgba(255,255,255,.88); font-size: 42px; font-weight: 900; background: rgba(255,255,255,.12); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.stat-grid article, .info-card, .quick-grid button, .content-card { border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: var(--shadow); }
.stat-grid article { padding: 22px; }
.stat-grid span, .stat-grid small { display: block; color: var(--muted); }
.stat-grid strong { display: block; margin: 7px 0 2px; color: var(--primary-dark); font-size: 31px; }
.stat-grid small { font-size: 11px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.quick-grid button { display: flex; gap: 13px; align-items: center; padding: 19px; text-align: left; }
.quick-grid button div { flex: 1; }
.quick-grid b, .quick-grid small { display: block; }
.quick-grid small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.quick-grid em { color: var(--primary-dark); font-size: 21px; font-style: normal; }
.quick-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; font-weight: 900; }
.quick-icon.green { color: #248d62; background: #e8f8ee; }.quick-icon.orange { color: #c86d2d; background: #fff0e4; }
.info-card { padding: 25px; }.info-card h3 { margin: 4px 0 0; }.info-card p { margin: 12px 0 0; color: var(--muted); }
.section-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-toolbar p { margin: 7px 0 0; color: var(--muted); }
.content-card { padding: 22px; }
.list-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }.list-toolbar input { flex: 1; min-width: 0; margin: 0; }.list-toolbar select { width: 140px; margin: 0; }.list-toolbar button { flex-shrink: 0; }
.article-row, .material-row { display: flex; gap: 15px; align-items: center; padding: 15px 0; border-top: 1px solid #edf4f0; }.article-row:first-child, .material-row:first-child { border-top: 0; }
.row-cover { width: 108px; height: 67px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; background: #eaf6ef; }.row-cover.empty { display: grid; place-items: center; color: #8ab19d; font-size: 22px; }
.row-main { flex: 1; min-width: 0; }.row-main h3, .row-main p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.row-main h3 { margin: 0; font-size: 15px; }.row-main p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }.row-meta { margin-top: 7px; color: #9aafa7; font-size: 11px; }
.status-pill { display: inline-block; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; }.status-pill.draft { color: #ab751e; background: #fff4d8; }.status-pill.published, .status-pill.active { color: #27825b; background: #e4f7eb; }.status-pill.offline, .status-pill.inactive { color: #9a7770; background: #f7ece9; }
.row-actions { display: flex; gap: 7px; flex-shrink: 0; }.text-button { padding: 7px 9px; border-radius: 8px; color: var(--primary-dark); background: #eef9f2; font-size: 12px; font-weight: 800; }.text-button.warn { color: #ad693c; background: #fff2e8; }
.editor-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--primary-dark); font-weight: 800; }.back-button { padding: 5px 0; color: var(--muted); background: transparent; font-weight: 800; }
.editor-card { padding: 26px; }.article-form { max-width: 1120px; }.article-fields { max-width: 940px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.field-hint { display: block; margin-top: 4px; color: #9aaeA6; font-size: 11px; font-weight: 400; }.cover-row { display: flex; gap: 22px; align-items: end; padding: 14px; border: 1px solid #dbe9e2; border-radius: 8px; background: #f9fcfa; transition: border-color .18s ease, background .18s ease; }.cover-row.is-invalid { border-color: #d87565; background: #fff8f6; }.required-badge { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; color: #b14e3d; background: #fff0ec; font-size: 10px; font-weight: 800; vertical-align: 1px; }.cover-preview { width: 180px; height: 100px; border-radius: 6px; object-fit: cover; background: #eef6f2; }
.tag-field { margin-bottom: 18px; }.tag-field .field-hint { margin-bottom: 7px; }.tag-input-shell { display: flex; min-height: 46px; padding: 6px 10px; align-items: center; flex-wrap: wrap; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: #fbfefc; transition: .18s; }.tag-input-shell:focus-within { border-color: #80c9a6; box-shadow: 0 0 0 4px rgba(66,184,131,.12); background: #fff; }.tag-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }.tag-chip { display: inline-flex; height: 30px; padding: 0 5px 0 10px; align-items: center; gap: 4px; border-radius: 6px; color: #27765a; background: #e8f6ed; font-size: 12px; font-weight: 700; }.tag-chip button { display: grid; width: 21px; height: 21px; padding: 0; place-items: center; border-radius: 50%; color: #6b9988; background: transparent; font-size: 17px; line-height: 1; }.tag-chip button:hover { color: #fff; background: #61ad8b; }.tag-entry-input { width: 180px; min-width: 150px; margin: 0; padding: 6px 3px; flex: 1; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.tag-entry-input:focus { border: 0; background: transparent; box-shadow: none; }
.editor-label-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 26px 0 9px; }.field-label { display: block; color: #54756a; font-size: 12px; font-weight: 800; }.editor-word-count { flex-shrink: 0; color: #88a198; font-size: 12px; font-weight: 700; }
.editor-workspace { overflow: hidden; border: 1px solid #cfe2d9; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(35, 86, 67, .07); }.editor-toolbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #dcebe4; background: #f7fbf8; }.editor-toolbar .w-e-bar { flex-wrap: wrap; padding: 6px 8px; background: transparent; }.editor-toolbar .w-e-bar-item button { border-radius: 6px; color: #486c60; }.editor-toolbar .w-e-bar-item button:hover { background: #e7f5ed; }.rich-editor { height: 520px; overflow-y: auto; background: #fff; }.rich-editor .w-e-text-container { min-height: 100%; background: #fff; }.rich-editor .w-e-text-container [data-slate-editor] { min-height: 500px; padding: 30px 44px 70px; color: #263f37; font-size: 16px; line-height: 1.9; }.rich-editor .w-e-text-placeholder { top: 30px; left: 44px; color: #a6b8b1; font-style: normal; }.rich-editor img { max-width: 100%; height: auto; border-radius: 6px; }.editor-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }.upload-drop { display: grid; place-items: center; gap: 5px; min-height: 130px; margin: 8px 0 4px; border: 1px dashed #a6d5bb; border-radius: 13px; color: #598173; background: #f5fcf7; }.upload-symbol { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 22px; }.upload-drop small { color: var(--muted); }.material-row { align-items: flex-start; }.file-symbol { display: grid; width: 43px; height: 50px; place-items: center; border-radius: 10px; color: #27825b; background: #e6f7ec; font-size: 11px; font-weight: 900; }.material-row .row-main p { white-space: normal; }.material-row .row-main h3 { white-space: normal; }
@media (max-width: 850px) { .sidebar { width: 206px; }.main-content { width: calc(100% - 206px); margin-left: 206px; padding: 26px 24px 50px; }.welcome-banner { padding: 25px; }.banner-mark { width: 75px; height: 75px; font-size: 30px; } }
@media (max-width: 680px) { .app-shell { display: block; }.sidebar { position: static; width: 100%; padding: 16px; }.sidebar .brand-lockup { padding: 0 4px 15px; }.side-nav { display: flex; overflow-x: auto; }.nav-item { width: auto; white-space: nowrap; }.sidebar-note, .logout-button { display: none; }.main-content { width: 100%; margin: 0; padding: 20px 15px 40px; }.topbar { margin-bottom: 20px; }.topbar h1, .section-toolbar h2 { font-size: 23px; }.topbar-user { display: none; }.welcome-banner { min-height: 180px; padding: 24px; }.welcome-banner h2 { font-size: 23px; }.banner-mark { display: none; }.stat-grid, .quick-grid, .form-row { grid-template-columns: 1fr; }.section-toolbar { align-items: flex-start; flex-direction: column; }.list-toolbar { flex-wrap: wrap; }.list-toolbar input { flex-basis: 100%; }.list-toolbar select { flex: 1; width: auto; }.article-row, .material-row { align-items: flex-start; flex-wrap: wrap; }.row-actions { width: 100%; padding-left: 58px; }.cover-row { display: block; }.cover-preview { margin-top: 8px; }.editor-card { padding: 17px; }.editor-label-row { align-items: flex-start; }.rich-editor { height: 440px; }.rich-editor .w-e-text-container [data-slate-editor] { min-height: 420px; padding: 22px 18px 60px; }.rich-editor .w-e-text-placeholder { top: 22px; left: 18px; } }