:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: #f4f6f1; color: #1e1d1e; font-family: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Thai", "Noto Sans Khmer", "Noto Sans TC", "Noto Nastaliq Urdu", "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.5; }
body[dir="rtl"] { text-align: right; }
a { color: #1f6fbf; }
img { max-width: 100%; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px; z-index: 30; }
header { position: sticky; top: 0; z-index: 20; background: rgba(251,252,248,.96); border-bottom: 1px solid #d5e0cc; box-shadow: 0 10px 28px rgba(36,64,16,.05); }
.stripe { height: 3px; background: linear-gradient(90deg, #62b10f, #1f8cff 55%, #fb2e66); }
.bar { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.brand svg { width: 44px; height: 44px; flex: none; }
.word { font-family: Georgia, "Palatino Linotype", Palatino, "Noto Serif", serif; font-size: 1.7rem; line-height: 1; color: #1c2416; }
.tag { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #4e6244; }
.burger, .lang-button { border: 1px solid #d5e0cc; background: #fff; border-radius: 10px; font: inherit; }
.burger { margin-left: auto; width: 42px; height: 42px; }
.tools { display: none; }
.tools.open { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 76px); overflow: auto; background: #fbfcf8; border-bottom: 1px solid #d5e0cc; padding: 8px 16px 16px; box-shadow: 0 16px 30px rgba(36,64,16,.08); }
.tools ul { list-style: none; margin: 0; padding: 0; }
.menu-link, .tools a, footer a, h1, h2, h3, .crumb, .steps strong, .related a, .card h3 a, .card li a, .faq-q { font-family: Georgia, "Palatino Linotype", "Noto Serif", "Noto Sans Devanagari", "Noto Nastaliq Urdu", "Noto Sans Bengali", "Noto Sans Thai", "Noto Sans Khmer", "Noto Sans TC", serif; }
.menu-link, .more-toggle { display: block; padding: 8px; color: #243024; text-decoration: none; font-size: 1.05rem; background: none; border: 0; width: 100%; text-align: inherit; cursor: pointer; }
.menu-link:hover, .tools a:hover, .more-toggle:hover { color: #1f8cff; }
.tools .menu > ul a, .more-group a { display: block; padding: 6px 8px 6px 14px; color: #243024; text-decoration: none; border-left: 1px solid #d7e4cc; }
.more-group { margin: 8px 0 14px; }
.more-group strong { display: block; padding: 4px 8px; color: #245000; }
.hero-home { text-align: center; padding: 56px 16px 28px; background: radial-gradient(circle at top, #e5f6c9, #f7faf3 42%); }
.hero-home h1, .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; margin: 8px 0; font-weight: 400; }
.lede { font-size: 1.05rem; line-height: 1.7; }
.hero-home .lede { max-width: 720px; margin: 12px auto 0; color: #3e4a38; }
.home-box, .panel { text-align: left; background: #fff; border-radius: 18px; padding: 14px; color: #1e1d1e; }
body[dir="rtl"] .home-box, body[dir="rtl"] .panel { text-align: right; }
.home-box { max-width: 760px; margin: 28px auto 0; border: 3px solid #7ed214; box-shadow: 0 16px 40px rgba(80,120,20,.08); }
.dl-form { display: grid; gap: 8px; }
.field { position: relative; }
input[type="url"], input[type="text"], input[type="password"], select, textarea { width: 100%; border: 1px solid #d5decb; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; background: #fff; color: #1e1d1e; }
input[type="url"] { height: 48px; padding-right: 84px; }
body[dir="rtl"] input[type="url"] { padding-right: 12px; padding-left: 84px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(31,140,255,.35); border-color: #1f8cff; }
.paste { position: absolute; right: 6px; top: 6px; height: 36px; border: 0; background: #f3f8ea; color: #245000; border-radius: 8px; font: inherit; cursor: pointer; }
body[dir="rtl"] .paste { right: auto; left: 6px; }
.go { height: 48px; border: 0; border-radius: 12px; background: #62b10f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.go:hover { background: #52940c; }
.go:disabled { opacity: .7; cursor: wait; }
.fine { margin: 0; font-size: 12px; color: #5c6654; }
.alert { margin-top: 8px; background: #fff6f6; border: 1px solid #f3c1c1; color: #8d1d1d; border-radius: 12px; padding: 10px 12px; }
.result { margin-top: 12px; background: #fbfcf8; border: 1px solid #e1e8d8; border-radius: 16px; padding: 12px; color: #1c2416; }
.media { display: flex; gap: 12px; }
.thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; background: #e7f0dc; }
.title { margin: 0; font-size: 1.15rem; color: #1c2416; }
.meta { margin: 4px 0 0; color: #5c6654; font-size: .9rem; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.choices a { display: inline-flex; align-items: center; border-radius: 12px; padding: 8px 12px; color: #fff; text-decoration: none; font-weight: 700; }
.video { background: #62b10f; }
.audio { background: #1f8cff; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 8px; }
.center { text-align: center; }
.grid { display: grid; gap: 16px; }
.card, .steps li, .related a { background: #fff; border: 1px solid #e1e8d8; border-radius: 16px; color: #1e1d1e; }
.card { padding: 16px; }
.card h3 { margin: 0 0 8px; font-size: 1.45rem; font-weight: 400; }
.card h3 a, .card li a, .related a { color: #1c2416; text-decoration: none; }
.card li a { color: #245000; }
.card ul, .related { list-style: none; padding: 0; margin: 0; }
.card li { margin: 4px 0; }
.prose { max-width: 760px; margin: 0 auto; padding: 12px 16px 56px; }
.prose h2, .faqs h2 { font-weight: 400; font-size: 1.7rem; margin: 1.4em 0 .4em; color: #1c2416; }
.prose p, .faq-a p { font-size: 1.03rem; line-height: 1.75; color: #2c3628; }
.steps { display: grid; gap: 12px; list-style: none; padding: 0; margin: 18px 0; }
.steps li { padding: 14px; display: grid; gap: 6px; }
.hero { position: relative; overflow: hidden; padding-bottom: 28px; }
.hero .lede { margin-top: 0; }
.hero-form { max-width: 760px; margin: 22px auto 0; }
.hero .panel { box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.crumb { font-size: .92rem; opacity: .85; }
.crumb a { color: inherit; }
.hero-instagram { background: radial-gradient(circle at top left, #db2777, #9d174d 40%, #4c1d95); color: #fff; }
.hero-facebook { background: linear-gradient(145deg, #1877f2, #0c3f86); color: #fff; }
.hero-youtube { background: radial-gradient(circle at top right, #3a0d0d, #141414 55%); color: #fff; }
.hero-tiktok { background: #070707; color: #fff; }
.hero-reddit { background: linear-gradient(160deg, #fff4ec, #ffd8c2); color: #1c120c; }
.hero-pinterest { background: linear-gradient(165deg, #be123c, #4c0519); color: #fff; }
.hero-threads { background: #111; color: #fff; }
.hero-whatsapp { background: linear-gradient(160deg, #128c7e, #075e54); color: #fff; }
.hero-snapchat { background: #fff36b; color: #1c1600; }
.hero-twitter { background: #0f1419; color: #fff; }
.hero-dailymotion { background: linear-gradient(145deg, #00aaff, #0066dc); color: #fff; }
.hero-bluesky { background: linear-gradient(160deg, #7ec8ff, #1185fe 45%, #083d77); color: #fff; }
.hero-okru { background: linear-gradient(160deg, #ffb15a, #ee8208); color: #2a1600; }
.hero-kwai { background: linear-gradient(160deg, #ff8a4c, #ff4906); color: #fff; }
.hero-telegram { background: linear-gradient(160deg, #5ec8f5, #229ed9 40%, #146c94); color: #fff; }
.hero-likee { background: linear-gradient(145deg, #ff7eb3, #ee2a7b); color: #fff; }
.hero-linkedin { background: linear-gradient(160deg, #4b8fd6, #0a66c2); color: #fff; }
.hero-starmaker { background: linear-gradient(160deg, #a78bfa, #7c3aed); color: #fff; }
.faqs { margin-top: 8px; }
.faq { background: #fff; border: 1px solid #e1e8d8; border-radius: 16px; margin: 10px 0; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq-no { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #f3f8ea; color: #245000; font-weight: 700; }
.faq-q { flex: 1; font-size: 1.12rem; }
.faq summary i { width: 18px; height: 18px; position: relative; flex: none; }
.faq summary i:before, .faq summary i:after { content: ""; position: absolute; background: #245000; border-radius: 2px; }
.faq summary i:before { width: 18px; height: 2px; left: 0; top: 8px; }
.faq summary i:after { width: 2px; height: 18px; left: 8px; top: 0; }
.faq[open] summary i:after { display: none; }
.faq[open] { border-color: #62b10f; box-shadow: 0 8px 24px rgba(80,120,20,.08); }
.faq-a { padding: 0 16px 14px 64px; }
body[dir="rtl"] .faq-a { padding: 0 64px 14px 16px; }
.related { display: grid; gap: 8px; }
.related a { display: block; padding: 12px 14px; }
.related a:hover, .card:hover { border-color: #62b10f; }
footer { border-top: 1px solid #d5e0cc; background: #f3f6ef; padding: 28px 16px; }
.foot { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
footer h2 { font-weight: 400; font-size: 1.2rem; margin: 0 0 8px; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 4px 0; }
footer li a { color: #245000; text-decoration: none; }
.legal { text-align: center; color: #5c6654; font-size: .92rem; margin: 18px 0 0; }
.lang { position: relative; }
.lang-button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; cursor: pointer; color: #1f7a12; font-weight: 700; }
.lang-button img, .lang-item img { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lang-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.12); z-index: 30; padding: 6px 0 8px; }
body[dir="rtl"] .lang-panel { right: auto; left: 0; }
.lang.open .lang-panel { display: block; }
.lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px 12px; border: 0; background: #fff; text-align: left; font: inherit; cursor: pointer; color: #222; position: relative; }
.lang-item:after { content: ""; position: absolute; left: 46px; bottom: 7px; width: 34px; height: 2px; background: #1f8cff; }
body[dir="rtl"] .lang-item { text-align: right; }
body[dir="rtl"] .lang-item:after { left: auto; right: 46px; }
.lang-item:hover, .lang-item[aria-current="true"] { background: #f7fbff; }
.lang-pager { display: flex; justify-content: center; gap: 8px; padding: 8px; }
.lang-pager button { width: 36px; height: 32px; border: 1px solid #e4e4e4; background: #fafafa; border-radius: 8px; cursor: pointer; }
.lang-pager button:disabled { opacity: .4; cursor: default; }
.admin { max-width: 980px; margin: 0 auto; padding: 28px 16px 64px; }
.admin table { width: 100%; border-collapse: collapse; background: #fff; }
.admin th, .admin td { border-bottom: 1px solid #e1e8d8; text-align: left; padding: 8px; vertical-align: top; }
.admin form.stack { display: grid; gap: 10px; background: #fff; border: 1px solid #e1e8d8; border-radius: 16px; padding: 16px; }
.row-actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 1100px) {
  .burger { display: none; }
  .tools, .tools.open { display: flex; position: static; max-height: none; overflow: visible; background: transparent; border: 0; box-shadow: none; padding: 0; margin-left: auto; align-items: center; gap: 2px; }
  .tools > ul { display: flex; align-items: center; gap: 2px; }
  .menu, .more { position: relative; }
  .tools .menu > ul, .more-panel { display: none; position: absolute; top: 100%; background: #fff; border: 1px solid #d5e0cc; border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
  .tools .menu > ul { left: 0; width: 250px; }
  .more-panel { right: 0; width: min(720px, 70vw); columns: 2; column-gap: 18px; }
  .menu:hover > ul, .menu:focus-within > ul, .more:hover .more-panel, .more:focus-within .more-panel { display: block; }
  .tools .menu > ul a, .more-group a { border: 0; border-radius: 8px; }
  .tools .menu > ul a:hover, .more-group a:hover { background: #f3f8ea; }
  .more-group { break-inside: avoid; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .related { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 220px 1fr; }
  .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .dl-form { grid-template-columns: 1fr auto; align-items: start; }
  .fine, .result, .alert { grid-column: 1 / -1; }
  .go { padding: 0 18px; }
}