:root { --admin-blue:#002fa7; --admin-ink:#14171f; --admin-muted:#6f7480; --admin-line:#e2e4e9; --admin-bg:#f3f4f6; }
.admin-shell { position:fixed; inset:0; height:100svh; min-height:0; display:grid; grid-template-columns:230px minmax(0,1fr); overflow:hidden; background:var(--admin-bg); color:var(--admin-ink); font-family:Arial,"PingFang SC",sans-serif; }
.admin-shell * { box-sizing:border-box; }
.admin-sidebar { position:sticky; top:0; height:100vh; padding:28px 18px 20px; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--admin-line); }
.admin-brand { display:grid; grid-template-columns:auto 18px auto; align-items:center; width:max-content; margin:0 12px 50px; color:var(--admin-blue); text-decoration:none; font-size:16px; letter-spacing:-.06em; }
.admin-brand i { height:1px; background:currentColor; }.admin-brand small { grid-column:1/4; margin-top:8px; color:#9297a2; font-size:8px; letter-spacing:.24em; }
.admin-sidebar nav { display:grid; gap:5px; }.admin-sidebar nav button { border:0; border-radius:9px; padding:12px 14px; display:flex; gap:12px; align-items:center; background:transparent; color:#626773; font-size:13px; text-align:left; cursor:pointer; }.admin-sidebar nav button span { width:20px; color:#9398a3; text-align:center; }.admin-sidebar nav button:hover,.admin-sidebar nav button.is-active { background:#eef2ff; color:var(--admin-blue); }.admin-sidebar nav button.is-active span { color:var(--admin-blue); }
.admin-sidebar-foot { margin-top:auto; padding:18px 12px 0; border-top:1px solid var(--admin-line); display:grid; gap:13px; font-size:10px; color:var(--admin-muted); }.admin-sidebar-foot span { display:flex; align-items:center; gap:7px; }.admin-sidebar-foot button { border:0; padding:0; background:transparent; color:#858b96; font-size:11px; text-align:left; cursor:pointer; }
.admin-workspace { min-width:0; height:100svh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }.admin-topbar { position:sticky; z-index:30; top:0; height:78px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.94); border-bottom:1px solid var(--admin-line); backdrop-filter:blur(12px); }.admin-topbar>div:first-child { display:grid; gap:4px; }.admin-topbar span { color:#8a909b; font-size:9px; letter-spacing:.12em; }.admin-topbar strong { font-size:15px; }.admin-actions { display:flex; gap:8px; align-items:center; }.admin-actions a,.admin-actions button,.admin-heading>button { border:1px solid var(--admin-blue); border-radius:7px; padding:10px 15px; background:var(--admin-blue); color:#fff; font-size:11px; text-decoration:none; cursor:pointer; }.admin-actions a,.admin-actions button.is-secondary { border-color:var(--admin-line); background:#fff; color:#444a55; }
.admin-canvas { max-width:1440px; margin:0 auto; padding:40px 42px 70px; }.admin-heading { margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; }.admin-heading>div>span,.admin-card header span,.admin-preview-card>span { color:var(--admin-blue); font-size:9px; letter-spacing:.18em; }.admin-heading h1 { margin:7px 0 7px; font-size:32px; letter-spacing:-.05em; }.admin-heading p { margin:0; color:var(--admin-muted); font-size:12px; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }.admin-metrics article,.admin-card { border:1px solid var(--admin-line); border-radius:12px; background:#fff; }.admin-metrics article { min-height:145px; padding:20px; display:grid; align-content:space-between; }.admin-metrics span { color:var(--admin-muted); font-size:11px; }.admin-metrics strong { font-size:32px; letter-spacing:-.05em; }.admin-metrics small { display:flex; align-items:center; gap:7px; color:#797f8a; font-size:9px; }
.admin-status-dot { display:inline-block; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#24a55a; box-shadow:0 0 0 3px rgba(36,165,90,.1); }.admin-status-dot.is-blue { background:var(--admin-blue); box-shadow:0 0 0 3px rgba(0,47,167,.1); }.admin-status-dot.is-amber { background:#e7a51d; box-shadow:0 0 0 3px rgba(231,165,29,.12); }
.admin-two-columns { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr); gap:16px; }.admin-card { overflow:hidden; }.admin-card header { min-height:78px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--admin-line); }.admin-card header>div { display:grid; gap:6px; }.admin-card header h2 { margin:0; font-size:18px; }.admin-card header button,.admin-card>button { border:0; background:transparent; color:var(--admin-blue); font-size:10px; cursor:pointer; }
.admin-recent>button { width:100%; min-height:64px; padding:0 20px; display:grid; grid-template-columns:32px minmax(0,1fr) 100px 55px; align-items:center; border-bottom:1px solid #eef0f3; text-align:left; }.admin-recent>button:hover { background:#f8f9fc; }.admin-recent>button>b { color:#a1a6b0; font-size:10px; }.admin-recent>button>span { display:grid; gap:3px; }.admin-recent>button>span strong { font-size:12px; }.admin-recent>button>span small { color:#959aa4; font-size:9px; }.admin-recent em { color:#7f8590; font-size:9px; font-style:normal; }.admin-recent>button>i { color:var(--admin-blue); font-size:9px; font-style:normal; }
.admin-publish { padding-bottom:18px; }.admin-version { padding:22px 20px 16px; display:grid; gap:7px; }.admin-version small { color:#9095a0; font-size:9px; }.admin-version strong { font-size:24px; }.admin-version p { margin:0; color:#7f8590; font-size:10px; line-height:1.6; }.admin-publish ul { margin:0 20px 15px; padding:15px 0; display:grid; gap:11px; border-top:1px solid var(--admin-line); border-bottom:1px solid var(--admin-line); list-style:none; }.admin-publish li { display:flex; align-items:center; gap:9px; color:#626874; font-size:10px; }.admin-publish>button { padding:5px 20px; }
.admin-table-tools { padding:16px 18px; display:flex; justify-content:space-between; border-bottom:1px solid var(--admin-line); }.admin-table-tools label { width:min(360px,40%); display:flex; align-items:center; gap:8px; border:1px solid var(--admin-line); border-radius:7px; padding:9px 12px; }.admin-table-tools input { width:100%; border:0; outline:0; font-size:10px; }.admin-table-tools>div { display:flex; gap:6px; }.admin-table-tools button { border:0; border-radius:6px; padding:8px 12px; background:#f5f6f8; color:#787e89; font-size:9px; }.admin-table-tools button.is-active { background:#eef2ff; color:var(--admin-blue); }.admin-table-head,.admin-table-row { display:grid; grid-template-columns:78px minmax(220px,1.4fr) .5fr .7fr .6fr 55px; align-items:center; column-gap:14px; }.admin-table-head { min-height:42px; padding:0 18px; background:#f7f8fa; color:#8c929c; font-size:9px; }.admin-table-row { min-height:72px; padding:0 18px; border-top:1px solid #eef0f3; color:#5f6570; font-size:10px; }.admin-drag { color:#a5aab3; font-size:10px; }.admin-work-name { display:flex; align-items:center; gap:12px; }.admin-work-name>i { width:44px; height:42px; display:grid; place-items:center; border-radius:6px; background:linear-gradient(135deg,#d9dded,#b9c8ec); color:#fff; font-size:9px; font-style:normal; }.admin-work-name>b { display:grid; gap:4px; color:#242832; font-size:11px; }.admin-work-name small { color:#9ba0aa; font-size:9px; font-weight:400; }.admin-table-row>span:nth-child(5) { display:flex; align-items:center; gap:8px; }.admin-table-row>button { border:0; background:transparent; color:var(--admin-blue); font-size:9px; cursor:pointer; }
.admin-editor-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:16px; }.admin-form { padding-bottom:22px; }.admin-form header { display:grid; justify-content:start; gap:7px; }.admin-form label { margin:18px 22px 0; display:grid; gap:8px; color:#666c77; font-size:10px; }.admin-form input,.admin-form textarea { width:100%; border:1px solid var(--admin-line); border-radius:7px; padding:12px; background:#fbfbfc; color:#20242c; font:inherit; outline:none; }.admin-form textarea { min-height:120px; resize:vertical; line-height:1.6; }.admin-form input:focus,.admin-form textarea:focus { border-color:var(--admin-blue); background:#fff; }.admin-preview-card { padding:22px; display:flex; flex-direction:column; }.admin-preview-card>div { min-height:330px; margin:20px 0; padding:36px 28px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:8px; background:linear-gradient(145deg,#f1f1ed,#dfe4f0); }.admin-preview-card>div small { color:#7d8491; font-size:9px; }.admin-preview-card>div strong { margin:12px 0; font-size:28px; letter-spacing:-.05em; }.admin-preview-card>div p { max-width:390px; margin:0; color:#777e89; font-size:10px; line-height:1.7; }
.admin-language-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.admin-language-grid article { min-height:250px; padding:24px; display:flex; flex-direction:column; }.admin-language-grid article>b { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#eef2ff; color:var(--admin-blue); font-size:13px; }.admin-language-grid article>span { margin-top:30px; color:#707681; font-size:11px; }.admin-language-grid article>strong { margin-top:8px; font-size:28px; }.admin-language-grid article>div { height:4px; margin:12px 0 28px; background:#eceef2; }.admin-language-grid article>div i { display:block; height:100%; background:var(--admin-blue); }.admin-language-grid article>button { margin-top:auto; text-align:left; }
.admin-settings-list { display:grid; gap:10px; }.admin-settings-list article { min-height:78px; padding:0 20px; display:grid; grid-template-columns:minmax(0,1fr) 160px 60px; align-items:center; }.admin-settings-list article>div { display:grid; gap:6px; }.admin-settings-list article span { color:#888e99; font-size:9px; }.admin-settings-list article strong { font-size:12px; }.admin-settings-list article small { display:flex; align-items:center; gap:8px; color:#666c77; font-size:10px; }.admin-settings-list article button { text-align:right; }
.admin-toast { position:fixed; right:24px; bottom:24px; z-index:100; padding:13px 17px; display:flex; gap:10px; align-items:center; border:1px solid var(--admin-line); border-radius:8px; background:#fff; box-shadow:0 16px 45px rgba(20,23,31,.14); font-size:11px; }
.admin-work-editor-head { display:grid; grid-template-columns:160px minmax(0,1fr) auto; align-items:center; gap:20px; margin-bottom:20px; }.admin-back { border:0; padding:0; background:transparent; color:#737985; font-size:10px; text-align:left; cursor:pointer; }.admin-work-title { display:flex; align-items:center; gap:14px; }.admin-work-title>i { width:54px; height:54px; display:grid; place-items:center; border-radius:9px; background:linear-gradient(135deg,#0e3192,#7693e5); color:#fff; font-size:12px; font-style:normal; }.admin-work-title>div { display:grid; gap:4px; }.admin-work-title span { color:#8c929d; font-size:8px; letter-spacing:.16em; }.admin-work-title h1 { margin:0; font-size:23px; }.admin-work-title h1 small { margin-left:10px; color:#8a909a; font-size:11px; font-weight:400; }.admin-work-quick-actions { display:flex; align-items:center; gap:8px; }.admin-work-quick-actions>span { margin-right:8px; display:flex; gap:7px; align-items:center; color:#707681; font-size:9px; }.admin-work-quick-actions button { border:1px solid var(--admin-line); border-radius:7px; padding:10px 13px; background:#fff; color:#555c67; font-size:10px; cursor:pointer; }.admin-work-quick-actions button.is-primary,.admin-work-side button.is-primary { border-color:var(--admin-blue); background:var(--admin-blue); color:#fff; }
.admin-work-tabs { margin-bottom:18px; padding:0 6px; display:flex; gap:26px; border-bottom:1px solid var(--admin-line); }.admin-work-tabs button { position:relative; border:0; padding:12px 2px 14px; display:flex; gap:6px; background:transparent; color:#767c87; font-size:10px; cursor:pointer; }.admin-work-tabs button small { padding:1px 5px; border-radius:7px; background:#e9ebef; color:#898f99; font-size:7px; }.admin-work-tabs button.is-active { color:var(--admin-blue); }.admin-work-tabs button.is-active:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--admin-blue); }
.admin-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:16px; align-items:start; }.admin-detail-main { display:grid; gap:14px; }.admin-editor-section { overflow:visible; }.admin-editor-section>header { min-height:58px; padding:0 20px; justify-content:flex-start; gap:14px; }.admin-editor-section>header span { color:#969ca6; }.admin-editor-section>header h2 { margin:0; font-size:13px; }.admin-editor-section>div { padding:20px; }.admin-field-grid { display:grid; gap:18px; }.admin-field-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-field-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }.admin-field { display:grid; gap:8px; }.admin-field>span { display:flex; justify-content:space-between; color:#555b66; font-size:10px; }.admin-field>span small { color:#a0a5ae; font-size:8px; }.admin-field input,.admin-field textarea,.admin-field select { width:100%; border:1px solid var(--admin-line); border-radius:7px; padding:11px 12px; background:#fbfbfc; color:#242832; font:inherit; font-size:10px; outline:0; }.admin-field textarea { min-height:92px; resize:vertical; line-height:1.65; }.admin-field textarea.is-tall { min-height:170px; }.admin-field input:focus,.admin-field textarea:focus,.admin-field select:focus { border-color:var(--admin-blue); background:#fff; }.admin-field input:disabled { opacity:.5; }
.admin-work-side { display:grid; gap:12px; position:sticky; top:94px; }.admin-work-side>section { padding:18px; display:grid; gap:11px; }.admin-work-side>section>span { color:#8e949e; font-size:8px; letter-spacing:.12em; }.admin-work-side>section>strong { display:flex; align-items:center; gap:8px; font-size:12px; }.admin-work-side>section>p { margin:0; color:#989da7; font-size:8px; }.admin-work-side button { width:100%; border:1px solid var(--admin-line); border-radius:6px; padding:9px 10px; background:#fff; color:#5f6570; font-size:9px; text-align:center; cursor:pointer; }.admin-mini-preview { min-height:145px; padding:15px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:7px; background:linear-gradient(145deg,#d7dce9,#8fa6e4); color:#fff; }.admin-mini-preview i { margin-bottom:auto; font-size:9px; font-style:normal; }.admin-mini-preview strong { font-size:16px; }.admin-mini-preview small { margin-top:4px; font-size:8px; opacity:.8; }.admin-danger-zone button:last-child { color:#bd4050; }
.admin-media-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.admin-upload-box { min-height:230px; border:1px dashed #cbd0da; border-radius:9px; display:flex; flex-direction:column; overflow:hidden; }.admin-upload-box>div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f8f9fb; }.admin-upload-box>div>b { width:34px; height:34px; display:grid; place-items:center; margin-bottom:12px; border-radius:50%; background:#e9edfa; color:var(--admin-blue); }.admin-upload-box>div strong { font-size:11px; }.admin-upload-box>div p { margin:6px 0 0; color:#969ba5; font-size:8px; }.admin-upload-box footer { min-height:48px; padding:0 12px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--admin-line); background:#fff; }.admin-upload-box footer span { display:flex; gap:7px; align-items:center; color:#767c87; font-size:8px; }.admin-upload-box footer button { border:0; background:transparent; color:var(--admin-blue); font-size:8px; }.admin-upload-box.is-compact { min-height:170px; }
.admin-gallery-tools { margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }.admin-gallery-tools span { color:#8d939d; font-size:9px; }.admin-gallery-tools button { border:1px solid var(--admin-blue); border-radius:6px; padding:8px 11px; background:#fff; color:var(--admin-blue); font-size:9px; }.admin-gallery-items { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.admin-gallery-items article { position:relative; min-height:130px; border:1px solid var(--admin-line); border-radius:8px; overflow:hidden; background:#fafbfc; }.admin-gallery-items article>div { height:88px; padding:9px; display:flex; justify-content:space-between; background:linear-gradient(135deg,#dfe3ee,#a8b8df); color:#fff; }.admin-gallery-items article>div span,.admin-gallery-items article>div small { font-size:8px; }.admin-gallery-items article p { margin:10px; color:#737985; font-size:8px; }.admin-gallery-items article>button { position:absolute; right:8px; bottom:7px; border:0; background:transparent; color:#676d78; }
.admin-language-editor { display:grid; gap:18px; }.admin-language-editor-tabs { display:flex; gap:7px; padding-bottom:16px; border-bottom:1px solid var(--admin-line); }.admin-language-editor-tabs button { border:1px solid var(--admin-line); border-radius:7px; padding:8px 11px; display:flex; align-items:center; gap:8px; background:#fff; color:#767c87; font-size:9px; }.admin-language-editor-tabs button.is-active { border-color:var(--admin-blue); background:#eef2ff; color:var(--admin-blue); }.admin-language-editor-tabs .admin-status-dot { width:5px; height:5px; }.admin-repeat-fields { display:grid; gap:7px; }.admin-repeat-fields button { width:max-content; border:0; background:transparent; color:var(--admin-blue); font-size:9px; }
.admin-toggle-list { display:grid; }.admin-toggle-row { position:relative; min-height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf0f3; cursor:pointer; }.admin-toggle-row:last-child { border-bottom:0; }.admin-toggle-row>div { display:grid; gap:6px; }.admin-toggle-row strong { font-size:10px; }.admin-toggle-row p { margin:0; color:#8d939d; font-size:8px; }.admin-toggle-row input { position:absolute; opacity:0; }.admin-toggle-row>i { position:relative; width:34px; height:19px; border-radius:20px; background:#c8ccd4; transition:.2s; }.admin-toggle-row>i:after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#fff; transition:.2s; }.admin-toggle-row input:checked+i { background:var(--admin-blue); }.admin-toggle-row input:checked+i:after { transform:translateX(15px); }.admin-seo-preview { padding:20px; border:1px solid var(--admin-line); border-radius:8px; background:#fbfbfc; }.admin-seo-preview small { color:#387047; font-size:9px; }.admin-seo-preview strong { display:block; margin:8px 0 6px; color:#173b99; font-size:16px; }.admin-seo-preview p { margin:0; color:#666c77; font-size:10px; line-height:1.6; }
@media (max-width:900px) { .admin-shell { grid-template-columns:72px minmax(0,1fr); }.admin-sidebar { padding:24px 9px; }.admin-brand { grid-template-columns:1fr; margin:0 auto 45px; }.admin-brand b:nth-of-type(2),.admin-brand i,.admin-brand small,.admin-sidebar nav button:not(.is-active){ }.admin-brand small { display:none; }.admin-sidebar nav button { justify-content:center; padding:12px 6px; font-size:0; }.admin-sidebar nav button span { font-size:14px; }.admin-sidebar-foot { padding:16px 0 0; align-items:center; }.admin-sidebar-foot span,.admin-sidebar-foot button { font-size:0; }.admin-sidebar-foot .admin-status-dot { margin:auto; }.admin-canvas { padding:30px 22px 60px; }.admin-actions a,.admin-actions button.is-secondary { display:none; }.admin-metrics,.admin-language-grid { grid-template-columns:repeat(2,1fr); }.admin-two-columns,.admin-editor-grid,.admin-detail-layout { grid-template-columns:1fr; }.admin-work-side { position:static; grid-template-columns:repeat(3,1fr); }.admin-work-editor-head { grid-template-columns:1fr auto; }.admin-back { grid-column:1/3; }.admin-work-quick-actions>span { display:none; }.admin-table { overflow:auto; }.admin-table-head,.admin-table-row { min-width:780px; } }
@media (max-width:560px) { .admin-topbar { padding:0 18px; }.admin-canvas { padding:24px 14px 50px; }.admin-heading { align-items:flex-start; gap:18px; }.admin-heading h1 { font-size:26px; }.admin-metrics,.admin-language-grid { grid-template-columns:1fr; }.admin-heading>button { padding:9px 11px; white-space:nowrap; }.admin-table-tools { align-items:stretch; flex-direction:column; gap:10px; }.admin-table-tools label { width:100%; } }