:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --brand: #4960e6;
  --brand-2: #4960e6;
  --border: rgba(17,24,39,.12);
  --hairline: rgba(17,24,39,.10);
  --shadow-1: 0 6px 18px rgba(17,24,39,.10);
  --shadow-2: 0 10px 30px rgba(17,24,39,.12);
  --shadow-3: 0 22px 60px rgba(17,24,39,.18);

  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --radius: var(--r-16);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --icon-btn-size: 40px;

  /* Spacing scale */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Surfaces */
  --surface: rgba(255,255,255,.92);
  --surface-2: rgba(17,24,39,.02);
  --surface-3: rgba(255,255,255,.96);
  --topbar-bg: rgba(255,255,255,.75);

  /* Motion */
  --t-fast: 160ms;
  --t-med: 240ms;
  --t-slow: 750ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"]{
  --bg: #0b1020;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,.12);
  --hairline: rgba(255,255,255,.10);
  --shadow-1: 0 8px 22px rgba(0,0,0,.42);
  --shadow-2: 0 14px 42px rgba(0,0,0,.50);
  --shadow-3: 0 22px 70px rgba(0,0,0,.58);
  --surface: rgba(15,23,42,.84);
  --surface-2: rgba(255,255,255,.05);
  --surface-3: rgba(15,23,42,.92);
  --topbar-bg: rgba(15,23,42,.72);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
[hidden]{ display:none !important; }
body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  padding-bottom: 40px;
  position: relative;
}
body.is-locked{
  overflow: hidden;
}
body.has-player{
  padding-bottom: 128px;
}
body.has-player .footer{
  padding-bottom: 140px;
}

/* Gradiente só no topo (não acompanha o scroll) */
body::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  background:
    radial-gradient(900px 450px at 20% 0%, rgba(73,96,230,.14), transparent 60%),
    radial-gradient(800px 450px at 80% 0%, rgba(73,96,230,.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(900px 450px at 20% 0%, rgba(73,96,230,.22), transparent 60%),
    radial-gradient(800px 450px at 80% 0%, rgba(73,96,230,.16), transparent 60%);
}
a{ color: inherit; text-decoration: none; }

.container{ width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
main.container{ padding-top: var(--space-48); }

.meta{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.prose{
  width: min(880px, 100%);
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.8;
}
.prose > *{ max-width: 70ch; margin-left:auto; margin-right:auto; }
.prose h2, .prose h3{ color: var(--text); }
.prose a{ color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover{ filter: brightness(0.96); }

#app{
  position: relative;
  view-transition-name: app;
}

/* PJAX: crossfade skeleton -> content (fallback when View Transitions API isn't available) */
#app.pjax-swapping .pjax-skeleton-overlay{
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
#app.pjax-swapping > :not(.pjax-skeleton-overlay){
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
#app.pjax-swapping.pjax-ready .pjax-skeleton-overlay{ opacity: 0; }
#app.pjax-swapping.pjax-ready > :not(.pjax-skeleton-overlay){
  opacity: 1;
  transform: translateY(0);
}

/* Reveal/stagger on scroll */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* View Transitions API: fade/slide between snapshots */
@supports (view-transition-name: app) {
  ::view-transition-old(app),
  ::view-transition-new(app){
    animation-duration: var(--t-slow);
    animation-timing-function: var(--ease);
  }
  ::view-transition-old(app){ animation-name: vtOld; }
  ::view-transition-new(app){ animation-name: vtNew; }

  @keyframes vtOld{
    from{ opacity: 1; transform: translateY(0); }
    to{ opacity: 0; transform: translateY(-6px); }
  }
  @keyframes vtNew{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    ::view-transition-old(app),
    ::view-transition-new(app){
      animation: none;
    }
  }
}

.account-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding-bottom: 48px;
}
.account-col{
  grid-column: span 6;
}
.account-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.account-actions .btn{
  border-radius: 999px;
  padding: 10px 16px;
}
.account-actions .btn i{
  color: var(--brand);
}

.topbar{
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  transition: transform var(--t-med) var(--ease);
  will-change: transform;
}
.topbar.is-hidden{
  transform: translateY(-120%);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.brand img{ height: 28px; width: auto; display:block; }

.nav{
  display:flex;
  align-items:center;
  gap: 14px;
  color: var(--muted);
  font-weight: 600;
}
.nav a{ padding: 8px 10px; border-radius: 10px; }
.nav a:hover{ background: rgba(17,24,39,.06); color: var(--text); }
.nav a{ transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }

.topbar-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.icon-link{
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-link:hover{
  background: #fff;
  color: var(--brand);
}
.icon-link:active{ transform: translateY(1px) scale(.98); }
.icon-link:focus-visible{
  outline: 3px solid rgba(73,96,230,.35);
  outline-offset: 3px;
}
.burger{
  display:none;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.burger:hover{
  background: #fff;
  color: var(--brand);
}

.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.55);
}
.modal-panel{
  position: relative;
  width: min(720px, calc(100% - 32px));
  margin: 60px auto 0;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--surface-3);
  box-shadow: 0 40px 80px rgba(17,24,39,.30);
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.modal.is-open .modal-panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.modal-title{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}
.modal-title i{ color: var(--brand); }
.modal-body{ padding: 14px; }
.modal-search input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  font-weight: 500;
}
.search-results{
  margin-top: 12px;
  display:grid;
  gap: 8px;
}
.search-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.08);
  background: var(--surface);
}
.search-item:hover{ border-color: rgba(73,96,230,.25); }
.search-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface-2);
  object-fit: contain;
}
.search-logo.placeholder{ display:block; }
.search-text{ min-width: 0; flex: 1 1 auto; }
.search-title{
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-meta{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-arrow{ color: var(--muted); }
.search-empty{
  color: var(--muted);
  padding: 10px 4px;
}

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.mobile-menu.is-open{
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.55);
}
.mobile-menu-panel{
  position:absolute;
  inset: 0;
  background: var(--surface-3);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction: column;
  transform: translateY(10px);
  transition: transform var(--t-med) var(--ease);
}
.mobile-menu.is-open .mobile-menu-panel{
  transform: translateY(0);
}
.mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.mobile-menu-logo{
  height: 28px;
  width: auto;
}
.mobile-menu-links{
  padding: 12px 16px 18px;
  display:grid;
  gap: 10px;
}
.mobile-menu-links a{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.08);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}
.mobile-menu-btn{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.08);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.mobile-menu-links a i{
  color: var(--brand);
  width: 18px;
}
.mobile-menu-btn i{
  color: var(--brand);
  width: 18px;
}
.mobile-menu-links a:hover{
  background: rgba(73,96,230,.08);
  border-color: rgba(73,96,230,.22);
}
.mobile-menu-btn:hover{
  background: rgba(73,96,230,.08);
  border-color: rgba(73,96,230,.22);
}

.icon-btn{
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: 0;
}
.btn.icon-btn{
  display:grid;
  place-items:center;
  line-height: 1;
}
.icon-btn i{ font-size: 16px; line-height: 1; }

.breadcrumbs{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 0 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}
.crumb{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
}
.crumb:hover{ color: var(--text); }
.crumb-sep{ opacity: .55; font-size: 11px; }

.hero{
  padding: 46px 0 18px;
}
.hero h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}
.hero p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: 18px 0 48px;
}
.grid-tight{
  padding-top: 0;
  padding-bottom: var(--space-32);
}

.title-row{
  display:flex;
  align-items:center;
  gap: var(--space-12);
}
.title-row-tight{ gap: var(--space-8); }
.title-row-wide{ gap: var(--space-16); }
.title-row > span{ display:inline-block; }
h1.title-row, h2.title-row{ margin: 0; }
.section-icon{ color: var(--brand); }

.mb-8{ margin-bottom: var(--space-8); }
.mb-12{ margin-bottom: var(--space-12); }
.mb-16{ margin-bottom: var(--space-16); }
.mb-24{ margin-bottom: var(--space-24); }
.mt-8{ margin-top: var(--space-8); }
.mt-12{ margin-top: var(--space-12); }
.mt-16{ margin-top: var(--space-16); }
.card{
  grid-column: span 4;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  box-shadow: var(--shadow-1);
  padding: 14px;
  min-height: 120px;
  position: relative;
}
.card,
.radio-card{
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(73,96,230,.22);
  box-shadow: var(--shadow-2);
}
.card:focus-visible{
  outline: 3px solid rgba(73,96,230,.35);
  outline-offset: 3px;
}
.card.card-grid{ grid-column: span 3; }
.card h3{ margin: 6px 0 8px; font-size: 16px; }
.card .meta{ color: var(--muted); font-size: 13px; }
.recaptcha-inline{
  display:flex;
  justify-content:flex-start;
}
.recaptcha-inline .g-recaptcha{
  transform: scale(.95);
  transform-origin: 0 0;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}
.badge-dot{
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.1;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  position: relative;
}
.btn i{ line-height: 1; }
.btn:hover{ background: rgba(17,24,39,.04); }
.btn:active{ transform: translateY(1px) scale(.99); }
.btn:focus-visible{
  outline: 3px solid rgba(73,96,230,.35);
  outline-offset: 3px;
}
.btn-primary{
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible{
  background: #ffffff;
  color: var(--brand);
  border-color: var(--brand);
  filter: none;
}

.btn.is-loading{
  pointer-events: none;
  opacity: .92;
}
.btn.is-loading::after{
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display:inline-block;
  animation: btnSpin 800ms linear infinite;
  margin-left: 10px;
}
@keyframes btnSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-loading::after{ animation: none; }
}

.table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}
.table th{ color: var(--muted); font-weight: 700; }
.table tr:hover td{ background: rgba(17,24,39,.02); }

.form{
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.field label{ display:block; font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input:not([type="range"]),
.field select,
.field textarea{
  width: 100%;
  border-radius: var(--r-12);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 600;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(73,96,230,.40);
  box-shadow: 0 0 0 4px rgba(73,96,230,.16);
  background: var(--surface-3);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color: rgba(220,38,38,.45);
  box-shadow: 0 0 0 4px rgba(220,38,38,.14);
}
.field-msg{
  margin-top: 6px;
  display:flex;
  align-items:flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.field-msg i{ margin-top: 2px; color: var(--brand); }
.field-msg.is-error{ color: rgba(220,38,38,.92); }
.field-msg.is-error i{ color: rgba(220,38,38,.92); }
.field-msg.is-success{ color: rgba(22,163,74,.92); }
.field-msg.is-success i{ color: rgba(22,163,74,.92); }

.filters{
  margin: 14px 0;
}
.filters-form{
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  padding: 14px;
  display:grid;
  gap: 12px;
}
.filters-row{
  display:grid;
  gap: 10px;
  grid-template-columns: repeat(12, 1fr);
}
.filters-search{
  grid-column: span 6;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface-2);
  color: var(--muted);
  height: 44px;
}
.filters-search input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-weight: 500;
}
.filters-select{
  grid-column: span 3;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface-2);
  color: var(--muted);
  height: 44px;
}
.filters-select select{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-weight: 500;
}
.filters-select i,
.filters-search i{
  color: var(--brand);
}
.filters-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.filter-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.filter-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
.filter-tag i{ color: var(--brand); }
.filter-tag:hover{
  border-color: rgba(73,96,230,.26);
  background: rgba(73,96,230,.08);
}
.filter-tag{ transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.filter-tag:active{ transform: translateY(1px) scale(.99); }

.load-more{
  padding: 0 0 var(--space-48);
}
.load-more-row{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
  justify-content: center;
}
.load-more-auto{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.load-more-auto input{ accent-color: var(--brand); }
.load-more-meta{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface);
}
#loadMoreSentinel{
  height: 1px;
}

.skeleton{
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface) 30%);
  border-radius: 14px;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-30%);
  animation: shimmer 1.2s linear infinite;
}
html[data-theme="dark"] .skeleton::after{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
@keyframes shimmer{
  0%{ transform: translateX(-35%); }
  100%{ transform: translateX(35%); }
}
.radio-card-skel{
  pointer-events:none;
}
.skel-line{
  height: 14px;
  border-radius: 999px;
}
.skel-w-70{ width: 70%; }
.skel-w-45{ width: 45%; }
.skel-w-85{ width: 85%; }
.skel-circle{
  width: 52px;
  height: 52px;
  border-radius: 999px;
}
.field input, .field textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(17,24,39,.02);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.field textarea{ min-height: 180px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.field input:focus, .field textarea:focus{ border-color: rgba(108,92,231,.55); }

#flashArea{ position: relative; }
.toast{
  margin: 14px 0 0;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
  transition: opacity .2s ease, transform .2s ease;
}
.toast-success{
  border-color: rgba(73,96,230,.25);
  background: rgba(73,96,230,.08);
}
.toast-error{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
}
.toast-text{
  color: var(--text);
  font-weight: 500;
}
.toast-close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.85);
  color: var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.toast-close:hover{ color: var(--text); }
.toast.is-hidden{
  opacity: 0;
  transform: translateY(-4px);
}

.footer{
  margin-top: 36px;
  padding: 44px 0 48px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.footer-controls{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-select{
  min-width: 220px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(17,24,39,.03);
  font-weight: 600;
  color: var(--text);
  margin-right: 8px;
}

.radio-card{
  grid-column: span 3;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  position: relative;
  display:flex;
  flex-direction: column;
  min-height: 360px;
}
.radio-card:hover{
  transform: translateY(-2px);
  border-color: rgba(73,96,230,.26);
  box-shadow: var(--shadow-3);
}
.radio-card:focus-visible{
  outline: 3px solid rgba(73,96,230,.38);
  outline-offset: 4px;
}

.radio-card-media{
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: var(--surface-2);
  background-image:
    var(--radio-logo, none),
    radial-gradient(420px 240px at 20% 0%, rgba(73,96,230,.18), transparent 62%),
    radial-gradient(360px 240px at 90% 10%, rgba(73,96,230,.12), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.10));
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center;
  position: relative;
}
.radio-card-media::after{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  color: var(--muted);
  font-size: 46px;
  content: "";
  opacity: .22;
  pointer-events: none;
}
.radio-card-media.has-logo::after{ display:none; }

.radio-card-fav{
  position:absolute;
  top: 14px;
  right: 14px;
  background: rgba(73,96,230,.95);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 700;
  z-index: 1;
}
.radio-card-fav i{ font-size: 14px; }

.radio-card-body{
  padding: 16px 16px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  position: relative;
}

.radio-card-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  color: var(--brand);
  font-weight: 700;
}

.radio-card-meta{
  display:grid;
  gap: 10px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
}
.radio-card-meta-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
.radio-card-meta-row i{
  color: var(--brand);
  width: 18px;
  margin-top: 2px;
}

.radio-card-play{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  display:grid;
  place-items:center;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.radio-card-play i{ font-size: 18px; }
.radio-card-play:hover{
  background: #fff;
  color: var(--brand);
}
.radio-card-play:active{ transform: translateY(1px) scale(.98); }

.radio-card-actions{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.section-head{
  padding: 10px 0 0;
}
.section-head h2{
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.playerbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  z-index: 999;
}
.playerbar-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}
.playerbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.playerbar-link{
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
}
.playerbar-logo{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  object-fit: contain;
}
.playerbar-meta{ min-width: 0; }
.playerbar-top{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.playerbar-title{
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playerbar-eq{
  display:inline-flex;
  align-items:flex-end;
  gap: 3px;
  height: 16px;
  flex: 0 0 auto;
}
.playerbar-eq span{
  width: 3px;
  border-radius: 3px;
  background: var(--brand);
  height: 4px;
  opacity: .9;
}
.playerbar.is-playing .playerbar-eq span{
  animation: eq 900ms ease-in-out infinite;
}
.playerbar.is-playing .playerbar-eq span:nth-child(2){ animation-delay: 120ms; }
.playerbar.is-playing .playerbar-eq span:nth-child(3){ animation-delay: 240ms; }
@keyframes eq{
  0%,100%{ height: 5px; }
  30%{ height: 15px; }
  60%{ height: 8px; }
}
.playerbar-now{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playerbar-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 0;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.playerbar-pill.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.playerbar.is-loading .playerbar-pill{
  border-color: rgba(73,96,230,.24);
  background: rgba(73,96,230,.08);
  color: var(--text);
}

.playerbar-controls{
  display:flex;
  align-items:center;
  gap: 12px;
}
.playerbar-mute{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.playerbar-mute:hover{
  border-color: rgba(73,96,230,.22);
  color: var(--brand);
}
.playerbar-mute.is-muted{
  border-color: rgba(73,96,230,.28);
  background: rgba(73,96,230,.10);
  color: var(--brand);
}
.playerbar-volume-wrap{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
}
.playerbar-volume{
  width: min(160px, 26vw);
  accent-color: var(--brand);
}
.playerbar-toggle{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--brand);
}
.playerbar-toggle:hover{
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
  filter: none;
}

.pagination{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 80px;
}
.pagination-pages{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
}
.pagination .page,
.pagination .dots{
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration:none;
  color: var(--muted);
}
.pagination .page{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
}
.pagination .page.is-active{
  border-color: rgba(73,96,230,.40);
  color: var(--brand);
  background: rgba(73,96,230,.10);
  font-weight: 700;
}

/* Radio page (detail) */
.radio-page{
  padding: 30px 0 10px;
}
.radio-hero{
  display:flex;
  justify-content:center;
}
.radio-hero-card{
  width: min(520px, 100%);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(73,96,230,.20), transparent 62%),
    radial-gradient(780px 420px at 90% 10%, rgba(73,96,230,.14), transparent 62%),
    rgba(73,96,230,.08);
  border-radius: var(--r-20);
  padding: 18px;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(73,96,230,.20);
  position: relative;
  overflow: hidden;
}
.radio-hero-card::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34), transparent 58%);
  pointer-events: none;
}
html[data-theme="dark"] .radio-hero-card::before{
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 58%);
}
.radio-hero-card > *{
  position: relative;
  z-index: 1;
}
.radio-hero-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-20);
  background-color: var(--surface-3);
  border: 1px solid var(--hairline);
  background-image:
    var(--radio-logo, none),
    radial-gradient(420px 240px at 20% 0%, rgba(73,96,230,.10), transparent 62%),
    radial-gradient(360px 240px at 90% 10%, rgba(73,96,230,.08), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.10));
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center;
  position: relative;
  overflow: hidden;
}
.radio-hero-media::after{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  color: var(--muted);
  font-size: 58px;
  content: "\f001";
  opacity: .16;
  pointer-events: none;
}
.radio-hero-media.has-logo::after{ display:none; }
.radio-hero-play{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.92);
  color: var(--brand);
  box-shadow: 0 18px 40px rgba(17,24,39,.20);
  cursor: pointer;
}
.radio-hero-play i{ font-size: 22px; }
.radio-hero-play:hover{ filter: brightness(1.01); }

.radio-hero-title{
  text-align:center;
  margin: 16px 0 6px;
  font-size: 26px;
  font-weight: 700;
  color: var(--brand);
  position: relative;
}

.radio-hero-meta{
  display:flex;
  justify-content:center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}
.radio-hero-meta-row{
  display:flex;
  align-items:center;
  gap: 8px;
}
.radio-hero-meta-row i{ color: var(--brand); }
.radio-hero-link{
  color: var(--muted);
  text-decoration: none;
}
.radio-hero-link:hover{
  color: var(--brand);
  text-decoration: underline;
}
.radio-now{
  margin-top: 10px;
  text-align:center;
  color: var(--muted);
  font-size: 13px;
}
.radio-hero-tags{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}
.radio-hero-tags-sep{
  color: rgba(17,24,39,.20);
}

.radio-hero-like{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}
.like-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.10);
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}
.like-pill:hover{ background: rgba(255,255,255,.92); }

.radio-description{
  width: min(880px, 100%);
  margin: 18px auto 0;
  color: var(--muted);
  line-height: 1.85;
  text-align: center;
}
.radio-description p{ margin: 0 0 12px; }

.radio-share{
  width: min(880px, 100%);
  margin: 26px auto 0;
  text-align:center;
}
.radio-share-title{
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 10px;
}
.radio-share-icons{
  display:flex;
  justify-content:center;
  gap: 14px;
}
.share-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.88);
  color: var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.share-icon:hover{ color: var(--brand); }

@media (max-width: 920px){
  .card{ grid-column: span 6; }
  .card.card-grid{ grid-column: span 4; }
  .radio-card{ grid-column: span 4; }
  .filters-search{ grid-column: span 12; }
  .filters-select{ grid-column: span 6; }
}
@media (max-width: 560px){
  :root{ --icon-btn-size: 38px; }
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }
  .topbar-inner{ flex-direction: row; align-items: center; }
  #themeToggle{ display:none; }
  .card{ grid-column: span 12; }
  .card.card-grid{ grid-column: span 6; }
  .radio-card{ grid-column: span 6; }
  .playerbar-inner{ flex-direction: row; align-items:center; }
  .playerbar-controls{ width: auto; justify-content: flex-end; }
  .playerbar-volume{ width: min(240px, 60vw); }
  .playerbar-volume-wrap{ display:none; }
  .pagination{ flex-direction: column; align-items: stretch; }
  .pagination .btn{ justify-content:center; }
  .filters-select{ grid-column: span 12; }
  .modal-panel{
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .account-col{ grid-column: span 12; }

  .hero{
    padding: 34px 0 14px;
  }
  .hero h1{
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.recent-box{
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-1);
  padding: 14px;
}

.section-head-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}