/* ========== Global ========== */
:root {
  --app-bg: linear-gradient(180deg, #f5f5f5 0%, #f0f0f0 48%, #fafafa 100%);
  --app-surface: #ffffffe8;
  --app-border: #e5e5e5;
  --app-shadow: 0 10px 28px rgba(20, 20, 20, 0.1);
  --app-shadow-soft: 0 6px 18px rgba(30, 30, 30, 0.08);
  --app-primary: #171717;
  --app-accent: #d4af37;
  --app-text: #171717;
  --app-muted: #525252;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

body.app-body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--app-text);
  background: var(--app-bg);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-container {
  max-width: 1920px;
  padding-left: 20px;
  padding-right: 20px;
}

.content-surface {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  padding: 24px;
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========== Navbar ========== */
.app-navbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: linear-gradient(95deg, #171717, #262626 55%, #333333);
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.35);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.2px;
}

.navbar .nav-link {
  border-radius: 8px;
  padding: 8px 12px !important;
  margin-left: 2px;
  margin-right: 2px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

.navbar .nav-link.active {
  background-color: rgba(212, 175, 55, 0.24);
  font-weight: 600;
}

/* ========== Cards ========== */
.card {
  border: 1px solid #e7e7e7;
  border-radius: var(--radius-md);
  box-shadow: var(--app-shadow-soft);
  overflow: hidden;
}

.card-header {
  border-bottom: 1px solid #ececec;
  font-weight: 600;
}

.card.border-primary,
.card.border-success,
.card.border-info,
.card.border-warning,
.card.border-danger {
  border-width: 1px !important;
}

/* ========== Buttons ========== */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26, 61, 139, 0.18);
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(23, 23, 23, 0.2);
}

/* ========== Tables ========== */
.table {
  margin-bottom: 0;
}

.table thead th {
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 0.84rem;
  color: #262626;
  background: #f8f8f8;
}

.table-hover tbody tr:hover {
  background-color: rgba(23, 23, 23, 0.05);
  cursor: pointer;
}

/* ========== Forms & Modal ========== */
.form-control,
.form-select {
  border-radius: 10px;
  border-color: #dddddd;
  font-size: 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: #777777;
  box-shadow: 0 0 0 0.25rem rgba(23, 23, 23, 0.16);
}

.modal-content {
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 16px 40px rgba(23, 52, 114, 0.2);
}

.modal-header {
  background: linear-gradient(180deg, #fcfcfc 0%, #f5f5f5 100%);
  border-bottom: 1px solid #e9e9e9;
}

.modal-backdrop {
  z-index: 1050 !important;
}

.modal {
  z-index: 1055 !important;
}

.temp-modal-content {
  max-height: min(80vh, 760px);
}

.temp-modal-body {
  overflow-y: auto;
}

/* ========== Utility ========== */
.badge {
  padding: 0.44em 0.8em;
  font-weight: 600;
  font-size: 0.76rem;
}

.accordion-button:not(.collapsed) {
  background-color: rgba(23, 23, 23, 0.08);
  color: #171717;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(33, 86, 217, 0.25);
}

.cursor-pointer {
  cursor: pointer;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fade-in {
  animation: fadeIn 0.26s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.position-fixed.top-0.end-0 {
  z-index: 9999;
}

code {
  background-color: #f1f1f1;
  color: #1f2937;
  padding: 0.2em 0.42em;
  border-radius: 6px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 0.9em;
}

/* ========== Deploy log ========== */
#deployLog,
#log-container {
  font-family: "Consolas", "Monaco", "Menlo", monospace;
  line-height: 1.55;
}

/* ========== Footer ========== */
.app-footer {
  border-top: 1px solid #e5e5e5;
  background: #f7f7f7;
  flex-shrink: 0;
}

/* ========== Responsive ========== */
@media (max-width: 992px) {
  .content-surface {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .app-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .navbar-brand {
    font-size: 1rem;
  }

  .btn-lg {
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
  }
}

/* ========== Motion preference ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== Dashboard ========== */
.dashboard-hero {
  border: 1px solid #e6e6e6;
  background: linear-gradient(135deg, rgba(252, 252, 252, 0.96), rgba(244, 244, 244, 0.96));
}

.dashboard-stat-card .card-body {
  padding: 1rem 1.1rem;
}

.dashboard-stat-card h2 {
  font-size: 1.85rem;
  font-weight: 700;
}

.dashboard-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 23, 23, 0.08);
  font-size: 1.25rem;
}

#platforms-list .list-group-item {
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  margin-bottom: 8px;
}

#platforms-list .progress {
  background-color: #ededed;
  border-radius: 999px;
}

.app-page-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 0;
}

.app-page-subtitle {
  color: #666666;
  font-size: 0.88rem;
  margin-bottom: 0;
}

.btn.btn-warning {
  background-color: var(--app-accent);
  border-color: #c59d21;
  color: #1c1c1c;
}

.btn.btn-warning:hover {
  background-color: #c89f23;
  border-color: #b78f18;
}

#recent-history .table th,
#recent-history .table td {
  white-space: nowrap;
}

/* ========== Deploy ========== */
.deploy-panel-card,
.deploy-log-card {
  height: min(72vh, 760px);
}

.deploy-log-card .card-header {
  background: linear-gradient(95deg, #171717, #2b2b2b) !important;
}

.deploy-log-area {
  height: 100%;
  min-height: 0;
  background-color: #111111;
  color: #d4d4d4;
  border-top: 1px solid #1f1f1f;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 13px;
}

#appSelectionContainer {
  background: #fafafa;
}

#appSelection .list-group-item {
  border-color: #e6e6e6;
  border-radius: 10px;
  margin-bottom: 8px;
}

#appSelection h6.text-primary {
  color: #171717 !important;
}

#platformTabsContainer .btn.btn-primary {
  background-color: #171717;
  border-color: #171717;
}

#platformTabsContainer .btn.btn-outline-primary {
  color: #171717;
  border-color: #bdbdbd;
}

#deployStatus.alert-info {
  background: #f4f4f4;
  border-color: #dcdcdc;
  color: #2f2f2f;
}

@media (max-width: 992px) {
  .deploy-panel-card,
  .deploy-log-card {
    height: auto;
    min-height: 420px;
  }
}

/* ========== Config ========== */
.config-tabs-card {
  border-color: #e7e7e7;
}

.config-nav-tabs {
  gap: 8px;
  border-bottom-color: #e6e6e6;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

.config-nav-tabs .config-platform-tab {
  color: #404040;
  font-weight: 600;
  font-size: 0.86rem;
  border: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  border-radius: 999px;
  padding: 0.46rem 0.84rem;
  background: #f8f8f8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.config-nav-tabs .config-platform-tab:hover {
  color: #171717;
  background: #f2f2f2;
  border-color: #cfcfcf;
}

.config-nav-tabs .config-platform-tab.active {
  color: #ffffff;
  background: #171717;
  border-color: #171717;
}

.config-nav-tabs .config-platform-tab .badge {
  background: #e5e5e5 !important;
  color: #333333;
  padding: 0.24em 0.48em;
}

.config-nav-tabs .config-platform-tab.active .badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff;
}

.config-modal-body {
  max-height: min(70vh, 680px);
  overflow-y: auto;
}

#batchKeyFilesDropZone,
#batchTxtFilesDropZone {
  border-color: #cfcfcf !important;
  background: #fafafa;
}

#batchKeyFilesDropZone:hover,
#batchTxtFilesDropZone:hover {
  border-color: #171717 !important;
  background: #f4f4f4;
}

/* ========== Platforms ========== */
.platform-card {
  border-color: #e6e6e6;
}

.platform-card-header {
  background: linear-gradient(95deg, #171717, #2c2c2c) !important;
}

.platform-card-title {
  font-size: 1rem;
  font-weight: 700;
}

.platform-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.platform-card-meta p {
  font-size: 0.86rem;
}

.platform-card .text-break {
  line-height: 1.45;
}

.platform-card .btn-group .btn {
  border-color: #d8d8d8;
}

.platform-card-actions .badge {
  font-size: 0.73rem;
}

#platformsList .alert {
  border-radius: 12px;
}

#domainConfigModal .modal-dialog,
#allDomainConfigModal .modal-dialog {
  max-width: min(1120px, 94vw);
}

#domainConfigModal .modal-body,
#allDomainConfigModal .modal-body {
  max-height: min(72vh, 760px);
  overflow-y: auto;
}

/* ========== History ========== */
.history-stat-card .card-body {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.history-stat-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.history-accordion-item {
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.history-accordion-button {
  background: #fafafa;
  font-size: 0.88rem;
}

.history-accordion-button:not(.collapsed) {
  background: #f2f2f2;
  color: #171717;
}

.history-accordion-body {
  font-size: 0.88rem;
}

#historyList .table {
  font-size: 0.85rem;
}

#historyList .badge {
  font-size: 0.72rem;
}

/* ========== Home & Error ========== */
.home-hero-card {
  border: 1px solid #e7e7e7;
  background: linear-gradient(135deg, #fcfcfc, #f4f4f4);
}

.home-hero-stat {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.home-hero-stat-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.86rem;
}

.home-hero-stat-item .label {
  color: #666;
}

.home-entry-card {
  color: #171717;
  border: 1px solid #e6e6e6;
}

.home-entry-card:hover {
  color: #171717;
  border-color: #cfcfcf;
  background: #fafafa;
}

.error-card {
  max-width: 920px;
  margin: 0 auto;
}

.error-stack {
  max-height: min(48vh, 420px);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
}

/* ========== Print ========== */
@media print {
  .navbar,
  .btn,
  footer {
    display: none !important;
  }

  .content-surface {
    box-shadow: none;
    border: none;
    background: #fff;
  }
}