/* ============================================
   网吧到期提醒 SaaS - 全局主题
   主色：深夜蓝 #0F1A3A · 电竞橙 #FF6B35 · 霓虹青 #19D4C8
   ============================================ */

:root {
  --c-bg: #0a1230;
  --c-bg-2: #0f1a3a;
  --c-bg-3: #182550;
  --c-panel: rgba(24, 37, 80, 0.55);
  --c-panel-solid: #182550;
  --c-border: rgba(140, 168, 255, 0.18);
  --c-border-strong: rgba(140, 168, 255, 0.32);
  --c-text: #e8edff;
  --c-text-2: #b6c0e0;
  --c-text-3: #7c89b3;
  --c-orange: #ff6b35;
  --c-orange-2: #ff8a5b;
  --c-cyan: #19d4c8;
  --c-cyan-2: #5bf0e6;
  --c-purple: #9b6bff;
  --c-success: #2cd9a0;
  --c-warn: #ffb547;
  --c-danger: #ff5c7a;

  --shadow-card: 0 8px 32px rgba(8, 14, 36, 0.45), inset 0 0 0 1px var(--c-border);
  --shadow-hover: 0 12px 48px rgba(255, 107, 53, 0.18), inset 0 0 0 1px var(--c-border-strong);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --font-sans: "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: radial-gradient(circle at 15% 10%, rgba(155, 107, 255, 0.18), transparent 40%),
              radial-gradient(circle at 85% 90%, rgba(25, 212, 200, 0.18), transparent 40%),
              linear-gradient(180deg, #0a1230 0%, #0a0e25 100%);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-cyan); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-cyan-2); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140,168,255,0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(140,168,255,0.35); }

/* ====== 通用组件 ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-sm); border: none;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  color: #fff; line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-orange) 0%, #ff8a5b 100%);
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35);
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(255, 107, 53, 0.5); }
.btn-cyan {
  background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-cyan-2) 100%);
  color: #042b27;
  box-shadow: 0 6px 18px rgba(25, 212, 200, 0.3);
}
.btn-ghost {
  background: rgba(140, 168, 255, 0.08);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.btn-ghost:hover { background: rgba(140, 168, 255, 0.16); }
.btn-danger {
  background: linear-gradient(135deg, var(--c-danger) 0%, #ff8197 100%);
  box-shadow: 0 6px 18px rgba(255, 92, 122, 0.3);
}
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-block { width: 100%; }

.card {
  background: var(--c-panel);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.input, .form-control, select.form-control, textarea {
  width: 100%;
  background: rgba(10, 18, 48, 0.6);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.input:focus, .form-control:focus, textarea:focus {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}
select.form-control { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c89b3' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--c-text-2); }

.table-wrap { background: var(--c-panel); border-radius: var(--radius); padding: 4px; overflow: hidden; box-shadow: var(--shadow-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--c-text-3);
  padding: 14px 16px; background: rgba(10, 18, 48, 0.35); text-transform: uppercase; letter-spacing: 0.5px; }
.table td { padding: 14px 16px; font-size: 14px; border-top: 1px solid var(--c-border); }
.table tr:hover td { background: rgba(140, 168, 255, 0.06); }
.table .actions { white-space: nowrap; }

.tag {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
}
.tag-cyan { background: rgba(25, 212, 200, 0.15); color: var(--c-cyan-2); }
.tag-orange { background: rgba(255, 107, 53, 0.15); color: var(--c-orange-2); }
.tag-purple { background: rgba(155, 107, 255, 0.15); color: #c0a4ff; }
.tag-green { background: rgba(44, 217, 160, 0.15); color: var(--c-success); }
.tag-red { background: rgba(255, 92, 122, 0.15); color: var(--c-danger); }
.tag-gray { background: rgba(140, 168, 255, 0.10); color: var(--c-text-3); }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; border-left: 3px solid; }
.alert-info { background: rgba(25, 212, 200, 0.08); border-color: var(--c-cyan); color: var(--c-cyan-2); }
.alert-warn { background: rgba(255, 181, 71, 0.08); border-color: var(--c-warn); color: var(--c-warn); }
.alert-danger { background: rgba(255, 92, 122, 0.08); border-color: var(--c-danger); color: var(--c-danger); }

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

.muted { color: var(--c-text-3); }
.text-orange { color: var(--c-orange-2); }
.text-cyan { color: var(--c-cyan); }
.text-success { color: var(--c-success); }
.text-danger { color: var(--c-danger); }
.text-warn { color: var(--c-warn); }
.text-mono { font-family: var(--font-mono); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ====== Toast ====== */
#toast-stack {
  position: fixed; top: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: rgba(15, 26, 58, 0.95);
  border: 1px solid var(--c-border-strong);
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 14px; min-width: 220px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: toastIn .25s ease-out;
}
.toast.success { border-left: 3px solid var(--c-success); }
.toast.error { border-left: 3px solid var(--c-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ====== 模态框 ====== */
.modal-mask {
  position: fixed; inset: 0; background: rgba(5, 8, 20, 0.7);
  backdrop-filter: blur(6px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--c-panel-solid);
  border-radius: var(--radius);
  padding: 28px; min-width: 360px; max-width: 90vw;
  border: 1px solid var(--c-border-strong);
  animation: modalIn .25s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* ====== Loading 骨架 ====== */
.skeleton { background: linear-gradient(90deg, rgba(140,168,255,0.06) 0%, rgba(140,168,255,0.15) 50%, rgba(140,168,255,0.06) 100%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ====== 分页 ====== */
.pagination, ul.pagination { display: flex; gap: 6px; justify-content: center; padding: 18px 0; list-style: none; margin: 0; }
.pagination li { list-style: none; }
.pagination a, .pagination span, .pagination li > a, .pagination li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border-radius: 8px; background: rgba(140,168,255,0.08);
  color: var(--c-text-2); font-size: 13px; border: 1px solid transparent;
  text-decoration: none;
}
.pagination a:hover, .pagination li > a:hover { background: rgba(255, 107, 53, 0.15); color: var(--c-orange-2); }
.pagination .active, .pagination li.active > span, .pagination li.active > a {
  background: linear-gradient(135deg, var(--c-orange), #ff8a5b); color: #fff;
}
.pagination .disabled, .pagination li.disabled > span, .pagination li.disabled > a { opacity: 0.4; cursor: not-allowed; }