:root {
  --refresh-max-width: 1200px;
  --refresh-gutter: clamp(12px, 2.4vw, 28px);
  --refresh-radius: 14px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

a {
  overflow-wrap: anywhere;
}

/* Keeps huge custom pages from touching screen edges on phones. */
body > * {
  max-width: 100%;
}

/* Floating controls */
.refresh-controls {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  display: grid;
  gap: 8px;
}

.refresh-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.refresh-btn:hover {
  filter: brightness(1.06);
}

body.focus-mode [class*="sidebar"],
body.focus-mode [class*="related"],
body.focus-mode [class*="recommend"],
body.focus-mode [class*="suggest"],
body.focus-mode [class*="sponsor"],
body.focus-mode [class*="promo"],
body.focus-mode aside {
  display: none !important;
}

body.compact-mode [class*="badge"],
body.compact-mode [class*="chip"],
body.compact-mode [class*="meta"],
body.compact-mode [class*="stats"] {
  opacity: 0.88;
}

@media (max-width: 1024px) {
  body {
    font-size: 15px;
    line-height: 1.55;
  }

  [class*="header"],
  [class*="topbar"],
  [class*="navbar"],
  [class*="tabs"] {
    position: static !important;
  }

  [class*="container"],
  [class*="content"],
  [class*="main"],
  [class*="layout"],
  [class*="inner"],
  main {
    width: min(100%, var(--refresh-max-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--refresh-gutter) !important;
    padding-right: var(--refresh-gutter) !important;
  }

  /* Preserve cards while improving stack behavior. */
  [class*="grid"],
  [class*="row"],
  [class*="columns"] {
    gap: clamp(10px, 2vw, 18px) !important;
    flex-wrap: wrap !important;
  }

  [class*="left"],
  [class*="right"],
  [class*="sidebar"],
  [class*="panel"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  button,
  .button,
  [class*="btn"] {
    min-height: 40px;
  }
}

@media (max-width: 680px) {
  .refresh-controls {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .refresh-btn {
    font-size: 11px;
    padding: 9px 12px;
  }
}