/* =====================================================================
   Wixct Wiki · the Collections+ / SubSyncer look. Loaded after styles.css.
   1. Theme tokens   2. Atmosphere   3. Header + tools   4. Ko-fi dialog
   5. Home   6. Boxes (Collections+ cards)   7. Guide pages   8. Search
   9. Motion: 3D tilt, reveal, headline words   10. Small screens
   ===================================================================== */

/* ---------- 1. Theme tokens ----------
   Dark  = warm charcoal night (never pure black)
   Light = warm sand paper     (never pure white)
   The old names (--page, --card, --text-2…) are mapped so styles.css follows along. */
:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1113;
  --surface:rgba(23,26,29,.72);
  --surface-solid:#16191c;
  --raised:#1d2125;
  --well:#121417;
  --line:#343a41;
  --dim:#b5b0a6;
  --faint:#837f78;
  --accent:#ff8a3d;
  --accent-soft:rgba(255,138,61,.14);
  --on-accent:#1b0e04;
  --btn:#ece7dc;
  --on-btn:#141618;
  --hover:rgba(236,231,220,.08);
  --glow-a:rgba(255,138,61,.11);
  --glow-b:rgba(92,160,255,.08);
  --glow-c:rgba(120,220,150,.035);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --card-shadow:0 10px 26px rgba(0,0,0,.55);
  --header-frost:rgba(15,17,19,.74);
  --grain:.06;
  --grain-blend:normal;
  --ok:#3ddc84;
  --bad:#ff7d89;
  --shot:#0b0c0e;

  --page:var(--bg);
  --card:var(--surface);
  --elevated:var(--raised);
  --border:#252a2f;
  --border-soft:#252a2f;
  --text:#ece7dc;
  --text-2:var(--dim);
  --text-3:var(--faint);
  --accent-light:var(--accent);
  --accent-dim:var(--accent-soft);
  --accent-glow:rgba(255,138,61,.28);
  --secondary:var(--accent);
  --secondary-dim:var(--accent-soft);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f1ebdf;
  --surface:rgba(251,247,239,.74);
  --surface-solid:#f8f3ea;
  --raised:#fdfaf4;
  --well:#e8e0d1;
  --line:#cbbfab;
  --dim:#574f45;
  --faint:#857b6d;
  --accent:#cf5a17;
  --accent-soft:rgba(207,90,23,.12);
  --on-accent:#fff7ef;
  --btn:#211d18;
  --on-btn:#f6f0e5;
  --hover:rgba(33,29,24,.07);
  --glow-a:rgba(255,150,80,.22);
  --glow-b:rgba(110,150,255,.13);
  --glow-c:rgba(120,200,140,.08);
  --shadow:0 18px 50px rgba(80,60,30,.16);
  --card-shadow:0 10px 24px rgba(70,50,20,.22);
  --header-frost:rgba(241,235,223,.78);
  --grain:.09;
  --grain-blend:multiply;
  --ok:#1f6b3d;
  --bad:#a3262f;
  --shot:#e8e0d1;

  --border:#ddd3c2;
  --border-soft:#ddd3c2;
  --text:#211d18;
  --accent-glow:rgba(207,90,23,.25);
}
:root{
  --font:'IBM Plex Sans Arabic','Space Grotesk',Tahoma,sans-serif;
  --latin:'Space Grotesk','IBM Plex Sans Arabic',system-ui,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --radius:clamp(14px, 1.8vmin, 22px);
  --gutter:clamp(16px, 3.4vmin, 56px);
  --header-h:84px;
}

html{ background:var(--bg); scroll-padding-top:calc(var(--header-h) + 12px); }
body{ background:transparent; color:var(--text); font-family:var(--font); padding-top:var(--header-h); }
/* clip, not hidden: a hidden overflow turns <body> into a scroll box and breaks position:sticky */
body{ overflow-x:clip; }
body::before{ content:none; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
a, button, summary{ -webkit-tap-highlight-color:transparent; }
/* theme swaps fade instead of flashing */
body, .site-header, .box, .guide-card, figure, .tool{ transition:background-color .35s ease, color .35s ease, border-color .35s ease; }

@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s; }

/* ---------- 2. Atmosphere: glow + film grain ---------- */
.glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 88% 16%, var(--glow-a), transparent 60%),
    radial-gradient(55vmax 45vmax at 10% 88%, var(--glow-b), transparent 60%),
    radial-gradient(40vmax 30vmax at 55% 55%, var(--glow-c), transparent 60%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(-2vw, 2vh, 0) scale(1.06); } }
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:var(--grain); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Header: fixed, clear at the top, frosted once the page scrolls ---------- */
.site-header{
  direction:rtl; position:fixed; z-index:40; top:0; left:0; right:0;
  width:auto; height:auto; margin:0; border:0; background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px;
  padding-top:calc(clamp(12px, 2vmin, 24px) + env(safe-area-inset-top,0px));
  padding-bottom:clamp(10px, 1.4vmin, 16px);
  padding-inline:calc(var(--gutter) + env(safe-area-inset-right,0px)) calc(var(--gutter) + env(safe-area-inset-left,0px));
  transition:background-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled{ background:var(--header-frost); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
.head-start{ justify-self:start; display:flex; align-items:center; gap:6px; min-width:0; }
.home-link svg{ transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .home-link:hover svg{ transform:translateY(-2px); color:var(--accent); } }
.site-header .brand{
  justify-self:start; display:inline-flex; align-items:center; gap:clamp(10px, 1.6vmin, 16px);
  color:var(--text); text-decoration:none; min-width:0; view-transition-name:brand;
}
.brand .mark{ width:clamp(30px, 3.8vmin, 42px); height:clamp(30px, 3.8vmin, 42px); flex-shrink:0; display:block; overflow:visible; }
.brand .mark .p1{ fill:var(--accent); }
.brand .mark .p2{ fill:var(--text); opacity:.22; }
.brand .mark .p3{ fill:var(--text); opacity:.5; }
.brand .mark .ln{ stroke:var(--on-accent); stroke-width:2.4; stroke-linecap:round; opacity:.75; }
.brand .mark :is(rect, g){ transition:transform .35s var(--ease-out); transform-box:fill-box; transform-origin:50% 100%; }
@media (hover:hover){
  .brand:hover .mark .p2{ transform:rotate(-10deg) translateX(-6%); }
  .brand:hover .mark .p3{ transform:rotate(10deg) translateX(6%); }
  .brand:hover .mark .front{ transform:translateY(-6%); }
}
.brand .div{ width:1px; height:clamp(22px, 3vmin, 34px); background:var(--line); }
.brand .name{ font:600 clamp(17px, 2.3vmin, 26px)/1 var(--latin); letter-spacing:.01em; white-space:nowrap; direction:ltr; }
.brand .name b{ color:var(--accent); font-weight:700; }

.tools{ justify-self:end; display:flex; align-items:center; gap:4px; view-transition-name:tools; }
.tool{
  position:relative; display:inline-grid; place-items:center;
  width:44px; height:44px; padding:0; border:0; border-radius:999px;
  background:transparent; color:var(--text); cursor:pointer; overflow:hidden; text-decoration:none;
  transition:background-color .2s ease, transform 160ms var(--ease-out);
}
.tool:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .tool:hover{ background:var(--hover); } }
.tool .ic{ grid-area:1/1; display:grid; place-items:center; transition:transform 300ms var(--ease-out), opacity 200ms ease; }
.tool svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="dark"] #theme .moon{ opacity:0; transform:rotate(-90deg) scale(.6); }
:root[data-theme="light"] #theme .sun{ opacity:0; transform:rotate(90deg) scale(.6); }
.tool.telegram svg{ fill:currentColor; stroke:none; width:19px; height:19px; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .tool.telegram:hover svg{ transform:translate(-2px,-2px) rotate(-8deg); color:var(--accent); } }

/* Ko-fi cup: steam rises and the heart beats on hover */
.kofi-link svg{ width:24px; height:24px; stroke-width:2; overflow:visible; }
.kofi-link .heart{ fill:currentColor; stroke:none; transform-box:fill-box; transform-origin:center; }
.kofi-link .steam{ opacity:0; transform:translateY(3px); transition:opacity 200ms ease, transform 300ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .kofi-link:hover .steam{ opacity:1; transform:none; }
  .kofi-link:hover .heart{ animation:beat 600ms var(--ease-out); color:var(--accent); }
}
@keyframes beat{ 30%{ transform:scale(1.25); } 60%{ transform:scale(.95); } }

.tools .sep{ width:1px; height:24px; background:var(--line); margin:0 8px; }
.me{
  display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 4px 0 14px;
  border-radius:999px; color:var(--text); text-decoration:none; font:600 16px/1 var(--latin);
  transition:background-color .2s ease, transform 160ms var(--ease-out);
}
.me img{
  width:34px; height:34px; border-radius:999px; object-fit:cover; object-position:center 38%; display:block;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--line);
  transition:box-shadow .25s ease, transform .35s var(--ease-out);
}
.me:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .me:hover{ background:var(--hover); }
  .me:hover img{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); transform:rotate(6deg); }
}

/* header search pill keeps its stretch, in the new colours */
.header-search-shell{ border-color:var(--border); background:var(--surface); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.wiki-header-search.is-open .header-search-shell{ border-color:var(--line); }
.wiki-header-search:focus-within .header-search-shell{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.wiki-header-search .wiki-search-button, .wiki-header-search .wiki-search-button:hover{ color:var(--text); background:transparent; font-family:var(--font); }
.wiki-header-search.has-results{ --search-status-color:var(--ok); --search-status-fill:color-mix(in srgb, var(--ok) 12%, transparent); }
.wiki-header-search.no-results{ --search-status-color:var(--bad); --search-status-fill:color-mix(in srgb, var(--bad) 12%, transparent); }

/* ---------- 4. Ko-fi dialog ---------- */
dialog.kofi{
  width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 32px);
  padding:20px; border:1px solid var(--border); border-radius:20px;
  background:var(--raised); color:var(--text); box-shadow:var(--shadow); overflow:auto; direction:rtl;
}
dialog.kofi::backdrop{ background:rgba(8,8,10,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
dialog.kofi[open]{ animation:pop-in 250ms var(--ease-out); }
dialog.kofi[open]::backdrop{ animation:fade-in 250ms var(--ease-out); }
dialog.kofi[data-state="closing"]{ opacity:0; transform:scale(.96); transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@keyframes pop-in{ from{ opacity:0; transform:scale(.96); } }
@keyframes fade-in{ from{ opacity:0; } }
.kofi-head{ display:flex; align-items:center; gap:12px; }
.kofi-head h2{ flex:1; margin:0; font-size:22px; line-height:1.3; }
.kofi-close{
  display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:999px;
  background:var(--hover); color:var(--text); cursor:pointer; transition:transform 160ms var(--ease-out);
}
.kofi-close:active{ transform:scale(.94); }
.kofi-close svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none; }
.kofi-body{ margin:8px 0 16px; color:var(--dim); font-size:16px; line-height:1.6; }
.kofi-frame{ display:block; width:100%; height:585px; border:0; border-radius:14px; background:#fff; transition:height 300ms var(--ease-out); }
.kofi-frame.is-open{ height:712px; }
.kofi-open{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-top:14px; padding:0 16px;
  border-radius:999px; background:var(--hover); color:var(--text); font-size:15px; font-weight:600; text-decoration:none;
}
.kofi-open svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transform:scaleX(-1); }

/* ---------- 5. Home ---------- */
.home-page .home-hero{ width:min(1040px, calc(100% - 32px)); padding:clamp(28px, 6vh, 72px) 0 clamp(40px, 7vh, 80px); }
.home-hero::after, .hero::after{ background:linear-gradient(90deg, transparent, var(--line), transparent); opacity:.6; }
.home-intro{ max-width:none; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.home-intro h1, .guide-page .hero h1, .apple-page .hero h1{
  font-family:var(--font); font-weight:700; letter-spacing:0; line-height:1.18; text-wrap:balance; cursor:default;
}
.home-intro h1{ font-size:clamp(2.3rem, 7vmin, 5.4rem); }
.home-intro h1 > span, .hero h1 > span, .guide h2 > span, .hero h1 em, .guide-page .hero h1 em{ color:var(--accent); }
.home-intro h1 > .hw, .hero h1 > .hw{ color:var(--text); }
.home-intro > .home-description{ max-width:46ch; margin:clamp(14px, 2.2vmin, 24px) auto 0; color:var(--dim); font-size:clamp(15px, 1.9vmin, 20px); line-height:1.7; text-wrap:balance; }
.home-filter-panel{ display:flex; flex-direction:column; align-items:center; }
.home-filter-toggle{
  min-height:42px; padding:0 18px; border-radius:999px; border-color:var(--line); background:var(--surface); color:var(--text);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .2s ease, background-color .2s ease, transform 160ms var(--ease-out);
}
.home-filter-toggle:active{ transform:scale(.96); }
.home-filter-toggle:hover, .home-filter-toggle[aria-expanded="true"], .home-filter-toggle.has-active-filter{ border-color:var(--accent); }
.home-filter-options{ justify-content:center; }
.home-filter-options button{ border-radius:999px; background:var(--surface); color:var(--dim); transition:all .2s ease; }
.home-filter-options button:hover{ border-color:var(--line); color:var(--text); background:var(--hover); }
.home-filter-options button[aria-pressed="true"]{ border-color:var(--accent); color:var(--on-accent); background:var(--accent); }
.home-filter-options:not([hidden]) button{ animation:chip-in .4s var(--ease-out) both; }
.home-filter-options button:nth-child(2){ animation-delay:40ms; } .home-filter-options button:nth-child(3){ animation-delay:80ms; }
.home-filter-options button:nth-child(4){ animation-delay:120ms; } .home-filter-options button:nth-child(5){ animation-delay:160ms; }
.home-filter-options button:nth-child(6){ animation-delay:200ms; }
@keyframes chip-in{ from{ opacity:0; transform:translateY(8px) scale(.94); } }

/* a fan of three floating guide pages above the headline */
.hero-fan{ position:relative; width:180px; height:118px; margin:0 auto clamp(14px, 2.6vmin, 30px); perspective:700px; }
.hero-fan .pg{
  position:absolute; bottom:0; left:50%; width:74px; height:100px; margin-left:-37px;
  display:grid; place-items:center; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(160deg, var(--raised), var(--well)); box-shadow:var(--card-shadow);
  transform-origin:50% 100%; transition:transform .6s var(--ease-out);
}
.hero-fan .pg svg{ width:30px; height:30px; fill:none; stroke:var(--text); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.hero-fan .pg:nth-child(1){ transform:translate3d(calc(-58% + var(--px,0px) * -.6), calc(var(--py,0px) * -.6), 0) rotate(-14deg) rotateY(var(--ry,0deg)); }
.hero-fan .pg:nth-child(3){ transform:translate3d(calc(58% + var(--px,0px) * -.6), calc(var(--py,0px) * -.6), 0) rotate(14deg) rotateY(var(--ry,0deg)); }
.hero-fan .pg:nth-child(2){
  z-index:2; background:linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  border-color:transparent; box-shadow:0 14px 34px var(--accent-glow);
  transform:translate3d(var(--px,0px), calc(-8% + var(--py,0px)), 30px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  animation:bob 5s ease-in-out infinite;
}
.hero-fan .pg:nth-child(2) svg{ stroke:var(--on-accent); opacity:1; }
@keyframes bob{ 50%{ translate:0 -6px; } }
@media (hover:hover){
  .hero-fan:hover .pg:nth-child(1){ transform:translateX(-78%) rotate(-24deg); }
  .hero-fan:hover .pg:nth-child(3){ transform:translateX(78%) rotate(24deg); }
}


/* ---------- 6. Boxes: every card, panel and notice is a Collections+ card ---------- */
.guide-cards{ gap:clamp(14px, 2.2vmin, 26px); perspective:1400px; }
:is(.guide-card, .callout, .apple-alert, .torbox-dropdown, .method-choice, .method-panel, .app-detail, .required-dropdown,
    .pros-cons > div, .key-grid a, .service-link, .requirement-grid a, .instance-card, .general-checklist > article,
    .nuvio-download-card, .copy-block, figure, .home-empty-state, .tmdb-steps li, .sample-block, .token-guide,
    .apple-intro, .home-extra-section, .home-picks a, .apple-server-grid a, .next-page){
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:none;
}
:is(.guide-card, .method-choice, .key-grid a, .service-link, .requirement-grid a, .instance-card, .home-picks a, .apple-server-grid a, .next-page){
  transition:transform .3s var(--ease-out), border-color .25s ease, background-color .25s ease, box-shadow .3s ease;
}
@media (hover:hover){
  :is(.guide-card, .method-choice, .key-grid a, .service-link, .requirement-grid a, .instance-card, .home-picks a, .apple-server-grid a, .next-page):hover{
    border-color:var(--line); background:var(--surface); color:var(--text); box-shadow:var(--shadow);
  }
  .apple-server-grid a:hover{ color:var(--accent); }
}
:is(.guide-card, .method-choice, .service-link, .key-grid a):active{ transform:scale(.985); }

/* the soft spotlight that follows the pointer inside a card */
.tilt{ position:relative; isolation:isolate; }
.tilt::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 45%);
  transition:opacity .3s ease;
}
.tilt:hover::after{ opacity:1; }

/* guide cards: icon sits in a well with a spotlight, like Collections+ previews */
.guide-card{ min-height:0; padding:clamp(16px, 2.2vmin, 26px); }
.home-page .guide-card{ min-height:0; }
.card-logo{
  display:grid; place-items:center; width:78px; height:78px; flex-shrink:0;
  border:1px solid var(--border); border-radius:calc(var(--radius) - 6px);
  background:radial-gradient(70% 90% at 50% 100%, var(--accent-soft), transparent 70%), var(--well);
  perspective:500px;
}
.card-logo img{ width:46px; height:46px; object-fit:contain; border-radius:11px; box-shadow:var(--card-shadow); backface-visibility:visible; }
.card-logo img.plain{ width:52px; height:52px; border-radius:0; box-shadow:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.card-logo svg{ width:36px; height:36px; fill:none; stroke:var(--text); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-logo svg.apple{ fill:var(--text); stroke:none; width:40px; height:40px; }
/* two or three logos sit side by side, overlapping a little */
.card-logo.many{ align-self:flex-start; width:auto; min-width:78px; padding:0 14px; display:flex; justify-content:center; }
.card-logo.many img{ width:40px; height:40px; box-shadow:0 0 0 2px var(--well), var(--card-shadow); }
.card-logo.many img + img{ margin-inline-start:-4px; }
@media (hover:hover){
  .guide-card:hover .card-logo > :only-child{ animation:flip .8s var(--ease-out) both; }
  .guide-card:hover .card-logo.many img{ animation:hop .6s var(--ease-out) both; }
  .guide-card:hover .card-logo.many img:nth-child(2){ animation-delay:70ms; }
  .guide-card:hover .card-logo.many img:nth-child(3){ animation-delay:140ms; }
  .guide-card:hover .card-logo svg{ stroke:var(--accent); }
  .guide-card:hover .card-logo svg.apple{ fill:var(--accent); }
}
@keyframes flip{ from{ transform:rotateY(0); } to{ transform:rotateY(360deg) scale(1.06); } }
@keyframes hop{ 40%{ transform:translateY(-8px) rotate(-6deg); } }
.guide-card h2{ margin:clamp(14px, 2vmin, 22px) 0 6px; font-size:clamp(19px, 2.4vmin, 26px); font-weight:600; }
.guide-card p{ color:var(--dim); font-size:clamp(14px, 1.6vmin, 16px); line-height:1.6; margin-bottom:14px; }
.card-topics{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; color:var(--faint); font-size:12px; font-weight:600;
}
.card-link, .guide-card:nth-child(2) .card-link{ justify-content:flex-start; gap:8px; color:var(--accent); font-size:clamp(14px, 1.6vmin, 16px); font-weight:600; }
.card-link b{ display:inline-block; transition:transform .25s ease; font-weight:500; }
@media (hover:hover){ .guide-card:hover .card-link b{ transform:translateX(-5px); } }

/* explanation / notice boxes: a Collections+ card with an accent ribbon and icon tile */
.callout, .callout.warning, .callout.security, .apple-alert{ position:relative; overflow:hidden; padding:20px 22px; }
.callout::before, .apple-alert::before, .torbox-dropdown::before, .step-note::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--accent); border-radius:3px;
}
.callout strong, .callout.warning strong, .callout.security strong, .apple-alert strong, .apple-alert a{ color:var(--text); }
.callout small{ border-color:var(--border); }
.apple-alert img{ border-radius:12px; box-shadow:var(--card-shadow); }
.apple-alert a, .torbox-link{ color:var(--accent); }

.torbox-dropdown, .torbox-dropdown[open], .torbox-dropdown.color-notice, .torbox-dropdown.color-notice[open]{
  position:relative; border-color:var(--border); background:var(--surface);
}
.torbox-dropdown.color-notice > summary, .torbox-dropdown.color-notice[open] > summary{ background:transparent; }
.torbox-dropdown > summary{ transition:background-color .25s ease; }
@media (hover:hover){ .torbox-dropdown > summary:hover{ background:var(--hover) !important; } }
.torbox-dropdown > summary strong, .torbox-dropdown[open] > summary strong,
.torbox-dropdown.color-notice > summary strong, .torbox-dropdown.color-notice[open] > summary strong{ color:var(--text); }
.torbox-dropdown > summary small, .torbox-dropdown.color-notice > summary small, .torbox-dropdown.color-notice[open] > summary small{ color:var(--dim); }
.torbox-chevron, .torbox-dropdown.color-notice > summary .torbox-chevron, .torbox-dropdown.color-notice[open] > summary .torbox-chevron{ color:var(--accent); }
.aio-overview .overview-icon, .torbox-dropdown.color-notice .overview-icon, .torbox-dropdown.color-notice[open] .overview-icon{
  color:var(--on-accent); background:var(--accent); box-shadow:0 8px 22px var(--accent-glow);
}
.torbox-dropdown[open]{ border-color:var(--line); box-shadow:var(--shadow); }
.torbox-dropdown.color-notice .torbox-content{ border-top:1px solid var(--border); }

/* accordions */
.app-detail, .required-dropdown{ transition:border-color .25s ease, box-shadow .3s ease; }
.app-detail[open], .required-dropdown[open]{ border-color:var(--line); box-shadow:var(--shadow); }
.app-detail summary, .required-dropdown > summary{ transition:background-color .2s ease; }
@media (hover:hover){ .app-detail summary:hover, .required-dropdown > summary:hover{ background:var(--hover); } }
.app-detail summary img{ box-shadow:var(--card-shadow); transition:transform .5s var(--ease-out); }
.app-detail[open] summary img{ transform:perspective(400px) rotateY(-360deg); }
.app-expand, .method-chevron, .required-dropdown > summary > b{ color:var(--accent); }
details[open] > :not(summary){ animation:open-down .45s var(--ease-out); }
@keyframes open-down{ from{ opacity:0; transform:translateY(-8px); } }

/* method chooser: four logo tiles; once a method is open they shrink into a bar that stays under the header */
.method-chooser{
  position:sticky; top:calc(var(--header-h) + 6px); z-index:15;
  grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin-top:26px; padding:0;
  border:1px solid transparent; border-radius:calc(var(--radius) + 6px);
  transition:padding .35s var(--ease-out), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.method-choice{
  min-height:0; padding:16px; gap:10px 12px; cursor:pointer;
  display:grid; grid-template-columns:44px minmax(0, 1fr); grid-template-areas:"logo tag" "text text"; align-items:start;
}
.method-logo{ grid-area:logo; width:44px; height:44px; border-radius:11px; object-fit:cover; box-shadow:var(--card-shadow); transition:width .35s var(--ease-out), height .35s var(--ease-out), transform .5s var(--ease-out); }
.method-choice > span{ grid-area:text; display:grid; gap:4px; min-width:0; }
.method-choice strong{ font:700 18px/1.3 var(--latin); direction:ltr; text-align:start; unicode-bidi:plaintext; }
.method-choice small{ color:var(--dim); font-size:13px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.method-tag{ grid-area:tag; justify-self:end; padding:3px 10px; border-radius:999px; background:var(--hover); color:var(--dim); font:600 11px/1.6 var(--font); font-style:normal; white-space:nowrap; }
.method-choice.active .method-tag{ background:var(--accent); color:var(--on-accent); }
@media (hover:hover){ .method-choice:hover .method-logo{ transform:rotate(-6deg) scale(1.06); } }

.method-chooser.stuck{
  padding:6px; gap:6px; background:var(--header-frost); border-color:var(--border); box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
}
.method-chooser.stuck .method-choice{ grid-template-columns:28px minmax(0, 1fr); grid-template-areas:"logo text"; align-items:center; padding:7px 10px; border-radius:14px; transform:none; }
.method-chooser.stuck .method-logo{ width:28px; height:28px; border-radius:8px; box-shadow:none; }
.method-chooser.stuck :is(small, .method-tag){ display:none; }
.method-chooser.stuck .method-choice strong{ font-size:14px; }
.method-chooser.stuck .method-choice::after{ display:none; }
.method-panel{ scroll-margin-top:calc(var(--header-h) + 84px); }

/* method chooser and panels */
.method-choice{ text-align:start; }
.method-choice.active{ border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.method-choice.active strong{ color:var(--accent); }
.method-index{ color:var(--accent); font-family:var(--latin); }
.method-choice strong{ font-family:var(--latin); }
.method-panel:not([hidden]){ animation:open-down .5s var(--ease-out); }

.pros-cons > div:first-child{ border-color:color-mix(in srgb, var(--ok) 35%, var(--border)); background:color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.pros-cons > div:first-child strong{ color:var(--ok); }
.pros-cons > div:last-child{ border-color:color-mix(in srgb, var(--bad) 35%, var(--border)); background:color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.pros-cons > div:last-child strong{ color:var(--bad); }

.step-note{ position:relative; border:1px solid var(--border); border-right:0; border-radius:12px; background:var(--accent-soft); color:var(--dim); padding-inline-start:20px; overflow:hidden; }

/* step numbers, buttons, copy blocks */
.step-number, .step-number.mint, .apple-step-head > span, .general-checklist > article > span, .next-page > b{
  color:var(--on-accent); background:var(--accent); box-shadow:0 10px 26px var(--accent-glow); font-family:var(--latin); border-radius:14px;
}
.copy-block{ overflow:hidden; }
.copy-block code{ color:var(--dim); }
.copy-button, .primary-link{ color:var(--on-accent); background:var(--accent); border-color:transparent; font-family:var(--font); transition:transform 160ms var(--ease-out), box-shadow .25s ease, filter .2s ease; }
.copy-button{ border-left:1px solid var(--border); }
.primary-link{ border-radius:999px; padding:12px 22px; }
.copy-button:hover, .primary-link:hover{ background:var(--accent); filter:brightness(1.08); box-shadow:0 8px 24px var(--accent-glow); }
.copy-button:active, .primary-link:active{ transform:scale(.97); }

/* links inside text */
.lead a, .green-link, .apple-step-head a, .app-detail-body a, .apple-page .key-explain a, .apple-page .apple-steps a, .nuvio-download-copy a{ color:var(--accent); }
.tmdb-steps code{ color:var(--accent); background:var(--accent-soft); }

/* screenshots: framed like Collections+ previews, lift in 3D on hover */
figure{ padding:8px; transition:transform .5s var(--ease-out), box-shadow .4s ease, border-color .25s ease; }
figure img{ background:var(--shot); border-radius:calc(var(--radius) - 8px); }
figcaption{ color:var(--faint); font-size:12px; }
@media (hover:hover) and (pointer:fine){ figure:hover{ border-color:var(--line); box-shadow:var(--shadow); } }

.service-mark, .app-detail summary img, .apple-alert img, .torbox-dropdown > summary img{ background:#fff; }

/* Nuvio download cards */
.nuvio-download-card{ background:var(--surface); box-shadow:none; }
.nuvio-download-icon{ border-color:var(--border); color:var(--accent); background:var(--well); }
.nuvio-download-badge{ border-color:var(--border); color:var(--accent); background:var(--accent-soft); }
.nuvio-download-action{ border-radius:999px; border-color:transparent; color:var(--on-btn); background:var(--btn); transition:transform 160ms var(--ease-out), box-shadow .25s ease; }
.nuvio-download-action:hover{ border-color:transparent; background:var(--btn); box-shadow:0 8px 24px var(--accent-soft); }
.nuvio-code-actions code{ border-color:var(--border); color:var(--text); background:var(--well); }
.nuvio-download-copy a:hover{ color:var(--text); }

/* problem tabs */
.problem-tabs button{ border-radius:999px; background:var(--surface); color:var(--dim); transition:all .2s ease; }
.problem-tabs button:hover{ border-color:var(--line); color:var(--text); background:var(--hover); }
.problem-tabs button[aria-pressed="true"]{ border-color:var(--accent); color:var(--on-accent); background:var(--accent); }

/* ---------- 7. Guide pages ---------- */
/* titles are ~30% smaller than the original wiki sizes */
.guide-page .hero h1, .apple-page .hero h1{ font-size:clamp(1.9rem, 4vw, 3.6rem); }
.guide h2{ font-size:clamp(1.6rem, 3.5vw, 2.8rem); }
.apple-section h2, .method-intro h2{ font-size:clamp(1.55rem, 3.5vw, 2.45rem); }
.guide h3, .apple-subsection h3{ font-size:clamp(1.1rem, 2vw, 1.3rem); }
.required-dropdown-content .required-subsection h2{ font-size:clamp(1.15rem, 2.2vw, 1.5rem); }
.apple-step-head h4, .apple-step-head .step-title{ font-size:17px; }
@media (max-width:700px){
  .guide-page .hero h1, .apple-page .hero h1{ font-size:clamp(1.5rem, 6.5vw, 2.1rem); }
}
.eyebrow, .section-label, .mint-label, .green-label{ color:var(--accent); font-family:var(--latin); letter-spacing:.06em; }
.eyebrow span{ background:var(--accent); box-shadow:0 0 0 0 var(--accent-soft); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--accent-glow); } 70%,100%{ box-shadow:0 0 0 10px transparent; } }
.hero-copy, .lead, .guide-section > p, .walkthrough-step > p{ color:var(--dim); }
.guide h2, .apple-section h2, .method-intro h2{ letter-spacing:0; }
.guide-section, .walkthrough-step, .apple-steps > li, .apple-subsection, .apps-section{ border-color:var(--border); }
.method-panel{ background:var(--surface); }

/* previous / next links: pills */
.wiki-step-link, .wiki-step-link:hover{
  padding:8px 16px; border:1px solid var(--border); border-radius:999px; color:var(--text);
  background:var(--surface); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .2s ease, transform .25s var(--ease-out), background-color .2s ease;
}
.wiki-step-link:hover{ border-color:var(--accent); background:var(--hover); text-decoration:none; }
.wiki-step-link small{ color:var(--text); }
.wiki-step-link b{ color:var(--accent); transition:transform .25s ease; }
.wiki-step-next:hover b{ transform:translateX(-4px); }
.wiki-step-previous:hover b{ transform:translateX(4px); }

/* footer: quiet, like the Collections+ foot line */
footer, body.home-page footer, body.apple-page footer, body.guide-page footer{
  border-top:1px solid var(--border); color:var(--faint); min-height:0; padding:26px 0 calc(30px + env(safe-area-inset-bottom,0px));
}
.footer-brand{ color:var(--dim); font-family:var(--latin); font-weight:600; }
.footer-brand b{ color:var(--accent); }
.footer-brand img{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
footer .footer-credit{ color:var(--faint); font:500 14px/1.5 var(--font); gap:6px; }
footer .footer-credit a{ color:var(--accent); font-weight:600; text-decoration:none; }
footer .footer-credit a:hover{ text-decoration:underline; text-underline-offset:4px; }

.toast{
  border:0; border-radius:999px; padding:10px 18px; background:var(--btn); color:var(--on-btn);
  font-weight:600; font-size:15px; box-shadow:var(--shadow); bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transition:opacity .2s ease, transform .3s var(--ease-out);
}
.skip-link{ color:var(--on-accent); background:var(--accent); z-index:70; }

/* ---------- 8. Search dialog ---------- */
.wiki-search-dialog{ border:1px solid var(--border); background:var(--raised); color:var(--text); box-shadow:var(--shadow); }
.wiki-search-dialog::backdrop{ background:rgba(8,8,10,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.wiki-search-dialog[open]{ animation:pop-in 250ms var(--ease-out); }
.search-close{ border:0; background:var(--hover); color:var(--text); }
.search-close:hover{ background:var(--hover); border:0; }
#wiki-search-input{ border:1px solid var(--line); border-radius:14px; background:var(--well); color:var(--text); }
#wiki-search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
#wiki-search-input::placeholder{ color:var(--faint); }
.search-filter{ border-radius:999px; background:var(--surface); color:var(--dim); border-color:var(--border); }
.search-filter:hover{ border-color:var(--line); color:var(--text); background:var(--hover); }
.search-filter[aria-pressed="true"]{ border-color:var(--accent); color:var(--on-accent); background:var(--accent); }
.search-result{ border-radius:14px; background:var(--surface); border-color:var(--border); transition:border-color .2s ease, transform .25s var(--ease-out), background-color .2s ease; animation:chip-in .35s var(--ease-out) both; }
.search-result:hover{ border-color:var(--accent); background:var(--hover); transform:translateX(-3px); }
.search-result-categories{ color:var(--faint) !important; }

/* ---------- 9. Motion ---------- */
/* 3D tilt (set by wixct.js from the pointer) */
html .tilt.tilting.tilting{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  transition:transform .12s linear, border-color .25s ease, box-shadow .3s ease;
}

/* blocks rise into place as they scroll into view */
.js-rv .rv{ opacity:0; transform:perspective(1000px) translateY(28px) rotateX(8deg); transform-origin:50% 100%; }
.js-rv .rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--d,0ms); }

/* headline words rise one after another, and wave when tapped */
.hw{ display:inline-block; white-space:nowrap; }
.js-rv .words .hw{ animation:word-in .8s var(--ease-out) both; animation-delay:calc(var(--i) * 70ms + 80ms); }
@keyframes word-in{ from{ opacity:0; transform:translateY(.45em) rotateX(-50deg); filter:blur(6px); } }
.words.wave .hw{ animation:word-wave .8s cubic-bezier(.3,.7,.3,1) both; animation-delay:calc(var(--i) * 45ms); }
@keyframes word-wave{
  35%{ transform:translateY(-.16em) scale(1.06); color:var(--accent); }
}
.words{ user-select:none; -webkit-user-select:none; }

/* ---------- 10. Small screens ---------- */
@media (max-width:680px){
  :root{ --header-h:70px; }
  .site-header{ position:fixed; width:auto; height:auto; padding-inline:12px; gap:6px; }
  .site-header .brand{ gap:8px; }
  .brand .div, .brand .name{ display:none; }
  .me span, .tool.telegram{ display:none; }
  .me{ padding:0 4px; }
  .tools .sep{ margin:0 2px; }
  .tool{ width:40px; height:40px; }
  .card-logo{ width:62px; height:62px; }
  .card-logo img{ width:38px; height:38px; }
  .card-logo.many img{ width:32px; height:32px; }
  .guide-card h2{ margin-top:12px; }
  .hero-fan{ transform:scale(.8); margin-bottom:4px; }
  .method-chooser{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .method-chooser:not(.stuck) .method-choice:last-child{ grid-column:1 / -1; }
  .method-choice{ padding:13px; }
  .method-choice strong{ font-size:16px; }
  .method-tag{ font-size:10px; padding:2px 8px; }
  .method-chooser.stuck{ grid-template-columns:repeat(5, minmax(0, 1fr)); padding:5px; gap:4px; }
  .method-chooser.stuck .method-choice{ grid-template-columns:1fr; grid-template-areas:"logo" "text"; justify-items:center; text-align:center; gap:3px; padding:6px 2px; }
  .method-chooser.stuck .method-choice strong{ font-size:11px; text-align:center; }
  footer, body.home-page footer, body.apple-page footer, body.guide-page footer{ flex-direction:column; align-items:center; gap:10px; text-align:center; }
  footer .footer-credit{ flex-wrap:wrap; justify-content:center; }
}
@media (max-width:380px){ .tools #theme{ width:36px; } .tools .sep{ display:none; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js-rv .rv{ opacity:1; transform:none; }
  html .tilt.tilting.tilting{ transform:none; }
}
/* no 3D tilt inside the slim sticky bar */
html .method-chooser.stuck .method-choice.tilting{ transform:none; }
/* "أو" between two ways of doing the same step */
.or-split{ display:flex; align-items:center; gap:14px; margin:26px 0 4px; color:var(--faint); font-weight:700; font-size:14px; }
.or-split::before, .or-split::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); }
.or-split span{ padding:4px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--accent); }
/* placeholder for a method whose guide isn't written yet */
.soon-note{ position:relative; overflow:hidden; margin-top:26px; padding:20px 22px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--accent-soft); }
.soon-note strong{ color:var(--accent); font-size:16px; }
.soon-note p{ margin:6px 0 0; color:var(--dim); font-size:14px; }
.soon-note a{ color:var(--accent); font-weight:600; text-underline-offset:4px; }

/* ---------- Apple guide: Jellyfin apps as an App Store shelf ---------- */
.app-shelf{ margin-top:28px; }
.app-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.app-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px 14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text);
  font:inherit; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .3s var(--ease-out), border-color .25s ease, background-color .25s ease, box-shadow .3s ease;
}
.app-tile img{ width:64px; height:64px; border-radius:16px; object-fit:contain; background:#fff; box-shadow:var(--card-shadow); transition:transform .45s var(--ease-out); }
.app-tile strong{ font:700 15px/1.2 var(--latin); }
.app-tile:active{ transform:scale(.97); }
@media (hover:hover){
  .app-tile:hover{ border-color:var(--line); box-shadow:var(--shadow); transform:translateY(-3px); }
  .app-tile:hover img{ transform:translateY(-3px) rotate(-5deg); }
}
.app-tile[aria-selected="true"]{ border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.app-tile[aria-selected="true"] strong{ color:var(--accent); }

.price{ padding:2px 10px; border-radius:999px; font:600 11px/1.6 var(--font); font-style:normal; white-space:nowrap; background:var(--hover); color:var(--dim); }
.price.free{ background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); }
.price.tf{ background:color-mix(in srgb, #4c8dff 16%, transparent); color:#6aa2ff; }
:root[data-theme="light"] .price.tf{ color:#2f63c9; }

.app-sheet{
  display:grid; grid-template-columns:minmax(0, 1fr); gap:20px; align-items:start;
  margin-top:14px; padding:22px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:open-down .45s var(--ease-out);
}
.app-sheet[hidden]{ display:none; }
.app-sheet{ scroll-margin-top:calc(var(--header-h) + 16px); }
.app-sheet figure{ margin:0; }
.app-sheet-head{ display:flex; align-items:center; gap:14px; }
.app-sheet-head img{ width:52px; height:52px; border-radius:13px; object-fit:contain; background:#fff; box-shadow:var(--card-shadow); }
.app-sheet-head h3{ margin:0 0 4px; font:700 22px/1.2 var(--latin); text-align:start; }
.app-sheet-text > p{ margin:14px 0 0; color:var(--dim); font-size:14px; line-height:1.8; }
.app-sheet-text > p b{ color:var(--text); }

/* the taps to make, in order */
.tap-path{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:18px 0 0; padding:0; }
.tap-path li{ padding:5px 12px; border:1px solid var(--border); border-radius:10px; background:var(--well); font:600 13px/1.5 var(--latin); }
.tap-path li:not(:last-child)::after{ content:'←'; margin-inline-start:10px; color:var(--accent); font-weight:700; }
.tap-path li:last-child{ border-color:var(--accent); color:var(--accent); }

.cred-list{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; }
.cred-list li{ padding:3px 10px; border-radius:999px; background:var(--hover); color:var(--dim); font-size:12px; }
.cred-list li::before{ content:'✓'; margin-inline-end:6px; color:var(--ok); font-weight:700; }

.app-get-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.app-get{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border-radius:999px;
  background:var(--btn); color:var(--on-btn); font:600 14px/1 var(--latin); text-decoration:none;
  transition:transform 160ms var(--ease-out), box-shadow .25s ease;
}
.app-get:hover{ box-shadow:0 8px 24px var(--accent-soft); }
.app-get:active{ transform:scale(.97); }
.app-get + .app-get{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }

@media (max-width:760px){
  .app-tiles{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; margin-inline:-2px; scrollbar-width:none; }
  .app-tiles::-webkit-scrollbar{ display:none; }
  .app-tile{ flex:0 0 104px; scroll-snap-align:start; padding:12px 6px; }
  .app-tile img{ width:54px; height:54px; border-radius:14px; }
  .app-sheet{ grid-template-columns:1fr; padding:16px; gap:16px; }
}

/* ---------- StremioLabAR: AIOStreams server picker ---------- */
.server-picker{ margin-top:26px; }
.channel-switch{ display:inline-flex; padding:4px; gap:4px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.channel-switch button{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border:0; border-radius:999px;
  background:transparent; color:var(--dim); font:600 14px/1 var(--font); cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform 160ms var(--ease-out);
}
.channel-switch button small{ font:500 11px/1 var(--latin); opacity:.75; }
.channel-switch button:active{ transform:scale(.96); }
.channel-switch button[aria-selected="true"]{ background:var(--accent); color:var(--on-accent); }
.channel-note{ margin:12px 0 0; color:var(--dim); font-size:14px; }
.server-set:not([hidden]) .server{ animation:chip-in .4s var(--ease-out) both; }
.server-set .server:nth-child(2){ animation-delay:40ms; } .server-set .server:nth-child(3){ animation-delay:80ms; }
.server-set .server:nth-child(4){ animation-delay:120ms; } .server-set .server:nth-child(5){ animation-delay:160ms; }
.server-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin-top:14px; }
.server{
  position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px 14px 12px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); text-decoration:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .3s var(--ease-out), border-color .25s ease, box-shadow .3s ease;
}
.srv-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.server strong{ font:700 16px/1.2 var(--latin); }
.srv-host{ color:var(--faint); font:500 11px/1.4 var(--latin); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.server > b{ position:absolute; inset-block-end:10px; inset-inline-end:12px; color:var(--accent); font-weight:500; opacity:0; transform:translate(4px, 4px); transition:opacity .2s ease, transform .25s var(--ease-out); }
@media (hover:hover){
  .server:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }
  .server:hover > b{ opacity:1; transform:none; }
}
.server:active{ transform:scale(.98); }
@media (max-width:900px){ .server-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:560px){
  .server-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .server-grid .server:last-child:nth-child(odd){ grid-column:1 / -1; }
  .channel-switch{ display:flex; }
  .channel-switch button{ flex:1; justify-content:center; }
}
/* the keys page uses the same shelf with three services */
.keys-shelf .app-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.keys-shelf .app-tile img{ background:transparent; }
.keys-shelf .app-sheet-head img{ background:transparent; }
@media (max-width:760px){ .keys-shelf .app-tiles{ display:grid; overflow:visible; } .keys-shelf .app-tile{ flex:none; } }
.credit-note{ margin:22px 0 0; color:var(--faint); font-size:13px; }
.credit-note a{ color:var(--accent); font-weight:600; text-decoration:none; }
.credit-note a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Nuvio guide: two ways for one TV, and the file-per-year table */
.sub-method{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:44px 0 0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); scroll-margin-top:calc(var(--header-h) + 16px); }
.sub-method h3{ margin:0; font-size:20px; }
.sub-method-num{ padding:3px 12px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:12px; }
.sub-method .price{ margin-inline-start:auto; }
.sub-method + .apple-steps > li:first-child, .sub-method + .lead + .apple-steps > li:first-child{ padding-top:24px; }
.tpk-table{ display:grid; margin-top:18px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.tpk-table > div{ display:grid; grid-template-columns:1.1fr .8fr 1.4fr; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid var(--border); font-size:14px; }
.tpk-table > div:first-child{ border-top:0; }
.tpk-table .head{ background:var(--well); color:var(--faint); font-size:12px; font-weight:700; }
.tpk-table code{ justify-self:start; padding:3px 8px; border-radius:7px; background:var(--accent-soft); color:var(--accent); font:600 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width:520px){ .tpk-table > div{ grid-template-columns:1fr 1fr; } .tpk-table > div > :nth-child(2){ display:none; } }