/* 简约风全局样式 + 移动端适配 */
:root { --bg:#ffffff; --fg:#111827; --muted:#6b7280; --line:#e5e7eb; --primary:#2563eb; --primary-600:#1d4ed8; --ring:#c7d2fe; --card:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.04); }
*{box-sizing:border-box}
html,body{height:100%}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
header { border-bottom: 1px solid var(--line); padding: 14px 0; margin-bottom: 16px; background: rgba(255,255,255,.8); backdrop-filter: saturate(120%) blur(6px); position: sticky; top: 0; z-index: 50; }
footer { border-top: 1px solid var(--line); padding: 16px 0; margin-top: 32px; color: var(--muted); font-size: 12px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--card); box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } .container{ max-width:100%; } .topbar{ flex-wrap:wrap; } }
label { display: block; margin: 10px 0 6px; font-weight: 600; font-size: 14px; color: #111827; }
input[type=text], input[type=password], input[type=email], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
input[type=file] { display: block; margin: 8px 0 12px; }
button, .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f9fafb; cursor: pointer; transition: background .15s ease, transform .04s ease; text-decoration: none; color: var(--fg); }
button:hover, .btn:hover { background: #f3f4f6; }
button:active, .btn:active { transform: scale(0.98); }
button.primary, .btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
button.primary:hover, .btn.primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.muted { color: var(--muted); }
.table-responsive{ width:100%; overflow-x:auto; border:1px solid var(--line); border-radius: 10px; }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td { border-bottom: 1px solid #f3f4f6; padding: 12px 10px; text-align: left; font-size: 14px; }
.table th { background:#f9fafb; font-weight:600; color:#374151; }
.notice { padding: 12px; border: 1px solid #e5f0ff; background: #f7faff; color: #1e40af; border-radius: 10px; }
.error { padding: 12px; border: 1px solid #ffe2e2; background: #fff7f7; color: #991b1b; border-radius: 10px; }
.success { padding: 12px; border: 1px solid #dbf0db; background: #f7fff7; color: #14532d; border-radius: 10px; }
/* 更醒目的要求提示 */
.highlight { padding: 14px; border: 2px solid #fde68a; background: #fffbeb; color: #92400e; border-radius: 12px; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#1e40af; font-size:12px; margin-right:6px; border:1px solid var(--line); }
nav.sidebar { width: 260px; border-right: 1px solid var(--line); padding: 16px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
nav.sidebar a { display: block; padding: 10px 12px; color: #111827; text-decoration: none; border-radius: 10px; font-weight: 500; position: relative; z-index: 1; }
nav.sidebar a.active, nav.sidebar a:hover { background: #eef2ff; color: #1e40af; }
.sidebar-toggle{ cursor:pointer; }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 0; }
.layout.collapsed { grid-template-columns: 1fr; }
.layout.collapsed nav.sidebar { position: absolute; transform: translateX(-100%); pointer-events: none; }
.layout:not(.collapsed) nav.sidebar { pointer-events: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.topbar .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.brand { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.hamburger{ width:20px; height:14px; position:relative; display:inline-block; }
/* 使用渐变绘制三条横线，避免某些设备伪元素不显示的问题 */
.hamburger{ 
  background:
    linear-gradient(#111827,#111827) left 0 top 0 / 20px 2px no-repeat,
    linear-gradient(#111827,#111827) left 0 center / 20px 2px no-repeat,
    linear-gradient(#111827,#111827) left 0 bottom / 20px 2px no-repeat;
  border-radius:2px;
}

/* 移动端侧边栏折叠 */
.sidebar-toggle{ display:none; }
/* 移动端侧边栏遮罩 */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 55; }
.sidebar-overlay.show { display: block; }

@media (max-width: 900px){
  .layout { grid-template-columns: 1fr; }
  nav.sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; background:#fff; z-index: 60; box-shadow: var(--shadow); pointer-events: auto; }
  nav.sidebar.open { transform: translateX(0); }
  .sidebar-toggle{ display:inline-flex; }
}

/* 模态框（公告弹窗） */
.modal-backdrop{ position: fixed; inset: 0; background: rgba(17,24,39,.5); display:none; align-items:center; justify-content:center; z-index:70; }
.modal-backdrop.show{ display:flex; }
.modal{ background:#fff; width: min(680px, 92vw); border-radius:16px; border:1px solid var(--line); box-shadow: var(--shadow); }
.modal header{ padding:16px 18px; border-bottom:1px solid var(--line); margin:0; position:relative; }
.modal .content{ padding:18px; max-height: 70vh; overflow:auto; }
.modal .close{ position:absolute; right:12px; top:10px; border:none; background:transparent; font-size:22px; cursor:pointer; }

/* 工具类 */
.nowrap{ white-space: nowrap; }
.ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-160{ max-width:160px; }
.w-240{ max-width:240px; }
.thumb{ width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.ann-img{ max-width:100%; max-height:160px; width:auto; height:auto; border-radius:10px; border:1px solid var(--line); object-fit:cover; }

/* 图片上传预览样式 */
.image-upload-container{ display:grid; gap:16px; }
.image-upload-item{ position:relative; }
.image-upload-box{ position:relative; border:2px dashed var(--line); border-radius:10px; padding:20px; background:#fafafa; transition:border-color .2s ease,background .2s ease; }
.image-upload-box:hover{ border-color:var(--primary); background:#f0f7ff; }
.image-upload-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.image-upload-placeholder{ text-align:center; pointer-events:none; }
.image-preview{ position:relative; width:100%; max-width:100%; }
.preview-img{ width:100%; max-height:300px; object-fit:contain; border-radius:8px; border:1px solid var(--line); }
.remove-image-btn{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s ease; z-index:3; }
.remove-image-btn:hover{ background:rgba(220,38,38,0.8); }

/* 更小屏手机端优化 */
@media (max-width: 480px){
  .container{ padding: 12px; }
  header{ padding: 10px 0; }
  .brand{ font-size: 16px; }
  .card{ padding: 12px; border-radius: 10px; }
  .grid{ gap: 12px; }
  label{ font-size: 13px; margin: 8px 0 4px; }
  input[type=text], input[type=password], input[type=email], select, textarea{ padding: 11px 12px; font-size: 14px; }
  .table{ min-width: 0; }
  .table th, .table td{ padding: 10px 8px; font-size: 13px; }
  form .primary{ width: 100%; }
  .notice,.error,.success,.highlight{ padding: 12px; }
  .topbar .actions .btn, .topbar .actions button{ flex:1; }
  .image-upload-box{ padding: 16px; }
  .preview-img{ max-height: 200px; }
}

/* 首页分类表在移动端改为卡片式，避免横向/纵向占位过大 */
@media (max-width: 480px){
  .list-table{ display:block; border:0; }
  .list-table thead{ display:none; }
  .list-table tbody{ display:block; }
  .list-table tr{ display:block; border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:10px; }
  .list-table td{ display:block; border:0; padding:6px 0; }
}