/* typeDragon Shared Styles */
* { box-sizing: border-box }

:root {
  --bg:#0e0f13; --fg:#e6e6ea; --muted:#a0a3ab; --card:#151723; --line:#2a2d3a;
  --acc1:#7aa2f7; --acc2:#5a7cc7; --good:#9ece6a; --warn:#e0af68; --danger:#f7768e;
  --btn1:#2a2d3a; --btn2:#1f2229;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,sans-serif;
  font-size:14px
}

.wrap {
  max-width:700px;
  margin:0 auto;
  padding:16px
}

/* Navigation */
.nav-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  background: var(--card);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--line);
}

.nav-tab {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  background: var(--line);
  color: var(--fg);
}

.nav-tab.active {
  background: var(--acc1);
  color: var(--bg);
  font-weight: 600;
}

/* Typography */
h1 {
  font-size:24px;
  margin:0 0 8px;
  background:linear-gradient(135deg,var(--acc1),var(--good));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}

.sub {
  color:var(--muted);
  font-size:14px;
  margin-bottom:16px
}

.version {
  color:var(--acc1);
  font-weight:600;
  font-size:13px;
  padding:2px 6px;
  background:var(--card);
  border:1px solid var(--acc1);
  border-radius:4px;
  margin-left:8px
}

.section-title {
  color:var(--acc1);
  font-weight:700;
  margin:0 0 12px;
  font-size:16px
}

/* Layout Components */
.header-section {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:16px
}

.title-area { flex:1 }

.banner-area {
  flex-shrink:0;
  width:200px;
  height:60px
}

.esp32-banner {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line)
}

.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15)
}

.two-up {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px
}

/* Form Controls */
textarea {
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--fg);
  padding:16px;
  border-radius:8px;
  font-family:monospace;
  font-size:15px;
  resize:vertical
}

textarea:focus {
  outline:none;
  border-color:var(--acc1);
  box-shadow:0 0 0 3px #7aa2f722
}

input[type="number"] {
  background:var(--bg);
  border:1px solid var(--line);
  color:#fff;
  padding:8px 10px;
  border-radius:6px;
  font-family:monospace;
  font-size:14px;
  width:90px
}

input[type="number"]:focus {
  outline:none;
  border-color:var(--acc1);
  box-shadow:0 0 0 3px #7aa2f722
}

input[type="checkbox"] {
  width:18px;
  height:18px;
  accent-color:var(--acc1);
  margin-top:2px;
  flex-shrink:0
}

/* Buttons */
.btn {
  background:linear-gradient(135deg,var(--btn1),var(--btn2));
  color:#fff;
  border:none;
  padding:12px 24px;
  border-radius:8px;
  font-size:16px;
  font-weight:500;
  cursor:pointer;
  width:100%
}

.btn:hover {
  box-shadow:0 6px 18px #00000033
}

.btn:active {
  transform:translateY(0)
}

.btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
  transform:none
}

.btn:disabled:hover {
  transform:none;
  box-shadow:none
}

.btn-blue {
  background:linear-gradient(135deg,var(--btn1),var(--btn2))
}

button {
  background: var(--acc1);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

button:hover {
  background: #3a8eef;
}

button:disabled {
  background: #555;
  cursor: not-allowed;
}

/* Status & Stats */
.stat {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  text-align:center
}

.stat-label {
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin-bottom:4px
}

.stat-value {
  color:var(--good);
  font-weight:600;
  font-family:monospace;
  font-size:14px
}

.stat-value.warn { color:var(--warn) }
.stat-value.danger { color:var(--danger) }
.stat-value.active { color:var(--acc1) }

.stat-dual {
  display:flex;
  flex-direction:column;
  gap:2px
}

.stat-dual .stat-value { font-size:13px }

.stat-dual .stat-sub {
  color:var(--muted);
  font-size:10px;
  font-weight:normal
}

/* Notices & Info */
.enhanced-notice {
  background:#7aa2f711;
  border:1px solid var(--acc1);
  border-radius:8px;
  padding:12px;
  margin-bottom:16px;
  font-size:12px;
  color:var(--muted)
}

.info {
  color:var(--muted);
  font-size:12px;
  margin-top:12px;
  line-height:1.4
}

/* Tooltips */
.tooltip { position:relative }

.tooltip:hover::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  background:var(--bg);
  color:var(--fg);
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  z-index:1000;
  margin-bottom:5px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15)
}

.tooltip:hover::before {
  content:'';
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--line);
  z-index:999;
  margin-bottom:-1px
}

/* Responsive */
@media (max-width:700px) {
  .wrap { padding:12px }
  .header-section { flex-direction:column; gap:12px }
  .banner-area { width:100%; height:50px }
  .two-up { grid-template-columns:1fr }
  .nav-tabs { flex-direction: column; gap: 4px; }
  .nav-tab { text-align: center; }
}