/* 星光自助下单 - MD3 暖粉设计系统（与 bilibili-manager-server 观感统一） */
:root, :root[data-theme="light"] {
  --md-primary: #d86a84;
  --md-on-primary: #ffffff;
  --md-primary-container: #ffd9e4;
  --md-on-primary-container: #3e0022;
  --md-secondary: #765a63;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #fedce3;
  --md-on-secondary-container: #2b181f;
  --md-surface: #fff8f8;
  --md-on-surface: #201a1b;
  --md-surface-variant: #f0e0e3;
  --md-on-surface-variant: #4f4448;
  --md-background: #fff8f8;
  --md-on-background: #201a1b;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-outline: #7e7377;
  --md-outline-variant: #d5c1c5;
  --md-tertiary: #857447;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #eddaa0;
  --md-header-bg: #d86a84;
  --md-header-bg-end: #c45a74;
  --md-shape-xs: 8px;
  --md-shape-sm: 12px;
  --md-shape-md: 16px;
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
  --md-elevation-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --md-elevation-3: 0 6px 16px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.03);
  --md-elevation-hover: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}
:root[data-theme="dark"] {
  --md-primary: #ffb1c8;
  --md-on-primary: #501e34;
  --md-primary-container: #6e364a;
  --md-on-primary-container: #ffd9e4;
  --md-secondary: #e0bdca;
  --md-on-secondary: #3b232c;
  --md-secondary-container: #543942;
  --md-on-secondary-container: #fedce3;
  --md-surface: #1d1a1b;
  --md-on-surface: #ede0e2;
  --md-surface-variant: #4f4448;
  --md-on-surface-variant: #d5c1c5;
  --md-background: #161314;
  --md-on-background: #ede0e2;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
  --md-outline: #8e9099;
  --md-outline-variant: #4f4448;
  --md-tertiary: #d5be8a;
  --md-on-tertiary: #383000;
  --md-tertiary-container: #50461a;
  --md-header-bg: #2a121b;
  --md-header-bg-end: #1e0c13;
  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16);
  --md-elevation-2: 0 2px 8px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14);
  --md-elevation-3: 0 6px 16px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.10);
  --md-elevation-hover: 0 8px 28px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--md-background);
  color: var(--md-on-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.app-footer { margin-top: auto; }
.header {
  background: linear-gradient(135deg, var(--md-header-bg) 0%, var(--md-header-bg-end) 100%);
  color: #ffffff;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--md-elevation-2);
}
.header h1 { font-size: 18px; margin: 0; flex: 0 0 auto; font-weight: 600; letter-spacing: -0.3px; }
.header .spacer { flex: 1 1 auto; }
.header .secondary-text { color: rgba(255,255,255,0.85); }
.header .badge { color: var(--md-on-background); }
.container { max-width: 1480px; margin: 0 auto; padding: 20px 16px; flex: 1 0 auto; width: 100%; }
.card {
  background: var(--md-surface);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elevation-1);
  padding: 20px;
  margin-bottom: 16px;
}
.card h2 { margin: 0 0 14px 0; font-size: 16px; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border: none; border-radius: var(--md-shape-sm);
  padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--md-primary-container) 85%, black); box-shadow: var(--md-elevation-1); }
.btn:disabled { background: var(--md-outline-variant); color: var(--md-on-surface-variant); cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--md-primary); color: var(--md-on-primary); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--md-primary) 85%, black); box-shadow: var(--md-elevation-1); }
.btn-danger { background: var(--md-error-container); color: var(--md-on-error-container); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--md-error-container) 85%, black); }
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: var(--md-shape-xs); min-width: 55px; height: 28px; }
.btn-sm:hover:not(:disabled) { background: color-mix(in srgb, var(--md-primary-container) 85%, black); }

.input, textarea.input, select.input {
  width: 100%; max-width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-sm);
  background: var(--md-surface); color: var(--md-on-surface);
  box-sizing: border-box;
}
.input:focus { outline: 2px solid var(--md-primary); border-color: transparent; }
label.field { display: block; margin-bottom: 14px; font-size: 13px; color: var(--md-on-surface-variant); }
label.field .input { margin-top: 6px; }
.secondary-text { color: var(--md-on-surface-variant); font-size: 13px; }

/* 状态标签：与公会后台一一对应（参考 bilibili-manager-server status-tag） */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.pending { color: #856404; background: rgba(133,100,4,0.12); }            /* 待投放 */
.badge.running { color: #155724; background: rgba(21,87,36,0.12); }             /* 推广中 */
.badge.terminated { color: #721c24; background: rgba(114,28,36,0.12); }         /* 已终止 */
.badge.finished { color: #6d5a00; background: rgba(109,90,0,0.12); }            /* 已完成 */
.badge.cancelled { color: #383d41; background: rgba(56,61,65,0.12); }            /* 已取消 */
.badge.failed { color: #721c24; background: rgba(114,28,36,0.12); }            /* 已失败（本地独有，红色系） */
:root[data-theme="dark"] .badge.pending { color: #fbbf24; background: rgba(251,191,36,0.15); }
:root[data-theme="dark"] .badge.running { color: #4ade80; background: rgba(74,222,128,0.15); }
:root[data-theme="dark"] .badge.terminated { color: #f87171; background: rgba(248,113,113,0.15); }
:root[data-theme="dark"] .badge.finished { color: #d5be8a; background: rgba(213,190,138,0.15); }
:root[data-theme="dark"] .badge.cancelled { color: #9ca3af; background: rgba(156,163,175,0.15); }
:root[data-theme="dark"] .badge.failed { color: #f87171; background: rgba(248,113,113,0.15); }

table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.table th, table.table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--md-outline-variant); white-space: nowrap; }
table.table td.wrap { white-space: normal; word-break: break-word; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
  .table-scroll { overflow-x: visible; }
}
table.table th { color: var(--md-on-surface-variant); font-weight: 600; font-size: 13px; }

.global-status {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-80px);
  padding: 10px 22px; border-radius: var(--md-shape-sm); font-size: 14px; z-index: 2000;
  background: var(--md-surface); color: var(--md-on-surface);
  box-shadow: var(--md-elevation-2); transition: transform .25s; max-width: 90vw;
}
.global-status.show { transform: translateX(-50%) translateY(0); }
.global-status.success { background: color-mix(in srgb, var(--md-tertiary-container) 70%, transparent); color: var(--md-on-tertiary-container); }
.global-status.error { background: var(--md-error-container); color: var(--md-on-error-container); }

.dialog-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.dialog {
  background: var(--md-surface); color: var(--md-on-surface);
  border-radius: var(--md-shape-md); padding: 26px;
  max-width: 420px; width: 92%; box-shadow: var(--md-elevation-3);
}
.dialog h3 { margin: 0 0 14px 0; font-size: 16px; }
.dialog .dialog-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.nav-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.nav-tabs .tab {
  padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px;
  background: var(--md-surface-variant); border: none; color: var(--md-on-surface);
  transition: background 0.2s;
}
.nav-tabs .tab.active { background: var(--md-primary); color: var(--md-on-primary); font-weight: 600; }
.empty-tip { text-align: center; padding: 30px 0; color: var(--md-on-surface-variant); }

@media (max-width: 768px) {
  .container { padding: 12px 10px; }
  .card { padding: 14px; border-radius: var(--md-shape-sm); }
  table.table.responsive {
    width: 100% !important; min-width: 0 !important; table-layout: auto !important; display: block;
  }
  table.table.responsive thead { display: none; }
  table.table.responsive tbody, table.table.responsive tr, table.table.responsive td { display: block; width: 100%; }
  table.table.responsive tr { margin-bottom: 12px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-sm); padding: 8px; }
  table.table.responsive td { display: flex; justify-content: space-between; border: none; padding: 6px 4px; white-space: normal; word-break: break-word; }
  table.table.responsive td::before { content: attr(data-label); color: var(--md-on-surface-variant); font-size: 12px; flex: 0 0 auto; margin-right: 10px; }
  table.table.responsive td.wrap { white-space: normal; }
}
@media (max-width: 480px) {
  .header h1 { font-size: 15px; }
  .btn { padding: 9px 16px; font-size: 13px; }
  .card { padding: 12px; }
  .qr-mobile-tip { display: block !important; }
  .app-footer .footer-info { flex-direction: column; gap: 4px; }
  .app-footer .separator { display: none; }
}
/* 日期选择器：移动端不超出屏幕 */
@media (max-width: 768px) {
  .input[type="datetime-local"] { width: 100%; max-width: 100%; min-width: 0; }
}

/* 页脚：版权与版本号 */
.app-footer {
  margin-top: auto;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--md-on-surface-variant);
  background: var(--md-surface);
  border-top: 1px solid var(--md-outline-variant);
}
.app-footer .footer-info { margin-bottom: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; }
.app-footer .separator { margin: 0 6px; opacity: .6; }
.app-footer .beian-link { color: var(--md-on-surface-variant); text-decoration: none; }
.app-footer .beian-link:hover { color: var(--md-primary); text-decoration: underline; }