/* SSYouTubeSave v1 – YouTube-red design, modelled on the proven IGViewer v3
   stylesheet. Own design; red palette follows the familiar video-platform
   colour world without using anyone's logos. System fonts only, no webfonts. */
:root{
  --bg:#fff8f7;
  --card:#ffffff;
  --text:#2b1114;
  --muted:#75636a;
  --red:#ff0033;
  --red-bright:#ff1f4d;
  --red-dark:#c81e3a;
  --maroon:#7f1d2d;
  --orange:#ff5e3a;
  --amber:#ffb03a;
  --border:#f5dede;
  --ok:#047857;
  --err:#b91c1c;
  --radius:18px;
  --yt-gradient:linear-gradient(90deg,#c81e3a 0%,#ff0033 45%,#ff1f4d 70%,#ff5e3a 100%);
  --shadow:0 18px 45px rgba(120,20,35,.13);
  --shadow-small:0 8px 24px rgba(120,20,35,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,176,58,.14),transparent 28rem),
    radial-gradient(circle at 96% 8%,rgba(255,0,51,.10),transparent 30rem),
    linear-gradient(180deg,#fff8f7 0%,#fff 48%,#fff7f3 100%);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
.container.narrow{max-width:760px}
a{color:#d9002b;text-decoration:none;font-weight:550}
a:hover{text-decoration:underline}
h1{font-size:clamp(2rem,5.4vw,3.65rem);line-height:1.08;letter-spacing:-.035em;margin:.35em 0 .4em;font-weight:900}
h2{font-size:clamp(1.45rem,3.2vw,2.05rem);line-height:1.2;letter-spacing:-.02em;margin:.2em 0 .65em;font-weight:850}
h3{margin:.3em 0 .3em;line-height:1.3}
::selection{background:#ffc9d4;color:#4a0a18}

/* Header */
.site-header{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(255,0,51,.14);
  box-shadow:0 8px 30px rgba(100,15,30,.06);
  position:sticky;top:0;z-index:20;
}
.site-header::before{content:"";display:block;height:4px;background:var(--yt-gradient)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;color:var(--text);font-size:1.35rem;font-weight:900;letter-spacing:-.025em}
.logo:hover{text-decoration:none}
.logo-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;position:relative;
  background:linear-gradient(145deg,#7f1d2d 0%,#c81e3a 38%,#ff0033 72%,#ff5e3a 100%);
  box-shadow:0 9px 22px rgba(255,0,51,.32),inset 0 1px 0 rgba(255,255,255,.35);
}
.logo-mark::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-42%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.logo-text>span{background:var(--yt-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.main-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{color:#5c4650;margin:0;padding:9px 12px;border-radius:999px;font-size:.95rem;font-weight:650}
.main-nav a:hover{color:#c40030;background:#fff0f2;text-decoration:none}
@media(max-width:620px){
  .header-inner{min-height:60px}
  .logo{font-size:1.15rem}.logo-mark{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  .logo-mark::before{border-width:8px 0 8px 13px}
  .main-nav a{padding:7px 8px;font-size:.86rem}
  .main-nav a:nth-child(1){display:none}
}

/* Hero / Tool */
.hero{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  margin-top:24px;padding:54px clamp(20px,5vw,64px) 46px;
  border-radius:32px;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,176,58,.45),transparent 17rem),
    radial-gradient(circle at 88% 4%,rgba(255,94,58,.5),transparent 19rem),
    radial-gradient(circle at 82% 92%,rgba(255,0,51,.4),transparent 18rem),
    linear-gradient(132deg,#17060a 0%,#3d0a12 34%,#7f1d2d 63%,#c81e3a 82%,#ff0033 100%);
  box-shadow:0 28px 70px rgba(110,15,35,.30);
  isolation:isolate;
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  border:2px solid rgba(255,255,255,.20);
}
.hero::before{width:340px;height:340px;right:-110px;top:-150px;box-shadow:0 0 0 28px rgba(255,255,255,.045),0 0 0 62px rgba(255,255,255,.028)}
.hero::after{width:250px;height:250px;left:-105px;bottom:-135px;box-shadow:0 0 0 22px rgba(255,255,255,.04),0 0 0 48px rgba(255,255,255,.025)}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);font-size:.88rem;font-weight:750;letter-spacing:.01em;
}
.hero h1{color:#fff;text-shadow:0 3px 24px rgba(35,0,8,.25);max-width:850px;margin-left:auto;margin-right:auto}
.hero-sub{color:rgba(255,255,255,.88);max-width:700px;margin:0 auto 25px;font-size:clamp(1rem,2vw,1.13rem)}
.hero-sub strong{color:#fff}
.viewer-form{
  display:flex;gap:10px;max-width:680px;margin:0 auto;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.96);padding:9px;border-radius:22px;
  box-shadow:0 20px 45px rgba(40,0,10,.28),inset 0 1px 0 #fff;
}
.input-wrap{
  flex:1 1 300px;display:flex;align-items:center;background:#fff;
  border:2px solid transparent;border-radius:15px;padding:0 15px;min-height:54px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.input-wrap:focus-within{border-color:#ff0033;box-shadow:0 0 0 4px rgba(255,0,51,.14)}
.at-prefix{font-size:1.05rem}
.input-wrap input{flex:1;border:0;outline:0;font-size:1.05rem;padding:13px 7px;background:transparent;color:var(--text);min-width:0}
.input-wrap input::placeholder{color:#b39aa4}
#submit-btn,.btn{
  border:0;cursor:pointer;color:#fff;font-weight:850;font-size:1rem;
  padding:14px 24px;border-radius:15px;background:var(--yt-gradient);
  box-shadow:0 12px 26px rgba(255,0,51,.32),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#submit-btn:hover,.btn:hover{transform:translateY(-1px);filter:saturate(1.08) brightness(1.03);box-shadow:0 16px 32px rgba(255,0,51,.38)}
#submit-btn:active,.btn:active{transform:translateY(1px) scale(.99)}
#submit-btn:disabled,.btn:disabled{opacity:.58;cursor:wait;transform:none}
a.btn{display:inline-block}
a.btn:hover{text-decoration:none}
.form-hint{color:rgba(255,255,255,.78);font-size:.92rem;margin:13px 0 0}
.form-hint strong{color:#fff}
.hero-points{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}
.hero-points span{
  padding:7px 11px;border-radius:999px;background:rgba(30,3,8,.25);
  border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.94);font-size:.87rem;font-weight:650;
}
@media(max-width:620px){
  .hero{margin-top:14px;padding:38px 18px 34px;border-radius:25px}
  .viewer-form{padding:7px;border-radius:19px}
  #submit-btn{width:100%}
  .hero-points span{font-size:.8rem;padding:6px 9px}
}

/* Status / Result */
.status{
  max-width:680px;margin:18px auto 0;padding:13px 17px;border-radius:15px;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.65);
  color:#5d3340;text-align:left;font-size:.96rem;box-shadow:var(--shadow-small);
}
.status.error{background:#fff1f2;border-color:#fda4af;color:var(--err)}
.status.loading{background:#fff7ed;border-color:#fdba74;color:#7c2d12}
.result{margin-top:26px;text-align:left}
.video-card{
  display:flex;gap:19px;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.75);
  border-radius:24px;padding:18px;align-items:flex-start;max-width:760px;margin:0 auto;
  box-shadow:0 22px 48px rgba(35,0,10,.24);color:var(--text);
}
.video-card img{
  width:230px;max-width:42%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;flex:none;
  background:linear-gradient(145deg,#7f1d2d,#ff0033 70%,#ff5e3a);
  box-shadow:0 10px 22px rgba(120,20,35,.22);
}
.video-card .v-title{font-weight:850;font-size:1.08rem;line-height:1.35}
.video-card .v-meta{color:var(--muted);margin-top:6px;font-size:.94rem;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:560px){.video-card{flex-direction:column;padding:15px}.video-card img{width:100%;max-width:100%}}

.format-groups{max-width:760px;margin:22px auto 0;display:flex;flex-direction:column;gap:16px}
.format-group{
  background:rgba(255,255,255,.98);border-radius:22px;padding:8px 18px 14px;
  box-shadow:0 18px 40px rgba(35,0,10,.20);color:var(--text);
}
.format-group h3{
  font-size:1rem;margin:12px 0 4px;color:#6d1223;display:flex;align-items:center;gap:8px;
}
.format-row{
  display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-top:1px solid var(--border);
}
.format-row:first-of-type{border-top:0}
.fmt-label{font-weight:800;font-size:1rem;white-space:nowrap}
.fmt-ext{
  font-size:.72rem;font-weight:800;letter-spacing:.05em;color:#8a5a66;
  border:1px solid var(--border);border-radius:999px;padding:2px 8px;text-transform:uppercase;
}
.fmt-note{font-size:.82rem;font-weight:700;color:#9a6a12;background:#fef3c7;border-radius:999px;padding:2px 9px;white-space:nowrap}
.fmt-note.ok{color:#065f46;background:#d1fae5}
.fmt-size{color:var(--muted);font-size:.9rem;margin-left:auto;white-space:nowrap}
.btn-download{
  display:inline-block;background:var(--yt-gradient);color:#fff;font-weight:800;
  padding:9px 15px;border-radius:11px;font-size:.92rem;box-shadow:0 8px 18px rgba(255,0,51,.25);
  white-space:nowrap;flex:none;
}
.btn-download:hover{text-decoration:none;filter:brightness(1.05)}
@media(max-width:560px){
  .format-row{flex-wrap:wrap;gap:7px}
  .fmt-size{margin-left:0}
  .btn-download{margin-left:auto}
}

/* Sections */
main>.hero.container{width:calc(100% - 32px)}
.section{padding:48px 20px 12px}
.section h2{position:relative;padding-bottom:12px}
.section h2::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;border-radius:999px;background:var(--yt-gradient);
}
.section p{color:#684650}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0;list-style:none}
.steps li{
  counter-increment:step;position:relative;background:rgba(255,255,255,.92);border:1px solid var(--border);
  border-radius:20px;padding:19px 19px 19px 66px;box-shadow:var(--shadow-small);margin:0;
}
.steps li::before{
  content:counter(step);position:absolute;left:18px;top:17px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--yt-gradient);color:#fff;font-weight:900;
  box-shadow:0 8px 18px rgba(255,0,51,.25);
}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:15px}
.feature{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);
  border-radius:21px;padding:21px;box-shadow:var(--shadow-small);
}
.feature::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--yt-gradient)}
.feature h3{color:#6d1223;font-size:1.08rem}
.feature p{margin-bottom:0}
.faq-item{
  background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:17px;
  padding:15px 18px;margin-bottom:11px;box-shadow:0 6px 18px rgba(120,20,35,.06);
}
.faq-item summary{cursor:pointer;font-weight:800;color:#471824}
.faq-item summary::marker{color:#ff0033}
.faq-item p{margin:.55em 0 .2em;color:#5f4250}
.contact-mail{font-size:1.05rem}
@media(max-width:700px){.steps{grid-template-columns:1fr}.section{padding-top:36px}}

/* Tool grid */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:15px}
.tool-card{
  position:relative;display:block;overflow:hidden;background:rgba(255,255,255,.96);
  border:1px solid var(--border);border-radius:21px;padding:20px;color:var(--text);
  box-shadow:0 8px 24px rgba(120,20,35,.07);
  transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
}
.tool-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--yt-gradient);opacity:.88}
.tool-card::after{
  content:"→";position:absolute;right:17px;bottom:13px;color:#ff0033;font-weight:900;font-size:1.15rem;
  transition:transform .17s ease;
}
a.tool-card:hover{text-decoration:none;transform:translateY(-3px);border-color:#f5b8c3;box-shadow:0 18px 36px rgba(120,20,35,.14)}
a.tool-card:hover::after{transform:translateX(3px)}
.tool-card.is-current{opacity:.75}
.tool-card h3{margin:2px 24px 5px 0;font-size:1.04rem;color:#471824}
.tool-card p{margin:0 20px 4px 0;color:var(--muted);font-size:.92rem}

/* Guide / article */
.blog-meta{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#c40030;background:linear-gradient(90deg,rgba(255,0,51,.08),rgba(255,94,58,.10));
  border:1px solid #f3ccd4;border-radius:999px;padding:3px 10px;margin-bottom:9px;
}
.article-body{font-size:1.02rem}
.article-body h2{margin-top:1.6em}
.article-body p{margin:.75em 0}
.article-body ol,.article-body ul{margin:.6em 0 1em;padding-left:1.35em}
.article-body li{margin-bottom:.55em}
.article-body li::marker{color:#ff0033;font-weight:800}
.article-cta{
  margin:2em 0;padding:24px;border-radius:22px;text-align:center;color:#fff;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,176,58,.40),transparent 12rem),
    linear-gradient(132deg,#3d0a12 0%,#7f1d2d 55%,#ff0033 100%);
  box-shadow:0 18px 40px rgba(110,15,35,.25);
}
.article-cta h2{color:#fff;margin-top:0}
.article-cta h2::after{display:none}
.article-cta p{color:rgba(255,255,255,.88)}
.article-cta .btn{margin-top:6px}

/* Footer */
.site-footer{
  position:relative;background:linear-gradient(145deg,#1c0509,#38060f 55%,#5c0e1e);
  color:#fff;margin-top:52px;padding:38px 0 34px;overflow:hidden;
}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--yt-gradient)}
.footer-note{color:rgba(255,255,255,.72);font-size:.92rem;max-width:760px}
.footer-note strong{color:#fff}
.footer-cols{display:flex;gap:38px;flex-wrap:wrap;margin-top:24px}
.footer-cols h4{margin:0 0 9px;font-size:.98rem;color:#fff}
.footer-tools{list-style:none;margin:0;padding:0}
.footer-tools li{margin:5px 0}
.footer-tools a{color:rgba(255,255,255,.68);font-size:.9rem;font-weight:500}
.footer-tools a:hover{color:#fff}
.footer-copy{color:rgba(255,255,255,.55);font-size:.85rem;margin-top:22px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Floating colour rings in the hero (transform/opacity only = GPU friendly) */
@keyframes ssyFloatA{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-16px,20px,0) rotate(8deg)}}
@keyframes ssyFloatB{from{transform:translate3d(0,0,0)}to{transform:translate3d(18px,-14px,0)}}
.hero::before{animation:ssyFloatA 9s ease-in-out infinite alternate}
.hero::after{animation:ssyFloatB 11s ease-in-out infinite alternate}

/* 3D hover only on devices with a mouse (no wobble on touch) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .video-card{transition:transform .25s ease,box-shadow .25s ease}
  .video-card:hover{transform:perspective(950px) translateY(-4px) rotateX(1.4deg);box-shadow:0 34px 60px rgba(35,0,10,.30)}
  a.tool-card:hover{transform:perspective(750px) translateY(-4px) rotateX(1.6deg)}
  .feature{transition:transform .2s ease,box-shadow .2s ease}
  .feature:hover{transform:perspective(750px) translateY(-4px) rotateX(1.6deg);box-shadow:0 18px 36px rgba(120,20,35,.14)}
}