/* ═══════════════════════════════════════════
   AlexaLook v8 — style.css  |  mobile-first
   ═══════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────── */
:root {
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'DM Sans', 'Helvetica Neue', sans-serif;

  --xs:   clamp(.75rem,  .7rem  + .25vw, .875rem);
  --sm:   clamp(.875rem, .8rem  + .35vw, 1rem);
  --base: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --lg:   clamp(1.125rem,1rem   + .75vw, 1.5rem);
  --xl:   clamp(1.5rem,  1.2rem + 1.25vw,2.25rem);
  --2xl:  clamp(2rem,    1.2rem + 2.5vw, 3.5rem);
  --hero: clamp(2.8rem,  .5rem  + 6.5vw, 6.5rem);

  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;

  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;
  --tr:180ms cubic-bezier(.16,1,.3,1);

  /* Rose-warm palette */
  --bg:       #fdf9f6;
  --surface:  #fff8f4;
  --surface2: #fef4f0;
  --border:   rgba(60,30,20,.10);
  --text:     #2a1a14;
  --muted:    #7a5f55;
  --faint:    #c4a89f;
  --accent:   #a0504a;
  --accentH:  #7c3430;
  --accentHl: rgba(160,80,74,.12);

  --sh-sm: 0 1px 3px rgba(60,20,10,.07);
  --sh-md: 0 4px 16px rgba(60,20,10,.09);
  --sh-lg: 0 12px 36px rgba(60,20,10,.13);

  --nav-h: 64px;
  --content: 960px;
  --content-w: 1200px;
  --content-n: 680px;
}

[data-theme="dark"] {
  --bg:#1a1210;--surface:#211714;--surface2:#2a1e1b;
  --border:rgba(255,200,180,.10);--text:#f0e4df;--muted:#b08880;--faint:#6e4d48;
  --accent:#e08070;--accentH:#f09080;--accentHl:rgba(224,128,112,.15);
  --sh-sm:0 1px 3px rgba(0,0,0,.3);--sh-md:0 4px 16px rgba(0,0,0,.4);--sh-lg:0 12px 36px rgba(0,0,0,.5);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#1a1210;--surface:#211714;--surface2:#2a1e1b;
    --border:rgba(255,200,180,.10);--text:#f0e4df;--muted:#b08880;--faint:#6e4d48;
    --accent:#e08070;--accentH:#f09080;--accentHl:rgba(224,128,112,.15);
    --sh-sm:0 1px 3px rgba(0,0,0,.3);--sh-md:0 4px 16px rgba(0,0,0,.4);--sh-lg:0 12px 36px rgba(0,0,0,.5);
  }
}

/* ── BASE ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:none;text-size-adjust:none;
  -webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{min-height:100dvh;line-height:1.65;font-family:var(--fb);font-size:var(--base);
  color:var(--text);background:var(--bg);transition:background var(--tr),color var(--tr)}
img,svg,video{display:block;max-width:100%;height:auto}
ul[role="list"],ol[role="list"]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15}
p,li{text-wrap:pretty}
button{cursor:pointer;background:none;border:none}
a,button,[role="button"],input,textarea,select{transition:color var(--tr),background var(--tr),box-shadow var(--tr),border-color var(--tr),opacity var(--tr),transform var(--tr)}
::selection{background:var(--accentHl);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ── BUTTONS ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:.65em 1.7em;border-radius:var(--r-full);font-size:var(--sm);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--accentH);box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:.4em 1.1em;font-size:var(--xs)}

/* ── NAV ─────────────────────────────────── */
.nav-wrap{position:sticky;top:0;z-index:200;height:var(--nav-h);background:color-mix(in oklab,var(--bg) 92%,transparent);
  border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav{max-width:var(--content-w);margin-inline:auto;padding-inline:var(--s6);height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.nav-logo{text-decoration:none;color:var(--text);font-family:var(--fd);font-style:italic;font-size:var(--xl);font-weight:300;white-space:nowrap}
.nav-list{display:flex;align-items:center;gap:var(--s6);list-style:none}
.nav-link{font-size:var(--sm);text-decoration:none;color:var(--muted)}
.nav-link:hover{color:var(--accent)}
.nav-icon{display:flex;align-items:center;color:var(--muted)}
.nav-icon:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:var(--s3)}
.theme-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);border:1px solid var(--border);color:var(--muted)}
.theme-btn:hover{color:var(--accent);border-color:var(--accent)}

/* Mobile nav */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:var(--s2);border-radius:var(--r-md)}
.nav-toggle span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all var(--tr)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav-toggle{display:flex}
  .nav-list{display:none;position:fixed;inset:var(--nav-h) 0 0 0;background:var(--bg);
    flex-direction:column;align-items:center;justify-content:center;gap:var(--s10);z-index:199;
    overflow-y:auto;padding:var(--s12) var(--s6)}
  .nav-list.open{display:flex}
  .nav-link{font-size:var(--lg)}
  .nav-desktop{display:none}
}

/* ── SECTIONS ─────────────────────────────── */
.sec{padding:clamp(var(--s12),8vw,var(--s20)) var(--s6)}
.sec-alt{background:var(--surface2)}
.inner{max-width:var(--content);margin-inline:auto}
.inner-w{max-width:var(--content-w);margin-inline:auto}
.inner-n{max-width:var(--content-n);margin-inline:auto}
.inner-split{max-width:var(--content-w);margin-inline:auto;display:grid;gap:var(--s12);align-items:center}
@media(min-width:768px){.inner-split{grid-template-columns:1fr 1fr}}
.eyebrow{font-size:var(--xs);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:var(--s2);display:block}
.sec-h2{font-family:var(--fd);font-size:var(--xl);font-weight:300;margin-bottom:var(--s4)}
.sec-h2 em{font-style:italic;color:var(--accent);font-weight:300}
.lead{color:var(--muted);margin-bottom:var(--s10);max-width:60ch}

/* ── HERO ─────────────────────────────────── */
.hero{min-height:calc(100dvh - var(--nav-h));display:grid;grid-template-columns:1fr;
  align-items:center;gap:var(--s8);padding:var(--s12) var(--s6);overflow:hidden;position:relative}
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;padding-top:var(--s16)}}
.hero-img-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;
  max-height:60vh;box-shadow:var(--sh-lg)}
@media(min-width:768px){.hero-img-wrap{max-height:72vh;order:1}}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero-content{display:flex;flex-direction:column;gap:var(--s4)}
.hero-eye{font-size:var(--xs);text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.hero-h1{font-family:var(--fd);font-size:var(--hero);font-weight:300;line-height:1.05}
.hero-sub{font-size:var(--base);color:var(--muted);max-width:50ch;line-height:1.6}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.hero-socials{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}
.social-pill{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--xs);
  padding:.4em 1em;border-radius:var(--r-full);border:1px solid var(--border);
  text-decoration:none;color:var(--muted)}
.social-pill:hover{border-color:var(--accent);color:var(--accent)}
.social-pill svg{flex-shrink:0}

/* ── MARQUEE ─────────────────────────────── */
.marquee-wrap{overflow:hidden;background:var(--accent);color:#fff;padding:var(--s3) 0}
.marquee-track{display:flex;gap:var(--s8);width:max-content;animation:marquee 24s linear infinite}
.marquee-track span{font-size:var(--sm);white-space:nowrap;letter-spacing:.06em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ── GALLERY ─────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s8)}
.filter-btn{padding:.4em 1.1em;border-radius:var(--r-full);border:1px solid var(--border);
  font-size:var(--sm);color:var(--muted);background:transparent}
.filter-btn:hover,.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.gallery{columns:2 180px;gap:var(--s3)}
@media(min-width:640px){.gallery{columns:3 200px}}
@media(min-width:1100px){.gallery{columns:4 200px}}
.gal-item{break-inside:avoid;margin-bottom:var(--s3);position:relative;cursor:pointer;
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface2)}
.gal-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gal-img{width:100%;display:block;transition:transform .4s ease}
.gal-item:hover .gal-img{transform:scale(1.04)}
.gal-cap{position:absolute;bottom:0;left:0;right:0;padding:var(--s3) var(--s4);
  background:linear-gradient(transparent,rgba(26,10,6,.72));color:#fff;font-size:var(--xs);
  opacity:0;transition:opacity var(--tr)}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1}
.pair-badge{position:absolute;top:var(--s2);right:var(--s2);background:var(--accent);color:#fff;
  font-size:.6rem;padding:.2em .6em;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.05em}
.gallery-empty{text-align:center;padding:var(--s16) var(--s8);color:var(--muted)}

/* ── USLUGI ─────────────────────────────── */
.uslugi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--s6)}
.usluga-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s8);transition:box-shadow var(--tr),transform var(--tr)}
.usluga-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.usluga-icon{font-size:1.8rem;margin-bottom:var(--s4)}
.usluga-card h3{font-family:var(--fd);font-size:var(--lg);font-weight:400;margin-bottom:var(--s3)}
.usluga-card p{font-size:var(--sm);color:var(--muted)}

/* ── STATS ─────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--s6);margin-bottom:var(--s10)}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s6) var(--s8);text-align:center;transition:box-shadow var(--tr)}
.stat-card:hover{box-shadow:var(--sh-md)}
.stat-num{font-family:var(--fd);font-size:var(--2xl);font-weight:300;color:var(--accent);display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:var(--s1)}
.stat-platform{font-size:.65rem;color:var(--faint);margin-top:var(--s1)}

/* ── WSPOLPRACE ─────────────────────────── */
.wspolprace-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s10) var(--s12);display:grid;gap:var(--s8);margin-top:var(--s8)}
@media(min-width:640px){.wspolprace-box{grid-template-columns:1fr auto;align-items:center}}
.wspolprace-box p{font-size:var(--base);color:var(--muted);max-width:52ch}

/* ── O MNIE ─────────────────────────────── */
.omnie-img{width:100%;border-radius:var(--r-xl);object-fit:cover;object-position:top center;max-height:520px;box-shadow:var(--sh-md)}
.omnie-text{color:var(--muted);margin-bottom:var(--s4);max-width:62ch}
.omnie-cechy{list-style:none;margin:var(--s6) 0;display:flex;flex-direction:column;gap:var(--s2)}
.omnie-cechy li{font-size:var(--sm);display:flex;align-items:flex-start;gap:var(--s2)}
.omnie-cechy li::before{content:'✓';color:var(--accent);flex-shrink:0}
.omnie-btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ── OPINIE ─────────────────────────────── */
.opinie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--s6)}
.opinia{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s8);display:flex;flex-direction:column;gap:var(--s4)}
.opinia-stars{color:var(--accent);letter-spacing:.1em}
.opinia-text{font-family:var(--fd);font-style:italic;font-size:var(--lg);font-weight:300;flex:1;line-height:1.55}
.opinia-autor{display:flex;flex-direction:column;gap:.2em;font-size:var(--xs);color:var(--muted)}
.opinia-autor strong{font-size:var(--sm);color:var(--text)}

/* ── FAQ ─────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s8)}
.faq-item{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.faq-q{padding:var(--s5) var(--s6);cursor:pointer;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);list-style:none;font-size:var(--sm)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';font-size:var(--lg);color:var(--accent);transition:transform var(--tr);flex-shrink:0}
details[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 var(--s6) var(--s5);color:var(--muted);font-size:var(--sm);line-height:1.7}
.faq-more{text-align:center;font-size:var(--sm);color:var(--muted)}
.faq-more a{color:var(--accent)}

/* ── KONTAKT ─────────────────────────────── */
.kontakt-grid{display:grid;gap:var(--s12)}
@media(min-width:768px){.kontakt-grid{grid-template-columns:1fr 1fr;align-items:start}}
.kontakt-cards{display:flex;flex-direction:column;gap:var(--s4)}
.kontakt-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  text-decoration:none;color:var(--text);transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr)}
.kontakt-card:hover{box-shadow:var(--sh-md);transform:translateX(3px);border-color:var(--accent)}
.kontakt-card svg{color:var(--accent);flex-shrink:0}
.kontakt-card-info{display:flex;flex-direction:column;gap:.15em}
.kontakt-card-label{font-size:var(--xs);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.kontakt-card-val{font-size:var(--sm);font-weight:500}
.kontakt-location{display:flex;align-items:center;gap:var(--s2);font-size:var(--sm);color:var(--muted);margin-top:var(--s6)}

/* FORM */
.contact-form{display:flex;flex-direction:column;gap:var(--s4)}
.form-group{display:flex;flex-direction:column;gap:var(--s2)}
.form-group label{font-size:var(--sm);font-weight:500;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);font-size:var(--sm);resize:vertical}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentHl)}
.form-group textarea{min-height:130px}
.form-hp{display:none}
.form-msg{padding:var(--s3) var(--s4);border-radius:var(--r-lg);font-size:var(--sm);display:none}
.form-msg.ok{background:#d4edda;color:#155724;display:block}
.form-msg.err{background:#f8d7da;color:#721c24;display:block}
.form-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3)}
.form-note{font-size:var(--xs);color:var(--muted)}

/* ── INSTAGRAM SECTION ───────────────────── */
.ig-grid{display:grid;gap:var(--s8)}
@media(min-width:640px){.ig-grid{grid-template-columns:1fr 1fr}}
.ig-account{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.ig-account-header{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s6);border-bottom:1px solid var(--border)}
.ig-account-header svg{color:var(--accent)}
.ig-account-handle{font-size:var(--sm);font-weight:500}
.ig-account-type{font-size:var(--xs);color:var(--muted)}
.ig-embed-wrap{padding:var(--s4)}

/* ── TIKTOK SECTION ─────────────────────── */
.tiktok-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6)}
.tiktok-icon{width:56px;height:56px;border-radius:var(--r-xl);background:#000;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tiktok-info{flex:1;min-width:200px}
.tiktok-info h3{font-family:var(--fd);font-size:var(--lg);font-weight:400;margin-bottom:var(--s2)}
.tiktok-info p{font-size:var(--sm);color:var(--muted)}

/* ── FOOTER ──────────────────────────────── */
.footer{background:var(--surface2);border-top:1px solid var(--border);padding:var(--s12) var(--s6) var(--s6)}
.footer-inner{max-width:var(--content-w);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:var(--s8);margin-bottom:var(--s8)}
@media(min-width:640px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.footer-inner{grid-template-columns:1.5fr 1fr 1fr}}
.footer-brand h3{font-family:var(--fd);font-style:italic;font-size:var(--xl);font-weight:300;margin-bottom:var(--s2)}
.footer-tagline{font-size:var(--xs);color:var(--muted)}
.footer-nav h4,.footer-social-col h4{font-size:var(--xs);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:var(--s4)}
.footer-nav ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.footer-nav a{font-size:var(--sm);color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--accent)}
.footer-social-links{display:flex;flex-direction:column;gap:var(--s3)}
.footer-social-link{display:flex;align-items:center;gap:var(--s2);font-size:var(--sm);color:var(--muted);text-decoration:none}
.footer-social-link:hover{color:var(--accent)}
.footer-bottom{max-width:var(--content-w);margin-inline:auto;border-top:1px solid var(--border);
  padding-top:var(--s4);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);
  font-size:var(--xs);color:var(--muted)}

/* ── LIGHTBOX ────────────────────────────── */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(15,5,3,.95);
  display:none;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s4)}
.lb.open{display:flex}
.lb-close{position:fixed;top:var(--s4);right:var(--s4);color:#fff;opacity:.7;z-index:1001;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);background:rgba(255,255,255,.1)}
.lb-close:hover{opacity:1;background:rgba(255,255,255,.2)}
.lb-content{max-width:min(90vw,900px);max-height:90dvh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:88dvh;border-radius:var(--r-lg);object-fit:contain}
.lb-nav{color:#fff;font-size:1.8rem;opacity:.5;padding:var(--s6);min-width:44px;
  display:flex;align-items:center;justify-content:center}
.lb-nav:hover{opacity:1}
@media(max-width:480px){.lb-nav{padding:var(--s3)}}
.lb-pair{display:none}
.pair-wrap{position:relative;max-width:min(88vw,840px);max-height:88dvh;overflow:hidden;
  border-radius:var(--r-lg);background:#000;line-height:0}
.pair-before{display:block;width:100%;height:auto}
.pair-after{position:absolute;inset:0;clip-path:inset(0 50% 0 0);width:100%;height:100%;object-fit:cover}
.pair-div{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;cursor:ew-resize;z-index:2}
.pair-range{position:absolute;inset:0;width:100%;opacity:0;cursor:ew-resize;z-index:3;height:100%;-webkit-appearance:none}
.pair-labels{display:flex;justify-content:space-between;padding:var(--s2) var(--s4);font-size:var(--xs);color:rgba(255,255,255,.6)}

/* ── REVEAL ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ═══════════════════════════════════════════
   SOCIAL SECTION — karty kont + galeria IG
═══════════════════════════════════════════ */

.social-accounts {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s12);
}
@media (min-width: 640px) {
  .social-accounts { grid-template-columns: repeat(3, 1fr); }
}
.social-account-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.social-account-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: var(--accent);
}
.social-account-card:active { transform: translateY(0); }
.sac-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--accentHl);
  color: var(--accent);
}
.sac-icon--tt {
  background: color-mix(in oklab, var(--text) 8%, var(--surface));
  color: var(--text);
}
.sac-body {
  flex: 1;
  display: flex; flex-direction: column; gap: .15em;
  min-width: 0;
}
.sac-handle {
  font-size: var(--sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sac-type { font-size: var(--xs); color: var(--muted); }
.sac-arrow {
  font-size: var(--base); color: var(--faint); flex-shrink: 0;
  transition: color var(--tr), transform var(--tr);
}
.social-account-card:hover .sac-arrow { color: var(--accent); transform: translate(2px,-2px); }

.ig-gallery-section { margin-top: var(--s10); }
.ig-gallery-footer {
  display: flex; justify-content: center; margin-top: var(--s8);
}
.ig-gallery-footer.hidden { display: none; }

.gal-badge-account {
  position: absolute; top: var(--s2); left: var(--s2);
  background: rgba(15,5,3,.55); color: #fff;
  font-size: .58rem; padding: .2em .55em;
  border-radius: var(--r-full); letter-spacing: .04em;
  text-transform: uppercase; backdrop-filter: blur(4px);
  pointer-events: none;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.gal-item--new { animation: fadeInUp .38s ease both; }
@media (prefers-reduced-motion: reduce) { .gal-item--new { animation: none; } }

.gal-item--error { background: var(--surface2); min-height: 180px; }
.gal-item--error img { display: none; }