/* SyncTV Help Guide visual polish v2.
 * Manual-only layer: keeps one consistent content width and makes Light/Dark
 * use the same structure instead of inheriting portal/Broadcast hero styling.
 */

/* ---------- Shared geometry ---------- */
.shell,
.topbar-inner{
  width:min(1120px,calc(100% - 48px))!important;
}
.shell{padding-bottom:72px!important}

/* The guide hero should look intentional in both themes, not inherit the
 * generic portal/Broadcast .hero treatment from account-theme-v1.css. */
.hero{
  margin-top:34px!important;
  padding:38px 40px 40px!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  box-shadow:var(--shadow)!important;
}
.hero h1{max-width:820px!important}
.hero p{max-width:800px!important}
.search-wrap{max-width:820px!important;margin-top:26px!important}

.section-head{margin:34px 0 16px!important}
.quick-grid{
  max-width:none!important;
  width:100%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
.quick-card{
  min-height:126px!important;
  padding:22px!important;
}

/* Keep every step-by-step section on the same left/right edges. The old
 * permanent 290px sidebar made all later guide cards look unnecessarily
 * narrow and left a large empty column once the shortcut card had passed. */
.guide-layout{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
}
.guide-stack{width:100%!important;gap:14px!important}
.side-card{
  order:-1!important;
  position:static!important;
  top:auto!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  padding:20px!important;
}
.side-card h3,
.side-card p{grid-column:1/-1!important}
.side-card p{margin:4px 0 8px!important}
.side-card a{
  display:flex!important;
  align-items:center!important;
  min-height:44px!important;
  padding:10px 12px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:var(--soft)!important;
}
.side-card a:hover{
  border-color:var(--accent)!important;
  color:var(--accent)!important;
}

.guide-group,
.support-card{width:100%!important}
.guide-group>div:first-child{padding:24px 24px 18px!important}
summary{padding:18px 54px 18px 24px!important}
.answer{padding:0 24px 24px!important}
.support-card{margin-top:28px!important;padding:26px 28px!important}

/* ---------- Light theme ---------- */
html[data-synctv-theme="light"] body{
  background:#f5f7fb!important;
  color:#182238!important;
}
html[data-synctv-theme="light"] body{
  --bg:#f5f7fb;
  --card:#ffffff;
  --soft:#f1f4f9;
  --line:#dce3ed;
  --text:#182238;
  --muted:#637089;
  --accent:#6748e8;
  --accent-soft:#f0ecff;
  --shadow:0 10px 28px rgba(28,39,61,.07);
}
html[data-synctv-theme="light"] .topbar{
  background:rgba(245,247,251,.92)!important;
  border-color:var(--line)!important;
}
html[data-synctv-theme="light"] .hero{
  background:linear-gradient(135deg,#eef4ff 0%,#f8f5ff 100%)!important;
  color:var(--text)!important;
}
html[data-synctv-theme="light"] .quick-card,
html[data-synctv-theme="light"] .guide-group,
html[data-synctv-theme="light"] .side-card,
html[data-synctv-theme="light"] .support-card,
html[data-synctv-theme="light"] details{
  background:var(--card)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}
html[data-synctv-theme="light"] details[open] summary,
html[data-synctv-theme="light"] .steps li,
html[data-synctv-theme="light"] .side-card a{
  background:var(--soft)!important;
}
html[data-synctv-theme="light"] .search-row{
  background:#fff!important;
  border-color:var(--line)!important;
}

/* ---------- Dark theme ---------- */
html[data-synctv-theme="dark"] body{
  --bg:#0b1220;
  --card:#141d2d;
  --soft:#1b2638;
  --line:#2f3d55;
  --text:#eef3fb;
  --muted:#a7b3c7;
  --accent:#9c86ff;
  --accent-soft:#292342;
  --shadow:0 12px 32px rgba(0,0,0,.20);
  background:#0b1220!important;
  color:var(--text)!important;
}
html[data-synctv-theme="dark"] .topbar{
  background:rgba(11,18,32,.92)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
html[data-synctv-theme="dark"] .hero{
  background:linear-gradient(135deg,#16233a 0%,#211d3c 100%)!important;
  border-color:#35435d!important;
  color:var(--text)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.24)!important;
}
html[data-synctv-theme="dark"] .quick-card,
html[data-synctv-theme="dark"] .guide-group,
html[data-synctv-theme="dark"] .side-card,
html[data-synctv-theme="dark"] .support-card,
html[data-synctv-theme="dark"] details{
  background:var(--card)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
html[data-synctv-theme="dark"] details[open] summary,
html[data-synctv-theme="dark"] .steps li,
html[data-synctv-theme="dark"] .side-card a{
  background:var(--soft)!important;
  border-color:#34445e!important;
}
html[data-synctv-theme="dark"] .search-row{
  background:#101929!important;
  border-color:#34445e!important;
  box-shadow:none!important;
}
html[data-synctv-theme="dark"] .search-row input{
  background:transparent!important;
  color:var(--text)!important;
  border:0!important;
}
html[data-synctv-theme="dark"] .search-row input::placeholder{color:#8290a8!important}
html[data-synctv-theme="dark"] .quick-card p,
html[data-synctv-theme="dark"] .guide-group .intro,
html[data-synctv-theme="dark"] .section-head p,
html[data-synctv-theme="dark"] .side-card p,
html[data-synctv-theme="dark"] .support-card p,
html[data-synctv-theme="dark"] footer{color:var(--muted)!important}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .shell,.topbar-inner{width:min(100% - 28px,1120px)!important}
  .side-card{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:650px){
  .hero{margin-top:20px!important;padding:28px 22px 30px!important;border-radius:18px!important}
  .quick-grid{grid-template-columns:1fr!important}
  .quick-card{min-height:0!important}
  .side-card{grid-template-columns:1fr!important;padding:18px!important}
  .guide-group>div:first-child{padding:20px 18px 15px!important}
  summary{padding:16px 48px 16px 18px!important}
  summary::after{right:18px!important}
  .answer{padding:0 18px 20px!important}
  .support-card{padding:22px!important}
}