/* layout.css */

/* Container + Header + Footer */
.container { max-width: 1180px; margin: 0 auto; padding: 12px; }

header {
  text-align: center;
  margin-bottom: 24px;
  padding: 32px 0 40px;
  position: relative;
}

.logo { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }

.logo h1 {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(0,170,255,0.4);
}
body.dark-mode .logo h1 {
  text-shadow:0 0 10px rgba(0,255,255,0.8),0 0 20px rgba(0,255,200,0.5);
}

/* Controls Top Right */
.header-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}
.header-controls .btn {
  min-width: unset;
  width: auto;
  padding: 6px 12px;
  font-size: 13px;
}

/* Footer */
footer { text-align:center; padding:24px 0; color:var(--text-muted); font-size:13px; }

/* Grid Layout */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }