/* Edge Console — a calm, editorial interface inspired by contemporary AI products. */
:root {
  --ink: #1f1e1b;
  --muted: #6e6b64;
  --subtle: #918e86;
  --canvas: #f7f6f2;
  --paper: #fffefa;
  --line: #e3e0d8;
  --accent: #c76638;
  --accent-hover: #aa542d;
  --accent-soft: #f8e8de;
  --success: #2e7d5a;
  --danger: #bd3c36;
  --shadow: 0 20px 50px rgba(45, 41, 34, .08), 0 2px 8px rgba(45, 41, 34, .04);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body {
  min-height: 100%;
  color: var(--ink) !important;
  background: var(--canvas) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
a { color: var(--accent); }

/* Login and simple status pages */
#background-iframe, #blur-overlay { display: none !important; }
.page-wrapper {
  width: min(100%, 1240px) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: clamp(24px, 5vw, 64px) !important;
  display: block !important;
}
#loginForm ~ *, .page-wrapper .footer-hint { color: var(--muted) !important; }
.page-wrapper > .card-container {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
}
/* Login layout */
#loginForm { width: 100%; }
#loginForm .input-wrapper { background: transparent !important; }
body:has(#loginForm) .page-wrapper {
  min-height: 100vh;
  display: grid !important;
  place-items: center;
  max-width: 620px;
}
body:has(#loginForm) .card-container {
  width: min(100%, 480px) !important;
  padding: clamp(28px, 6vw, 46px) !important;
  background: var(--paper) !important;
}
body:has(#loginForm) .page-header { margin-bottom: 32px !important; text-align: left !important; }
body:has(#loginForm) .page-header::after {
  content: "Edge Console";
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
body:has(#loginForm) .page-icon {
  width: 42px !important; height: 42px !important;
  display: grid !important; place-items: center;
  border-radius: 12px !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: none !important;
}
body:has(#loginForm) .page-icon svg { fill: currentColor !important; }
body:has(#loginForm) .page-title { color: var(--ink) !important; font-size: 30px !important; letter-spacing: -.03em; }

/* Forms and buttons */
input, select, textarea {
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(199, 102, 56, .13) !important;
}
input::placeholder, textarea::placeholder { color: #aaa69d !important; }
label, .form-group label { color: #4e4a43 !important; font-weight: 600 !important; }
.btn, button {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  font-weight: 650 !important;
  letter-spacing: -.01em;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
.btn:hover, button:hover { transform: translateY(-1px); }
.btn-primary, button[type="submit"] {
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 7px 14px rgba(199, 102, 56, .20) !important;
}
.btn-primary:hover, button[type="submit"]:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-danger { color: var(--danger) !important; background: #fff5f3 !important; border-color: #f2ccc7 !important; box-shadow: none !important; }
.btn-mode-toggle, .btn-qrcode, .btn-secondary { color: #49463f !important; background: #f4f2ed !important; border-color: var(--line) !important; box-shadow: none !important; }

/* Admin shell */
body:has(.module) { overflow-x: hidden !important; }
body:has(.module) .page-wrapper { max-width: 1440px !important; }
body:has(.module) .card-container {
  padding: clamp(18px, 3vw, 40px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header {
  display: flex !important;
  gap: 18px;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin: 0 0 34px !important;
  padding: 4px 0 22px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
.header h1, #pageTitle { color: var(--ink) !important; font-size: clamp(28px, 4vw, 42px) !important; line-height: 1.08 !important; letter-spacing: -.045em !important; }
.header h1::after, #pageTitle::after { content: "控制中心"; display: block; margin-top: 9px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.header-buttons { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; }
.header-buttons .btn { padding: 9px 12px !important; font-size: 13px !important; }
.module {
  margin: 14px 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 5px rgba(45, 41, 34, .025) !important;
}
.module-title {
  min-height: 58px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
.module-content, .module > .form-group { padding: 20px !important; }
.module .form-group { margin: 0 0 20px !important; }
.module .form-group:last-child { margin-bottom: 0 !important; }
.network-card, .cf-stats-card, .latency-card, .info-card, .config-section, .config-card {
  background: #fbfaf7 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.network-card:hover, .cf-stats-card:hover { border-color: #d4cec3 !important; transform: translateY(-1px); }
.network-card { transition: transform .16s ease, border-color .16s ease; }
.cf-info-box { color: #625d54 !important; background: #f6f1e9 !important; border: 1px solid #e9ddcc !important; border-radius: var(--radius-sm) !important; }
.cf-progress-bar { background: #ece8e0 !important; border-radius: 999px !important; }
.cf-bar-green { background: var(--accent) !important; }
.cf-bar-blue { background: #5a7d6f !important; }
.network-cards-container, .cf-stats-grid { gap: 12px !important; }
.status-indicator { box-shadow: 0 0 0 3px rgba(46, 125, 90, .12) !important; }
.network-tip, .cf-stat-label, .title-subtitle, small { color: var(--muted) !important; }
.ip-text, .cf-stat-value { color: var(--ink) !important; }

/* Tables, modal and notification hygiene */
table { overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; border-collapse: separate !important; border-spacing: 0 !important; }
th { color: #555149 !important; background: #f4f2ed !important; font-weight: 700 !important; }
td, th { border-color: var(--line) !important; }
tr:nth-child(even) td { background: #fcfbf8 !important; }
.modal, .modal-content, .modal-container { color: var(--ink) !important; background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; }
.success-message { color: #1d6846 !important; background: #e7f4eb !important; border-color: #bce1c8 !important; }
.error-message, .login-error { color: #9f302d !important; background: #fff0ee !important; border-color: #f2c8c4 !important; }

/* Responsive refinement */
@media (max-width: 720px) {
  .page-wrapper { padding: 18px !important; }
  .header { display: block !important; }
  .header-buttons { justify-content: flex-start; margin-top: 16px; }
  .header-buttons .btn { flex: 1 1 calc(50% - 8px); }
  .module-title { padding: 15px 16px !important; }
  .module-content, .module > .form-group { padding: 16px !important; }
  .btn-container { width: 100%; display: flex; margin-top: 8px; }
  .btn-container .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Stronger admin overrides for legacy component-specific selectors. */
body:has(.module) .header,
body:has(.module) .header::before,
body:has(.module) .header::after {
  background: transparent !important;
  box-shadow: none !important;
}
body:has(.module) .header h1,
body:has(.module) .header #pageTitle,
body:has(.module) .header-title h1 {
  color: var(--ink) !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
}
body:has(.module) .header-buttons .btn,
body:has(.module) .header-buttons button {
  color: #4d4942 !important;
  background: #f4f2ed !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
body:has(.module) .header-buttons .btn-primary,
body:has(.module) .header-buttons button:last-child {
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
body:has(.module) .header-buttons .btn-danger {
  color: var(--danger) !important;
  background: #fff5f3 !important;
  border-color: #f2ccc7 !important;
}
body:has(.module) .module-title,
body:has(.module) .module-title:hover {
  color: var(--ink) !important;
  background: var(--paper) !important;
  background-image: none !important;
}
body:has(.module) .btn-primary,
body:has(.module) .btn-primary:hover {
  color: #fff !important;
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
}
body:has(.module) .btn-qrcode,
body:has(.module) .btn-secondary,
body:has(.module) .btn:not(.btn-primary):not(.btn-danger) {
  color: #4d4942 !important;
  background: #f4f2ed !important;
  background-image: none !important;
  border-color: var(--line) !important;
}

/* Legacy IDs use gradient text and dark button rules; neutralize them explicitly. */
html body .header #pageTitle {
  color: var(--ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}
html body .header #modeToggleBtn {
  color: #4d4942 !important;
  background: #f4f2ed !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
html body .header .btn-danger {
  color: var(--danger) !important;
  background: #fff5f3 !important;
  background-image: none !important;
  border-color: #f2ccc7 !important;
}
html body .header .btn-primary {
  color: #fff !important;
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
}