/* ==========================================================================
   SoftSubs.com — Complete Design System
   Mobile-first | Dark-default | WCAG 2.2 AA | Fluid Typography
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;line-height:1.6}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse}

/* --- Custom Properties ---------------------------------------------------- */
:root{
  /* Colors — Dark theme (default) */
  --bg-primary:#0A0A0F;
  --bg-surface:#141420;
  --bg-elevated:#1C1C2E;
  --bg-hover:#252540;
  --border:#2A2A45;
  --border-light:#3A3A5C;
  --text-primary:#E8E6E3;
  --text-secondary:#A0A0B8;
  --text-tertiary:#6B6B80;
  --text-inverse:#0A0A0F;

  /* Brand */
  --primary:#6C5CE7;
  --primary-hover:#7C6CF7;
  --primary-light:rgba(108,92,231,.15);
  --secondary:#00B4D8;
  --secondary-hover:#00C8F0;
  --accent:#FF6B9D;
  --gradient:linear-gradient(135deg,#6C5CE7 0%,#00B4D8 100%);
  --gradient-warm:linear-gradient(135deg,#FF6B9D 0%,#FFA502 100%);
  --gradient-cool:linear-gradient(135deg,#00B4D8 0%,#0077B6 100%);
  --gradient-subtle:linear-gradient(135deg,rgba(108,92,231,.08) 0%,rgba(0,180,216,.08) 100%);

  /* Semantic */
  --success:#00C48C;
  --success-bg:rgba(0,196,140,.12);
  --warning:#FFA502;
  --warning-bg:rgba(255,165,2,.12);
  --error:#FF4757;
  --error-bg:rgba(255,71,87,.12);
  --info:#00B4D8;

  /* Fluid Typography */
  --text-xs:clamp(.7rem,.65rem + .25vw,.8rem);
  --text-sm:clamp(.8rem,.75rem + .3vw,.9rem);
  --text-base:clamp(.95rem,.9rem + .3vw,1.1rem);
  --text-lg:clamp(1.1rem,1rem + .5vw,1.35rem);
  --text-xl:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  --text-2xl:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);
  --text-3xl:clamp(2rem,1.5rem + 2vw,3.2rem);
  --text-4xl:clamp(2.5rem,1.8rem + 3vw,4.2rem);

  /* Spacing */
  --space-xs:clamp(.25rem,.2rem + .2vw,.5rem);
  --space-sm:clamp(.5rem,.4rem + .4vw,.75rem);
  --space-md:clamp(.75rem,.6rem + .6vw,1.25rem);
  --space-lg:clamp(1rem,.8rem + 1vw,2rem);
  --space-xl:clamp(1.5rem,1rem + 2vw,3rem);
  --space-2xl:clamp(2rem,1.5rem + 2.5vw,4.5rem);
  --space-3xl:clamp(3rem,2rem + 4vw,7rem);

  /* Content Widths */
  --content-width:min(90vw,1200px);
  --content-narrow:min(90vw,720px);
  --content-wide:min(95vw,1400px);

  /* Shadows */
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 30px rgba(0,0,0,.5);
  --shadow-glow:0 0 30px rgba(108,92,231,.3);
  --shadow-glow-lg:0 0 60px rgba(108,92,231,.2);

  /* Radius */
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-full:9999px;

  /* Transitions */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --transition-fast:.15s var(--ease-out);
  --transition-base:.25s var(--ease-out);
  --transition-slow:.4s var(--ease-out);

  /* Z-index */
  --z-dropdown:100;
  --z-sticky:200;
  --z-overlay:300;
  --z-modal:400;
  --z-nav:500;
  --z-toast:600;
}

/* --- Light Mode Override -------------------------------------------------- */
@media(prefers-color-scheme:light){
  :root{
    --bg-primary:#FAFAFA;--bg-surface:#FFFFFF;--bg-elevated:#F5F5F7;--bg-hover:#ECECF0;
    --border:#E0E0E8;--border-light:#D0D0DC;
    --text-primary:#1A1A2E;--text-secondary:#5A5A72;--text-tertiary:#8A8A9E;--text-inverse:#FAFAFA;
    --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.1);
    --shadow-lg:0 8px 30px rgba(0,0,0,.12);--shadow-glow:0 0 30px rgba(108,92,231,.15);
  }
}

/* --- Base ----------------------------------------------------------------- */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  font-size:var(--text-base);color:var(--text-primary);background:var(--bg-primary);
}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm)}

/* --- Skip Link ------------------------------------------------------------ */
.skip-link{
  position:absolute;top:-100%;left:16px;z-index:9999;
  padding:12px 24px;background:var(--primary);color:#fff;
  border-radius:0 0 var(--radius-md) var(--radius-md);font-weight:600;
  transition:top var(--transition-fast);
}
.skip-link:focus{top:0}

/* --- Layout --------------------------------------------------------------- */
.container{width:var(--content-width);margin:0 auto;padding:0 var(--space-md)}
.container-narrow{width:var(--content-narrow);margin:0 auto;padding:0 var(--space-md)}
.container-wide{width:var(--content-wide);margin:0 auto;padding:0 var(--space-md)}
.section{padding:var(--space-2xl) 0}
.section-alt{background:var(--bg-surface)}

/* Grid */
.grid{display:grid;gap:var(--space-lg)}
.grid-2{display:grid;gap:var(--space-lg);grid-template-columns:1fr}
.grid-3{display:grid;gap:var(--space-lg);grid-template-columns:1fr}
.grid-4{display:grid;gap:var(--space-lg);grid-template-columns:repeat(2,1fr)}
.grid-auto{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

@media(min-width:600px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* Flex utilities */
.flex{display:flex}.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}
.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}

/* Text utilities */
.text-center{text-align:center}.text-gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-sm{font-size:var(--text-sm)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}
.font-bold{font-weight:700}.text-muted{color:var(--text-secondary)}

/* --- Header --------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(10,10,15,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:0 var(--space-md);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;width:var(--content-wide);margin:0 auto;
}
.logo{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;font-size:var(--text-lg);white-space:nowrap}
.logo svg{width:28px;height:28px;flex-shrink:0}
.logo-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Nav Toggle (mobile) */
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:none;cursor:pointer;
  position:relative;z-index:calc(var(--z-nav) + 1);
}
.hamburger,.hamburger::before,.hamburger::after{
  display:block;width:22px;height:2px;background:var(--text-primary);
  border-radius:2px;transition:var(--transition-base);
}
.hamburger{position:relative}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}
.nav-toggle[aria-expanded="true"] .hamburger{background:transparent}
.nav-toggle[aria-expanded="true"] .hamburger::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger::after{top:0;transform:rotate(-45deg)}

/* Mobile Nav */
.main-nav{
  position:fixed;top:0;right:-100%;width:min(80vw,320px);height:100dvh;
  background:var(--bg-surface);border-left:1px solid var(--border);
  transition:right .3s var(--ease-out);z-index:var(--z-nav);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:80px var(--space-lg) var(--space-lg);
}
.nav-toggle[aria-expanded="true"]~.main-nav{right:0}
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:calc(var(--z-nav) - 1);
}
.nav-toggle[aria-expanded="true"]~.nav-overlay{opacity:1;pointer-events:auto}
.main-nav ul{display:flex;flex-direction:column;gap:var(--space-xs)}
.main-nav a{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);
  font-weight:500;transition:background var(--transition-fast);min-height:44px;
}
.main-nav a:hover,.main-nav a[aria-current="page"]{background:var(--primary-light);color:var(--primary)}
.nav-cta{
  margin-top:var(--space-md);padding:var(--space-sm) var(--space-lg);
  background:var(--gradient);color:#fff;border-radius:var(--radius-full);
  text-align:center;font-weight:600;min-height:44px;display:flex;align-items:center;justify-content:center;
}

@media(min-width:900px){
  .nav-toggle,.nav-overlay{display:none}
  .main-nav{
    position:static;width:auto;height:auto;background:none;border:none;
    padding:0;overflow:visible;
  }
  .main-nav ul{flex-direction:row;gap:var(--space-xs)}
  .main-nav a{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}
}

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb{padding:var(--space-md) 0;font-size:var(--text-sm);color:var(--text-secondary)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.breadcrumb li{display:flex;align-items:center;gap:var(--space-xs)}
.breadcrumb li+li::before{content:'\203A';color:var(--text-tertiary)}
.breadcrumb a{color:var(--text-secondary);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb [aria-current="page"]{color:var(--text-primary);font-weight:500}

/* --- Hero ----------------------------------------------------------------- */
.hero{padding:var(--space-2xl) 0 var(--space-xl);text-align:center}
.hero-title{font-size:var(--text-3xl);font-weight:800;line-height:1.1;margin-bottom:var(--space-md)}
.hero-subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto var(--space-lg);line-height:1.5}
@media(min-width:900px){.hero{padding:var(--space-3xl) 0 var(--space-2xl)}.hero-title{font-size:var(--text-4xl)}}

/* --- Search Box ----------------------------------------------------------- */
.search-box{
  position:relative;max-width:600px;margin:0 auto;
}
.search-box input{
  width:100%;padding:var(--space-md) var(--space-lg);padding-left:48px;
  background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-full);
  color:var(--text-primary);font-size:var(--text-base);min-height:56px;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.search-box input:focus{border-color:var(--primary);box-shadow:var(--shadow-glow);outline:none}
.search-box input::placeholder{color:var(--text-tertiary)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-tertiary);pointer-events:none}

/* --- Cards ---------------------------------------------------------------- */
.card{
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-lg);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
.card-icon{
  width:48px;height:48px;border-radius:var(--radius-md);
  background:var(--gradient-subtle);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-md);
}
.card-icon svg{width:24px;height:24px;color:var(--primary)}
.card h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-xs)}
.card p{color:var(--text-secondary);line-height:1.6;font-size:var(--text-sm)}
.card-link{display:inline-flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-md);color:var(--primary);font-weight:600;font-size:var(--text-sm)}
.card-link svg{width:16px;height:16px;transition:transform var(--transition-fast)}

/* Glass card variant */
.card-glass{
  background:rgba(20,20,32,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.06);
}

/* Stat card */
.stat-card{text-align:center;padding:var(--space-lg)}
.stat-number{font-size:var(--text-2xl);font-weight:800;margin-bottom:var(--space-xs)}
.stat-label{font-size:var(--text-sm);color:var(--text-secondary)}

/* Content card (movie/show) */
.content-card{overflow:hidden;padding:0}
.content-card .card-poster{
  height:180px;background:var(--gradient-subtle);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.content-card .card-poster svg{width:48px;height:48px;color:var(--text-tertiary);opacity:.5}
.content-card .card-body{padding:var(--space-md)}
.content-card .card-body h3{font-size:var(--text-base);margin-bottom:var(--space-xs)}
.content-card .card-meta{display:flex;gap:var(--space-sm);flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-secondary)}

@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-light)}
  .card-link:hover svg{transform:translateX(3px)}
}
@media(hover:none){.card:active{transform:scale(.98)}}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-full);
  font-weight:600;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);
  min-height:44px;min-width:44px;text-decoration:none;white-space:nowrap;
}
.btn-primary{background:var(--gradient);color:#fff}
.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{color:var(--primary);background:var(--primary-light)}
.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--text-base);min-height:56px}
.btn-block{display:flex;width:100%}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* Download button */
.download-btn{
  display:flex;width:100%;padding:16px 24px;align-items:center;justify-content:center;gap:var(--space-sm);
  background:var(--gradient);color:#fff;border:none;border-radius:var(--radius-md);
  font-size:var(--text-lg);font-weight:700;min-height:56px;cursor:pointer;
  transition:all var(--transition-fast);text-decoration:none;
}
.download-btn:hover{box-shadow:var(--shadow-glow-lg);transform:translateY(-2px)}
.download-btn svg{width:24px;height:24px}
@media(min-width:600px){.download-btn{width:auto;padding:16px 40px}}

/* --- Upload Zone ---------------------------------------------------------- */
.upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius-lg);
  padding:var(--space-xl);text-align:center;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--transition-base);gap:var(--space-md);
  background:var(--bg-surface);
}
.upload-zone:hover,.upload-zone.dragover{
  border-color:var(--primary);background:var(--primary-light);
}
.upload-zone svg{width:48px;height:48px;color:var(--text-tertiary)}
.upload-zone p{color:var(--text-secondary)}
.upload-zone .upload-label{font-weight:600;color:var(--text-primary)}
.upload-zone input[type="file"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* --- Quality Bars --------------------------------------------------------- */
.quality-score{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm)}
.quality-label{font-size:var(--text-sm);color:var(--text-secondary);min-width:90px}
.quality-bar{flex:1;height:8px;border-radius:4px;background:var(--border);overflow:hidden}
.quality-fill{height:100%;border-radius:4px;transition:width .6s var(--ease-out)}
.quality-fill.excellent{background:var(--success)}
.quality-fill.good{background:var(--secondary)}
.quality-fill.average{background:var(--warning)}
.quality-fill.poor{background:var(--error)}
.quality-value{font-size:var(--text-sm);font-weight:700;min-width:36px;text-align:right}

/* --- Badges --------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  padding:4px 12px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;
}
.badge-primary{background:var(--primary-light);color:var(--primary)}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-info{background:rgba(0,180,216,.12);color:var(--secondary)}

/* --- Language Grid -------------------------------------------------------- */
.language-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-xs);
}
.language-item{
  display:flex;align-items:center;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);
  background:var(--bg-surface);border:1px solid var(--border);
  font-size:var(--text-sm);transition:all var(--transition-fast);min-height:44px;
}
.language-item:hover{border-color:var(--primary);background:var(--primary-light)}
.lang-flag{width:20px;height:14px;border-radius:2px;flex-shrink:0;background:var(--border)}

/* --- Key Takeaways -------------------------------------------------------- */
.key-takeaways{
  background:var(--gradient-subtle);border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:var(--radius-md);
  padding:var(--space-lg);margin-bottom:var(--space-xl);
}
.key-takeaways h2{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
.key-takeaways p{color:var(--text-secondary);line-height:1.7}

/* --- FAQ ------------------------------------------------------------------ */
.faq{margin:var(--space-xl) 0}
.faq h2{font-size:var(--text-xl);margin-bottom:var(--space-lg)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  padding:var(--space-md) 0;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  font-size:var(--text-base);min-height:44px;gap:var(--space-md);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';font-size:1.4em;color:var(--text-tertiary);
  transition:transform .2s var(--ease-out);flex-shrink:0;width:24px;text-align:center;
}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--primary)}
.faq .faq-answer{padding:0 0 var(--space-lg);color:var(--text-secondary);line-height:1.7}

/* --- Filter Bar ----------------------------------------------------------- */
.filter-bar{
  display:flex;gap:var(--space-sm);overflow-x:auto;padding:var(--space-sm) 0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar{display:none}
.filter-btn{
  padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);
  background:var(--bg-surface);border:1px solid var(--border);
  font-size:var(--text-sm);white-space:nowrap;cursor:pointer;min-height:44px;
  transition:all var(--transition-fast);
}
.filter-btn:hover,.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* --- Pagination ----------------------------------------------------------- */
.pagination{display:flex;justify-content:center;gap:var(--space-xs);padding:var(--space-xl) 0}
.pagination a,.pagination span{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-md);font-weight:500;transition:all var(--transition-fast);
}
.pagination a{background:var(--bg-surface);border:1px solid var(--border)}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination .active{background:var(--primary);color:#fff;border:none}
.pagination .dots{color:var(--text-tertiary)}

/* --- Footer --------------------------------------------------------------- */
.site-footer{
  background:var(--bg-surface);border-top:1px solid var(--border);
  padding:var(--space-2xl) 0 var(--space-lg);margin-top:var(--space-2xl);
}
.footer-grid{
  display:grid;gap:var(--space-xl);grid-template-columns:1fr;
  margin-bottom:var(--space-xl);
}
@media(min-width:600px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr repeat(4,1fr)}}
.footer-brand{max-width:280px}
.footer-brand p{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-sm);line-height:1.6}
.footer-col h4{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:var(--space-md)}
.footer-col a{display:block;padding:var(--space-xs) 0;color:var(--text-secondary);font-size:var(--text-sm);transition:color var(--transition-fast)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  display:flex;flex-direction:column;gap:var(--space-sm);
  padding-top:var(--space-lg);border-top:1px solid var(--border);
  font-size:var(--text-xs);color:var(--text-tertiary);align-items:center;text-align:center;
}
@media(min-width:600px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-links{display:flex;gap:var(--space-md)}
.footer-links a{color:var(--text-tertiary);transition:color var(--transition-fast)}
.footer-links a:hover{color:var(--primary)}

/* --- Tool-Specific -------------------------------------------------------- */
.tool-interface{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-lg);margin:var(--space-xl) 0;
}
.tool-controls{display:flex;flex-direction:column;gap:var(--space-md)}
@media(min-width:600px){.tool-controls.horizontal{flex-direction:row;align-items:center}}
.tool-output{
  background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-lg);margin-top:var(--space-lg);font-family:monospace;
  font-size:var(--text-sm);max-height:400px;overflow-y:auto;
}
label{display:block;font-weight:600;font-size:var(--text-sm);margin-bottom:var(--space-xs)}
input[type="text"],input[type="number"],input[type="email"],input[type="url"],select,textarea{
  width:100%;padding:var(--space-sm) var(--space-md);
  background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);
  color:var(--text-primary);font-size:var(--text-base);min-height:44px;
  transition:border-color var(--transition-fast);
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-light)}
textarea{min-height:120px;resize:vertical}

/* --- Subtitle Preview Table ----------------------------------------------- */
.subtitle-table{width:100%;font-size:var(--text-sm)}
.subtitle-table th{text-align:left;padding:var(--space-sm);border-bottom:2px solid var(--border);color:var(--text-secondary);font-weight:600}
.subtitle-table td{padding:var(--space-sm);border-bottom:1px solid var(--border);vertical-align:top}
.subtitle-table tr:hover{background:var(--bg-hover)}
.timestamp{font-family:monospace;white-space:nowrap;color:var(--secondary)}

/* --- Responsive Table Wrapper --------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--space-md) 0;border-radius:var(--radius-md);border:1px solid var(--border)}

/* --- Content Article ------------------------------------------------------ */
.article-content{max-width:var(--content-narrow);margin:0 auto}
.article-content h2{font-size:var(--text-xl);margin:var(--space-xl) 0 var(--space-md)}
.article-content h3{font-size:var(--text-lg);margin:var(--space-lg) 0 var(--space-sm)}
.article-content p{color:var(--text-secondary);line-height:1.8;margin-bottom:var(--space-md)}
.article-content ul,.article-content ol{color:var(--text-secondary);padding-left:var(--space-lg);margin-bottom:var(--space-md)}
.article-content li{margin-bottom:var(--space-xs);line-height:1.7}
.article-content a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(108,92,231,.3);text-underline-offset:2px}
.article-content a:hover{text-decoration-color:var(--primary)}
.article-content strong{color:var(--text-primary)}

/* --- Steps / How It Works ------------------------------------------------- */
.steps{counter-reset:step}
.step{position:relative;padding-left:60px;margin-bottom:var(--space-xl);counter-increment:step}
.step::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--gradient);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:var(--text-base);
}
.step h3{font-size:var(--text-lg);margin-bottom:var(--space-xs)}
.step p{color:var(--text-secondary)}

/* --- Contributor / Profile ------------------------------------------------ */
.contributor{display:flex;align-items:center;gap:var(--space-md)}
.avatar{
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--gradient);display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:var(--text-sm);flex-shrink:0;
}
.contributor-info .name{font-weight:600;font-size:var(--text-sm)}
.contributor-info .meta{font-size:var(--text-xs);color:var(--text-secondary)}

/* --- Request / Vote ------------------------------------------------------- */
.request-card{display:flex;gap:var(--space-md);align-items:flex-start}
.vote-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:44px;min-height:44px;padding:var(--space-xs);
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);
  cursor:pointer;transition:all var(--transition-fast);
}
.vote-btn:hover{border-color:var(--primary);color:var(--primary)}
.vote-btn svg{width:16px;height:16px}
.vote-count{font-size:var(--text-sm);font-weight:700}

/* --- Animations ----------------------------------------------------------- */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.animate-in{animation:fadeIn .5s var(--ease-out) both}
.animate-delay-1{animation-delay:.1s}.animate-delay-2{animation-delay:.2s}
.animate-delay-3{animation-delay:.3s}.animate-delay-4{animation-delay:.4s}

/* Floating gradient orb decoration */
.gradient-orb{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;pointer-events:none;
}
.gradient-orb-1{width:400px;height:400px;background:var(--primary);top:-200px;right:-100px}
.gradient-orb-2{width:300px;height:300px;background:var(--secondary);bottom:-150px;left:-100px}

/* --- Reduced Motion ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.nav-toggle,.nav-overlay,.search-box,.filter-bar,.download-btn,.upload-zone,.btn{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .card{border:1px solid #ccc;break-inside:avoid}
  a{color:#000;text-decoration:underline}
  a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:#666}
}