.admin-body { background: #f6f8fb; color: var(--ink); }.admin-frame { min-height: 100vh; }.admin-topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: #fff; }.admin-topbar .brand em { color: #98a2b3; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .1em; margin-left: 4px; }.admin-user { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }.admin-user a { color: var(--ink); font-weight: 700; }.role-badge { padding: 3px 8px; color: var(--blue); background: #edf3ff; border-radius: 999px; font-size: 11px; }.admin-main { display: grid; grid-template-columns: 220px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }.admin-sidebar { min-height: calc(100vh - 70px); display: flex; flex-direction: column; padding: 34px 20px; border-right: 1px solid var(--line); background: #fff; }.admin-nav-item { padding: 11px 13px; margin: 2px 0; color: var(--muted); background: transparent; border: 0; border-radius: 8px; text-align: left; font: inherit; cursor: pointer; }.admin-nav-item:hover, .admin-nav-item.is-active { color: var(--blue); background: #edf3ff; font-weight: 700; }.admin-sidebar-foot { margin-top: auto; padding: 12px 13px; color: #98a2b3; font-size: 13px; }.admin-content { padding: 42px 48px 80px; min-width: 0; position: relative; }.admin-view { display: none; }.admin-view.is-visible { display: block; }.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 29px; }.panel-heading h1 { margin: 10px 0 3px; font-size: 34px; line-height: 1.2; letter-spacing: -.05em; }.panel-heading p { margin: 0; color: var(--muted); font-size: 14px; }.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.stat-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }.stat-card span { display: block; color: #98a2b3; font-size: 13px; }.stat-card strong { display: block; margin-top: 8px; font-size: 30px; line-height: 1.2; }.quick-panel { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; padding: 28px; background: #eaf1ff; border: 1px solid #d9e6ff; border-radius: 12px; }.quick-panel h2 { margin: 11px 0 7px; font-size: 22px; }.quick-panel p { max-width: 690px; margin: 0; color: #52627c; font-size: 14px; }.quick-mark { width: 75px; height: 75px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 23px; font-size: 32px; font-weight: 800; transform: rotate(6deg); }.data-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 11px; }.data-table { width: 100%; border-collapse: collapse; min-width: 650px; }.data-table th, .data-table td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }.data-table th { color: #98a2b3; font-size: 12px; font-weight: 800; }.data-table td { color: #475467; font-size: 14px; }.data-table tr:last-child td { border-bottom: 0; }.data-table td strong { display: block; color: var(--ink); font-size: 15px; }.status-label { display: inline-block; padding: 3px 8px; color: #667085; background: #f2f4f7; border-radius: 999px; font-size: 12px; }.status-published { color: #16704e; background: #e8f7f0; }.status-draft { color: #9a6700; background: #fff5d6; }.status-offline { color: #b42318; background: #fff0ee; }.table-actions { display: flex; flex-wrap: wrap; gap: 7px; }.mini-button { padding: 6px 9px; color: var(--blue); background: #edf3ff; border: 0; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; }.mini-button:hover { background: #dce8ff; }.mini-button.danger { color: #b42318; background: #fff0ee; }.editor-panel { margin-top: 24px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }.editor-panel.is-hidden { display: none; }.is-hidden { display: none !important; }.topic-form-actions { display: flex; align-items: center; gap: 9px; }.editor-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 19px; }.editor-heading h2 { margin: 9px 0 0; font-size: 23px; }.icon-button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: #f2f4f7; cursor: pointer; font-size: 23px; line-height: 1; }.editor-form, .settings-form { display: grid; gap: 16px; }.form-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }.admin-content label, .auth-card label, .modal-card label { display: grid; gap: 6px; color: #475467; font-size: 13px; font-weight: 700; }.admin-content input, .admin-content textarea, .admin-content select, .auth-card input, .modal-card input { width: 100%; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #d0d5dd; border-radius: 7px; font: inherit; font-size: 14px; font-weight: 400; }.admin-content textarea { resize: vertical; line-height: 1.6; }.admin-content input:focus, .admin-content textarea:focus, .admin-content select:focus, .auth-card input:focus, .modal-card input:focus { outline: 3px solid #dbe7ff; border-color: var(--blue); }.admin-content small, .auth-card small, .modal-card small { color: #98a2b3; font-size: 12px; font-weight: 400; }.editor-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 9px; }.form-help { color: #98a2b3; font-size: 12px; margin-right: auto; }.inline-create, .member-create { display: grid; grid-template-columns: 1fr 1fr 1.5fr auto; gap: 9px; margin-bottom: 17px; }.member-create { grid-template-columns: 1.4fr 1fr 110px auto; }.inline-create input, .member-create input, .member-create select { min-width: 0; }.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 19px; }.image-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 9px; }.image-card img { display: block; width: 100%; height: 145px; object-fit: cover; background: #f2f4f7; }.image-card-body { padding: 10px; }.image-card-name { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.image-card-actions { display: flex; gap: 5px; margin-top: 9px; }.upload-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; background: #fff; border: 1px dashed #b9c2d0; border-radius: 10px; }.upload-box input { flex: 1; padding: 7px; border: 0; }.notice { margin: 16px 0; padding: 11px 13px; border-radius: 7px; font-size: 13px; }.notice-error { color: #b42318; background: #fff0ee; }.notice-success { color: #16704e; background: #e8f7f0; }.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; background: #f6f8fb; }.auth-card { width: min(100%, 420px); padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }.auth-brand { margin-bottom: 51px; }.auth-card h1 { margin: 13px 0 7px; font-size: 30px; letter-spacing: -.05em; }.auth-copy { margin: 0 0 24px; color: var(--muted); font-size: 14px; }.stack-form { display: grid; gap: 15px; }.button-wide { width: 100%; }.auth-back { display: block; margin-top: 24px; color: #98a2b3; text-align: center; font-size: 13px; }.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; padding: 16px; background: rgba(16,24,40,.52); }.modal-backdrop.is-open { display: grid; }.modal-card { width: min(100%, 420px); padding: 30px; background: #fff; border-radius: 13px; box-shadow: 0 25px 75px rgba(16,24,40,.2); }.modal-card h2 { margin: 10px 0 6px; font-size: 24px; }.modal-card p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }.toast { position: fixed; top: 88px; right: 30px; z-index: 120; max-width: 380px; padding: 12px 16px; color: #fff; background: var(--ink); border-radius: 8px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s, transform .2s; font-size: 13px; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast.error { background: #b42318; }
.table-subtext { display: block; overflow: hidden; max-width: 360px; color: #98a2b3; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.empty-state { padding: 40px 20px; color: #98a2b3; text-align: center; font-size: 14px; }
.editor-field { display: grid; gap: 6px; }.editor-field-heading { display: flex; align-items: center; justify-content: space-between; }.editor-field-heading label { display: block; }.live-preview-pill { display: inline-flex; align-items: center; gap: 6px; color: #16704e; font-size: 12px; font-weight: 700; }.live-preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #35a776; box-shadow: 0 0 0 3px #dff5eb; }.EasyMDEContainer { min-width: 0; }.editor-toolbar { padding: 7px 9px; border-color: #d0d5dd; border-radius: 7px 7px 0 0; background: #f8fafc; }.editor-toolbar button { color: #475467; }.editor-toolbar button:hover, .editor-toolbar button.active { color: var(--blue); background: #eaf1ff; border-color: #c9d9fc; }.CodeMirror { min-height: 420px; padding: 13px 15px; color: #344054; border-color: #d0d5dd; border-radius: 0 0 7px 7px; font: 15px/1.75 Consolas, "Noto Sans SC", monospace; }.editor-preview, .editor-preview-side { padding: 22px; color: #344054; background: #fff; font-size: 16px; line-height: 1.8; }.editor-preview-side { border-color: #d0d5dd; }.editor-preview h1, .editor-preview-side h1 { margin: 0 0 18px; font-size: 28px; line-height: 1.3; }.editor-preview h2, .editor-preview-side h2 { margin: 27px 0 10px; font-size: 22px; }.editor-preview h3, .editor-preview-side h3 { margin: 22px 0 8px; font-size: 19px; }.editor-preview p, .editor-preview-side p { margin: 0 0 16px; }.editor-preview a, .editor-preview-side a { color: var(--blue); text-decoration: underline; }.editor-preview code, .editor-preview-side code { padding: 2px 5px; color: #1c4eac; background: #edf3ff; border-radius: 4px; font: .88em Consolas, monospace; }.editor-preview pre, .editor-preview-side pre { overflow-x: auto; padding: 13px 15px; color: #dbe5f4; background: #17202f; border-radius: 7px; }.editor-preview pre code, .editor-preview-side pre code { padding: 0; color: inherit; background: transparent; }.editor-preview img, .editor-preview-side img { display: block; max-width: 100%; margin: 18px auto; border-radius: 7px; }.editor-preview blockquote, .editor-preview-side blockquote { margin: 18px 0; padding: 10px 15px; background: #f7f8fa; border-left: 3px solid var(--blue); }.editor-preview ul, .editor-preview ol, .editor-preview-side ul, .editor-preview-side ol { padding-left: 24px; }.editor-preview hr, .editor-preview-side hr { border: 0; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .admin-topbar { padding: 0 16px; }.admin-user > span:first-child { display: none; }.admin-main { display: block; }.admin-sidebar { min-height: auto; display: flex; flex-direction: row; overflow-x: auto; gap: 3px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); }.admin-sidebar .sidebar-label, .admin-sidebar-foot { display: none; }.admin-nav-item { white-space: nowrap; }.admin-content { padding: 28px 16px 60px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.panel-heading { align-items: start; flex-direction: column; gap: 15px; }.quick-mark { display: none; }.form-grid, .inline-create, .member-create { grid-template-columns: 1fr; }.editor-panel { padding: 18px; }.editor-actions { justify-content: start; }.form-help { width: 100%; }.toast { top: 74px; right: 16px; left: 16px; max-width: none; }.editor-preview-side { position: static !important; width: 100% !important; height: auto !important; min-height: 280px; border-top: 1px solid #d0d5dd; border-left: 0; }.CodeMirror { min-height: 280px; } }