:root{
  /* 极简 黑白 配色覆盖（admin 专用） */
  --bg: #ffffff; /* 页面背景白 */
  --card: #ffffff; /* 卡片白 */
  --muted: #666666; /* 中性灰 */
  --text: #0b0b0b; /* 近黑文字 */
  --accent: #7C3AED; /* 主色（紫） */
  --accent-2: #6D28D9;
  --accent-3: #6B21A8;
  --glass: rgba(0,0,0,0.04);
  --radius: 8px;
  --header-height: 64px;
  --footer-height: 40px;
}
.root, html, body { height: 100%; }
/* Admin layout */
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;height:100%;margin:0}
/* admin container: full width and left-aligned sidebar on desktop */
.admin-wrap{display:flex;min-height:calc(100vh - var(--header-height) - var(--footer-height));align-items:stretch}
.admin-wrap{display:flex;min-height:calc(100vh - var(--header-height) - var(--footer-height));align-items:stretch;justify-content:flex-start;padding-left:12px;width:100%;max-width:none !important}
/* 把侧边栏改为文档流内元素，整体容器居中对齐 */
.admin-sidebar{width:220px;background:transparent;border-right:1px solid var(--glass);padding:18px;display:flex;flex-direction:column;position:relative;top:0;left:0;bottom:auto;height:auto;overflow:visible;z-index:10;margin-right:18px;flex:0 0 220px}
.sidebar-brand{font-weight:900;font-size:18px;margin-bottom:14px;color:var(--accent);letter-spacing:0.6px}
.sidebar-nav{display:flex;flex-direction:column;gap:8px}
.nav-item{background:transparent;border:0;color:var(--muted);text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;transition:all .18s ease}
.nav-item:hover{transform:translateX(4px);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(168,85,247,0.06));color:var(--text);box-shadow:0 12px 30px rgba(124,58,237,0.12)}
.admin-main{flex:1;padding:28px;overflow:auto;margin:0;min-height:calc(100vh - var(--header-height) - var(--footer-height));max-width:1200px;width:100%;box-sizing:border-box}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}

/* top header bar for admin pages */
.site-header{background:linear-gradient(90deg, rgba(124,58,237,0.06), rgba(28,16,45,0.0));border-bottom:1px solid rgba(255,255,255,0.02);height:var(--header-height);display:flex;align-items:center;padding:0 16px;margin-bottom:6px}
.site-header .brand{color:var(--text);font-weight:800;margin-left:6px}
.site-header{background:transparent;border-bottom:1px solid var(--glass);height:var(--header-height);display:block;padding:0 16px;margin-bottom:6px;position:sticky;top:0;z-index:60}
/* 默认移动端/小屏：brand 保持文档流位置 */
.site-header .brand{color:var(--text);font-weight:800;position:static;display:inline-flex;align-items:center;gap:8px}
.site-header .brand img, .brand-logo{height:32px;width:auto;display:inline-block}

/* 桌面视图：把 logo 固定到左上角 */
@media (min-width:120px){
  .site-header .brand{position:absolute;left:16px;top:12px;height:auto}
  .site-header .brand img, .brand-logo{height:36px}
}

/* 桌面：保证 header 内部内容居中，同时 brand 绝对定位在左上 */
@media (min-width:120px){
  .site-header .header-inner, .site-header .container.header-inner{ display:flex; justify-content:center; align-items:center; position:relative }
}

/* 隐藏页眉中的个人中心入口（非破坏性） */
.personal-btn{display:none !important}

/* cards */
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow: 0 12px 40px rgba(3,1,10,0.7);border:1px solid rgba(124,58,237,0.04)}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:none;border:1px solid var(--glass)}
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat-card{padding:16px;text-align:center}
.stat-card .h2{font-size:20px;font-weight:800;color:var(--text)}

/* tables */
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table thead th{background:transparent;padding:10px;text-align:left;color:var(--muted);font-weight:700}
.admin-table tbody td{padding:10px;border-top:1px solid rgba(255,255,255,0.03)}
.admin-table img{border-radius:8px}
.admin-table tbody tr:hover{background:linear-gradient(90deg, rgba(124,58,237,0.02), rgba(0,0,0,0.02));}
.admin-table{border-radius:10px;overflow:hidden}

/* forms */
.form-row{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.form-row label{width:140px;color:var(--muted);font-size:13px}
.form-row input[type="text"], .form-row input[type="number"], input, select, textarea{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));color:var(--text)}
.form-actions{display:flex;gap:8px;margin-top:8px}

.form-grid{display:flex;gap:12px;align-items:flex-start}
.form-left{flex:1}
.form-right{flex:0 0 300px;display:flex;flex-direction:column;gap:12px}
.media-preview{display:flex;flex-direction:column;gap:8px}
.preview-box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));border-radius:10px;padding:12px;border:1px dashed rgba(124,58,237,0.08);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px}
.preview-box img{max-width:100%;max-height:220px;border-radius:10px;object-fit:cover}
.small-muted{font-size:12px;color:var(--muted)}

@media (max-width:800px){ .form-grid{grid-template-columns:1fr; } }

/* buttons */
.btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.small{padding:6px 8px;font-size:13px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:0;color:#fff;box-shadow:0 8px 20px rgba(124,58,237,0.18);padding:10px 14px;border-radius:10px}
.btn.danger{background:transparent;border:1px solid rgba(239,68,68,0.12);color:#ff7b94}

/* small accent headings inside cards */
.card h4{color:var(--accent-3);font-weight:700}

/* custom scrollbar for admin panels */
::-webkit-scrollbar{height:8px;width:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(124,58,237,0.18), rgba(124,58,237,0.06));border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
/* custom scrollbar: subtle neutral */
::-webkit-scrollbar{height:8px;width:10px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* responsive */
@media (max-width:800px){
  /* 手机端：简单堆叠，侧边栏收起成顶部版 */
  .admin-wrap{flex-direction:column;justify-content:flex-start}
  .admin-sidebar{width:100%;position:relative;border-right:0;border-bottom:1px solid var(--glass);padding:12px}
  .admin-main{max-width:100%;padding:12px;margin-top:12px}
}

/* small helpers */
.muted{color:var(--muted)}
.h2{font-size:18px}

/* table action styles */
.admin-table button{border-radius:8px;padding:6px 8px}

/* improve input focus */
input:focus, textarea:focus{outline:none;box-shadow:0 0 0 6px rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.6)}

/* polished card headings */
.card h3, .card h4{margin:0 0 8px 0;color:var(--text)}

.muted{color:var(--muted)}

/* footer area */
.site-footer{height:var(--footer-height);display:flex;align-items:center;padding:0 12px;border-top:1px solid rgba(255,255,255,0.02);}

/* Desktop-first admin: on small screens show a clear overlay telling user to use PC */
.admin-mobile-notice{display:none}
/* reduce mobile breakpoint so medium desktop windows are not treated as mobile */
@media (max-width:700px){
  /* hide admin UI elements to avoid accidental mobile usage */
  .admin-sidebar, .admin-main, .admin-header, .admin-wrap { display:none !important; }
  .site-header{display:none !important}
  .admin-mobile-notice{display:flex;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:24px;background:#fff;color:#111;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
  .admin-mobile-notice .box{max-width:720px;background:#fff;border-radius:10px;padding:20px;border:1px solid #eee;box-shadow:0 8px 30px rgba(2,6,23,0.08);text-align:center}
  .admin-mobile-notice h2{margin:0 0 8px;font-size:20px;color:#0f172a}
  .admin-mobile-notice p{color:#334155;margin:0 0 12px}
}

/* preview hint and help-text */
.preview-box .hint{font-size:12px;color:var(--muted);margin-top:8px}
.form-row .help-text{display:block;color:var(--muted);font-size:12px;margin-top:4px}

/* specific preview sizing for thumbnail (1:1) and detail (3:4) in admin form */
#thumbPreview{ width:120px; height:120px; object-fit:cover; border-radius:8px; display:block }
#detailPreview{ width:180px; height:240px; object-fit:cover; border-radius:8px; display:block }
#thumbPreview[style*="display:none"], #detailPreview[style*="display:none"]{ display:none }

/* Admin-specific overrides to avoid main-site .container or global rules squeezing admin layout */
.admin-wrap .container{ max-width: none !important; margin: 0 !important; padding: 0 !important }
.admin-wrap{ padding-right:16px }

/* Contents (作品管理) card grid */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; align-items:start }
.content-card{ border-radius:10px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); border:1px solid rgba(0,0,0,0.04); padding:0; display:flex; flex-direction:column }
.content-card .thumb{ width:100%; height:160px; background:#f3f4f6; display:block; object-fit:cover }
.content-card .card-body{ padding:10px; display:flex; flex-direction:column; gap:8px }
.content-card .title{ font-weight:700; font-size:14px; color:var(--text); line-height:1.2 }
.content-card .meta{ color:var(--muted); font-size:12px }
.content-card .card-actions{ display:flex; gap:8px; margin-top:auto }
.content-card .card-actions .btn{ flex:0 }
.category-section{ margin-bottom:18px }
.category-section h3{ margin:0 0 8px 0; font-size:16px }

/* Upload target styles (clickable preview containers) */
.upload-target{ display:block }
.upload-target .preview-box{ border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center }
.upload-target .preview-box img{ width:100%; height:100%; object-fit:cover }

/* upload preview layout in upload form: right column contains stacked previews with equal width */
.form-grid{ display:flex; gap:12px; align-items:flex-start }
.form-right{ flex:0 0 340px; width:340px }
.form-left{ flex:1 }
.form-right .preview-box{ width:100% }
.form-right .preview-square{ aspect-ratio: 1 / 1 }
.form-right .preview-portrait{ aspect-ratio: 3 / 4 }
.form-right .preview-box img{ width:100%; height:100%; object-fit:cover }

@media (max-width:900px){
  .form-grid{ flex-direction:column }
  .form-right{ width:100%; flex:none }
}