/* ======================================================
   Start Page — Design System
   ====================================================== */
   
 @font-face {
   font-family: "JetBrains Mono";
   src: url("assets/JetBrainsMono-Regular.woff2") format("woff2"),
        url("assets/JetBrainsMono-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }

:root {
  /* Colors */
  --c-bg:           #f9fafb;
  --c-card:         #ffffff;
  --c-card-hover:   #fff;
  --c-border:       #e5e7eb;
  --c-text:         #1f2937;
  --c-muted:        #9ca3af;
  --c-accent:       #93c5fd;
  --c-accent-solid: #2563eb;
  --c-accent-bar:   #7cb8f7;
  --c-danger:       #dc2626;
  --c-success:      #059669;

  /* Tag colors */
  --tag-pink:       #db2777;
  --tag-pink-bg:    #fce7f3;
  --tag-green:      #059669;
  --tag-green-bg:   #ecfdf5;
  --tag-orange:     #c2410c;
  --tag-orange-bg:  #fff7ed;
  --tag-blue:       #2563eb;
  --tag-blue-bg:    #eff6ff;
  --tag-reddit:     #ff4500;
  --tag-reddit-bg:  #fff1f0;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;

  /* Radii */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 20px;

  /* Sizing */
  --layout-max:    90vw;
  --sidebar-width: 280px;
  --modal-max:     700px;
  --icon-sm:       16px;
  --icon-md:       24px;
  --icon-lg:       32px;

  /* Typography */
  /* --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font: var(--mono);
  --fs-xs:         0.72rem;
  --fs-sm:         0.78rem;
  --fs-body:       0.85rem;
  --fs-base:       0.88rem;
  --fs-md:         0.93rem;
  --fs-lg:         0.95rem;
  --fs-xl:         1.1rem;
  --fs-2xl:        1.15rem;
  --fs-3xl:        1.25rem;
  --fs-4xl:        1.35rem;
  
  --fw-base: 400;

  /* Transitions */
  --ease:  0.15s ease;
  --ease-slow: 0.2s ease;

  /* Shadows */
  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* Modal overlay */
  --overlay-bg: rgba(44, 41, 38, 0.35);
}


/* ======================================================
   Dark Mode
   ====================================================== */

[data-theme="dark"] {
  --c-bg:           #0f1117;
  --c-card:         #1a1d27;
  --c-card-hover:   #1e2130;
  --c-border:       #2a2d3a;
  --c-text:         #e4e5e9;
  --c-muted:        #6b7084;
  --c-accent:       #5b8dd9;
  --c-accent-solid: #6ea1f0;
  --c-accent-bar:   #4a7ac4;
  --c-danger:       #f87171;
  --c-success:      #34d399;

  --tag-pink:       #f472b6;
  --tag-pink-bg:    rgba(244, 114, 182, 0.12);
  --tag-green:      #34d399;
  --tag-green-bg:   rgba(52, 211, 153, 0.12);
  --tag-orange:     #fb923c;
  --tag-orange-bg:  rgba(251, 146, 60, 0.12);
  --tag-blue:       #6ea1f0;
  --tag-blue-bg:    rgba(110, 161, 240, 0.12);
  --tag-reddit:     #ff6b3d;
  --tag-reddit-bg:  rgba(255, 107, 61, 0.10);

  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.4);
  --overlay-bg: rgba(0, 0, 0, 0.55);
}

/* Invert dashboard icons in dark mode for better visibility */
[data-theme="dark"] .dashboard-icon {
  filter: brightness(0.9) contrast(1.1);
}


/* ======================================================
   Reset & Base
   ====================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* ======================================================
   Layout
   ====================================================== */

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* max-width: var(--layout-max); */
}

.page-layout {
  display: flex;
  gap: var(--sp-lg);
  width: 100%;
  align-items: flex-start;
}

.feed-col {
  flex: 1;
  min-width: 0;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  /* position: sticky; */
  top: var(--sp-xl);
}

.sidebar-right {
  width: var(--sidebar-width);
  flex-shrink: 0;
  top: var(--sp-xl);
}

@media (max-width: 1100px) {
  .page-layout {
    flex-wrap: wrap;
  }
  .feed-col {
    flex: 1 1 300px;
  }
  .sidebar {
    flex: 1 1 280px;
    width: auto;
    position: static;
    order: 1;
  }
  .sidebar-right {
    flex: 1 1 280px;
    width: auto;
    position: static;
    order: 1;
  }
}

@media (max-width: 700px) {
  .page-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .feed-col,
  .sidebar,
  .sidebar-right {
    flex: none;
    width: 100%;
  }
}


/* ======================================================
   Cards
   ====================================================== */

.card {
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  margin-bottom: 20px;
  transition: box-shadow var(--ease), background-color 0.3s ease, border-color 0.3s ease;
  animation: fadeUp 0.4s ease both;
}

.card:hover {
  box-shadow: var(--shadow-card);
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.12s; }
.card:nth-child(3) { animation-delay: 0.19s; }

.card-label {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-sm);
  padding: var(--sp-xs);
  border-radius: var(--r-sm);
}

.label-pink   { background: var(--tag-pink-bg);   color: var(--tag-pink); }
.label-green  { background: var(--tag-green-bg);  color: var(--tag-green); }
.label-orange { background: var(--tag-orange-bg); color: var(--tag-orange); }
.label-blue   { background: var(--tag-blue-bg);   color: var(--tag-blue); }
.label-reddit { background: var(--tag-reddit-bg); color: var(--tag-reddit); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-md);
}


/* ======================================================
   Login
   ====================================================== */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
}

.login-box {
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.login-box h2 {
  font-size: var(--fs-3xl);
  margin-bottom: 6px;
}

.login-box p {
  font-size: var(--fs-body);
  color: var(--c-muted);
  margin-bottom: 20px;
}

.login-box input {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 10px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
  transition: border-color var(--ease);
  margin-bottom: 12px;
}

.login-box input:focus {
  border-color: var(--c-accent);
}

.login-box button {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 10px;
  border-radius: var(--r-lg);
  border: none;
  background: var(--c-text);
  color: var(--c-card);
  cursor: pointer;
  transition: opacity var(--ease);
}

.login-box button:hover { opacity: 0.85; }

.login-error {
  font-size: 0.8rem;
  color: var(--c-danger);
  margin-bottom: 10px;
  display: none;
}


/* ======================================================
   Page Header
   ====================================================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* max-width: var(--layout-max); */
  width: 100%;
  margin: 0 auto var(--sp-sm);
}

.page-header-date {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.page-header-settings {
  position: relative;
}

.header-settings-btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-xs);
  transition: color var(--ease);
}

.header-settings-btn:hover {
  color: var(--c-text);
}

.page-header-settings .settings-menu {
  position: absolute;
  top: calc(100% + var(--sp-sm));
  right: 0;
}


/* ======================================================
   Weather — Glance-style bar chart
   ====================================================== */

.weather-card {
  padding: 20px var(--sp-md);
}

.weather-header {
  text-align: center;
  margin-bottom: var(--sp-md);
}

.weather-header-desc {
  font-size: var(--fs-2xl);
  line-height: 1.3;
}

.weather-header-feels {
  font-size: var(--fs-base);
  color: var(--c-muted);
  margin-top: 2px;
}

/* Column container */
.weather-columns {
  display: flex;
  justify-content: center;
  margin: 0 -4px;
  min-height: 100px;
}

.weather-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  flex: 1;
  padding-top: 3px;
}

.weather-col-current {
  z-index: 1;
}

/* Temperature values — reveal on hover/current */
.weather-col-value,
.weather-columns:hover .weather-col-value {
  font-size: 11px;
  color: var(--c-text);
  letter-spacing: -0.05em;
  position: relative;
  margin-bottom: var(--sp-xs);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
  user-select: none;
}

.weather-col-current .weather-col-value,
.weather-col:hover .weather-col-value {
  opacity: 1;
  transform: translateY(0);
}

.weather-col-value::after {
  position: absolute;
  content: '\00B0';
  left: 100%;
  color: var(--c-muted);
}

.weather-col-value-neg::before {
  position: absolute;
  content: '-';
  right: 100%;
}

/* Temperature bar */
.weather-bar {
  width: 6px;
  background: var(--c-border);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--c-border);
  border-bottom: 0;
  mask-image: linear-gradient(0deg, transparent 0, #000 8px);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 8px);
  transition: background-color var(--ease-slow), width var(--ease-slow);
}

.weather-col-current .weather-bar,
.weather-col:hover .weather-bar {
  width: 10px;
  background: var(--c-accent);
  border-color: var(--c-accent-bar);
}

/* Precipitation dots */
.weather-col-rain {
  position: absolute;
  inset: 0;
  bottom: 20%;
  overflow: hidden;
  mask-image: linear-gradient(0deg, transparent 40%, #000);
  -webkit-mask-image: linear-gradient(0deg, transparent 40%, #000);
  pointer-events: none;
}

.weather-col-rain::before {
  content: '';
  position: absolute;
  background: radial-gradient(circle at 4px 4px, hsla(200, 90%, 70%, 0.4) 1px, transparent 0);
  background-size: 8px 8px;
  transform: rotate(45deg) translate(-50%, 25%);
  height: 130%;
  aspect-ratio: 1;
  left: 55%;
}

/* Daylight shading */
.weather-col-daylight {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, transparent 28px, hsla(50, 50%, 60%, 0.12));
  pointer-events: none;
}

.weather-col-daylight-rise { border-radius: 14px 0 0 0; }
.weather-col-daylight-set  { border-radius: 0 14px 0 0; }

/* Time labels — reveal on hover/current/every 4th */
.weather-col-time,
.weather-columns:hover .weather-col-time {
  margin-top: var(--sp-xs);
  font-size: 0.65rem;
  color: var(--c-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
  user-select: none;
}

.weather-col:nth-child(4n+1) .weather-col-time,
.weather-col:hover .weather-col-time {
  opacity: 1;
  transform: translateY(0);
}

.weather-col-current .weather-col-time {
  opacity: 1;
  transform: translateY(0);
  color: var(--c-text);
}

/* Location footer */
.weather-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--c-muted);
}

.weather-location-pin {
  width: 0.7em;
  height: 0.7em;
  border-radius: 0 50% 50% 50%;
  background-color: currentColor;
  transform: rotate(225deg);
  position: relative;
  flex-shrink: 0;
}

.weather-location-pin::after {
  content: '';
  position: absolute;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background-color: var(--c-card);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ======================================================
   Next Game Widget
   ====================================================== */

.next-game-card .next-game-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.next-game-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.next-game-badge {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.next-game-info {
  flex: 1;
  min-width: 0;
}

.next-game-date {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.3;
  margin-bottom: 1px;
}

.next-game-date-text {
  color: var(--c-muted);
}

.next-game-status-live {
  color: var(--c-danger);
  font-size: var(--fs-xs);
}

.next-game-teams {
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.next-game-teams .team-highlight {
  color: var(--c-accent-solid);
}


/* ======================================================
   Notes
   ====================================================== */

.notes-area {
  width: 100%;
  flex: 1;
  min-height: 160px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.7;
  resize: none;
  outline: none;
}

.notes-area::placeholder {
  color: var(--c-muted);
}

.notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}

.notes-footer span {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.saved-indicator {
  opacity: 0;
  transition: opacity 0.3s;
  font-size: var(--fs-sm);
  color: var(--c-success);
}

.saved-indicator.show { opacity: 1; }


/* ======================================================
   Shortcuts
   ====================================================== */

.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}

.shortcut {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--c-text);
  font-size: var(--fs-sm);
  /* border: 1px solid transparent; */
  background: var(--c-card-hover);
  transition: all var(--ease);
}

.shortcut:hover {
  /* border-color: var(--c-border); */
  background: var(--c-bg);
  /* transform: translateY(-1px); */
}

.shortcut .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.shortcut .icon .dashboard-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  object-fit: contain;
}

.shortcut .icon .icon-fallback {
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  background: var(--tag-blue-bg);
  color: var(--tag-blue);
}

.shortcut .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ======================================================
   Quick Links
   ====================================================== */

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs);
}

.quick-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-decoration: none;
  padding: var(--sp-xs) 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  transition: all var(--ease);
}

.quick-link:hover {
  color: var(--c-text);
  background: var(--c-card-hover);
  border-color: var(--c-muted);
}

.quick-link-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  object-fit: contain;
  flex-shrink: 0;
}

/* ======================================================
   Feed Tabs (shared by RSS & Reddit)
   ====================================================== */
   
.feed-tab-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-md);
}

.feed-tabs {
  display: flex;
  gap: var(--sp-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.feed-tabs::-webkit-scrollbar {
  display: none;
}

.feed-tab {
  font-family: var(--font);
  font-size: var(--fs-sm);
  padding: var(--sp-xs);
  border-radius: var(--r-sm);
  border: none;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.feed-tab.active {
  color: var(--tag-blue);
  background: var(--tag-blue-bg);
}

.feed-tab:not(.active):hover {
  color: var(--c-text);
}

/* ======================================================
   RSS / Feed Items
   ====================================================== */

.rss-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rss-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.35;
  transition: background 0.12s;
}

.rss-item:hover {
  background: var(--c-bg);
}

.rss-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rss-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rss-thumb img.rss-thumb-fallback {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.rss-body {
  flex: 1;
  min-width: 0;
}

.rss-title {
  display: block;
  line-height: 1.4;
}

.rss-meta {
  display: flex;
  gap: var(--sp-sm);
  margin-top: 2px;
}

.rss-source {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

.rss-time {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

.rss-loading {
  color: var(--c-muted);
  font-size: var(--fs-body);
  padding: 12px 0;
}

.rss-error {
  color: var(--c-danger);
  font-size: 0.82rem;
  padding: var(--sp-sm) 0;
}

/* ======================================================
   Shared Buttons
   ====================================================== */

.edit-shortcuts-btn {
  font-family: var(--font);
  font-size: var(--fs-xl);
  color: var(--c-muted);
  background: none;
  border: none;
  cursor: pointer;
  float: right;
  margin-top: -8px;
  padding: 2px 4px;
  transition: color var(--ease);
}

.edit-shortcuts-btn:hover { color: var(--c-text); }

.clear-btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-xs) 10px;
  cursor: pointer;
  transition: all var(--ease);
}

.clear-btn:hover {
  color: var(--tag-pink);
  border-color: var(--tag-pink);
}

.add-row-btn {
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--c-accent);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: var(--sp-xs);
  padding: var(--sp-xs) 0;
}

.add-row-btn:hover { text-decoration: underline; }

.btn-secondary {
  background: none;
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
}

.btn-secondary:hover { border-color: var(--c-muted); }

.btn-primary {
  background: var(--c-text);
  border: 1.5px solid var(--c-text);
  color: var(--c-card);
}

.btn-primary:hover { opacity: 0.85; }


/* ======================================================
   Modals
   ====================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: var(--sp-lg);
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: 28px;
  width: 100%;
  max-width: var(--modal-max);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}

.modal h3 {
  font-size: var(--fs-xl);
  margin-bottom: 20px;
  font-weight: var(--fw-base);
}

.modal-row {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: 10px;
  align-items: center;
}

.modal-row input {
  flex: 1;
  font-family: var(--font);
  font-size: var(--fs-sm);
  padding: var(--sp-sm) 12px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
  transition: border-color var(--ease);
}

.modal-row input:focus { border-color: var(--c-accent); }
.modal-row input::placeholder { color: var(--c-muted); }

/* Icon preview & input in shortcut/quicklink modals */
.modal-row .icon-preview {
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: var(--sp-xs);
  flex-shrink: 0;
  object-fit: contain;
}

.modal-row .icon-input {
  width: 90px;
  flex: none;
  font-size: 0.8rem;
  color: var(--c-muted);
}

/* Favicon preview in feed/reddit modals */
.modal-row .feed-favicon-preview {
  width: 20px;
  height: 20px;
  border-radius: var(--sp-xs);
  flex-shrink: 0;
  object-fit: contain;
  display: none;
}

.modal-row .feed-favicon-preview.loaded { display: block; }

.modal-row .remove-btn {
  background: none;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  font-size: var(--fs-xl);
  padding: var(--sp-xs);
  line-height: 1;
  transition: color var(--ease);
}

.modal-row .remove-btn:hover { color: var(--tag-pink); }

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.modal-actions button {
  font-family: var(--font);
  font-size: var(--fs-body);
  padding: var(--sp-sm) 18px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--ease);
}


/* ======================================================
   Settings Menu
   ====================================================== */

.settings-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-xs);
  box-shadow: var(--shadow-modal);
  min-width: 160px;
  z-index: 90;
}

.settings-menu.open {
  display: flex;
}

.settings-menu-item {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--c-text);
  background: none;
  border: none;
  padding: var(--sp-sm) 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-align: left;
  transition: background var(--ease);
  white-space: nowrap;
}

.settings-menu-item:hover {
  background: var(--c-bg);
}

.settings-menu-item .menu-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.settings-menu-divider {
  height: 1px;
  background: var(--c-border);
  margin: 2px var(--sp-sm);
}


/* ======================================================
   Animations
   ====================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ======================================================
   Mobile
   ====================================================== */

@media (max-width: 480px) {
  .weather-card {
    display: none;
  }

  body {
    padding: var(--sp-xs) var(--sp-sm);
  }

  /* Modals: full-screen sheet on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 20px var(--sp-md);
    max-height: 90vh;
  }

  /* Modal rows: stack inputs vertically */
  .modal-row {
    flex-wrap: wrap;
  }

  .modal-row .icon-input {
    width: 100%;
    flex: none;
  }

  /* Larger touch targets for buttons */
  .header-settings-btn,
  .edit-shortcuts-btn,
  .feed-tab {
    padding: var(--sp-sm);
    min-height: 36px;
    min-width: 36px;
  }

  .settings-menu-item {
    padding: 12px 14px;
  }

  /* Feed tabs: allow wrapping */
  .feed-tabs {
    flex-wrap: wrap;
  }

  /* Quick links: smaller padding */
  .quick-link {
    padding: var(--sp-xs) var(--sp-sm);
  }
}