/* ---------- Theme variables ---------- */
:root{
  --radius:12px; --pad:12px;

  /* defaults (dark) */
  --bg:#0e1116; --card:#141922; --text:#e6e8ec; --muted:#9aa3af;
  --border:rgba(255,255,255,.06); --shadow:0 10px 30px rgba(0,0,0,.25);

  --accent:#22d3ee; --accent-weak:rgba(34,211,238,.18);

  /* icons: assume dark background, so lighten icons */
  --icon-filter: invert(1) hue-rotate(180deg) brightness(1.05) contrast(0.95);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --card:#ffffff; --text:#0e1116; --muted:#667085;
    --border:rgba(0,0,0,.08); --shadow:0 12px 24px rgba(16,24,40,.06);

    --accent:#0ea5e9; --accent-weak:rgba(14,165,233,.16);

    /* in light mode, don’t invert icons */
    --icon-filter:none;
  }
}

/* ---------- Base ---------- */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,Segoe UI,Inter,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}

/* ---------- Cards (all widgets) ---------- */
.widget{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease,
             background .12s ease, border-color .12s ease;
}
.widget:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.widget h2{
  margin:2px 0 10px;
  font-size:1rem;
  font-weight:650;
  letter-spacing:.2px;
}

/* ---------- Inputs ---------- */
.widget input,
.widget input[type="search"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  outline:none;
}
.widget input:focus,
.widget input[type="search"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);
}

/* ---------- Bookmarks ---------- */
.widget[data-widget="bookmarks"] ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.widget[data-widget="bookmarks"] li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  transition:transform .12s ease, box-shadow .12s ease,
             background .12s ease, border-color .12s ease;
}
.widget[data-widget="bookmarks"] li a:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-color:var(--accent);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

/* ---------- Compact widgets ---------- */
.widget[data-widget="calendar"],
.widget[data-widget="weather"],
.widget[data-widget="hacker-news"],
.widget[data-widget="lobsters"],
.widget[data-widget="reddit"],
.widget[data-widget="rss"],
.widget[data-widget="videos"]{ padding:10px }

/* Dense lists */
.widget[data-widget="reddit"] li,
.widget[data-widget="rss"] li,
.widget[data-widget="hacker-news"] li,
.widget[data-widget="lobsters"] li{ margin:6px 0 }

/* Separators */
.widget ul li+li{ border-top:1px dashed var(--border); padding-top:6px }

/* ---------- Accents ---------- */
.widget a:hover{ color:var(--accent) }
.widget h2::after{
  content:""; display:block;
  height:2px; width:28px; margin-top:6px;
  background:var(--accent);
  border-radius:2px;
  opacity:.6;
}

/* ---------- Auto tile icons ---------- */
.widget[data-widget="bookmarks"] img,
.widget[data-widget="monitor"] img{
  filter: var(--icon-filter);
}