* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --gold: #d4a017; --gold-light: #f3d27a; --gold-pale: #fff6d6; --gold-dark: #b8860b; --bg: #0e0c08; --card: #1a1710; --card-2: #221d13; --text: #ede6d6; --muted: #9a8f7a; --border: #2e2718; --success: #2fd68b; --danger: #ff6b5e; --warn: #f0b34d; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; background: radial-gradient(130% 120% at 50% 0%, #17130c 0%, #0e0c08 55%, #0a0805 100%); background-attachment: fixed; color: var(--text); font-size: 14px; min-height: 100vh; }
/* 全屏流光光幕 */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 18% 22%, rgba(212,160,23,.10) 0%, transparent 70%),
    radial-gradient(45% 32% at 82% 72%, rgba(190,125,30,.08) 0%, transparent 70%),
    radial-gradient(40% 30% at 62% 12%, rgba(243,210,122,.07) 0%, transparent 70%),
    linear-gradient(112deg, transparent 30%, rgba(212,160,23,.05) 43%, rgba(243,210,122,.16) 50%, rgba(212,160,23,.05) 57%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 260% 260%;
  animation: full-sweep 7s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes full-sweep {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 140% 0%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%, -140% 0%; }
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, textarea, select { font-family: inherit; outline: none; -webkit-user-select: text; user-select: text; color: var(--text); caret-color: var(--gold-light); }
table { border-collapse: collapse; width: 100%; }

/* 登录页 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(140% 200% at 50% -20%, #201a10 0%, #120e08 55%, #080603 100%); }
.login-wrap::before { content: ''; position: absolute; inset: -40%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .16; mix-blend-mode: overlay; pointer-events: none; animation: grain-shift 7s steps(8) infinite; }
.login-card { background: var(--card); border: 1px solid var(--border); width: 360px; padding: 36px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.login-card h1 { font-size: 22px; margin-bottom: 6px; text-align: center; background: linear-gradient(100deg, #caa44a 0%, #f3d27a 25%, #fff6d6 45%, #e4bd5d 60%, #fdf0b0 80%, #caa44a 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 5s linear infinite; }
.login-card .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 13px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #14110a; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field textarea { min-height: 100px; resize: vertical; }

/* 布局 */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 210px; background: #14110a; border-right: 1px solid var(--border); color: var(--muted); flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar .logo { padding: 22px 20px; font-size: 18px; font-weight: 800; color: var(--gold-light); border-bottom: 1px solid var(--border); background: linear-gradient(100deg, #caa44a, #f3d27a 40%, #fff6d6 50%, #e4bd5d 70%, #caa44a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.menu { flex: 1; padding: 12px 0; }
.menu-item { display: block; width: 100%; text-align: left; padding: 12px 22px; color: var(--muted); background: none; font-size: 14px; }
.menu-item:hover { background: #221d13; color: var(--gold-light); }
.menu-item.active { background: linear-gradient(135deg, #e6b52a, #b8860b); color: #201a10; font-weight: 600; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 58px; background: rgba(20,17,10,.9); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.topbar .title { font-size: 16px; font-weight: 700; color: var(--gold-light); }
.content { padding: 24px; flex: 1; }
.logout { padding: 8px 14px; border-radius: 8px; background: var(--card-2); color: var(--text); border: 1px solid var(--border); font-size: 13px; }
.logout:hover { border-color: var(--gold); color: var(--gold-light); }

/* 卡片/统计 */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.stat .num { font-size: 26px; font-weight: 700; color: var(--gold-light); }
.stat .label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.stat.green .num { color: var(--success); }
.stat.orange .num { color: var(--warn); }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.panel-head h4 { font-size: 15px; color: var(--gold-light); }
.panel-body { padding: 18px; }

/* 表格 */
table th, table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
table th { background: var(--card-2); color: var(--muted); font-weight: 600; white-space: nowrap; }
table tr:hover td { background: var(--card-2); }

.btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.btn.primary { background: linear-gradient(135deg, #e6b52a, #d4a017 50%, #b8860b); color: #201a10; }
.btn.primary:hover { box-shadow: 0 4px 16px rgba(212,160,23,.4); }
.btn.ghost { background: var(--card-2); color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.btn.danger { background: linear-gradient(135deg, #ff6b5e, #d94033); color: #fff; }
.btn.success { background: linear-gradient(135deg, #2fd68b, #1a9b64); color: #fff; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.mr { margin-right: 6px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; }
.badge.gray { background: #262218; color: #9a958a; }
.badge.blue { background: #1e2a3a; color: #6ea8ff; }
.badge.green { background: #14352a; color: #4ce0a3; }
.badge.orange { background: #3a2e14; color: #f0b34d; }
.badge.red { background: #3a1c18; color: #ff7a6e; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
.toolbar input, .toolbar select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #14110a; color: var(--text); }
.toolbar input:focus, .toolbar select:focus { border-color: var(--gold); }
.toolbar .spacer { flex: 1; }

.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; padding: 26px; position: relative; }
.modal h3 { font-size: 17px; margin-bottom: 18px; color: var(--gold-light); }
.modal .close { position: absolute; top: 14px; right: 16px; font-size: 24px; color: var(--muted); background: none; }
.modal .close:hover { color: var(--gold-light); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.card-list { background: #14110a; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 12px 0; }
.card-item { padding: 8px; border-bottom: 1px dashed var(--border); font-family: "SF Mono", Consolas, monospace; font-size: 13px; word-break: break-all; color: var(--text); }
.card-item:last-child { border-bottom: none; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; }

@media (max-width: 800px) {
  .sidebar { width: 64px; }
  .sidebar .logo { font-size: 0; padding: 18px; }
  .menu-item { padding: 12px; text-align: center; font-size: 0; }
  .login-card { width: 100%; max-width: 360px; padding: 24px 20px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .toolbar input, .toolbar select { font-size: 16px; }
  .content { padding: 16px; }
}

/* ============ 动画 + 全站颗粒 ============ */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-2%,1%); }
  40% { transform: translate(1%,-2%); }
  60% { transform: translate(-1%,2%); }
  80% { transform: translate(2%,-1%); }
}
body::after {
  content: ''; position: fixed; inset: -40%; z-index: 2147483647; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .05; mix-blend-mode: soft-light;
  animation: grain-shift 8s steps(10) infinite;
}