/* ===========================
   CSS Reset / Base
=========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  scroll-behavior: smooth;
}

/* ===========================
   Theme Variables
=========================== */
:root {
  /* Colors */
  --bg: #ffffff;
  --fg: #111111;
  --panel: #f0f0f0;
  --highlight: rgba(255, 224, 138, 0.85);
  --accent: #03a9f4;

  /* Layout */
  --max-content-width: 1000px;
  --spacing: 16px;

  /* Fonts */
  --font-base: 1rem;
  --font-large: 1.2rem;
  --font-small: 0.85rem;
}

/* Dark Mode */
body.dark {
  --bg: #121212;
  --fg: #eaeaea;
  --panel: #1e1e1e;
  --highlight: rgba(3, 218, 198, 0.35);
}

/* Custom Background Mode */
body.bg {
  --bg: transparent;
  background: url("https://cdn.example.com/bg.jpg") center / cover fixed no-repeat;
}

/* ===========================
   Links
=========================== */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover,
a:focus {
  color: var(--highlight);
  outline: none;
}

a:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* ===========================
   Typography
=========================== */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--spacing);
  line-height: 1.2;
}

p {
  margin-bottom: var(--spacing);
  word-wrap: break-word;
}

/* ===========================
   Containers & Layout
=========================== */
.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--spacing);
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--spacing);
}

.hidden {
  display: none !important;
}

/* ===========================
   Sticky Panel
=========================== */
.sticky-panel {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-content-width);
  background: var(--panel);
  padding: 10px var(--spacing);
  display: flex;
  align-items: center;
  gap: var(--spacing);
  z-index: 10;
  flex-wrap: wrap;
}

/* ===========================
   Buttons / Icons
=========================== */
.icon {
  font-size: 1.4rem;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.icon:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: 36px;
  background: var(--fg);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--font-small);
  white-space: nowrap;
}

/* ===========================
   Inputs
=========================== */
input[type="number"],
input[type="range"] {
  font-size: var(--font-base);
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
}

body.dark input[type="number"],
body.dark input[type="range"] {
  border-color: #444;
  background: #1e1e1e;
  color: var(--fg);
}

/* ===========================
   Utility Classes
=========================== */
.center-text { text-align: center; }
.mt { margin-top: var(--spacing); }
.mb { margin-bottom: var(--spacing); }
.p { padding: var(--spacing); }
.rounded { border-radius: 8px; }

/* ===========================
   Mobile-first Responsive Helpers
=========================== */
@media (min-width: 480px) {
  html { font-size: 16px; }
}

@media (min-width: 768px) {
  html { font-size: 17px; }
}

@media (min-width: 1024px) {
  html { font-size: 18px; }
}

/* ===========================
   Images
=========================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}