*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#060606;--surface:rgba(22,22,23,0.55);--surface2:rgba(28,28,29,0.6);
  --border:rgba(255,255,255,0.09);--border2:rgba(255,255,255,0.18);
  --text:#ececec;--text2:rgba(236,236,236,0.55);--text3:rgba(236,236,236,0.3);
  --modal-bg:rgba(13,13,14,0.62);--modal-border:rgba(255,255,255,0.13);
  --chip-bg:rgba(255,255,255,0.05);--chip-hover:rgba(255,255,255,0.1);
  --accent:#9fd8ff;--accent-rgb:159,216,255;
  --btn-bg:linear-gradient(135deg,#d8d8dc,#f4f4f6);--btn-color:#0a0a0a;
  --accent-secondary-rgb:168,139,250;--ambient-a:0;--ambient-b:0;
  --theme-bg-start:#050505;--theme-bg-end:#050505;--nav-bg:rgba(8,8,8,0.94);
  --font:'Geist Mono',monospace;
  --safe-bottom:env(safe-area-inset-bottom,0px);--bar-height:60px;
  --space-blue:#3b82f6;--space-purple:#a855f7;--space-cyan:#22d3ee;--space-orange:#ff9a56;
  --glass-blur:14px;--glass-shine:rgba(255,255,255,0.05);
  --glow-soft:0 8px 40px rgba(0,0,0,0.6),0 0 24px rgba(255,255,255,0.04);
}
/* LIGHT */
body.light{
  --bg:#f2f2f7;--surface:#fff;--surface2:#f0f0f5;
  --border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.18);
  --text:#0f0f0f;--text2:rgba(15,15,15,0.55);--text3:rgba(15,15,15,0.35);
  --modal-bg:#fff;--modal-border:rgba(0,0,0,0.1);
  --chip-bg:rgba(0,0,0,0.04);--chip-hover:rgba(0,0,0,0.08);
  --accent:#0f0f0f;--accent-rgb:15,15,15;
  --btn-bg:var(--accent);--btn-color:#fff;
  --theme-bg-start:#f8fbfd;--theme-bg-end:#eef2f5;--nav-bg:rgba(242,242,247,0.9);
}
/* COMPLETE COLOR PROFILES — accent, ambience, glass surfaces and navigation */
body.theme-default{--accent:#9fd8ff;--accent-rgb:159,216,255;--accent-secondary-rgb:168,139,250;--btn-bg:linear-gradient(135deg,#d9efff,#f2eaff);--btn-color:#071018;}
body.theme-purple{--accent:#d56bff;--accent-rgb:213,107,255;--accent-secondary-rgb:113,72,255;--btn-bg:linear-gradient(135deg,#d96cff,#835cff);--btn-color:#fff;}
body.theme-gray{--accent:#b9bec7;--accent-rgb:185,190,199;--accent-secondary-rgb:113,118,128;--btn-bg:linear-gradient(135deg,#e2e5e9,#aeb3bc);--btn-color:#0b0c0e;}
body.theme-pink{--accent:#ff64ad;--accent-rgb:255,100,173;--accent-secondary-rgb:255,75,95;--btn-bg:linear-gradient(135deg,#ff72b7,#ff546f);--btn-color:#fff;}
body.theme-cobalt{--accent:#5d8dff;--accent-rgb:93,141,255;--accent-secondary-rgb:0,203,255;--btn-bg:linear-gradient(135deg,#537cff,#00a8e8);--btn-color:#fff;}

body:not(.light).theme-default{--theme-bg-start:#050505;--theme-bg-end:#050505;--ambient-a:0;--ambient-b:0;--surface:rgba(18,18,19,.7);--surface2:rgba(25,25,26,.74);--modal-bg:rgba(10,10,11,.84);--modal-border:rgba(255,255,255,.13);--chip-bg:rgba(255,255,255,.045);--chip-hover:rgba(255,255,255,.09);--border:rgba(255,255,255,.09);--border2:rgba(255,255,255,.18);--nav-bg:rgba(7,7,8,.94);}
body:not(.light).theme-purple{--theme-bg-start:#1a0824;--theme-bg-end:#060308;--ambient-a:.12;--ambient-b:.08;--surface:rgba(31,15,40,.64);--surface2:rgba(43,20,55,.68);--modal-bg:rgba(17,8,23,.82);--modal-border:rgba(213,107,255,.18);--chip-bg:rgba(213,107,255,.055);--chip-hover:rgba(213,107,255,.12);--border:rgba(219,151,255,.12);--border2:rgba(219,151,255,.24);--nav-bg:rgba(15,6,21,.93);}
body:not(.light).theme-gray{--theme-bg-start:#18191b;--theme-bg-end:#070707;--ambient-a:.07;--ambient-b:.05;--surface:rgba(27,28,30,.7);--surface2:rgba(35,36,39,.74);--modal-bg:rgba(15,16,17,.84);--modal-border:rgba(200,204,211,.15);--chip-bg:rgba(200,204,211,.045);--chip-hover:rgba(200,204,211,.1);--border:rgba(220,222,226,.1);--border2:rgba(220,222,226,.2);--nav-bg:rgba(11,11,12,.94);}
body:not(.light).theme-pink{--theme-bg-start:#210a15;--theme-bg-end:#080305;--ambient-a:.12;--ambient-b:.08;--surface:rgba(39,15,27,.68);--surface2:rgba(52,20,36,.72);--modal-bg:rgba(22,8,14,.83);--modal-border:rgba(255,100,173,.18);--chip-bg:rgba(255,100,173,.05);--chip-hover:rgba(255,100,173,.11);--border:rgba(255,151,199,.12);--border2:rgba(255,151,199,.24);--nav-bg:rgba(18,6,11,.94);}
body:not(.light).theme-cobalt{--theme-bg-start:#071a3a;--theme-bg-end:#03060d;--ambient-a:.12;--ambient-b:.08;--surface:rgba(9,29,61,.7);--surface2:rgba(12,40,80,.74);--modal-bg:rgba(5,16,35,.84);--modal-border:rgba(93,141,255,.19);--chip-bg:rgba(93,141,255,.055);--chip-hover:rgba(93,141,255,.12);--border:rgba(126,170,255,.13);--border2:rgba(126,170,255,.26);--nav-bg:rgba(4,12,28,.94);}

body.light.theme-default{--accent:#1670a8;--accent-rgb:22,112,168;--theme-bg-start:#f7fbfd;--theme-bg-end:#eaf2f7;--btn-bg:linear-gradient(135deg,#207caf,#7356c6);--btn-color:#fff;--nav-bg:rgba(238,246,251,.94);}
body.light.theme-purple{--accent:#8e28c7;--accent-rgb:142,40,199;--theme-bg-start:#fbf6fd;--theme-bg-end:#f0e7f5;--btn-bg:linear-gradient(135deg,#a735dd,#6848d8);--btn-color:#fff;--nav-bg:rgba(247,239,251,.94);}
body.light.theme-gray{--accent:#555b65;--accent-rgb:85,91,101;--theme-bg-start:#fafafa;--theme-bg-end:#eceef0;--btn-bg:linear-gradient(135deg,#656b74,#30343a);--btn-color:#fff;--nav-bg:rgba(243,244,245,.95);}
body.light.theme-pink{--accent:#c82770;--accent-rgb:200,39,112;--theme-bg-start:#fff8fb;--theme-bg-end:#f9e8f0;--btn-bg:linear-gradient(135deg,#df3f87,#ed5366);--btn-color:#fff;--nav-bg:rgba(255,242,248,.95);}
body.light.theme-cobalt{--accent:#2459c7;--accent-rgb:36,89,199;--theme-bg-start:#f6f9ff;--theme-bg-end:#e6eefc;--btn-bg:linear-gradient(135deg,#315fd3,#078fca);--btn-color:#fff;--nav-bg:rgba(238,244,255,.95);}
body.light .spinner{border-color:rgba(0,0,0,0.12);border-top-color:rgba(0,0,0,0.6);}
body.light .dl-bar-fill{background:#0f0f0f;}
body.light .dl-handle{background:rgba(0,0,0,0.18);}
body.light .toggle::after{background:rgba(0,0,0,0.3);}

html,body{height:100%;}
/* iOS Safari: klavye açılışı / adres çubuğu animasyonu sırasında
   elastic-scroll (rubber-band) ile <html>'in arkaplanı bir anlığına
   görünür hale gelebiliyor. html'e --bg'yi vererek "1 saniyelik beyaz
   flaş" önleniyor; overscroll-behavior ise bounce'ın kendisini,
   dolayısıyla .bottom-bar'ın kısa süreli kaymasını engelliyor.
   overflow-x:hidden burada da (sadece body'de değil) tanımlı, çünkü
   overflow'u viewport'a sadece body taşıyor (root'ta 'visible' iken) —
   bazı mobil motorlarda bu propagasyon güvenilir çalışmıyor ve taşan bir
   alt-öğe (ör. kedi konuşma balonu) layout viewport'unu anlık büyüterek
   TÜM sabit konumlu öğelerin (navbar, chip) sıçramasına yol açabiliyor. */
html{background:var(--bg);overflow-x:hidden;overscroll-behavior-y:none;}
html.light{--bg:#f2f2f7;}
body{background:radial-gradient(circle at 22% 8%,rgba(var(--accent-rgb),var(--ambient-a)),transparent 34rem),radial-gradient(circle at 84% 72%,rgba(var(--accent-secondary-rgb),var(--ambient-b)),transparent 38rem),linear-gradient(150deg,var(--theme-bg-start),var(--theme-bg-end) 72%);color:var(--text);font-family:var(--font);display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none;transition:background .3s ease,color .2s;}
/* ANA UYGULAMA EKRANI (index.html'deki .page) — içerik zaten 100dvh'e tam
   oturuyor, bu yüzden dikey scroll'u da burada kilitliyoruz: kullanıcı asla
   sayfayı "çekip" boşluk göremez, elastic bounce hissi kalmaz. Bu kural
   sadece .page barındıran body'lere (uygulama ekranı) uygulanır — terms.html,
   privacy.html gibi uzun metinli sayfalar .legal-page kullanır ve normal
   şekilde kaymaya devam eder. Modaller kendi iç overflow'larıyla ayrı kayar. */
body:has(>.page){overflow-y:hidden;overscroll-behavior-y:none;}
/* Mobil tarayıcılarda overflow:hidden tek başına viewport rubber-band'ini
   durdurmaz. Bir modal açıkken kök ve body birlikte sabitlenir; modal
   içerisindeki kaydırılabilir alanlar aşağıdaki kendi overflow'larını korur. */
html.modal-open,body.modal-open{overflow:hidden!important;overscroll-behavior:none;}
body.modal-open{position:fixed;right:0;left:0;width:100%;height:100%;}

/* PAGE */
.page{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px calc(var(--bar-height) + var(--safe-bottom) + 28px);min-height:100dvh;}
@media(max-width:600px){.page{padding:60px 16px calc(var(--bar-height) + var(--safe-bottom) + 20px);}}

/* SERVICES CHIP */
.services-chip-wrap{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:900;}
.modal-sheet.services-modal{max-width:500px;max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:hidden;}
.services-modal .tool-modal-body{min-height:0;max-height:none;flex:1;padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.services-chip{display:inline-flex;align-items:center;gap:7px;background:var(--chip-bg);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-family:var(--font);font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;transition:all 0.15s;user-select:none;}
.services-chip:hover{background:var(--chip-hover);border-color:var(--border2);color:var(--text);}
.services-chip svg{width:12px;height:12px;transition:transform 0.2s;}
.services-chip.open svg:last-child{transform:rotate(180deg);}
.services-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:13px;}
.services-tag{min-width:0;min-height:33px;display:flex;align-items:center;gap:7px;padding:0 9px;color:var(--text2);background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;font-size:9.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.services-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.72;flex:0 0 auto;}
.services-tag-more{color:var(--text);border-color:rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.08);}
.services-note{font-size:10.5px;color:var(--text3);line-height:1.6;background:var(--chip-bg);border:1px solid var(--border);border-radius:9px;padding:10px 11px;margin:0;display:flex;gap:8px;align-items:flex-start;}
.services-note::before{content:"i";width:16px;height:16px;border:1px solid var(--border2);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:var(--text3);font-size:9px;font-weight:700;line-height:1;}
@media(max-width:520px){.services-tags{grid-template-columns:repeat(3,minmax(0,1fr));}.services-modal .tool-modal-body{padding:14px;}}
@media(max-width:350px){.services-tags{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* LOGO */
.logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:28px;cursor:pointer;user-select:none;}
.logo-name{font-size:30px;font-weight:700;letter-spacing:-1.5px;color:var(--text);}
.logo-name span{color:var(--accent);}

/* URL FORM */
.url-form{width:100%;max-width:560px;display:flex;flex-direction:column;gap:8px;}
.clip-hint{display:none;align-items:center;gap:8px;background:var(--chip-bg);border:1px solid var(--border);border-radius:10px;padding:9px 10px 9px 12px;font-size:11.5px;color:var(--text2);cursor:pointer;}
.clip-hint.show{display:flex;}
.clip-hint svg{flex-shrink:0;color:var(--text3);}
.clip-hint span{flex:1;}
.clip-hint-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:3px 5px;flex-shrink:0;}
.clip-hint-close:hover{color:var(--text);}
.url-field{position:relative;display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:border-color 0.25s,box-shadow 0.3s;overflow:visible;backdrop-filter:blur(var(--glass-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);box-shadow:0 8px 32px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.03) inset;}
.url-field::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(120deg,rgba(var(--accent-rgb),0.4),rgba(168,139,250,0.18) 45%,transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.55;transition:opacity 0.3s ease;}
.url-field:focus-within::before{opacity:1;}
.url-field:focus-within{border-color:var(--border2);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.08);}
.url-spinner-wrap{width:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text3);}
.url-input{flex:1;background:transparent;border:none;padding:15px 10px 15px 2px;color:var(--text);font-size:13.5px;font-family:var(--font);outline:none;min-width:0;letter-spacing:0.1px;}
.url-input::placeholder{color:var(--text3);transition:color 0.2s ease;}
.url-field:focus-within .url-input::placeholder{color:rgba(var(--accent-rgb),0.55);}
.url-clear{width:32px;height:32px;margin-right:4px;flex-shrink:0;border-radius:7px;background:transparent;border:none;color:var(--text3);cursor:pointer;display:none;align-items:center;justify-content:center;transition:background 0.15s,color 0.15s;}
.url-clear.vis{display:flex;}
.url-clear:hover{background:var(--chip-hover);}
.url-go-btn{display:none;width:36px;height:36px;margin-right:4px;flex-shrink:0;border-radius:8px;background:var(--btn-bg);border:none;color:var(--btn-color);cursor:pointer;align-items:center;justify-content:center;transition:opacity 0.15s;}
.url-go-btn:hover{opacity:0.85;}
@media(max-width:600px){
  .url-go-btn{display:flex;}
  .url-input{font-size:14px;padding:14px 10px 14px 0;}
  .url-field{border-radius:12px;}
  body.modal-open .bottom-bar{visibility:hidden;opacity:0;pointer-events:none;transition:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* URL FIELD WRAPPER — gives positioning context for cat + help btn */
.url-field-wrap{position:relative;overflow:visible;}
.url-help-btn{display:none;} /* help btn hidden — cat replaced it */

/* GITHUB OCTOCAT MASCOT PEEKING OVER URL BOX */
.url-cat-wrap{
  position:absolute;
  top:-34px;
  right:10px;
  pointer-events:auto!important;
  cursor:pointer;
  z-index:3;
  width:76px;
  height:46px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.3));
}
.gh-octocat{
  width:76px;
  height:46px;
  overflow:visible;
  transition:transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark Theme Colors */
.gh-cat-fill{fill:#24292e;stroke:#444c56;stroke-width:1.2px;transition:fill 0.25s;}
.gh-cat-ear-in{fill:#ff9aaa;opacity:0.65;}
.gh-cat-face{fill:#161b22;transition:fill 0.25s;}
.gh-cat-eye{fill:#f0f6fc;}
.gh-cat-happy-eye{stroke:#f0f6fc;}
.gh-cat-nose{fill:#ff9aaa;}
.gh-cat-smile{stroke:#8b949e;}
.gh-cat-whisker{stroke:#8b949e;}

/* Distinct Paw Fills & Curled Toe Hooks (the bit that "grips" the ledge) */
.gh-cat-paw-fill{fill:#24292e;stroke:#444c56;stroke-width:1.2px;}
.gh-cat-paw-toe{fill:none;stroke:#8b949e;stroke-width:1.1px;stroke-linecap:round;}
.gh-cat-paw-l,.gh-cat-paw-r{transform-origin:8.5px 30px;}
.gh-cat-paw-r{transform-origin:52.5px 30px;}

/* Floating "?" / Heart Badge */
.gh-q-group{transition:transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);}
.gh-q-bg{fill:var(--accent);stroke:rgba(255,255,255,0.25);stroke-width:1px;transition:fill 0.3s ease,stroke 0.3s ease;}
.gh-q-txt{fill:#0d1117;font-size:11.5px;font-weight:800;font-family:var(--font);user-select:none;transition:opacity 0.25s ease,transform 0.25s ease;transform-origin:64px 9px;}
.gh-heart-path{fill:#ffffff;opacity:0;transform:scale(0.4);transform-origin:64px 9px;transition:opacity 0.25s ease,transform 0.35s cubic-bezier(0.34,1.56,0.64,1);}

/* Petting Floating Hearts */
.gh-pet-h1, .gh-pet-h2{
  fill:#ff4a97;
  opacity:0;
  transform-origin:center;
}

/* Light Theme Colors */
body.light .gh-cat-fill{fill:#24292e;stroke:#d0d7de;}
body.light .gh-cat-face{fill:#ffffff;}
body.light .gh-cat-eye{fill:#24292e;}
body.light .gh-cat-happy-eye{stroke:#24292e;}
body.light .gh-cat-smile{stroke:#57606a;}
body.light .gh-cat-whisker{stroke:#57606a;}
body.light .gh-cat-paw-fill{fill:#24292e;stroke:#d0d7de;}
body.light .gh-cat-paw-toe{stroke:#57606a;}
body.light .gh-q-bg{fill:#24292e;}
body.light .gh-q-txt{fill:#ffffff;}
body.light .gh-heart-path{fill:#ff4a97;}

/* Eye State Toggle: Hide Happy Eyes by default, show on Focus/Hover */
.gh-eyes-happy{opacity:0;transition:opacity 0.2s;}
.gh-eyes-normal{opacity:1;transition:opacity 0.2s;}

/* INTERACTIVE FOCUS STATES — focus-within stays for keyboard/mobile users typing in the box */
.url-field-wrap:focus-within .gh-eyes-happy{opacity:1;}
.url-field-wrap:focus-within .gh-eyes-normal{opacity:0;}
.url-field-wrap:focus-within .gh-q-group{transform:translateY(-4px) scale(1.15);}
.url-field-wrap:focus-within .gh-q-bg{fill:#ff4a97;stroke:rgba(255,255,255,0.4);}
.url-field-wrap:focus-within .gh-q-txt{opacity:0!important;transform:scale(0.3);}
.url-field-wrap:focus-within .gh-heart-path{opacity:1;transform:scale(1);}

/* HOVER-ONLY PETTING EFFECTS — real mouse only, so mobile tap never gets a "stuck" hover state
   or fights with the eyes/badge swap while the user is just trying to tap the input. */
@media (hover:hover) and (pointer:fine){
  .url-cat-wrap:hover .gh-eyes-happy{opacity:1;}
  .url-cat-wrap:hover .gh-eyes-normal{opacity:0;}
  .url-cat-wrap:hover .gh-q-group{transform:translateY(-4px) scale(1.15);}
  .url-cat-wrap:hover .gh-q-bg{fill:#ff4a97;stroke:rgba(255,255,255,0.4);}
  .url-cat-wrap:hover .gh-q-txt{opacity:0!important;transform:scale(0.3);}
  .url-cat-wrap:hover .gh-heart-path{opacity:1;transform:scale(1);}
  .url-cat-wrap:hover .gh-octocat{transform: rotate(6deg) translateY(-3px) scale(1.05);}
  .url-cat-wrap:hover .gh-pet-h1{animation: petHeartPop1 0.85s ease-out infinite;}
  .url-cat-wrap:hover .gh-pet-h2{animation: petHeartPop2 0.85s ease-out 0.22s infinite;}
}
/* Tap feedback on touch/click — one quick pop instead of a looping hover animation */
.url-cat-wrap:active .gh-octocat{transform: rotate(6deg) translateY(-3px) scale(1.05);}

@keyframes petHeartPop1{
  0%{opacity:0; transform:translateY(3px) scale(0.4);}
  40%{opacity:1; transform:translateY(-6px) scale(1.15);}
  100%{opacity:0; transform:translateY(-14px) scale(0.7);}
}
@keyframes petHeartPop2{
  0%{opacity:0; transform:translateY(3px) scale(0.4);}
  40%{opacity:1; transform:translateY(-8px) scale(1.25);}
  100%{opacity:0; transform:translateY(-17px) scale(0.7);}
}

/* Gentle Peeking Idle Float — kept minimal on purpose: the cat is a corner detail,
   not something that should keep pulling the eye while someone's trying to paste a link. */
@media(prefers-reduced-motion:no-preference){
  .gh-octocat{animation:ghCatFloat 5s ease-in-out infinite;}
  @keyframes ghCatFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-2px);}
  }
  /* Occasional idle blink, so the cat feels alive even when nobody's touching it */
  .gh-eyes-normal{animation:ghCatBlink 6s ease-in-out infinite;}
  @keyframes ghCatBlink{
    0%,92%,100%{transform:scaleY(1);}
    95%{transform:scaleY(0.1);}
  }
}

/* ── BORED (10s idle, no text): a little paw nibble ── */
.url-cat-wrap.bored .gh-octocat{animation:ghNibble 1.6s ease-in-out infinite!important;}
@keyframes ghNibble{
  0%,100%{transform:translateY(0) rotate(0deg);}
  25%{transform:translateY(1px) rotate(-3deg);}
  50%{transform:translateY(0) rotate(0deg);}
  75%{transform:translateY(1px) rotate(3deg);}
}

/* ── EXCITED (a valid link just landed): big eyes, perked ears, quick happy shimmy ── */
.url-cat-wrap.excited .gh-eyes-normal{transform:scale(1.18);transform-origin:36px 23px;animation:none!important;}
.url-cat-wrap.excited .gh-cat-ear-l,
.url-cat-wrap.excited .gh-cat-ear-r{transform:rotate(0deg) scale(1.08);animation:none!important;}
.url-cat-wrap.excited .gh-octocat{animation:ghExcitedShake 0.35s ease-in-out 2!important;}
@keyframes ghExcitedShake{
  0%,100%{transform:translateY(-2px) rotate(0deg);}
  25%{transform:translateY(-4px) rotate(-4deg);}
  75%{transform:translateY(-4px) rotate(4deg);}
}

/* ── RARE EASTER EGGS (very occasional, replaces the plain bored nibble) ── */
.url-cat-wrap.rare-yawn .gh-eyes-normal{animation:ghYawnEyes 2.4s ease-in-out!important;}
.url-cat-wrap.rare-yawn .gh-cat-smile{animation:ghYawnMouth 2.4s ease-in-out!important;}
@keyframes ghYawnEyes{0%,100%{transform:scaleY(1);}30%,70%{transform:scaleY(0.15);}}
@keyframes ghYawnMouth{
  0%,100%{transform:scaleY(1) translateY(0);}
  40%,60%{transform:scaleY(2.2) translateY(-1px);}
}
.url-cat-wrap.rare-lookback .gh-octocat{animation:ghLookBack 2.2s ease-in-out!important;}
@keyframes ghLookBack{
  0%,100%{transform:scaleX(1) rotate(0deg);}
  35%,65%{transform:scaleX(-1) rotate(-2deg);}
}
.url-cat-wrap.rare-lookback .gh-eyes-happy{animation:ghLookBackEyes 2.2s ease-in-out!important;}
@keyframes ghLookBackEyes{0%,30%,70%,100%{opacity:0;}40%,60%{opacity:1;}}

/* ── SPEECH BUBBLE (click the cat) ──
   Kedi sağ kenara yakın oturduğu için balon rastgele/uzun bir replikte
   viewport'un sağından taşabiliyordu; bu da (html{overflow-x} yokken)
   layout viewport'un anlık büyümesine ve navbar/chip'in "sıçramasına"
   sebep oluyordu. max-width + wrap taşmayı büyük ölçüde önler; JS
   tarafında ayrıca gerçek genişliğe göre ince bir yatay düzeltme
   uygulanıyor (bkz. catSpeak()), böylece hiçbir dilde/uzunlukta taşma
   kalmaz. */
.gh-speech-bubble{
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  max-width:min(62vw,220px);
  width:max-content;
  transform:translateX(-50%) translateY(4px) scale(0.85);
  background:var(--text);
  color:var(--bg);
  font-family:var(--font);
  font-size:10.5px;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  white-space:normal;
  text-align:center;
  line-height:1.35;
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition:opacity .15s ease, transform .15s ease;
}
.gh-speech-bubble::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--text);
}
.gh-speech-bubble.show{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
  animation:ghBubblePop .35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes ghBubblePop{
  0%{transform:translateX(-50%) translateY(4px) scale(0.6);}
  60%{transform:translateX(-50%) translateY(-2px) scale(1.08);}
  100%{transform:translateX(-50%) translateY(0) scale(1);}
}

/* ── DAY/NIGHT TEMPERAMENT ── */
/* Light theme: a slightly more alert, quicker-blinking cat */
body.light .gh-eyes-normal{animation-duration:4.5s;}
body.light .gh-cat-ear-l,body.light .gh-cat-ear-r{animation-duration:4s;}
/* Dark theme: sleepier — slower blink, and a periodic half-lidded doze */
body:not(.light) .gh-eyes-normal{animation-duration:7s;}
@media(prefers-reduced-motion:no-preference){
  body:not(.light) .gh-octocat{animation:ghCatFloat 5s ease-in-out infinite;}
}

/* ── CONFETTI BURST (fires on a successful save/share) ── */
.confetti-host{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none;}
.confetti-piece{
  position:fixed;
  top:60%;
  width:7px;
  height:10px;
  border-radius:2px;
  opacity:0;
  animation:ghConfettiFall 1.1s cubic-bezier(0.2,0.6,0.4,1) forwards;
}
@keyframes ghConfettiFall{
  0%{opacity:1;transform:translate(0,0) rotate(0deg);}
  15%{opacity:1;}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 220px)) rotate(var(--rot));}
}

/* ── CLIP HINT: a bouncier entrance instead of a flat fade+slide ── */
.clip-hint{animation:clipHintIn .4s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes clipHintIn{
  0%{opacity:0;transform:translateY(-8px) scale(0.92);}
  60%{opacity:1;transform:translateY(2px) scale(1.02);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* Click Squish — quick tactile feedback distinct from the hover pet */
.url-cat-wrap:active .gh-octocat{
  transform: rotate(6deg) translateY(-1px) scale(0.92,1.08);
  transition: transform 0.08s ease-out;
}

/* RADAR PULSE — signature element: fires once when a valid link is detected */
.radar-pulse-wrap{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:-1;border-radius:inherit;}
.radar-ring{position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(var(--accent-rgb),0.55);opacity:0;}
.radar-ring.fire{animation:radarPulse 0.9s cubic-bezier(0.22,1,0.36,1);}
@keyframes radarPulse{
  0%{opacity:0.65;transform:scale(1);}
  100%{opacity:0;transform:scale(1.18);}
}

/* BULK MODE */
.url-textarea{display:none;flex:1;background:transparent;border:none;padding:13px 10px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;min-width:0;resize:none;height:80px;}
.url-textarea::placeholder{color:var(--text3);}
.url-form.bulk-mode .url-field{flex-direction:column;align-items:stretch;}
.url-form.bulk-mode .url-input{display:none;}
.url-form.bulk-mode .url-textarea{display:block;}
.url-form.bulk-mode .url-clear{display:none;}
.bulk-toggle{display:inline-flex;font-size:10px;color:var(--text3);cursor:pointer;padding:4px 8px;background:var(--chip-bg);border-radius:6px;border:1px solid var(--border);transition:all 0.15s;}
.bulk-toggle:hover{background:var(--chip-hover);color:var(--text2);}
.bulk-toggle.active{background:rgba(59,186,100,0.1);border-color:rgba(59,186,100,0.3);color:#3bba64;}

/* MODE BUTTONS */
.mode-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.mode-btn{display:inline-flex;align-items:center;gap:6px;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;padding:8px 13px;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;font-family:var(--font);transition:all 0.13s;user-select:none;}
.mode-btn svg{width:13px;height:13px;flex-shrink:0;}
.mode-btn:hover{background:var(--chip-hover);border-color:var(--border2);color:var(--text2);}
.mode-btn.active{border-color:var(--border2);color:var(--text);}
.mode-btn#modeAuto.active{background:rgba(232,200,60,0.08);border-color:rgba(232,200,60,0.35);color:#c9a800;}
.mode-btn#modeAudio.active{background:rgba(138,92,246,0.08);border-color:rgba(138,92,246,0.3);color:#a855f7;}
.mode-btn#modeMute.active{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.25);color:#ef4444;}
/* Mode icons — gentle float + glow pulse, livelier when active */
.mode-btn svg{transition:filter 0.25s ease,transform 0.25s ease;}
.mode-btn:nth-child(3) svg{animation-delay:0.3s;}
.mode-btn:nth-child(4) svg{animation-delay:0.6s;}
@keyframes modeIconFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-2px) rotate(-3deg);}}
.mode-btn#modeAuto.active svg{filter:drop-shadow(0 0 5px rgba(232,200,60,0.65));}
.mode-btn#modeAudio.active svg{filter:drop-shadow(0 0 5px rgba(168,85,247,0.6));}
.mode-btn#modeMute.active svg{filter:drop-shadow(0 0 5px rgba(239,68,68,0.55));}
@keyframes modeSpin{0%{transform:rotate(0deg);}50%{transform:rotate(8deg) scale(1.06);}100%{transform:rotate(0deg);}}
@keyframes modeBeat{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
@media (prefers-reduced-motion: reduce){.mode-btn svg,.mode-btn#modeAuto.active svg,.mode-btn#modeAudio.active svg,.mode-btn#modeMute.active svg{animation:none;}}
.mode-spacer{flex:1;}
.btn-paste{display:inline-flex;align-items:center;gap:6px;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;padding:8px 13px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;font-family:var(--font);transition:all 0.13s;}
.btn-paste:hover{background:var(--chip-hover);border-color:var(--border2);color:var(--text);}
.btn-paste svg{width:13px;height:13px;}
@media(max-width:500px){
  .mode-spacer{display:none;}
  .mode-row{flex-wrap:wrap;}
  .btn-paste{width:100%;justify-content:center;}
  .mode-btn{padding:10px 14px;font-size:12px;}
  .mode-btn svg{width:14px;height:14px;}
}

/* VIDEO CARD */
.video-card{display:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;animation:fadeUp 0.25s ease;}
.video-card.show{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.vc-inner{display:flex;align-items:center;gap:12px;padding:12px 14px;}
.vc-thumb{width:72px;height:46px;border-radius:7px;background:var(--surface2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text3);}
.vc-thumb img{width:100%;height:100%;object-fit:cover;}
.vc-info{flex:1;min-width:0;}
.vc-title{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.vc-meta{font-size:11px;color:var(--text3);}
.vc-dl{display:flex;align-items:center;gap:5px;flex-shrink:0;background:var(--btn-bg);border:none;border-radius:7px;padding:8px 13px;color:var(--btn-color);font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity 0.15s,transform 0.1s;white-space:nowrap;}
.vc-dl:hover{opacity:0.85;}

/* PLAYLIST CARD */
.playlist-card{display:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;animation:fadeUp 0.25s ease;width:100%;max-width:560px;}
.playlist-card.show{display:block;}
.pl-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px;}
.pl-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
.pl-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.pl-sel-btn{background:var(--chip-bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:10px;font-weight:600;color:var(--text2);cursor:pointer;font-family:var(--font);white-space:nowrap;}
.pl-sel-btn:hover{background:var(--chip-hover);}
.pl-list{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--border);}
.pl-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.pl-item:last-child{border-bottom:none;}
.pl-item:hover{background:var(--chip-bg);}
.pl-item-check{width:16px;height:16px;border-radius:4px;border:1px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.12s;}
.pl-item.sel .pl-item-check{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-color);}
.pl-item-thumb{width:48px;height:30px;border-radius:5px;background:var(--surface2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text3);}
.pl-item-thumb img{width:100%;height:100%;object-fit:cover;}
.pl-item-info{flex:1;min-width:0;}
.pl-item-title{font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-item-dur{font-size:10px;color:var(--text3);margin-top:1px;}
.pl-dl-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--btn-bg);border:none;border-top:1px solid var(--border);padding:13px;color:var(--btn-color);font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity 0.15s;}
.pl-dl-btn:hover{opacity:0.85;}
.pl-dl-btn:disabled{opacity:0.4;cursor:not-allowed;}
.pl-queue-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);}
.pl-queue-item:last-child{border-bottom:none;}
.pl-queue-title{flex:1;min-width:0;font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-queue-status{font-size:10px;color:var(--text3);flex-shrink:0;min-width:60px;text-align:right;}
.pl-queue-status.done{color:#3bba64;}
.pl-queue-status.err{color:#ed4245;}

/* QR */
.qr-wrap{display:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;animation:fadeUp 0.25s ease;text-align:center;}
.qr-wrap.show{display:block;}
.qr-title{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:1.2px;margin-bottom:10px;}
.qr-canvas-wrap{display:inline-block;background:#fff;padding:8px;border-radius:8px;margin-bottom:8px;}
.qr-hint{font-size:10px;color:var(--text3);}

/* ERROR */
.error-wrap{display:none;text-align:center;padding:14px;}
.error-wrap.show{display:block;animation:fadeUp 0.25s ease;}
.error-icon{font-size:22px;margin-bottom:5px;}
.error-txt{font-size:12px;color:var(--text2);}

/* YT WARN */
.yt-warn{display:none;position:relative;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(245,158,11,0.08),rgba(245,158,11,0.03));border:1px solid rgba(245,158,11,0.22);border-radius:12px;padding:11px 14px;font-size:11px;color:rgba(255,200,120,0.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,0.35),0 0 20px rgba(245,158,11,0.06);overflow:hidden;}
.yt-warn.show{display:flex;animation:ytWarnIn 0.4s cubic-bezier(0.22,1,0.36,1);}
.yt-warn::before{content:'⚠';width:26px;height:26px;flex-shrink:0;border-radius:8px;background:rgba(245,158,11,0.14);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(245,158,11,0.2) inset;font-size:13px;animation:ytWarnPulse 2.4s ease-in-out infinite;}
@keyframes ytWarnIn{from{opacity:0;transform:translateY(-6px) scale(0.97);filter:blur(6px);}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}
@keyframes ytWarnPulse{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}}
@media (prefers-reduced-motion: reduce){.yt-warn.show{animation:none;}.yt-warn::before{animation:none;}}

/* SPOTIFY WARN — same shape as yt-warn but a "this really won't work" red tone instead of amber caution */
.yt-warn.sw-warn{background:linear-gradient(180deg,rgba(239,68,68,0.09),rgba(239,68,68,0.03));border-color:rgba(239,68,68,0.25);color:rgba(255,150,150,0.92);box-shadow:0 8px 24px rgba(0,0,0,0.35),0 0 20px rgba(239,68,68,0.07);}
.yt-warn.sw-warn::before{content:'🎵';background:rgba(239,68,68,0.14);box-shadow:0 0 0 1px rgba(239,68,68,0.2) inset;}

/* BOTTOM BAR */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 4px;height:var(--bar-height);padding-bottom:var(--safe-bottom);transition:transform 0.15s ease-out,background .3s ease,border-color .3s ease;}
.bar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;height:100%;background:none;border:none;color:var(--text3);font-size:9px;font-weight:600;font-family:var(--font);letter-spacing:0.3px;text-transform:lowercase;cursor:pointer;border-radius:10px;transition:color 0.15s,background 0.15s,transform 0.1s;padding:8px 2px;min-width:0;}
.bar-btn svg{width:18px;height:18px;stroke-width:1.6;flex-shrink:0;}
.bar-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.bar-btn:hover,.bar-btn.active{color:var(--accent);background:var(--chip-hover);}
.bar-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;}
@media(max-width:600px){
  .bar-btn{padding:10px 4px;}
  .bar-btn svg{width:20px;height:20px;}
  .bar-btn span{font-size:10px;}
}

/* MORE MENU POPUP */
.more-popup{position:fixed;bottom:calc(var(--bar-height) + var(--safe-bottom) + 8px);right:12px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:6px;z-index:600;opacity:0;pointer-events:none;transform:translateY(8px);transition:all 0.18s cubic-bezier(0.22,1,0.36,1);box-shadow:0 12px 40px rgba(0,0,0,0.4);min-width:160px;}
.more-popup.open{opacity:1;pointer-events:all;transform:translateY(0);}
.more-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:10px 12px;color:var(--text2);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:8px;transition:all 0.13s;text-align:left;}
.more-item:hover{background:var(--chip-hover);color:var(--text);}
.more-item svg{width:16px;height:16px;stroke-width:1.6;flex-shrink:0;}
@media(min-width:601px){
  .more-popup{bottom:auto;top:calc(var(--bar-height) + 12px);right:12px;}
}

/* SPINNER */
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,0.15);border-top-color:rgba(255,255,255,0.8);border-radius:50%;animation:spin 0.6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* OVERLAY */
.overlay{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,0.65);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;overscroll-behavior:contain;transition:opacity 0.22s,backdrop-filter 0.32s ease,visibility 0s linear 0.22s;}
.overlay.open{opacity:1;visibility:visible;pointer-events:all;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition-delay:0s;}
@media(min-width:601px){.overlay{align-items:center;padding:20px;}}

/* Modal category tone — a soft radial glow behind the sheet, tying each modal back to the shared space scene */
.overlay::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 0.4s ease;background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(var(--accent-rgb),0.10),transparent 70%);}
.overlay.open::before{opacity:1;}
.overlay.tone-warm::before{background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,150,90,0.12),transparent 70%);}
.overlay.tone-cool::before{background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(90,140,255,0.12),transparent 70%);}
.overlay.tone-neutral::before{background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,255,255,0.06),transparent 70%);}

/* MODAL BASE (sheet on mobile, centered on desktop) */
.modal-sheet{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:20px 20px 0 0;width:100%;box-shadow:0 -8px 40px rgba(0,0,0,0.5);transform:translateY(28px);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);}
.overlay.open .modal-sheet{transform:translateY(0);}
@media(min-width:601px){.modal-sheet{border-radius:18px;max-width:420px;transform:translateY(16px) scale(0.97);box-shadow:0 30px 80px rgba(0,0,0,0.6);}.overlay.open .modal-sheet{transform:translateY(0) scale(1);}}
.handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:10px auto 0;display:block;}
@media(min-width:601px){.handle{display:none;}}

/* Staggered reveal for modal internals: title -> content -> action, ~50ms apart */
.overlay .modal-sheet>*,.overlay .save-modal>*,.overlay .remux-modal>*,.overlay .conv-modal>*,.overlay .st-modal>*,.overlay .upd-modal>*,.overlay .don-modal>*,.overlay .about-modal>*{opacity:0;transform:translateY(6px);transition:opacity 0.3s ease,transform 0.3s ease;}
.overlay.open .modal-sheet>*,.overlay.open .save-modal>*,.overlay.open .remux-modal>*,.overlay.open .conv-modal>*,.overlay.open .st-modal>*,.overlay.open .upd-modal>*,.overlay.open .don-modal>*,.overlay.open .about-modal>*{opacity:1;transform:translateY(0);}
.overlay.open .modal-sheet>*:nth-child(1),.overlay.open .save-modal>*:nth-child(1),.overlay.open .remux-modal>*:nth-child(1),.overlay.open .conv-modal>*:nth-child(1),.overlay.open .st-modal>*:nth-child(1),.overlay.open .upd-modal>*:nth-child(1),.overlay.open .don-modal>*:nth-child(1),.overlay.open .about-modal>*:nth-child(1){transition-delay:0.02s;}
.overlay.open .modal-sheet>*:nth-child(2),.overlay.open .save-modal>*:nth-child(2),.overlay.open .remux-modal>*:nth-child(2),.overlay.open .conv-modal>*:nth-child(2),.overlay.open .st-modal>*:nth-child(2),.overlay.open .upd-modal>*:nth-child(2),.overlay.open .don-modal>*:nth-child(2),.overlay.open .about-modal>*:nth-child(2){transition-delay:0.06s;}
.overlay.open .modal-sheet>*:nth-child(3),.overlay.open .save-modal>*:nth-child(3),.overlay.open .remux-modal>*:nth-child(3),.overlay.open .conv-modal>*:nth-child(3),.overlay.open .st-modal>*:nth-child(3),.overlay.open .upd-modal>*:nth-child(3),.overlay.open .don-modal>*:nth-child(3),.overlay.open .about-modal>*:nth-child(3){transition-delay:0.1s;}
.overlay.open .modal-sheet>*:nth-child(4),.overlay.open .save-modal>*:nth-child(4),.overlay.open .remux-modal>*:nth-child(4),.overlay.open .conv-modal>*:nth-child(4),.overlay.open .st-modal>*:nth-child(4),.overlay.open .upd-modal>*:nth-child(4),.overlay.open .don-modal>*:nth-child(4),.overlay.open .about-modal>*:nth-child(4){transition-delay:0.14s;}
.overlay.open .modal-sheet>*:nth-child(n+5),.overlay.open .save-modal>*:nth-child(n+5),.overlay.open .remux-modal>*:nth-child(n+5),.overlay.open .conv-modal>*:nth-child(n+5),.overlay.open .st-modal>*:nth-child(n+5),.overlay.open .upd-modal>*:nth-child(n+5),.overlay.open .don-modal>*:nth-child(n+5),.overlay.open .about-modal>*:nth-child(n+5){transition-delay:0.16s;}

/* DL MODAL */
.dl-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border);}
.dl-video-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.dl-thumb{width:48px;height:30px;border-radius:5px;flex-shrink:0;background:var(--surface2);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text3);}
.dl-thumb img{width:100%;height:100%;object-fit:cover;}
.dl-vtitle{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dl-vmeta{font-size:10px;color:var(--text3);margin-top:1px;}
.dl-close{width:26px;height:26px;border-radius:6px;flex-shrink:0;margin-left:8px;background:var(--chip-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);transition:all 0.15s;}
.dl-close:hover{background:var(--chip-hover);color:var(--text);}
.dl-body{padding:14px 18px 20px;}
.dl-prog-wrap{display:none;background:var(--chip-bg);border:1px solid var(--border);border-radius:10px;padding:13px 14px;margin-bottom:12px;animation:fadeUp 0.2s ease;}
.dl-prog-wrap.show{display:block;}
.dl-prog-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.dl-prog-icon{width:30px;height:30px;border-radius:7px;flex-shrink:0;background:var(--chip-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all 0.3s;}
.dl-prog-icon.done{background:rgba(59,186,100,0.12);border-color:rgba(59,186,100,0.25);color:#3bba64;}
.dl-prog-info{flex:1;min-width:0;}
.dl-prog-label{font-size:12px;font-weight:600;color:var(--text);}
.dl-prog-speed{font-size:10px;color:var(--text3);margin-top:2px;}
.dl-prog-pct{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.5px;}
.dl-bar-track{height:2px;background:var(--border);border-radius:2px;overflow:hidden;}
.dl-bar-fill{position:relative;height:100%;width:0%;border-radius:2px;background:var(--btn-bg);transition:width 0.4s ease;overflow:hidden;}
.dl-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);transform:translateX(-100%);animation:shimmer 1.3s ease-in-out infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.dl-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--btn-bg);border:none;border-radius:10px;padding:14px;color:var(--btn-color);font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity 0.15s,transform 0.1s;}
.dl-btn:hover{opacity:0.88;}
.dl-btn:disabled{opacity:0.35;cursor:not-allowed;}
.dl-cancel{width:100%;margin-top:7px;display:none;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text3);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all 0.15s;}
.dl-cancel.vis{display:flex;}
.dl-cancel:hover{border-color:rgba(237,66,69,0.3);color:#ed4245;}

/* SAVE MODAL */
.save-modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:20px 20px 0 0;width:100%;max-width:380px;padding:20px 18px 28px;transform:translateY(28px);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);}
.overlay.open .save-modal{transform:translateY(0);}
@media(min-width:601px){.save-modal{border-radius:18px;transform:translateY(16px) scale(0.97);}.overlay.open .save-modal{transform:translateY(0) scale(1);}}
.save-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.save-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;}
.save-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--chip-bg);border:1px solid var(--border);border-radius:12px;padding:14px 10px;cursor:pointer;transition:all 0.15s;color:var(--text);font-size:11px;font-weight:700;font-family:var(--font);}
.save-btn:hover{background:var(--chip-hover);border-color:var(--border2);}
.save-btn svg{width:20px;height:20px;stroke-width:1.8;}
.save-note{font-size:11px;color:var(--text3);line-height:1.6;padding:10px 12px;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;margin-bottom:12px;}
.save-done{width:100%;background:var(--btn-bg);border:none;border-radius:10px;padding:12px;color:var(--btn-color);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity 0.15s,transform 0.1s;}
.save-done:hover{opacity:0.88;}

/* ── SETTINGS MODAL — quiet, structured workspace ── */
.st-modal{background:var(--modal-bg);border:1px solid var(--modal-border);width:min(720px,calc(100% - 32px));max-height:min(84dvh,680px);display:flex;flex-direction:column;overflow:hidden;border-radius:18px;transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .25s ease;box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.035);}
.overlay.open .st-modal{transform:translateY(0);}
@media(min-width:601px){.overlay.open .st-modal{transform:translateY(0) scale(1);}}

.st-modal-header{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.018);flex-shrink:0;}
.st-modal-heading{display:flex;align-items:center;gap:11px;min-width:0;}
.st-modal-heading>div{display:flex;min-width:0;flex-direction:column;gap:3px;}
.st-modal-heading strong{color:var(--text);font-size:13px;font-weight:700;letter-spacing:-.02em;}
.st-modal-heading small{overflow:hidden;color:var(--text3);font-size:9px;font-weight:500;text-overflow:ellipsis;white-space:nowrap;}
.st-modal-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(var(--accent-rgb),.16);border-radius:9px;color:var(--accent);background:rgba(var(--accent-rgb),.07);}
.st-modal-icon svg{width:16px;height:16px;}
.st-modal-close{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:9px;color:var(--text3);background:var(--chip-bg);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.st-modal-close:hover{color:var(--text);border-color:var(--border2);background:var(--chip-hover);}
.st-modal-close svg{width:14px;height:14px;}
.st-modal-layout{display:flex;min-height:0;flex:1;}

/* Desktop: sidebar left */
.st-sidebar{width:154px;flex-shrink:0;background:rgba(255,255,255,.018);border-right:1px solid var(--border);padding:12px 9px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
.st-nav-btn{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:38px;background:transparent;border:1px solid transparent;border-radius:9px;padding:0 10px;color:var(--text3);font-size:10.5px;font-weight:550;font-family:var(--font);cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease;text-align:left;}
.st-nav-btn svg{width:14px;height:14px;flex-shrink:0;}
.st-nav-btn:hover{background:var(--chip-bg);color:var(--text2);}
.st-nav-btn.active{border-color:rgba(var(--accent-rgb),.13);background:rgba(var(--accent-rgb),.075);color:var(--text);}
.st-nav-btn.active::before{content:'';position:absolute;left:-1px;width:2px;height:15px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.45);}
.st-content{flex:1;min-width:0;overflow-y:auto;padding:18px;background:rgba(0,0,0,.035);-webkit-overflow-scrolling:touch;}
.st-page{display:none;}.st-page.active{display:grid;gap:10px;}
.st-section{margin:0;padding:15px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);}
.st-section-label{font-size:9px;font-weight:700;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:7px;}
.st-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent);}
.st-chips{display:flex;flex-wrap:wrap;gap:5px;}
.chip{background:transparent;border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:10px;font-weight:600;color:var(--text3);cursor:pointer;font-family:var(--font);transition:color .13s ease,border-color .13s ease,background .13s ease,box-shadow .13s ease;}
.chip:hover{border-color:var(--border2);color:var(--text2);background:var(--chip-bg);}
.chip.active{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.3);color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.035);}
.st-note{font-size:9.5px;color:var(--text3);margin-top:8px;line-height:1.55;}
.st-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.st-toggle-row:last-child{border-bottom:none;}
.st-tl{flex:1;}
.st-tl-name{font-size:10.5px;font-weight:650;color:var(--text);margin-bottom:3px;}
.st-tl-desc{font-size:9.5px;color:var(--text3);line-height:1.5;}
.toggle{width:34px;height:19px;padding:0;border-radius:10px;background:var(--chip-bg);border:1px solid var(--border);cursor:pointer;position:relative;flex-shrink:0;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:var(--text3);transition:transform .2s ease,background .2s ease;}
.toggle.on{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.42);box-shadow:0 0 12px rgba(var(--accent-rgb),.08);}
.toggle.on::after{transform:translateX(15px);background:var(--accent);}
.theme-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border:1px solid var(--border);border-radius:9px;background:rgba(0,0,0,.05);margin-bottom:0;}
.theme-btn{min-height:30px;text-align:center;font-size:9.5px;font-weight:600;font-family:var(--font);background:transparent;border:0;border-radius:6px;color:var(--text3);cursor:pointer;transition:color .13s ease,background .13s ease,box-shadow .13s ease;}
.theme-btn:hover{color:var(--text2);}
.theme-btn.active{background:var(--chip-hover);color:var(--text);box-shadow:0 1px 5px rgba(0,0,0,.12);}
.accent-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.accent-option{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 14px;align-items:center;gap:8px;min-height:50px;padding:7px 8px;border:1px solid var(--border);border-radius:9px;background:var(--chip-bg);color:var(--text);font-family:var(--font);text-align:left;cursor:pointer;transition:transform .16s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;}
.accent-option:hover{transform:translateY(-1px);border-color:var(--border2);background:var(--chip-hover);}
.accent-option.active{border-color:rgba(var(--accent-rgb),.48);background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),var(--chip-bg));box-shadow:0 0 0 2px rgba(var(--accent-rgb),.07),0 9px 28px rgba(var(--accent-rgb),.08);}
.accent-swatch{position:relative;width:30px;height:30px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 13px rgba(0,0,0,.2);}
.accent-swatch::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 45%);}
.accent-swatch i{position:absolute;width:12px;height:12px;right:4px;bottom:4px;border:2px solid rgba(255,255,255,.7);border-radius:50%;box-shadow:0 0 8px currentColor;}
.swatch-default{color:#9fd8ff;background:linear-gradient(135deg,#182633,#7659ad);}.swatch-default i{background:#9fd8ff;}
.swatch-purple{color:#d56bff;background:linear-gradient(135deg,#2a1036,#6842c7);}.swatch-purple i{background:#d56bff;}
.swatch-gray{color:#c6cad1;background:linear-gradient(135deg,#1d1e21,#686d76);}.swatch-gray i{background:#c6cad1;}
.swatch-pink{color:#ff64ad;background:linear-gradient(135deg,#36111f,#c52d70);}.swatch-pink i{background:#ff64ad;}
.swatch-cobalt{color:#5d8dff;background:linear-gradient(135deg,#0b214b,#096fbc);}.swatch-cobalt i{background:#5d8dff;}
.accent-option-copy{display:flex;min-width:0;flex-direction:column;gap:2px;}
.accent-option-copy strong{overflow:hidden;color:var(--text);font-size:9.5px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
.accent-option-copy small{overflow:hidden;color:var(--text3);font-size:7.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap;}
.accent-check{display:grid;place-items:center;width:14px;height:14px;border:1px solid var(--border);border-radius:50%;color:transparent;font-size:8px;transition:all .2s ease;}
.accent-option.active .accent-check{border-color:var(--accent);color:var(--btn-color);background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.35);}
.lang-select-wrap{position:relative;display:flex;align-items:center;width:100%;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--chip-bg);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.lang-select-wrap:hover{border-color:var(--border2);background:var(--chip-hover);}
.lang-select-wrap:focus-within{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08);}
.lang-select-icon{position:absolute;left:11px;width:15px;height:15px;color:var(--text3);pointer-events:none;}
.lang-select{width:100%;height:100%;padding:0 36px;color:var(--text);background:transparent;border:0;outline:0;appearance:none;-webkit-appearance:none;font-family:var(--font);font-size:10.5px;font-weight:600;cursor:pointer;}
.lang-select option{color:var(--text);background:var(--modal-bg);}
.lang-select-chevron{position:absolute;right:11px;width:14px;height:14px;color:var(--text3);pointer-events:none;}

/* Mobile settings: compact horizontal navigation */
@media(max-width:600px){
  .st-modal{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;transform:translateY(28px);}
  .st-modal-header{min-height:58px;padding:0 14px;}
  .st-modal-heading small{font-size:8.5px;}
  .st-modal-layout{flex-direction:column;}
  .st-sidebar{
    width:100%;min-height:50px;flex-direction:row;
    background:rgba(255,255,255,.012);border-right:0;border-bottom:1px solid var(--border);
    padding:7px 9px;gap:4px;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:0;
  }
  .st-sidebar::-webkit-scrollbar{display:none;}
  .st-nav-btn{
    width:auto;min-width:max-content;min-height:35px;flex-shrink:0;
    padding:0 10px;gap:7px;border-radius:8px;font-size:9.5px;
    justify-content:center;
  }
  .st-nav-btn.active::before{inset:auto 9px -7px;width:auto;height:2px;}
  .st-nav-btn svg{width:13px;height:13px;}
  .st-content{padding:12px 12px calc(18px + var(--safe-bottom));}
  .st-page.active{gap:8px;}
  .st-section{padding:13px;border-radius:11px;}
  .chip{padding:6px 9px;font-size:9.5px;}
  .st-chips{gap:5px;}
}
@media(max-width:430px){
  .accent-option{grid-template-columns:27px minmax(0,1fr) 13px;min-height:45px;padding:6px 7px;gap:6px;}
  .accent-swatch{width:27px;height:27px;}
  .accent-option-copy small{display:none;}
}
@media(max-width:340px){
  .accent-grid{grid-template-columns:1fr;}
  .accent-option-copy small{display:block;}
}

/* FNF */
.fnf-input{width:100%;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-family:var(--font);font-size:12px;outline:none;transition:border-color 0.15s;}
.fnf-input:focus{border-color:var(--border2);}
.fnf-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.fnf-tag{background:var(--chip-bg);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:600;color:var(--text3);cursor:pointer;font-family:var(--font);transition:all 0.13s;}
.fnf-tag:hover{background:var(--chip-hover);color:var(--text2);}
.fnf-preview{font-size:10px;color:var(--text2);margin-top:6px;padding:6px 10px;background:var(--chip-bg);border-radius:6px;border:1px solid var(--border);word-break:break-all;}
.fnf-presets{flex-direction:column;gap:5px;}
.fnf-presets .fnf-tag{width:100%;padding:7px 9px;text-align:left;}

/* REMUX / CONVERT */
.tool-modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:20px 20px 0 0;width:100%;overflow:hidden;transform:translateY(28px);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);}
.remux-modal,.conv-modal{max-width:440px;}
.overlay.open .tool-modal{transform:translateY(0);}
.tool-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(var(--accent-rgb),0.025);}
.tool-modal-heading{display:flex;align-items:center;gap:11px;min-width:0;}
.tool-modal-heading>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tool-modal-heading strong{font-size:14px;font-weight:720;color:var(--text);line-height:1.3;}
.tool-modal-heading small{font-size:10.5px;color:var(--text3);line-height:1.4;white-space:normal;}
.tool-modal-icon{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--chip-bg);color:var(--text2);display:grid;place-items:center;flex:0 0 auto;}
.tool-modal-icon svg{width:17px;height:17px;}
.tool-modal-close{width:30px;height:30px;border:1px solid var(--border);border-radius:9px;background:var(--chip-bg);color:var(--text3);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background 0.15s,color 0.15s,border-color 0.15s;}
.tool-modal-close:hover{background:var(--chip-hover);border-color:var(--border2);color:var(--text);}
.tool-modal-close svg{width:14px;height:14px;}
.tool-modal-body{padding:18px;max-height:min(68dvh,620px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.dropzone{border:1px dashed var(--border2);border-radius:13px;padding:24px 18px;text-align:center;cursor:pointer;transition:border-color 0.18s,background 0.18s;margin-bottom:14px;background:var(--chip-bg);}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(var(--accent-rgb),0.07);}
.tool-drop-icon{width:40px;height:40px;border:1px solid var(--border);border-radius:11px;background:var(--surface2);color:var(--text2);display:grid;place-items:center;margin:0 auto 10px;}
.tool-drop-icon.selected{border-color:rgba(59,186,100,0.32);background:rgba(59,186,100,0.1);color:#58c97d;}
.tool-drop-icon svg{width:19px;height:19px;}
.visually-hidden-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}
.drop-title{font-size:12.5px;font-weight:680;color:var(--text);margin-bottom:4px;word-break:break-word;}
.drop-sub{font-size:10.5px;color:var(--text3);line-height:1.5;}
.remux-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.remux-info-item{display:flex;gap:9px;align-items:flex-start;padding:11px;background:var(--chip-bg);border:1px solid var(--border);border-radius:10px;}
.remux-info-item svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--text3);}
.remux-info-item div{font-size:10.5px;color:var(--text3);line-height:1.55;}
.remux-info-item strong{color:var(--text2);}
.conv-fmt-row{margin-bottom:12px;padding:12px;background:var(--chip-bg);border:1px solid var(--border);border-radius:11px;}
.conv-fmt-label{font-size:9px;font-weight:720;color:var(--text3);letter-spacing:1.1px;margin-bottom:9px;}
.conv-chips{display:flex;flex-wrap:wrap;gap:5px;}
.action-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--btn-bg);border:1px solid transparent;border-radius:10px;padding:12px;color:var(--btn-color);font-size:12.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity 0.15s,transform 0.1s;}
.action-btn:hover{opacity:0.88;}
.action-btn:disabled{opacity:0.35;cursor:not-allowed;}
.conv-progress{display:none;background:var(--chip-bg);border:1px solid var(--border);border-radius:11px;padding:12px 14px;margin-bottom:12px;}
.conv-progress.show{display:block;}
@media(min-width:601px){
  .tool-modal{border-radius:18px;transform:translateY(16px) scale(0.97);}
  .overlay.open .tool-modal{transform:translateY(0) scale(1);}
}
@media(max-width:460px){
  .tool-modal-body{padding:14px;}
  .remux-info{grid-template-columns:1fr;}
}

/* UPDATES / DONATE / ABOUT */
.upd-modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:20px 20px 0 0;width:100%;max-width:440px;max-height:82dvh;overflow-y:auto;padding:22px;-webkit-overflow-scrolling:touch;transform:translateY(28px);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);position:relative;}
.don-modal{max-width:420px;padding:0;position:relative;}
.about-modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:20px 20px 0 0;width:100%;max-width:440px;max-height:85dvh;overflow-y:auto;padding:26px 24px;transform:translateY(28px);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);position:relative;text-align:center;-webkit-overflow-scrolling:touch;}
.overlay.open .upd-modal,.overlay.open .about-modal{transform:translateY(0);}
@media(min-width:601px){
  .upd-modal,.about-modal{border-radius:18px;transform:translateY(16px) scale(0.97);}
  .overlay.open .upd-modal,.overlay.open .about-modal{transform:translateY(0) scale(1);}
}
.modal-close-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;}
.modal-close-btn:hover{color:var(--text);}
.upd-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.upd-badge{font-size:9px;font-weight:700;color:var(--btn-color);background:var(--btn-bg);padding:4px 10px;border-radius:6px;letter-spacing:1px;}
.upd-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.5px;}
.upd-entry{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:10px;background:var(--chip-bg);}
.upd-entry.latest{border-color:rgba(59,186,100,0.3);background:rgba(59,186,100,0.04);}
.upd-ver-row{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap;}
.upd-ver{font-size:13px;font-weight:700;color:var(--text);}
.badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;}
.badge-new{background:var(--chip-bg);color:var(--text2);border:1px solid var(--border2);}
.badge-fix{background:rgba(59,186,100,0.1);color:#3bba64;border:1px solid rgba(59,186,100,0.2);}

/* ACCORDION FOR UPDATES */
.upd-accordion{cursor:pointer;user-select:none;}
.upd-accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;}
.upd-accordion-icon{transition:transform 0.3s ease;}
.upd-accordion.open .upd-accordion-icon{transform:rotate(180deg);}
.upd-accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
.upd-accordion.open .upd-accordion-content{max-height:1000px;}
.upd-list-simple{list-style:none;display:flex;flex-direction:column;gap:8px;}
.upd-list-simple li{font-size:11px;color:var(--text3);line-height:1.6;padding-left:12px;position:relative;}
.upd-list-simple li::before{content:'•';position:absolute;left:0;color:var(--text2);}
.upd-date{font-size:10px;color:var(--text3);margin-left:auto;}
.upd-list{list-style:none;display:flex;flex-direction:column;gap:4px;}
.upd-list li{font-size:11px;color:var(--text3);line-height:1.6;padding-left:10px;position:relative;}
.upd-list li::before{content:'–';position:absolute;left:0;}
.support-modal .tool-modal-body{padding:16px 18px 18px;}
.don-card{background:var(--chip-bg);border:1px solid var(--border);border-radius:11px;padding:13px 14px;margin-bottom:9px;}
.don-card-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.don-card-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;}
.don-card-icon svg,.don-contact-icon svg{width:15px;height:15px;}
.don-papara-icon{background:#7146dc;color:#fff;font-size:12px;font-weight:800;}
.don-instagram-icon{background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.don-card-name{font-size:13px;font-weight:700;color:var(--text);}
.don-card-sub{font-size:10px;color:var(--text3);}
.don-copy-row{display:flex;align-items:center;gap:8px;}
.don-num{font-size:13px;font-weight:700;color:var(--text);flex:1;letter-spacing:0.3px;}
.don-copy-btn{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:6px 11px;font-size:10.5px;font-weight:650;color:var(--text2);cursor:pointer;font-family:var(--font);}
.don-copy-btn:hover{background:var(--chip-hover);}
.support-link-list{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--chip-bg);}
.support-link-row{display:flex;align-items:center;gap:10px;padding:11px 12px;}
.support-link-row+.support-link-row{border-top:1px solid var(--border);}
.support-link-copy{flex:1;min-width:0;}
.don-ig{margin:0;}
.don-ig-name{font-size:12px;font-weight:600;color:var(--text);}
.don-ig-handle{font-size:10px;color:var(--text3);}
.don-ig-link{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:10.5px;font-weight:600;color:var(--text2);text-decoration:none;margin-left:auto;font-family:var(--font);white-space:nowrap;}
.don-ig-link:hover{background:var(--chip-hover);}
.don-contact{margin:0;}
.don-contact-icon{width:32px;height:32px;border-radius:9px;background:var(--surface2);border:1px solid var(--border);display:grid;place-items:center;flex-shrink:0;color:var(--text2);}
.don-contact-name{font-size:12px;font-weight:600;color:var(--text);}
.don-contact-email{font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;}
.don-contact-link{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:10.5px;font-weight:600;color:var(--text2);text-decoration:none;margin-left:auto;font-family:var(--font);white-space:nowrap;}
.don-contact-link:hover{background:var(--chip-hover);}
.don-thanks{font-size:10.5px;color:var(--text3);text-align:center;margin-top:13px;}
.about-name{font-size:22px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-1px;}
.about-name span{color:var(--text3);}
.about-ver{font-size:11px;color:var(--text3);margin-bottom:14px;}
.about-desc{font-size:12px;color:var(--text2);line-height:1.75;margin-bottom:18px;text-align:left;}
.about-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:11px;}
.about-row:last-of-type{border-bottom:none;}
.about-row-label{color:var(--text3);}
.about-row-val{color:var(--text2);}
.about-row-val a{color:var(--text2);text-decoration:none;}
.about-stack{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:16px;}
.about-tag{font-size:10px;font-weight:600;color:var(--text3);background:var(--chip-bg);border:1px solid var(--border);border-radius:5px;padding:3px 7px;}

/* YT POPUP */
.yt-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);z-index:9000;background:var(--surface);border:1px solid rgba(237,66,69,0.25);border-radius:14px;padding:22px 24px;max-width:380px;width:calc(100% - 40px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:all 0.25s;}
.yt-popup.show{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1);}
.yt-popup-icon{font-size:28px;margin-bottom:8px;display:block;}
.yt-popup-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:7px;}
.yt-popup-txt{font-size:12px;color:var(--text2);line-height:1.7;}

/* TOAST */
.toast{position:fixed;bottom:calc(var(--bar-height) + var(--safe-bottom) + 8px);left:50%;transform:translateX(-50%) translateY(10px) scale(0.96);background:var(--surface);border:1px solid var(--border2);border-radius:9px;padding:9px 16px;font-size:12px;font-weight:500;font-family:var(--font);color:var(--text);display:flex;align-items:center;gap:7px;z-index:9999;opacity:0;transition:opacity 0.22s,transform 0.28s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.toast-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* GLOBAL PRESS FEEDBACK — every clickable control gets a small, consistent tap response */
button,.services-chip,.mode-btn,.btn-paste,.bulk-toggle,.vc-dl,.pl-sel-btn,.pl-item,.chip,.theme-btn,.accent-option,.st-nav-btn,.more-item,.bar-btn,.save-btn,.don-copy-btn,.url-cat-wrap,.url-go-btn,.url-clear{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button:active,.services-chip:active,.mode-btn:active,.btn-paste:active,.vc-dl:active,.pl-sel-btn:active,.chip:active,.theme-btn:active,.accent-option:active,.st-nav-btn:active,.more-item:active,.bar-btn:active,.save-btn:active,.don-copy-btn:active,.dl-btn:active,.action-btn:active,.save-done:active,.pl-dl-btn:active{transform:scale(0.97);}

/* REDUCED MOTION — respected everywhere; strips ambient/decorative animation, keeps state changes instant */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important;}
  .radar-ring.fire{animation:none;opacity:0;}
  .dl-bar-fill::after{display:none;}
  .overlay .modal-sheet>*,.overlay .save-modal>*,.overlay .remux-modal>*,.overlay .conv-modal>*,.overlay .st-modal>*,.overlay .upd-modal>*,.overlay .don-modal>*,.overlay .about-modal>*{opacity:1!important;transform:none!important;}
}

/* ══════════════ TOUCH-ONLY PERFORMANCE MODE ══════════════ */
/* Targeted at (hover:none) and (pointer:coarse) — i.e. real touchscreens (phones,
   tablets) — NOT at narrow desktop browser windows, which still have a mouse and
   should keep every animation. On actual touch devices these infinite-loop
   animations run every frame for no real visual payoff, so they're switched off —
   the static end-state (colors, drop-shadows, gradients) stays, only the
   per-frame animation cost goes away. backdrop-filter blur radius is also
   reduced, since blur is one of the most expensive things a phone GPU can be
   asked to composite continuously. */
@media (hover:none) and (pointer:coarse){
  :root{--glass-blur:0px;}
  .bottom-bar{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  body.url-editing .bottom-bar{visibility:hidden;opacity:0;pointer-events:none;transform:none!important;transition:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .overlay.open{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .modal-sheet,.remux-modal,.conv-modal,.st-modal,.upd-modal,.don-modal,.about-modal,
  .video-card,.playlist-card,.qr-wrap,.more-popup,.yt-popup,.toast{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .mode-btn svg,
  .mode-btn#modeAuto.active svg,
  .mode-btn#modeAudio.active svg,
  .mode-btn#modeMute.active svg,
  .yt-warn::before,
  .dl-bar-fill,.dl-prog-bar-fill,
  .dropzone::after,
  .icon-float,
  .gh-octocat,
  .gh-eyes-normal{
    animation:none!important;
  }
  .dl-bar-fill::after{display:none;}
}

/* ══════════════ DESKTOP-ONLY EXTRA GLASS RICHNESS ══════════════ */
/* Real mouse + plenty of GPU headroom: push the glass a little further than the
   phone-optimized baseline above — deeper blur, a touch more saturation. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  :root{--glass-blur:18px;}
}

/* dvh fallback for older engines (Safari <15.4 / older Android WebView) */
@supports not (height:100dvh){
  .page{min-height:100vh;}
  .st-modal{max-height:90vh;}
  .modal-body{max-height:60vh;}
  .upd-modal{max-height:82vh;}
  .about-modal{max-height:85vh;}
  .services-modal .modal-body{max-height:60vh;}
  #historyList{max-height:60vh;}
  #plQueueList{max-height:50vh;}
  @media(max-width:600px){.st-modal{max-height:92vh;}}
}

/* ══════════════ PC / DESKTOP LAYOUT REFINEMENT ══════════════ */
/* On real desktop widths the bottom app-bar becomes a compact floating dock instead of a full-width mobile bar,
   and every overlay reliably centers as a dialog rather than a bottom sheet. */
@media(min-width:901px){
  .bottom-bar{
    left:50%;right:auto;bottom:22px;transform:translateX(-50%);
    width:auto;max-width:560px;height:56px;
    border-radius:18px;border:1px solid var(--border2);
    background:var(--nav-bg);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
    box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04) inset;
    padding:0 6px;gap:2px;
  }
  .bar-btn{flex:0 0 auto;padding:8px 16px;}
  .bar-btn span{font-size:10px;}
  .page{padding-bottom:110px;}
  .more-popup{bottom:auto;top:auto;right:auto;left:50%;transform:translateX(-50%) translateY(8px);bottom:calc(22px + 56px + 10px);}
  .more-popup.open{transform:translateX(-50%) translateY(0);}
}
/* Every overlay is a true centered dialog on tablet/desktop, never a bottom sheet */
@media(min-width:601px){
  .overlay{align-items:center;justify-content:center;padding:24px;}
  .modal-sheet,.remux-modal,.conv-modal,.upd-modal,.don-modal,.about-modal{margin:auto;}
}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
@media(max-width:400px){.page{padding:60px 14px calc(var(--bar-height) + var(--safe-bottom) + 20px);}.bar-btn{font-size:8px;}.bar-btn svg{width:16px;height:16px;}}


/* ══════════════ PREMIUM SPACE-GLASS LAYER ══════════════ */
/* Glassmorphism for every panel/sheet/card — layered blur, thin glow border, floating shadow */
.modal-sheet,.remux-modal,.conv-modal,.st-modal,.upd-modal,.don-modal,.about-modal,
.video-card,.playlist-card,.qr-wrap,.more-popup,.yt-popup,.toast{
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--glow-soft);
  background-image:linear-gradient(180deg,var(--glass-shine),transparent 40%);
  background-blend-mode:overlay;
}
.modal-sheet,.remux-modal,.conv-modal,.st-modal,.upd-modal,.don-modal,.about-modal,
.video-card,.playlist-card,.qr-wrap{
  position:relative;
}
.modal-sheet::before,.remux-modal::before,.conv-modal::before,.st-modal::before,.upd-modal::before,.don-modal::before,.about-modal::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),0.35),rgba(168,139,250,0.15) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0.7;
}
body.light .modal-sheet,body.light .remux-modal,body.light .conv-modal,body.light .st-modal,body.light .upd-modal,body.light .don-modal,body.light .about-modal,
body.light .video-card,body.light .playlist-card,body.light .qr-wrap{background-image:none;box-shadow:0 20px 60px rgba(0,0,0,0.12);}

/* Overlay backdrop — animated blur handled already by .overlay/.overlay.open; deepen tint for space feel */
.overlay{background:rgba(3,3,8,0.55);}
.overlay.open{backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);}

/* Buttons — glow, gradient sheen, ripple container */
.action-btn,.vc-dl,.pl-dl-btn,.url-go-btn,.dl-btn,.save-btn{
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 4px 20px rgba(var(--accent-rgb),0.25),0 0 0 1px rgba(255,255,255,0.06) inset;
  transition:box-shadow 0.25s ease,transform 0.15s ease,opacity 0.15s ease;
}
.action-btn:hover,.vc-dl:hover,.pl-dl-btn:hover,.url-go-btn:hover,.dl-btn:hover,.save-btn:hover{
  box-shadow:0 6px 28px rgba(var(--accent-rgb),0.4),0 0 0 1px rgba(255,255,255,0.1) inset;
  transform:translateY(-1px);
}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.55);transform:scale(0);animation:rippleAnim 0.6s ease-out;pointer-events:none;mix-blend-mode:overlay;}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0;}}

/* Cards — hover lift + animated border glow */
.video-card,.playlist-card{transition:transform 0.25s cubic-bezier(0.22,1,0.36,1),box-shadow 0.25s ease;}
.video-card:hover,.playlist-card:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 24px rgba(var(--accent-rgb),0.1);}
.dropzone{position:relative;overflow:hidden;}
.dropzone::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,transparent,rgba(var(--accent-rgb),0.5),transparent);background-size:200% 200%;opacity:0;transition:opacity 0.2s;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.dropzone:hover::after,.dropzone.drag::after{opacity:1;animation:borderSheen 3s linear infinite;}
@keyframes borderSheen{to{background-position:200% 0%;}}

/* Inputs — animated focus glow */
.url-field,.fnf-input,.lang-select{transition:border-color 0.25s ease,box-shadow 0.3s ease;}
.url-field:focus-within{box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.12),0 0 24px rgba(var(--accent-rgb),0.15);}
.fnf-input:focus{box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.1),0 0 18px rgba(var(--accent-rgb),0.12);border-color:var(--border2);}

/* Circular gradient progress ring (used by JS-injected .prog-ring if present) */
.prog-ring{transform:rotate(-90deg);}
.prog-ring circle{fill:none;stroke-linecap:round;}
.prog-ring .track{stroke:var(--border);}
.prog-ring .fill{stroke:url(#progGrad);transition:stroke-dashoffset 0.3s ease;}

/* Gradient progress bars */
.dl-bar-fill,.dl-prog-bar-fill{background:linear-gradient(90deg,var(--space-cyan),var(--accent),var(--space-purple))!important;background-size:200% 100%;animation:gradFlow 3s linear infinite;}
@keyframes gradFlow{to{background-position:200% 0;}}

/* Icon micro-animations — gentle float + glow pulse, applied via .icon-float utility (safe, opt-in) */
.icon-float{animation:iconFloat 3.2s ease-in-out infinite;}
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.services-chip svg,.bar-btn svg{transition:filter 0.25s ease;}
.bar-btn:hover svg,.bar-btn.active svg{filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),0.5));}

/* Logo subtle glow */
.logo-name{text-shadow:0 0 30px rgba(var(--accent-rgb),0.15);}

/* Respect reduced motion for the new layer too */
@media (prefers-reduced-motion: reduce){
  .icon-float{animation:none;}
  .dl-bar-fill,.dl-prog-bar-fill{animation:none;}
  .dropzone::after{animation:none;}
}
/* Simple site footer (index.html) */
.zw-footer{margin-top:40px;padding:24px 20px 40px;text-align:center;font-size:11px;color:var(--text3);border-top:1px solid var(--border);}
.zw-footer a{color:var(--text2);text-decoration:none;margin:0 8px;transition:color .15s;}
.zw-footer a:hover{color:var(--text);}

@media (hover:none) and (pointer:coarse) {
  .overlay.open,
  .modal-sheet,
  .remux-modal,
  .conv-modal,
  .st-modal,
  .upd-modal,
  .don-modal,
  .about-modal,
  .video-card,
  .playlist-card,
  .qr-wrap,
  .more-popup,
  .yt-popup,
  .toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}