@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=Space+Grotesk:wght@400;500;600&display=swap');

body {
  font-family: var(--body-font, Menlo, 'Lucida Console', 'Liberation Mono', Consolas, monospace);
  background: var(--page-bg);
  color: var(--text);
}

.hub-panel {
  width: min(700px, 100%);
  background: var(--card-bg);
  border-radius: 50px;
  padding: 2.2rem 2.4rem 2.4rem;
  box-shadow: var(--panel-shadow);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hub-meta {
  text-align: left;
}

.meta-label {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.hub-meta h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2.3rem);
  letter-spacing: 0.1em;
  color: var(--heading);
  font-family: var(--heading-font);
  text-transform: uppercase;
}

.hub-stats {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.task-count {
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hub-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 0 0.5rem;
}

.hub-select select {
  background: transparent;
  border: none;
  padding: 0.45rem 2rem 0.45rem 0.8rem;
  font-family: var(--heading-font);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--heading);
  appearance: none;
  cursor: pointer;
}

.hub-select select:focus {
  outline: none;
}

.dropdown-arrow {
  position: absolute;
  right: 0.7rem;
  width: 0;
  height: 0;
  border-left: 0.35rem solid transparent;
  border-right: 0.35rem solid transparent;
  border-top: 0.4rem solid var(--heading);
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hub-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.35rem;
  margin-top: 1.6rem;
  padding: 1.25rem 1.2rem 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 244, 236, 0.95));
  border-radius: 48px;
  border: 1px solid rgba(214, 139, 103, 0.35);
  box-shadow:
    inset 0 -6px 35px rgba(214, 139, 103, 0.2),
    0 14px 30px rgba(209, 150, 112, 0.3);
}

.hub-links a {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--heading);
  text-decoration: none;
  padding-top: calc(var(--pill-size, 74px) + 0.45rem);
  transition: color 0.3s ease;
}

.hub-links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--pill-size, 74px);
  height: var(--pill-size, 74px);
  border-radius: 50%;
  border: 2px solid rgba(200, 86, 59, 0.4);
  background: #fff;
  box-shadow: 0 18px 35px rgba(204, 84, 52, 0.18);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 38px;
}

.hub-links a:hover::before {
  transform: translate(-50%, -4px);
  border-color: rgba(200, 86, 59, 0.8);
  box-shadow: 0 18px 32px rgba(204, 84, 52, 0.25);
}

.hub-links a:hover {
  color: var(--terra-cotta);
}

.hub-links a[href="TODOQDLP.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cline x1='32' y1='16' x2='32' y2='48' stroke='%23c8563b' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='16' y1='32' x2='48' y2='32' stroke='%23c8563b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hub-links a[href="TODOFL.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cline x1='22' y1='18' x2='22' y2='46' stroke='%23c8563b' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='30' y1='18' x2='30' y2='46' stroke='%23c8563b' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='38' y1='18' x2='38' y2='46' stroke='%23c8563b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hub-links a[href="tache.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M34 10c10 0 18 8 18 18s-8 18-18 18' fill='none' stroke='%23c8563b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32 16l10-10' fill='none' stroke='%23c8563b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hub-links a[href="tache>sous-tache.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cline x1='18' y1='18' x2='46' y2='46' stroke='%23c8563b' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='18' y1='46' x2='46' y2='18' stroke='%23c8563b' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='%23c8563b' stroke-width='2'/%3E%3C/svg%3E");
}

.hub-links a[href="road.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='12' y='16' width='40' height='32' rx='4' ry='4' fill='none' stroke='%23c8563b' stroke-width='2'/%3E%3Cpath d='M16 24h6M42 24h6' stroke='%23c8563b' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M24 36h16' stroke='%23c8563b' stroke-width='3' stroke-linecap='round'/%3E%3Ctext x='32' y='30' text-anchor='middle' font-size='12' font-family='IBM Plex Mono' fill='%23c8563b'%3E17%3C/text%3E%3C/svg%3E");
}
.hub-pill {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #fff 0%, #fdf2e8 60%, #fcdac3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--heading);
  font-family: var(--heading-font);
  letter-spacing: 0.12em;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border 0.3s ease;
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.9),
    inset 0 -4px 10px rgba(202, 90, 54, 0.25),
    0 10px 25px rgba(204, 74, 40, 0.2);
  position: relative;
}

.hub-pill:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.9),
    inset 0 -4px 10px rgba(202, 90, 54, 0.35),
    0 16px 30px rgba(204, 74, 40, 0.35);
}

.hub-pill::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 86, 59, 0.25);
  pointer-events: none;
}

.pill-icon {
  font-size: 1.4rem;
}

.pill-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
  .hub-panel {
    padding: 1.8rem 1.6rem 2rem;
    border-radius: 40px;
  }

  .hub-pill {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 480px) {
  .hub-panel {
    padding: 1.4rem 1.2rem 1.6rem;
    border-radius: 34px;
  }

  .hub-pill {
    width: 56px;
    height: 56px;
  }
}