/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #333; }
a { text-decoration: none; color: inherit; }

/* ===== Login Page ===== */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.login-card {
    background: #fff; border-radius: 16px; padding: 48px 40px; width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo img { height: 50px; margin-bottom: 12px; }
.login-logo h1 { font-size: 22px; color: #c0392b; font-weight: 700; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #555; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 14px; border: 2px solid #e0e0e0; border-radius: 8px;
    font-size: 14px; transition: border-color 0.2s; outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #c0392b; }
.form-group textarea { min-height: 100px; resize: vertical; }
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer;
    font-size: 14px; font-weight: 600; transition: all 0.2s;
}
.btn-primary { background: #c0392b; color: #fff; }
.btn-primary:hover { background: #a93226; }
.btn-secondary { background: #e0e0e0; color: #333; }
.btn-secondary:hover { background: #ccc; }
.btn-success { background: #27ae60; color: #fff; }
.btn-success:hover { background: #219a52; }
.btn-danger { background: #e74c3c; color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }
.error-msg { color: #e74c3c; font-size: 13px; margin-top: 12px; text-align: center; min-height: 20px; }

/* ===== Admin Layout ===== */
.admin-app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: 240px; background: #1a1a2e; color: #fff; display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
}
.sidebar-header { padding: 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-header h2 { font-size: 18px; color: #e74c3c; font-weight: 700; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; color: rgba(255,255,255,0.7); font-size: 14px;
    transition: all 0.2s; border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(231,76,60,0.15); color: #e74c3c; border-left-color: #e74c3c; }
.nav-item i { width: 20px; text-align: center; font-size: 16px; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-footer .nav-item { padding: 8px 0; border-left: none; }
.nav-group-title {
    display: flex; align-items: center; gap: 8px;
    padding: 18px 20px 6px;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 6px;
}
.nav-group-title i { color: rgba(231,76,60,0.6); }
@media (max-width: 768px) {
    .nav-group-title { display: none; } /* 窄屏隐藏分组标题文字 */
}

/* Main Content */
.main-content { margin-left: 240px; flex: 1; min-height: 100vh; }
.top-bar {
    background: #fff; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 50;
}
.top-bar h1 { font-size: 20px; font-weight: 700; color: #1a1a2e; }
.page-content { padding: 24px 32px; }

/* ===== Dashboard Cards ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.stat-card {
    background: #fff; border-radius: 12px; padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stat-card .stat-icon { font-size: 28px; margin-bottom: 12px; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: #1a1a2e; }
.stat-card .stat-label { font-size: 13px; color: #888; margin-top: 4px; }
.stat-card.red .stat-icon { color: #e74c3c; }
.stat-card.blue .stat-icon { color: #3498db; }
.stat-card.green .stat-icon { color: #27ae60; }
.stat-card.orange .stat-icon { color: #f39c12; }

/* ===== Tables ===== */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.data-table th { background: #f8f9fa; padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 2px solid #e0e0e0; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.data-table tr:hover td { background: #f8f9fa; }
.data-table .actions { display: flex; gap: 8px; }

/* ===== Status Badges ===== */
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-publish { background: #e8f5e9; color: #27ae60; }
.badge-draft { background: #fff3e0; color: #f39c12; }
.badge-pending { background: #fff3e0; color: #f39c12; }
.badge-processing { background: #e3f2fd; color: #3498db; }
.badge-completed { background: #e8f5e9; color: #27ae60; }
.badge-cancelled, .badge-refunded, .badge-failed { background: #fce4ec; color: #e74c3c; }
.badge-on-hold { background: #f3e5f5; color: #9b59b6; }

/* ===== Search & Filter Bar ===== */
.toolbar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; outline: none; }
.toolbar input:focus, .toolbar select:focus { border-color: #c0392b; }
.toolbar input[type="text"] { width: 280px; }
.toolbar .spacer { flex: 1; }

/* ===== Pagination ===== */
.pagination { display: flex; gap: 8px; margin-top: 20px; justify-content: center; }
.pagination button { padding: 8px 14px; border: 2px solid #e0e0e0; border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px; }
.pagination button.active { background: #c0392b; color: #fff; border-color: #c0392b; }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Modal ===== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 16px; width: 600px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e0e0e0; }
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #e0e0e0; display: flex; gap: 12px; justify-content: flex-end; }

/* ===== Home Sections ===== */
.section-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #c0392b; }
.section-card .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-card .section-title { font-size: 16px; font-weight: 700; }
.section-card .section-type { font-size: 12px; color: #888; background: #f0f0f0; padding: 2px 8px; border-radius: 4px; }
.section-card .section-widgets { display: flex; gap: 8px; flex-wrap: wrap; }
.section-card .widget-tag { font-size: 12px; background: #e8f5e9; color: #27ae60; padding: 4px 10px; border-radius: 4px; }

/* ===== Product Form ===== */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row .form-group { margin-bottom: 16px; }
.checkbox-group { display: flex; align-items: center; gap: 8px; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; }

/* ===== Loading ===== */
.loading { text-align: center; padding: 40px; color: #888; }
.loading i { font-size: 32px; animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== Empty State ===== */
.empty-state { text-align: center; padding: 60px 20px; color: #888; }
.empty-state i { font-size: 48px; margin-bottom: 16px; color: #ccc; }
.empty-state p { font-size: 16px; }

/* ===== Toast ===== */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; }
.toast { background: #333; color: #fff; padding: 12px 20px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; animation: slideIn 0.3s ease; }
.toast.success { background: #27ae60; }
.toast.error { background: #e74c3c; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== Media Grid ===== */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.media-item { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.2s; }
.media-item:hover { transform: translateY(-2px); }
.media-item img { width: 100%; height: 120px; object-fit: cover; }
.media-item .media-info { padding: 8px; font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sidebar { width: 60px; }
    .sidebar-header h2, .nav-item span, .sidebar-footer span { display: none; }
    .nav-item { justify-content: center; padding: 14px; }
    .main-content { margin-left: 60px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
}


/* ===== Appearance Modules Added $(Get-Date -Format 'yyyy-MM-dd') ===== */

/* ============================================================
 * 新增：Apollo Admin - 外观（Appearance）模块专用样式
 * 独立一组 class，不影响原有功能样式
 * ============================================================ */

/* ---- 通用工具类 ---- */
.tabs-bar        { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #e5e7eb; padding-bottom:10px; }
.tab-btn         { border:1px solid #d1d5db; background:#fff; border-radius:6px; padding:8px 14px; cursor:pointer;
                   font-size:13px; display:inline-flex; align-items:center; gap:8px; transition:all .15s; }
.tab-btn:hover   { border-color:#e74c3c; color:#e74c3c; }
.tab-btn.active  { background:#e74c3c; color:#fff; border-color:#e74c3c; box-shadow:0 2px 6px rgba(231,76,60,.3); }
.count-badge     { background:rgba(0,0,0,0.06); color:#555; border-radius:20px; padding:1px 9px; font-size:11px; font-weight:600; }
.tab-btn.active .count-badge { background:rgba(255,255,255,0.25); color:#fff; }
.muted           { color:#6b7280; }
.small           { font-size:12px; }
.mono            { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.empty-hint      { background:#f9fafb; border:1px dashed #cbd5e1; color:#6b7280; padding:30px; border-radius:8px; text-align:center; }
.empty-state     { text-align:center; padding:60px 20px; color:#9ca3af; }
.form-tips       { background:#eff6ff; border-left:3px solid #3b82f6; padding:10px 14px; border-radius:6px; color:#1e3a8a; font-size:13px; line-height:1.6; }
.form-tips kbd   { background:#1e3a8a; color:#dbeafe; padding:1px 6px; border-radius:3px; font-size:11px; margin:0 2px; }
.two-col-grid    { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap:20px; }
@media (max-width: 991px) { .two-col-grid { grid-template-columns: 1fr; } }

.btn-icon        { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px; padding:4px 8px; cursor:pointer;
                   color:#374151; transition:all .15s; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
.btn-icon:hover  { background:#e74c3c; color:#fff; border-color:#e74c3c; }
.btn-danger      { color:#b91c1c; }
.btn-danger:hover{ background:#dc2626 !important; color:#fff !important; border-color:#dc2626 !important; }

.form-layout     { display:grid; grid-template-columns: 1fr 1.3fr; gap:28px; align-items:start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.logo-col, .form-col { display:flex; flex-direction:column; gap:18px; }
.preview-box     { margin-top:10px; min-height:140px; border:2px dashed #cbd5e1; border-radius:10px; padding:16px; background:#fafafa;
                   display:flex; align-items:center; justify-content:center; text-align:center; color:#6b7280; }
.logo-preview    { max-width:260px; max-height:120px; object-fit:contain; }
.logo-preview-empty { color:#6b7280; font-size:12px; line-height:1.6; }
.logo-preview-empty small { display:block; color:#9ca3af; margin-top:4px; }
.input-row       { display:flex; gap:8px; align-items:center; }
.input-row > *:first-child { flex:1; }
.form-inline     { display:flex; align-items:center; gap:16px; }

/* ---- 菜单管理 ---- */
.menu-list       { display:flex; flex-direction:column; gap:6px; max-height:520px; overflow:auto; padding-right:4px; }
.menu-row        { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px; border:1px solid #e5e7eb;
                   border-radius:8px; cursor:pointer; background:#fff; transition:all .15s; }
.menu-row:hover    { border-color:#e74c3c; background:#fff5f4; }
.menu-row.selected { border-color:#e74c3c; background:#e74c3c0f; box-shadow: inset 3px 0 0 #e74c3c; }
.menu-row-info    { display:flex; flex-direction:column; gap:3px; flex:1; }
.menu-row-info strong { color:#111827; font-size:14px; }
.menu-row-actions { display:flex; gap:4px; }
.order-badge     { display:inline-block; background:#1f2937; color:#fff; font-size:11px; font-weight:700;
                   border-radius:4px; padding:2px 8px; min-width:28px; text-align:center; margin-right:4px; }
.data-table      { width:100%; border-collapse:collapse; }
.data-table th   { background:#f3f4f6; padding:10px 14px; text-align:left; font-size:12px; font-weight:700; border-bottom:2px solid #e5e7eb; color:#1f2937; }
.data-table td   { padding:10px 14px; border-bottom:1px solid #f1f5f9; font-size:13px; vertical-align:middle; }
.data-table tbody tr:hover { background:#fafafa; }

/* ---- Widgets ---- */
.widgets-list    { display:flex; flex-direction:column; gap:12px; }
.widget-card     { border:1px solid #e5e7eb; background:#fff; border-radius:10px; overflow:hidden; transition:all .15s; }
.widget-card:hover { border-color:#e74c3c; box-shadow:0 4px 12px rgba(231,76,60,.08); }
.widget-card-header { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; background:#f9fafb; border-bottom:1px solid #eef2f7; }
.widget-card-body   { padding:14px 16px; color:#4b5563; line-height:1.6; }
.json-editor     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.5; }

/* ---- Custom CSS ---- */
.css-editor      { width:100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                   font-size:13px; line-height:1.55; padding:18px 22px; border-radius:8px;
                   border:1px solid #cbd5e1; background:#0f172a; color:#e2e8f0; tab-size:4;
                   resize:vertical; transition:border-color .15s; }
.css-editor:focus { outline:none; border-color:#e74c3c; box-shadow:0 0 0 3px rgba(231,76,60,.15); }

/* ---- Theme Demo 网格 ---- */
.theme-grid         { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.theme-card         { display:block; border:2px solid #e5e7eb; background:#fff; border-radius:12px; cursor:pointer; overflow:hidden; transition:all .2s; position:relative; }
.theme-card:hover   { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.theme-card.current { border-color:#e74c3c; box-shadow:0 0 0 4px rgba(231,76,60,.12), 0 8px 24px rgba(231,76,60,.08); }
.theme-card input[type=radio] { position:absolute; left:-9999px; opacity:0; }
.theme-preview      { aspect-ratio: 4 / 3; background:#f8fafc; border-bottom:1px solid #eef2f7; display:flex; flex-direction:column; }
.preview-header     { padding:10px 14px; display:flex; justify-content:space-between; align-items:center; background:#fff; border-bottom:1px solid #eef2f7; }
.preview-logo       { font-weight:900; color:#111; letter-spacing:.5px; }
.preview-body       { flex:1; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.banner             { height:50%; background:linear-gradient(135deg,#667eea,#764ba2); border-radius:4px; }
.theme-card[data-file="crossfit-02.css"] .banner { background:linear-gradient(135deg,#1f2937,#4b5563); }
.theme-card[data-file="crossfit-03.css"] .banner { background:linear-gradient(135deg,#11998e,#38ef7d); }
.theme-card[data-file="crossfit-04.css"] .banner { background:linear-gradient(135deg,#ee0979,#ff6a00); }
.theme-card[data-file="crossfit-05.css"] .banner { background:linear-gradient(135deg,#232526,#414345); }
.product-row        { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; height:40%; }
.p-card             { background:#fff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.theme-card-footer  { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; }
.theme-card-footer code { background:#f3f4f6; padding:1px 6px; border-radius:3px; font-size:11px; }