/* AE presets ke pages (presets.html + ae-*-presets.html) — build/ae-presets/pages.py inhe banata hai.
   Ek page pe ek hi kaam: preset dhoondo -> chalta dekho -> naam copy karo -> AE mein lagao.
   Niyam: saaf rakho. Har dabba ek jaisa, khoob khaali jagah, koi ticker/badge ki bheed nahi. */
/* upar ka menu (logo) chipka rehta hai; search patti uske theek neeche chipakti hai (menu 66px ka hai) */

.pr-crumb{ color:var(--muted-2); font-size:13px; font-weight:600; margin-bottom:14px; }
.pr-crumb a{ color:var(--muted); }
.pr-crumb a:hover{ color:var(--text); }

.pr-hero{ padding:32px 0 26px; position:relative; z-index:2; }
.pr-hero h1{ font-size:clamp(28px,5.2vw,48px); font-weight:900; margin-bottom:12px; max-width:860px; }
.pr-hero h1 em{ font-style:normal; color:var(--accent); }
.pr-hero p{ color:var(--muted); font-size:16px; max-width:640px; }
.pr-hero .eyebrow{ margin-bottom:10px; }
.pr-how{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:16px; color:var(--muted); font-size:14px; }
.pr-how b{ color:var(--text); }

/* 6 group ke link — har page pe ek jaise */
.pr-groups{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.pr-groups a{ height:40px; padding:0 16px; border-radius:100px; border:1px solid var(--line-2); color:var(--muted);
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:color .15s, border-color .15s; }
.pr-groups a span{ color:var(--muted-2); font-size:12px; }
.pr-groups a:hover{ color:var(--text); border-color:var(--muted-2); }
.pr-groups a[aria-current]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pr-groups a[aria-current] span{ color:rgba(255,255,255,.8); }

/* search + folder chips — upar chipki rehti hai */
.pr-bar{ position:sticky; top:66px; z-index:40; background:rgba(10,10,11,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0 10px; }
.pr-search{ position:relative; }
.pr-search input{ width:100%; height:52px; background:var(--card); border:1px solid var(--line-2);
  border-radius:14px; padding:0 48px 0 46px; color:var(--text); font:500 16px/1 Inter,sans-serif;
  -webkit-appearance:none; appearance:none; }
.pr-search input::placeholder{ color:var(--muted-2); }
.pr-search input:focus{ outline:none; border-color:var(--accent); }
.pr-search input::-webkit-search-cancel-button{ display:none; }
.pr-search svg{ position:absolute; left:15px; top:50%; width:20px; height:20px; margin-top:-10px;
  stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; pointer-events:none; }
.pr-clear{ position:absolute; right:4px; top:4px; width:44px; height:44px; border:0; background:none;
  color:var(--muted); font-size:24px; line-height:1; cursor:pointer; border-radius:10px; }
.pr-chips{ display:flex; gap:8px; margin:10px -24px 0; padding:0 24px 2px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pr-chips:empty{ display:none; }
.pr-chips::-webkit-scrollbar{ display:none; }
.chip-btn{ flex:none; height:40px; padding:0 16px; border-radius:100px; border:1px solid var(--line-2);
  background:transparent; color:var(--muted); font:600 14px/1 Inter,sans-serif; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; }
.chip-btn.on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.chip-btn:focus-visible, .pr:focus-visible, .pr-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.pr-main{ padding:8px 0 56px; position:relative; z-index:2; min-height:50vh; }
.pr-cat{ margin-top:36px; scroll-margin-top:200px; }
.pr-cat[hidden]{ display:none; }
.pr-cat h2{ font-size:22px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:10px; }
.pr-cat h2 span{ color:var(--muted-2); font-size:13px; font-weight:600; letter-spacing:0; }
.pr-path{ color:var(--muted-2); font-size:13px; margin:4px 0 14px; }

.pr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:720px){ .pr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:1080px){ .pr-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* poora dabba button hai: dabao -> naam copy */
.pr{ display:block; width:100%; padding:0; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; cursor:pointer; color:var(--text); font:inherit;
  transition:border-color .15s, transform .2s var(--out); -webkit-tap-highlight-color:transparent; }
.pr[hidden]{ display:none; }
.pr:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.pr:active{ transform:scale(.98); }
.pr-vis{ display:block; position:relative; aspect-ratio:16/9; background:#0b0b0d; overflow:hidden; }
.pr-vis img, .pr-vis video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pr-name{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 12px;
  font-size:14px; font-weight:600; line-height:1.25; min-height:48px; }
.pr-name i{ flex:none; font-style:normal; color:var(--muted-2); font-size:12px; font-weight:600; }
.pr.copied{ border-color:var(--ok); }
.pr.copied .pr-name i{ color:var(--ok); }

.pr-empty{ text-align:center; color:var(--muted); padding:48px 0; }
.pr-empty b{ display:block; color:var(--text); font-size:18px; margin-bottom:6px; }

/* hub (presets.html): 6 bade dabbe */
.pr-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px; }
@media (min-width:860px){ .pr-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
.pr-tile{ display:block; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:10px 10px 16px;
  transition:transform .3s var(--out), border-color .2s; }
.pr-tile:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.pr-tile .pr-vis{ border-radius:12px; }
.pr-tile h2{ font-size:19px; margin:14px 6px 4px; letter-spacing:-.02em; }
.pr-tile p{ color:var(--muted); font-size:14px; margin:0 6px; }

/* neeche ka padhne wala hissa */
.pr-text{ padding:56px 0; position:relative; z-index:2; border-top:1px solid var(--line); }
.pr-text h2{ font-size:clamp(22px,3vw,30px); margin-bottom:14px; }
.pr-text p, .pr-text li{ color:var(--muted); font-size:16px; line-height:1.65; }
.pr-text p{ margin-bottom:14px; }
.pr-text ol{ margin:0 0 14px 20px; }
.pr-text b{ color:var(--text); }
.pr-faq{ margin-top:34px; }
.pr-faq details{ border-top:1px solid var(--line); padding:16px 0; }
.pr-faq details:last-child{ border-bottom:1px solid var(--line); }
.pr-faq summary{ cursor:pointer; font-weight:600; font-size:16px; color:var(--text); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px; }   /* phone: ungli ke liye */
.pr-faq summary::-webkit-details-marker{ display:none; }
.pr-faq summary::after{ content:"+"; color:var(--muted-2); font-size:20px; font-weight:400; line-height:1; }
.pr-faq details[open] summary::after{ content:"\2212"; }
.pr-faq details p{ margin:10px 0 0; }

.pr-toast{ position:fixed; left:50%; bottom:24px; z-index:90; transform:translate(-50%,140%); max-width:calc(100% - 32px);
  background:var(--text); color:var(--bg); padding:12px 18px; border-radius:14px; font-size:14px; font-weight:600;
  transition:transform .25s var(--out), opacity .2s; text-align:center; opacity:0; pointer-events:none; }
.pr-toast.in{ transform:translate(-50%,0); opacity:1; }
.pr-credit{ color:var(--muted-2); font-size:13px; margin-top:10px; max-width:600px; }

@media (max-width:720px){
  .wrap{ padding:0 16px; }
  .pr-chips{ margin:10px -16px 0; padding:0 16px 2px; }
  .pr-hero{ padding:22px 0 20px; }
  .pr-hero p{ font-size:15px; }
  .pr-name{ font-size:13px; padding:8px 10px 10px; }
  .pr-name i{ display:none; }
  .pr-text{ padding:40px 0; }
  .pr-tile h2{ font-size:16px; margin-top:10px; }
  .pr-tile p{ font-size:13px; }
}

.pr-more{ margin-top:26px; color:var(--muted); font-size:15px; }
.pr-more a{ color:var(--text); font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:2px; }

/* preset dekhne aaye editor ko apne pack ka ek saaf link (ek hi, shor nahi) */
.pr-pack{ display:block; background:var(--card); border:1px solid var(--line-2); border-radius:18px; padding:20px 22px; margin-bottom:40px;
  transition:border-color .15s, transform .2s var(--out); }
.pr-pack:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pr-pack b{ display:block; font-size:18px; margin-bottom:4px; }
.pr-pack span{ display:block; color:var(--muted); font-size:15px; line-height:1.5; }
.pr-pack i{ display:inline-block; font-style:normal; font-weight:600; color:var(--text); margin-top:10px; border-bottom:1px solid var(--accent); padding-bottom:2px; }