:root {
  --ink: #16213b;
  --muted: #667089;
  --soft: #f4f6fb;
  --line: #e3e7f0;
  --purple: #6947e8;
  --purple-dark: #5735d5;
  --orange: #ff895d;
  --card: rgba(255, 255, 255, 0.95);
  --shadow: 0 24px 80px rgba(45, 35, 89, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 160, 119, .13), transparent 25rem),
    radial-gradient(circle at 86% 28%, rgba(118, 84, 232, .12), transparent 29rem),
    linear-gradient(180deg, #fafbff 0%, #f4f6fd 48%, #fff 100%);
  min-height: 100vh;
  isolation: isolate;
  transition: background .35s ease, color .25s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(rgba(65, 58, 94, .19) .6px, transparent .6px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.arrow-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .96;
  transform: translateZ(0);
  will-change: transform;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.site-shell { position: relative; z-index: 1; overflow: hidden; }
.site-header {
  width: min(1180px, calc(100% - 48px));
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-bottom: 1px solid rgba(224, 227, 237, .8);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 19px/1 "Manrope", sans-serif;
  letter-spacing: -.5px;
}
.brand-mark {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #8063ed, #5935d6);
  box-shadow: 0 8px 18px rgba(101, 67, 224, .25);
}
.brand-mark svg { width: 23px; fill: currentColor; }
.header-nav { display: flex; gap: 36px; color: #566078; font-size: 14px; font-weight: 600; }
.header-nav a { transition: color .2s; }
.header-nav a:hover { color: var(--purple); }
.header-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple);
}
.header-action svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.hero {
  width: min(940px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
  padding: 84px 0 52px;
  position: relative;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(224, 226, 237, .9);
  box-shadow: 0 5px 18px rgba(44, 33, 85, .06);
  color: #6c7488;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px;
  font-weight: 800;
}
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 137, 93, .13); }
.hero h1 {
  margin: 22px 0 19px;
  color: #18233d;
  font: 800 clamp(48px, 6.3vw, 76px)/.98 "Manrope", sans-serif;
  letter-spacing: -4.5px;
}
.hero h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(100deg, #5c3ddb, #8061eb 56%, #9b6bdf);
  background-clip: text;
}
.hero-copy {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.platform-row { margin-top: 35px; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.platform-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: #4d566d;
  font-size: 12px;
  font-weight: 700;
}
.platform-icon { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; }
.platform-icon svg { width: 14px; height: 14px; fill: currentColor; }
.youtube .platform-icon { color: #f04444; background: #fff0f0; }
.tiktok .platform-icon { color: #111827; background: #eef0f3; }
.instagram .platform-icon { color: #c8408b; background: #fff0f8; }
.instagram svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.instagram svg .fill { fill: currentColor; stroke: none; }
.facebook .platform-icon { color: #2877da; background: #edf5ff; }

.download-card {
  width: min(820px, calc(100% - 40px));
  margin: 0 auto 120px;
  padding: 31px;
  border-radius: 24px;
  border: 1px solid rgba(220, 222, 235, .9);
  background: var(--card);
  box-shadow: var(--shadow), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
  position: relative;
}
.download-card::before {
  content: "";
  position: absolute;
  inset: auto 12% -70px;
  height: 80px;
  background: rgba(98, 66, 221, .15);
  filter: blur(55px);
  z-index: -1;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.step-label { margin: 0 0 7px; color: var(--orange); text-transform: uppercase; letter-spacing: 1.5px; font-size: 10px; font-weight: 800; }
.card-head h2 { margin: 0; font: 700 20px/1.2 "Manrope", sans-serif; letter-spacing: -.5px; }
.secure-note { display: flex; align-items: center; gap: 6px; color: #8990a1; font-size: 11px; font-weight: 600; }
.secure-note svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.url-field-wrap { height: 59px; display: flex; align-items: center; border: 1px solid #dfe3ec; border-radius: 14px; background: #f8f9fc; transition: border .2s, box-shadow .2s, background .2s; }
.url-field-wrap:focus-within { background: #fff; border-color: #8064e7; box-shadow: 0 0 0 4px rgba(112, 75, 226, .09); }
.url-field-wrap.invalid { border-color: #e95656; box-shadow: 0 0 0 4px rgba(233, 86, 86, .08); }
.link-icon { width: 21px; margin: 0 13px 0 18px; flex: 0 0 auto; fill: none; stroke: #8b93a6; stroke-width: 1.7; }
.url-field-wrap input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.url-field-wrap input::placeholder { color: #a2a9b8; }
.paste-button { height: 38px; margin-right: 9px; padding: 0 13px; border: 1px solid #e1e3eb; border-radius: 9px; background: #fff; color: #626b7d; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: 0 2px 4px rgba(31, 35, 48, .03); }
.paste-button:hover { color: var(--purple); border-color: #cec6ed; }
.paste-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.detected-platform { flex: 0 0 auto; margin-right: 8px; padding: 4px 7px; border-radius: 6px; color: var(--purple); background: #efebff; text-transform: uppercase; letter-spacing: .5px; font-size: 7px; font-weight: 800; }
.detected-platform[hidden] { display: none; }
.field-state { width: 22px; height: 22px; margin-right: 5px; flex: 0 0 auto; display: grid; place-items: center; }
.field-state > * { grid-area: 1 / 1; display: none; }
.field-state svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.state-spinner { width: 15px; height: 15px; border: 2px solid #d8d2ef; border-top-color: var(--purple); border-radius: 50%; }
.url-field-wrap[data-state="loading"] .state-spinner { display: block; animation: spin .7s linear infinite; }
.url-field-wrap[data-state="success"] { border-color: #65b68a; box-shadow: 0 0 0 4px rgba(70, 164, 113, .08); }
.url-field-wrap[data-state="success"] .state-check { display: block; color: #3b9d68; }
.url-field-wrap[data-state="error"] .state-error { display: block; color: #d94d4d; }
.paste-button.is-pasted { color: #2d8c59; border-color: #a6d7ba; background: #f0faf4; }
.video-preview:not([hidden]) { animation: preview-in .25s ease-out both; }
.field-message { min-height: 17px; margin: 8px 3px 18px; color: #9aa0ae; font-size: 11px; }
.field-message.error { color: #d74444; }

.video-preview { margin: -3px 0 20px; padding: 12px; display: grid; grid-template-columns: 96px 1fr 32px; gap: 13px; align-items: center; border: 1px solid #e5e6ee; border-radius: 14px; background: #f9fafc; }
.video-preview[hidden] { display: none; }
.preview-thumb-wrap { height: 58px; position: relative; border-radius: 9px; overflow: hidden; background: #e8e9ef; }
.preview-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.preview-duration { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: 4px; color: #fff; background: rgba(14,17,25,.8); font-size: 9px; }
.preview-copy { min-width: 0; }
.preview-platform { color: var(--purple); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.preview-copy h3 { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.preview-copy p { margin: 0; color: #8c93a3; font-size: 10px; }
.clear-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #9ba1af; cursor: pointer; }
.clear-button:hover { background: #eceef4; color: #444b5c; }
.clear-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.option-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 26px; padding-top: 3px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 11px; color: #3d465a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
legend span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; background: #f0edfc; color: var(--purple); font-size: 9px; letter-spacing: 0; }
.quality-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.quality-options label { position: relative; cursor: pointer; }
.quality-options input { position: absolute; opacity: 0; pointer-events: none; }
.quality-options label > span { height: 66px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border: 1px solid #e0e3eb; border-radius: 11px; background: #fbfbfd; transition: .2s; position: relative; }
.quality-options label:hover > span { border-color: #c7bcec; }
.quality-options input:checked + span { border-color: var(--purple); background: #f5f2ff; box-shadow: inset 0 0 0 1px var(--purple); }
.quality-options strong { color: #40495b; font-size: 11px; }
.quality-options small { margin-top: 3px; color: #9ba1af; font-size: 8px; }
.quality-options b { position: absolute; top: -7px; right: 7px; padding: 2px 5px; border-radius: 5px; color: #fff; background: var(--purple); text-transform: uppercase; letter-spacing: .4px; font-size: 6px; }
.format-select-wrap { height: 43px; position: relative; display: flex; align-items: center; border: 1px solid #e0e3eb; border-radius: 11px; background: #fbfbfd; }
.format-select-wrap > svg:first-child { width: 17px; margin-left: 12px; fill: none; stroke: #828a9e; stroke-width: 1.5; }
.format-select-wrap select { width: 100%; height: 100%; padding: 0 35px 0 9px; appearance: none; border: 0; outline: 0; background: transparent; color: #434b5c; font-size: 10px; font-weight: 700; cursor: pointer; }
.format-select-wrap select option,
.format-select-wrap select optgroup { color: #434b5c; background: #fff; }
.format-select-wrap select optgroup { font-weight: 800; }
.format-select-wrap select option { font-weight: 600; }
.format-select-wrap .chevron { width: 15px; position: absolute; right: 10px; fill: none; stroke: #868d9e; stroke-width: 1.6; pointer-events: none; }
.format-tip { margin: 7px 2px 0; color: #9ba1af; font-size: 9px; }
.download-button { width: 100%; height: 57px; margin-top: 25px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(110deg, #6845e6, #7552e9); box-shadow: 0 12px 25px rgba(92, 57, 210, .22); cursor: pointer; font-size: 13px; font-weight: 800; transition: transform .18s, box-shadow .18s; position: relative; overflow: hidden; }
.download-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transform: translateX(-100%); transition: transform .5s; }
.download-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 15px 29px rgba(92, 57, 210, .28); }
.download-button:hover::after { transform: translateX(100%); }
.download-button:disabled { cursor: wait; opacity: .82; }
.button-label { display: flex; align-items: center; justify-content: center; gap: 9px; }
.button-label svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button-loader { display: none; width: 19px; height: 19px; margin: auto; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.download-button.loading .button-label { display: none; }
.download-button.loading .button-loader { display: block; }
.progress-panel { margin-top: 14px; }
.progress-panel[hidden] { display: none; }
.progress-head { display: flex; justify-content: space-between; margin-bottom: 7px; color: #667087; font-size: 9px; }
.progress-head strong { font-weight: 500; color: #969dac; }
.progress-track { height: 4px; overflow: hidden; border-radius: 9px; background: #e9e6f5; }
.progress-track span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), #9c7cf3); animation: progress 1.4s ease-in-out infinite; }
.terms-note { margin: 12px 0 0; text-align: center; color: #a1a7b4; font-size: 8px; }

.how-section { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 120px; }
.section-intro { text-align: center; }
.section-intro h2 { max-width: 560px; margin: 8px auto 46px; font: 700 clamp(28px, 4vw, 40px)/1.15 "Manrope", sans-serif; letter-spacing: -1.6px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.steps-grid article { min-height: 254px; padding: 21px; border: 1px solid #e6e8ee; border-radius: 18px; background: rgba(255,255,255,.72); position: relative; overflow: hidden; }
.steps-grid article > span { color: #c5c8d2; font: 700 10px/1 "Manrope"; letter-spacing: 1px; }
.step-art { height: 96px; position: relative; display: grid; place-items: center; margin: 10px 0 4px; }
.step-art::before { content: ""; width: 76px; height: 76px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(8deg); border-radius: 24px; pointer-events: none; }
.step-art svg { width: 46px; height: 46px; min-width: 46px; min-height: 46px; position: relative; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; z-index: 1; }
.paste-art::before { background: #fff0eb; }
.paste-art svg { stroke: #ed7f59; }
.tune-art::before { background: #f0edff; }
.tune-art svg { stroke: #795de1; fill: #fff; }
.download-art::before { background: #eaf6ff; }
.download-art svg { stroke: #4c94ca; }
.steps-grid h3 { margin: 7px 0 6px; text-align: center; font: 700 15px/1.2 "Manrope", sans-serif; }
.steps-grid p { max-width: 220px; margin: 0 auto; text-align: center; color: #858da0; font-size: 11px; line-height: 1.55; }

footer { width: min(1180px, calc(100% - 48px)); min-height: 110px; margin: 0 auto; border-top: 1px solid #e5e7ed; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #969ca9; font-size: 10px; }
footer .brand { color: var(--ink); font-size: 15px; }
footer .brand-mark { width: 27px; height: 27px; border-radius: 8px; }
footer .brand-mark svg { width: 19px; }
footer > p { margin: 0; }
footer > span { justify-self: end; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: min(360px, calc(100% - 48px)); padding: 13px 16px; border-radius: 11px; color: #fff; background: #20283b; box-shadow: 0 12px 36px rgba(17,23,38,.24); font-size: 12px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .25s; z-index: 10; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { background: #b74444; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes preview-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .site-header { width: calc(100% - 30px); height: 68px; }
  .header-nav { display: none; }
  .header-action { font-size: 0; width: 36px; height: 36px; justify-content: center; border: 1px solid #ddd9ed; border-radius: 10px; }
  .header-action svg { width: 17px; }
  .hero { padding: 62px 0 40px; }
  .hero h1 { letter-spacing: -3px; }
  .hero-copy { font-size: 14px; }
  .download-card { padding: 23px 18px; border-radius: 20px; margin-bottom: 90px; }
  .card-head { align-items: center; }
  .secure-note { display: none; }
  .url-field-wrap { height: 55px; }
  .paste-button span { display: none; }
  .paste-button { width: 36px; padding: 0; justify-content: center; }
  .option-grid { grid-template-columns: 1fr; gap: 22px; }
  .quality-options label > span { height: 62px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid article { min-height: 225px; }
  footer { width: calc(100% - 32px); grid-template-columns: 1fr 1fr; min-height: 120px; }
  footer > p { display: none; }
}

@media (max-width: 430px) {
  .hero { width: calc(100% - 28px); padding-top: 52px; }
  .hero h1 { font-size: 44px; letter-spacing: -3.2px; }
  .platform-row { gap: 7px; }
  .platform-pill { font-size: 10px; }
  .download-card { width: calc(100% - 24px); padding: 21px 14px; }
  .url-field-wrap input { font-size: 12px; }
  .link-icon { margin-left: 13px; margin-right: 9px; }
  .quality-options { grid-template-columns: 1fr 1fr; }
  .quality-options label > span { padding-left: 14px; }
  .video-preview { grid-template-columns: 74px 1fr 27px; }
  .section-intro h2 { margin-bottom: 30px; }
}

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

.header-actions { display: flex; align-items: center; gap: 18px; }
.theme-toggle {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #656e82;
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover { color: var(--purple); border-color: #cfc5ef; transform: translateY(-1px); }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: opacity .2s, transform .25s; }
html[data-theme="light"] .theme-toggle .sun-icon { opacity: 0; transform: rotate(-35deg) scale(.65); }
html[data-theme="light"] .theme-toggle .moon-icon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .sun-icon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .moon-icon { opacity: 0; transform: rotate(35deg) scale(.65); }

.content-section { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 110px; }
.section-intro > p:not(.step-label) { max-width: 650px; margin: -29px auto 44px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-grid article { padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .72); }
.guide-kicker { display: inline-block; margin-bottom: 28px; color: var(--purple); text-transform: uppercase; letter-spacing: 1.2px; font-size: 9px; font-weight: 800; }
.guide-grid h3 { margin: 0 0 9px; font: 700 16px/1.25 "Manrope", sans-serif; }
.guide-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

.faq-section { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 110px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.faq-intro { position: sticky; top: 35px; }
.faq-intro h2 { margin: 8px 0 0; font: 700 clamp(28px, 3.5vw, 38px)/1.15 "Manrope", sans-serif; letter-spacing: -1.6px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 21px 34px 21px 0; list-style: none; position: relative; cursor: pointer; font: 700 13px/1.4 "Manrope", sans-serif; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 19px; color: var(--purple); font-size: 18px; font-weight: 400; transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: -5px 34px 20px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.rights-notice { width: min(1040px, calc(100% - 40px)); margin: 0 auto 95px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid #ded8f4; border-radius: 17px; background: #f5f2ff; }
.rights-notice div { display: flex; flex-direction: column; gap: 4px; }
.rights-notice strong { font: 700 13px/1.3 "Manrope", sans-serif; }
.rights-notice span { color: var(--muted); font-size: 10px; }
.rights-notice > a { color: var(--purple); white-space: nowrap; font-size: 10px; font-weight: 800; }
.rights-notice > a span { margin-left: 5px; color: inherit; }

.footer-links { display: flex; align-items: center; gap: 25px; }
.footer-links a { transition: color .2s; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--purple); }

.legal-main, .about-main { width: min(1000px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0 115px; }
.legal-hero { max-width: 710px; margin-bottom: 64px; }
.legal-hero h1, .about-hero h1 { margin: 9px 0 18px; font: 800 clamp(42px, 6vw, 68px)/1.04 "Manrope", sans-serif; letter-spacing: -3px; }
.legal-hero > p:not(.step-label), .about-hero > p:not(.step-label) { color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal-hero > span { display: inline-block; margin-top: 12px; color: #9aa1b1; font-size: 10px; }
.legal-layout { display: grid; grid-template-columns: 190px minmax(0, 680px); gap: 70px; align-items: start; }
.legal-toc { position: sticky; top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .62); font-size: 10px; }
.legal-toc strong { margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.legal-toc a { color: var(--muted); transition: color .2s; }
.legal-toc a:hover { color: var(--purple); }
.legal-article section { padding: 0 0 30px; scroll-margin-top: 30px; }
.legal-article h2 { margin: 0 0 11px; font: 700 18px/1.3 "Manrope", sans-serif; letter-spacing: -.4px; }
.legal-article p { margin: 0 0 11px; color: var(--muted); font-size: 12px; line-height: 1.78; }
.legal-article a, .about-copy a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }

.about-hero { max-width: 780px; padding: 28px 0 72px; }
.about-hero h1 { max-width: 760px; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 95px; }
.principles-grid article { min-height: 230px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .7); }
.principles-grid span { color: #b3b9c7; font-size: 9px; font-weight: 800; }
.principles-grid h2 { margin: 57px 0 9px; font: 700 17px/1.2 "Manrope", sans-serif; }
.principles-grid p, .about-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.about-copy { padding: 58px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; border-top: 1px solid var(--line); }
.about-copy h2 { max-width: 330px; margin: 8px 0 0; font: 700 28px/1.18 "Manrope", sans-serif; letter-spacing: -1px; }
.about-copy p + p { margin-top: 16px; }
.contact-block { padding-bottom: 0; }

html[data-theme="dark"] {
  --ink: #edf0f8;
  --muted: #a7aec1;
  --soft: #181b25;
  --line: #2d3241;
  --card: rgba(24, 27, 38, .96);
  --purple: #9a7cf7;
  --purple-dark: #8767ef;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 137, 93, .08), transparent 25rem),
    radial-gradient(circle at 86% 28%, rgba(118, 84, 232, .14), transparent 29rem),
    linear-gradient(180deg, #11131b 0%, #151822 48%, #10121a 100%);
}
html[data-theme="dark"] body::before { opacity: .15; }
html[data-theme="dark"] .arrow-particles { opacity: .95; }
html[data-theme="dark"] .site-header,
html[data-theme="dark"] footer { border-color: #292d3a; }
html[data-theme="dark"] .header-nav,
html[data-theme="dark"] .header-action { color: #aab1c2; }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .platform-pill,
html[data-theme="dark"] .guide-grid article,
html[data-theme="dark"] .steps-grid article,
html[data-theme="dark"] .principles-grid article,
html[data-theme="dark"] .legal-toc { color: #c9cede; background: rgba(27, 30, 41, .8); border-color: #303544; }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .card-head h2,
html[data-theme="dark"] .quality-options strong,
html[data-theme="dark"] .preview-copy h3 { color: var(--ink); }
html[data-theme="dark"] .download-card { border-color: #303544; box-shadow: 0 24px 80px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="dark"] .url-field-wrap,
html[data-theme="dark"] .video-preview,
html[data-theme="dark"] .quality-options label > span,
html[data-theme="dark"] .format-select-wrap { color: var(--ink); background: #1b1e29; border-color: #333847; }
html[data-theme="dark"] .url-field-wrap:focus-within { background: #1f2230; border-color: #9275ed; }
html[data-theme="dark"] .url-field-wrap input,
html[data-theme="dark"] .format-select-wrap select { color: var(--ink); }
html[data-theme="dark"] .format-select-wrap select { color-scheme: dark; }
html[data-theme="dark"] .format-select-wrap select option,
html[data-theme="dark"] .format-select-wrap select optgroup { color: #edf0f8; background: #1b1e29; }
html[data-theme="dark"] .paste-button { color: #c0c5d3; background: #252936; border-color: #393e4d; }
html[data-theme="dark"] .detected-platform { color: #b9a5fb; background: #2d2745; }
html[data-theme="dark"] .paste-button.is-pasted { color: #88d2a6; border-color: #3d6c51; background: #1c3426; }
html[data-theme="dark"] .url-field-wrap[data-state="success"] { border-color: #4d9d70; box-shadow: 0 0 0 4px rgba(70, 164, 113, .08); }
html[data-theme="dark"] .quality-options input:checked + span { background: #29233f; border-color: var(--purple); }
html[data-theme="dark"] .rights-notice { border-color: #423a62; background: #211d33; }
html[data-theme="dark"] .paste-art::before { background: #38251f; }
html[data-theme="dark"] .tune-art::before { background: #2c2545; }
html[data-theme="dark"] .download-art::before { background: #1d3040; }
html[data-theme="dark"] .tune-art svg { fill: #151822; stroke: #9d84f8; }
html[data-theme="dark"] .toast { background: #303545; }
html[data-theme="dark"] .toast.error { background: #9f3f44; }

@media (max-width: 760px) {
  .header-actions { gap: 8px; }
  .guide-grid, .principles-grid { grid-template-columns: 1fr; }
  .guide-grid article { min-height: 180px; }
  .faq-section { grid-template-columns: 1fr; gap: 30px; }
  .faq-intro { position: static; }
  .rights-notice { align-items: flex-start; flex-direction: column; }
  footer.site-footer { grid-template-columns: 1fr auto; padding: 25px 0; gap: 20px; }
  .footer-links { grid-column: 1 / -1; grid-row: 2; }
  .legal-main, .about-main { padding-top: 55px; }
  .legal-layout { grid-template-columns: 1fr; gap: 35px; }
  .legal-toc { display: none; }
  .about-copy { grid-template-columns: 1fr; gap: 25px; }
}

@media (max-width: 430px) {
  .theme-toggle { width: 36px; height: 36px; }
  .content-section, .faq-section { width: calc(100% - 28px); }
  .footer-links { gap: 18px; }
  .legal-hero h1, .about-hero h1 { letter-spacing: -2.2px; }
  .detected-platform { margin-right: 4px; padding-inline: 5px; }
  .field-state { margin-right: 2px; }
}
/* Freemium UI Elements */
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.auth-btn { height: 38px; padding: 0 14px; border: 1px solid #dfe3ec; border-radius: 11px; background: #fff; color: #323a4d; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; box-shadow: 0 2px 4px rgba(20, 30, 60, .04); white-space: nowrap; }
.auth-btn:hover { border-color: var(--purple); color: var(--purple); background: #f6f4fe; box-shadow: 0 4px 8px rgba(105, 71, 232, .12); }
.pro-btn { height: 38px; padding: 0 12px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #ff895d, #e05e32); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 137, 93, .3); transition: transform .18s, box-shadow .18s; display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; }
.pro-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 137, 93, .4); }
[hidden] { display: none !important; }

/* Person Icon Account Dropdown */
.account-menu-wrap { position: relative; }
.account-btn { height: 38px; padding: 0 8px 0 5px; border: 1px solid #dfe3ec; border-radius: 11px; background: #fff; color: #323a4d; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 7px; box-shadow: 0 2px 5px rgba(20, 30, 60, .05); }
.account-btn:hover { border-color: var(--purple); background: #faf8ff; box-shadow: 0 4px 10px rgba(105, 71, 232, .12); }
.account-avatar { width: 26px; height: 26px; border-radius: 50%; background: #f0edfc; color: var(--purple); display: grid; place-items: center; }

.plan-pill { padding: 2px 6px; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .5px; background: #e6e8f0; color: #566078; text-transform: uppercase; }
.plan-pill.pro { background: linear-gradient(135deg, #8063ed, #5935d6); color: #fff; box-shadow: 0 2px 6px rgba(101, 67, 224, .3); }

.account-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: #fff; border: 1px solid rgba(220, 225, 240, .9); border-radius: 18px; box-shadow: 0 16px 40px rgba(15, 20, 40, .16); padding: 14px; z-index: 500; animation: modal-in .15s ease-out both; }
.dropdown-header { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.dropdown-avatar { width: 34px; height: 34px; border-radius: 50%; background: #f0edfc; color: var(--purple); display: grid; place-items: center; flex-shrink: 0; }
.dropdown-user-info { min-width: 0; flex: 1; }
.dropdown-email { font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-tier { margin-top: 4px; }
.dropdown-divider { height: 1px; background: #e5e7eb; margin: 0 -14px 10px; }
.dropdown-actions { display: flex; flex-direction: column; gap: 3px; }
.dropdown-item { width: 100%; height: 36px; border: 0; background: transparent; border-radius: 8px; font-size: 12px; font-weight: 700; color: #4b5563; display: flex; align-items: center; gap: 9px; padding: 0 10px; cursor: pointer; transition: all .15s; }
.dropdown-item:hover { background: #f4f6fb; color: var(--ink); }
.dropdown-item.pro-action { color: #ff895d; font-weight: 800; }
.dropdown-item.pro-action:hover { background: #fff5f0; color: #e05e32; }
.dropdown-item.logout-action { color: #dc2626; margin-top: 4px; border-top: 1px solid #f3f4f6; border-radius: 0 0 8px 8px; padding-top: 6px; }
.dropdown-item.logout-action:hover { background: #fef2f2; }

/* Mobile Menu Toggle Button & Dropdown Menu */
.mobile-menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #dfe3ec;
  border-radius: 11px;
  background: #fff;
  color: #323a4d;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  box-shadow: 0 2px 4px rgba(20, 30, 60, .04);
  flex-shrink: 0;
}
.mobile-menu-btn:hover,
.mobile-menu-btn[aria-expanded="true"] {
  border-color: var(--purple);
  color: var(--purple);
  background: #f6f4fe;
}
.mobile-menu-btn svg { width: 20px; height: 20px; }

.mobile-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(220, 225, 240, .95);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(15, 20, 40, .18), 0 2px 6px rgba(0, 0, 0, .04);
  padding: 12px;
  z-index: 550;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: modal-in .18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mobile-nav-dropdown[hidden] { display: none !important; }
.mobile-nav-links { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.mobile-nav-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.mobile-nav-link:hover,
.mobile-nav-link[aria-current="page"] {
  background: #f0edfc;
  color: var(--purple);
}
.mobile-nav-divider { height: 1px; background: #e5e7eb; margin: 6px 0; }
.mobile-nav-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mobile-nav-actions .pro-btn { width: 100%; justify-content: center; height: 40px; font-size: 13px; }
.mobile-nav-actions .auth-btn { width: 100%; justify-content: center; height: 40px; font-size: 13px; }

/* Responsive Header Updates */
@media (max-width: 760px) {
  .site-header { width: calc(100% - 24px); height: 70px; }
  .header-nav { display: none; }
  .header-actions { gap: 8px; }
  .mobile-menu-btn { display: inline-flex; }
  .pro-btn { padding: 0 10px; font-size: 11px; height: 34px; }
  .auth-btn { padding: 0 12px; font-size: 12px; height: 34px; }
  .account-btn { height: 34px; padding: 0 8px 0 5px; }
}

@media (max-width: 440px) {
  .site-header { width: calc(100% - 16px); }
  .brand span:not(.brand-mark) { font-size: 17px; }
  .brand-mark { width: 30px; height: 30px; }
  .header-actions { gap: 6px; }
  .pro-btn { padding: 0 8px; font-size: 10.5px; }
  .mobile-menu-btn { width: 34px; height: 34px; border-radius: 9px; }
}

/* Dark mode for mobile menu */
html[data-theme="dark"] .mobile-menu-btn {
  background: #202431;
  border-color: #373c4d;
  color: #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] .mobile-menu-btn:hover,
html[data-theme="dark"] .mobile-menu-btn[aria-expanded="true"] {
  background: #282d3d;
  border-color: #8063ed;
  color: #c4b5fd;
}
html[data-theme="dark"] .mobile-nav-dropdown {
  background: rgba(24, 27, 36, .98);
  border-color: #2b3040;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .mobile-nav-link { color: #c9cede; }
html[data-theme="dark"] .mobile-nav-link:hover,
html[data-theme="dark"] .mobile-nav-link[aria-current="page"] {
  background: #242038;
  color: #b9a5fb;
}
html[data-theme="dark"] .mobile-nav-divider { background: #2b3040; }
/* Dark mode for account dropdown */
html[data-theme="dark"] .account-btn { background: #202431; border-color: #373c4d; color: #e5e7eb; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .account-btn:hover { background: #282d3d; border-color: #8063ed; }
html[data-theme="dark"] .account-avatar { background: #2b2545; color: #b9a5fb; }
html[data-theme="dark"] .account-dropdown { background: #181b24; border-color: #2b3040; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .dropdown-avatar { background: #2b2545; color: #b9a5fb; }
html[data-theme="dark"] .dropdown-email { color: #f3f4f6; }
html[data-theme="dark"] .dropdown-divider { background: #2b3040; }
html[data-theme="dark"] .dropdown-item { color: #9ca3af; }
html[data-theme="dark"] .dropdown-item:hover { background: #252936; color: #fff; }
html[data-theme="dark"] .dropdown-item.pro-action:hover { background: #2e1d18; color: #ff895d; }
html[data-theme="dark"] .dropdown-item.logout-action { border-top-color: #2b3040; color: #f87171; }
html[data-theme="dark"] .dropdown-item.logout-action:hover { background: #321619; color: #fca5a5; }
.mode-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid #e3e7f0; padding-bottom: 10px; }
.mode-tab { padding: 8px 16px; border: 0; background: transparent; color: #717a8e; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 9px; transition: all .2s; display: flex; align-items: center; gap: 6px; }
.mode-tab:hover { color: var(--ink); background: #f4f6fb; }
.mode-tab.active { background: #f0edfc; color: var(--purple); }
.pro-tag { padding: 2px 5px; border-radius: 4px; font-size: 8px; font-weight: 800; background: var(--orange); color: #fff; }

.batch-textarea-wrap { position: relative; margin-bottom: 16px; }
.batch-textarea-wrap textarea { width: 100%; min-height: 120px; padding: 14px; border: 1px solid #dfe3ec; border-radius: 14px; background: #f8f9fc; color: var(--ink); font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical; outline: none; transition: border .2s, box-shadow .2s; }
.batch-textarea-wrap textarea:focus { border-color: #8064e7; background: #fff; box-shadow: 0 0 0 4px rgba(112, 75, 226, .09); }
.batch-counter { display: flex; justify-content: space-between; margin-top: 5px; color: #8e95a5; font-size: 11px; }

.batch-gate { text-align: center; padding: 36px 24px; border: 1.5px dashed #c9cedd; border-radius: 18px; background: #f8f9fe; margin-bottom: 20px; }
.batch-gate h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.batch-gate p { margin: 0 0 20px; color: #5d667a; font-size: 13.5px; line-height: 1.55; max-width: 480px; margin-inline: auto; }
.download-auth-gate { margin-bottom: 0; }
.download-auth-gate .auth-btn { min-width: 220px; height: 42px; }

/* Modal Components */
.modal-backdrop { position: fixed; inset: 0; background: rgba(14, 18, 30, .65); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.modal-backdrop:not([hidden]) { opacity: 1; pointer-events: auto; }
.modal-card { width: min(480px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: 32px; box-shadow: 0 24px 60px rgba(15, 20, 40, .25); border: 1px solid rgba(220, 225, 240, .8); position: relative; animation: modal-in .25s ease-out both; }
.pricing-card-modal { width: min(780px, calc(100% - 24px)); padding: 34px 28px 28px; }
.modal-close { position: absolute; right: 18px; top: 18px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: #f2f4f8; color: #6b7280; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: all .2s; }
.modal-close:hover { background: #e5e7eb; color: #111827; }
.modal-close svg { width: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.oauth-btn-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.oauth-btn { width: 100%; height: 46px; border-radius: 12px; border: 1px solid #dfe3ec; background: #fff; color: #323a4d; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all .2s; box-shadow: 0 2px 4px rgba(20, 30, 60, .04); }
.oauth-btn:hover { border-color: #8063ed; box-shadow: 0 4px 12px rgba(105, 71, 232, .12); transform: translateY(-1px); }
.google-btn:hover { background: #fafbff; }
.github-btn { background: #181c27; color: #fff; border-color: #181c27; }
.github-btn:hover { background: #252b3b; color: #fff; border-color: #252b3b; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }

.auth-divider { display: flex; align-items: center; text-align: center; margin: 16px 0; color: #9ca3af; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid #e5e7eb; }
.auth-divider span { padding: 0 10px; }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; padding-bottom: 10px; }
.auth-tab { border: 0; background: transparent; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #6b7280; cursor: pointer; border-radius: 6px; }
.auth-tab.active { background: #f0edfc; color: var(--purple); }
.auth-input-wrap { margin-bottom: 14px; }
.auth-input-wrap label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #4b5563; margin-bottom: 5px; }
.auth-input-wrap input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; outline: none; background: #f9fafb; }
.auth-input-wrap input:focus { border-color: var(--purple); background: #fff; }
.auth-submit-btn { width: 100%; height: 46px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #8063ed, #5935d6); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; margin-top: 10px; }

/* Pricing Modal Elements */
.billing-toggle-wrap { display: inline-flex; align-items: center; background: #eef1f8; padding: 4px; border-radius: 12px; margin: 16px auto 0; gap: 4px; }
.billing-toggle-btn { padding: 6px 14px; border: 0; background: transparent; border-radius: 9px; font-size: 12px; font-weight: 700; color: #5b6479; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; }
.billing-toggle-btn.active { background: #fff; color: var(--purple); box-shadow: 0 2px 6px rgba(100, 70, 220, .14); }
.discount-badge { background: #10b981; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; letter-spacing: .3px; }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; align-items: stretch; }
.pricing-col { padding: 24px 22px 22px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fafbff; display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; box-sizing: border-box; }
.pricing-col.pro-col { border-color: #8063ed; background: #fbf9ff; box-shadow: 0 8px 24px rgba(105, 71, 232, .1); }
.pro-badge { position: absolute; top: -11px; right: 20px; }
.pro-badge .pro-tag { background: var(--purple); font-size: 9px; padding: 3px 8px; font-weight: 800; border-radius: 5px; color: #fff; letter-spacing: .5px; box-shadow: 0 2px 6px rgba(105, 71, 232, .3); }

.pricing-col-head h4 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--ink); }
.pricing-col-head p { margin: 0 0 12px; color: #6b7280; font-size: 12px; }
.pricing-price { font-size: 30px; font-weight: 800; color: var(--ink); margin: 0 0 4px; display: flex; align-items: baseline; gap: 4px; }
.pricing-price small { font-size: 13px; color: #6b7280; font-weight: 500; }
.pricing-hint { min-height: 18px; font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 18px; }
.pricing-hint.pro-billing-hint { color: #ff895d; font-weight: 700; }

.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.4; color: #4b5563; }
.pricing-features li svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: #10b981; stroke: currentColor; stroke-width: 2.5; fill: none; }
.pricing-features li .feat-note { color: #8c93a3; font-size: 11px; font-weight: 500; }

.pricing-cta-btn { width: 100%; height: 46px; border: 0; border-radius: 11px; font-size: 13px; font-weight: 800; cursor: pointer; margin-top: auto; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.pricing-cta-btn.free-cta { background: #edf0f7; color: #6b7280; cursor: default; }
.pricing-cta-btn.pro-cta { background: linear-gradient(135deg, #ff895d, #e05e32); color: #fff; box-shadow: 0 4px 14px rgba(255, 137, 93, .35); }
.pricing-cta-btn.pro-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 137, 93, .45); }

/* Responsive Media Queries for Modals & Freemium */
@media (max-width: 760px) {
  .pricing-card-modal { width: min(440px, 100%); padding: 26px 18px 22px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .pricing-col { padding: 20px 16px 18px; }
  .pricing-col.pro-col { order: -1; }
  .pricing-price { font-size: 26px; }
  .pricing-features { gap: 8px; margin-bottom: 18px; }
  .pricing-features li { font-size: 12px; }
  .pricing-cta-btn { height: 44px; }
}

@media (max-width: 480px) {
  .modal-backdrop { padding: 10px; }
  .modal-card { padding: 22px 16px; border-radius: 18px; }
  .auth-btn, .pro-btn { padding: 0 10px; font-size: 11px; height: 34px; }
  .billing-toggle-wrap { width: 100%; justify-content: center; }
  .billing-toggle-btn { flex: 1; justify-content: center; padding: 6px 8px; font-size: 11px; }
}

/* Dark mode adaptations for freemium */
html[data-theme="dark"] .modal-card { background: #181b24; border-color: #2b3040; color: #e5e7eb; }
html[data-theme="dark"] .modal-close { background: #252936; color: #9ca3af; }
html[data-theme="dark"] .modal-close:hover { background: #2e3445; color: #fff; }
html[data-theme="dark"] .auth-input-wrap input { background: #13151d; border-color: #374151; color: #fff; }
html[data-theme="dark"] .auth-input-wrap input:focus { border-color: #8063ed; }
html[data-theme="dark"] .oauth-btn { background: #202431; border-color: #373c4d; color: #e5e7eb; }
html[data-theme="dark"] .oauth-btn:hover { background: #282d3d; border-color: #8063ed; }
html[data-theme="dark"] .github-btn { background: #11131a; border-color: #2a2f3d; color: #fff; }
html[data-theme="dark"] .github-btn:hover { background: #1c202c; border-color: #3d4457; }
html[data-theme="dark"] .auth-divider::before, html[data-theme="dark"] .auth-divider::after { border-color: #2e3444; }
html[data-theme="dark"] .batch-textarea-wrap textarea { background: #1b1e29; border-color: #333847; color: #edf0f8; }
html[data-theme="dark"] .batch-textarea-wrap textarea:focus { background: #1f2230; border-color: #9275ed; box-shadow: 0 0 0 4px rgba(112, 75, 226, .15); }
html[data-theme="dark"] .batch-textarea-wrap textarea::placeholder { color: #6b7280; }
html[data-theme="dark"] .batch-gate { background: #1b1e29; border-color: #333847; color: #edf0f8; }
html[data-theme="dark"] .batch-gate h3 { color: #f3f4f6; }
html[data-theme="dark"] .batch-gate p { color: #9ca3af; }
html[data-theme="dark"] .billing-toggle-btn.active { background: #252936; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pricing-col { background: #13151d; border-color: #2e3444; }
html[data-theme="dark"] .pricing-col.pro-col { background: #1a1727; border-color: #704be2; }
html[data-theme="dark"] .pricing-col-head h4, html[data-theme="dark"] .pricing-price { color: #f3f4f6; }
html[data-theme="dark"] .pricing-features li { color: #d1d5db; }
html[data-theme="dark"] .pricing-cta-btn.free-cta { background: #252936; color: #9ca3af; }
html[data-theme="dark"] .user-email { color: #9ca3af; }
html[data-theme="dark"] .portal-btn:hover, html[data-theme="dark"] .logout-btn:hover { background: #252936; color: #fff; }
html[data-theme="dark"] .auth-btn { background: #252936; color: #e5e7eb; border-color: #373c4d; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .auth-btn:hover { background: #2e3445; color: #fff; border-color: var(--purple); }
html[data-theme="dark"] .mode-tab { color: #9ca3af; }
html[data-theme="dark"] .mode-tab:hover { background: #252936; color: #fff; }
html[data-theme="dark"] .mode-tab.active { background: #2b2545; color: #b9a5fb; }

/* Floating Bug Report Widget */
.bug-widget-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 900;
  height: 38px;
  padding: 0 14px 0 11px;
  border-radius: 20px;
  border: 1px solid rgba(220, 225, 238, 0.9);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #4b5568;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
  user-select: none;
}

.bug-widget-btn:hover {
  transform: translateY(-2px);
  color: var(--purple);
  border-color: rgba(105, 71, 232, 0.35);
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(105, 71, 232, 0.16);
}

.bug-widget-btn .bug-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.bug-widget-btn:hover .bug-icon {
  transform: rotate(-10deg) scale(1.05);
}

@media (max-width: 600px) {
  .bug-widget-btn {
    bottom: 16px;
    right: 16px;
    height: 36px;
    padding: 0 12px 0 9px;
    font-size: 11.5px;
  }
}

html[data-theme="dark"] .bug-widget-btn {
  background: rgba(26, 29, 39, 0.88);
  border-color: rgba(60, 66, 85, 0.7);
  color: #c3c9d8;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .bug-widget-btn:hover {
  background: #202432;
  border-color: rgba(154, 124, 247, 0.45);
  color: var(--purple);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(154, 124, 247, 0.2);
}

/* Bug Modal Customizations */
.bug-modal-card {
  width: min(440px, 100%);
  padding: 28px 24px 24px;
}

.bug-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.bug-head-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(105, 71, 232, 0.1);
  color: var(--purple);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.bug-modal-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.bug-modal-head p {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.bug-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bug-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bug-field label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #4b5563;
}

.bug-field label .required {
  color: #ef4444;
}

.bug-field label .optional {
  color: #9ca3af;
  font-weight: 500;
  text-transform: none;
}

.bug-field select,
.bug-field textarea,
.bug-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #f9fafb;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.bug-field select {
  height: 40px;
  cursor: pointer;
}

.bug-field textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.45;
}

.bug-field input {
  height: 40px;
}

.bug-field select:focus,
.bug-field textarea:focus,
.bug-field input:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(105, 71, 232, 0.12);
}

.bug-context-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f3f4f8;
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bug-context-pill .context-label {
  font-weight: 700;
  color: #475569;
}

.bug-actions {
  margin-top: 4px;
}

.bug-submit-btn {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #8063ed, #5935d6);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(105, 71, 232, 0.25);
}

.bug-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(105, 71, 232, 0.35);
}

.bug-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.bug-submit-btn .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.bug-submit-btn.loading .btn-spinner {
  display: block;
}

.bug-submit-btn.loading .btn-text {
  display: none;
}

.bug-success-state {
  text-align: center;
  padding: 24px 12px 12px;
  animation: modal-in 0.25s ease-out both;
}

.bug-success-state .success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.bug-success-state h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.bug-success-state p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

html[data-theme="dark"] .bug-field label {
  color: #9ca3af;
}

html[data-theme="dark"] .bug-field select,
html[data-theme="dark"] .bug-field textarea,
html[data-theme="dark"] .bug-field input {
  background: #13151d;
  border-color: #2e3445;
  color: #f1f5f9;
}

html[data-theme="dark"] .bug-field select:focus,
html[data-theme="dark"] .bug-field textarea:focus,
html[data-theme="dark"] .bug-field input:focus {
  background: #191c26;
  border-color: var(--purple);
}

html[data-theme="dark"] .bug-context-pill {
  background: #1a1d28;
  color: #94a3b8;
}

html[data-theme="dark"] .bug-context-pill .context-label {
  color: #cbd5e1;
}

html[data-theme="dark"] .bug-modal-head p,
html[data-theme="dark"] .bug-success-state p {
  color: #9ca3af;
}