/* ============================================================
      ✅ ADMIN-CONTROLLED INDEX (NO ADMIN PANEL CHANGES REQUIRED)
      - Reads settings from localStorage keys:
        stockpro_site_settings, stockpro_design_settings, stockpro_menus,
        stockpro_display_settings, stockpro_download_limits, stockpro_social,
        stockpro_featured_categories, stockpro_homepage_sections,
        stockpro_logo_img, stockpro_favicon, stockpro_head_code, stockpro_body_end_code,
        stockpro_published
      - Uses REAL AUTH + API:
        Worker routing: public/user/files/admin split-enabled
        POST /api/signup, POST /api/user-login
      - Download gating:
        Must have localStorage.customer_token else open Auth modal
    ============================================================ */

		 .container {
		  width: 100%;
		  max-width: 1400px;
		  margin-left: auto !important;
		  margin-right: auto !important;
		  padding-left: 24px;
		  padding-right: 24px;
		}

		.trending-grid,
		.hero-cats-grid,
		.testimonials-grid,
		#contributors-grid {
		  justify-content: center;
		}

		@media (max-width: 640px) {
		  .pagination-nav {
			gap: 4px !important;
		  }
		  .pg-btn {
			min-width: 32px !important;
			height: 32px !important;
			padding: 0 6px !important;
			font-size: 12px !important;
		  }
		}

    :root{
      --primary:#2563eb;
      --primary-dark:#1d4ed8;
      --primary-light:#dbeafe;

      --secondary:#0f172a;
      --accent:#f59e0b;

      --bg:#f8fafc;
      --surface:#ffffff;
      --surface2:#f1f5f9;
      --border:#e2e8f0;

      --text:#0f172a;
      --text-muted:#475569;
      --text-light:#526071;

      --success:#10b981;
      --danger:#ef4444;

      --radius:14px;
      --shadow:0 4px 24px -4px rgba(15,23,42,.08);
      --shadow-lg:0 20px 60px -10px rgba(15,23,42,.15);

      --font-heading:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

      --header-h:64px;
      --focus: 0 0 0 3px var(--primary-light);
    }

    .dark{
      --bg:#0a0f1e;
      --surface:#111827;
      --surface2:#1e293b;
      --border:#1e293b;

      --text:#f1f5f9;
      --text-muted:#cbd5e1;
      --text-light:#94a3b8;

      --shadow:0 4px 24px -4px rgba(0,0,0,.4);
      --shadow-lg:0 20px 60px -10px rgba(0,0,0,.55);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;overflow-x:clip}
    body{
      font-family:var(--font-body);
      background:var(--bg);
      color:var(--text);
      font-size:15px;
      line-height:1.6;
      min-height:100vh;
      overflow-x:clip;
      overscroll-behavior-x:none;
      transition:background .25s,color .25s;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button{cursor:pointer;border:none;background:none;font-family:inherit}
    input,select,textarea{font-family:inherit}
    ::selection{background:var(--primary);color:#fff}
    ::-webkit-scrollbar{width:6px;height:6px}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
    ::-webkit-scrollbar-thumb:hover{background:var(--primary)}

    /* ── Modern focus-visible styles (keyboard-only, not mouse clicks) ── */
    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--primary-light);
    }
    /* Remove default outline (replaced by focus-visible above) */
    :focus:not(:focus-visible) { outline: none; }

    /* ── Improved button active states for touch feedback ── */
    .btn-primary:active  { transform: scale(0.97) !important; }
    .btn-ghost:active    { transform: scale(0.97) !important; }
    .icon-btn:active     { transform: scale(0.93) !important; }
    .cat-pill:active     { transform: translateY(0) scale(0.97) !important; }
    .photo-card:active   { transform: translateY(-2px) !important; }

    /* ── Smoother card transitions ── */
    .photo-card {
      will-change: transform;
      contain: layout style;
    }

    /* ── Improved placeholder shimmer for lazy-loading images ── */
    .img-placeholder {
      background: linear-gradient(
        110deg,
        var(--surface2) 25%,
        var(--border) 50%,
        var(--surface2) 75%
      );
      background-size: 200% 100%;
      animation: shimmer 1.6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .img-placeholder { animation: none; }
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ── Pagination improvements ── */
    .pg-btn:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 1px;
    }

    /* ── Improved modal bottom sheet drag indicator on mobile ── */
    @media (max-width: 768px) {
      .modal-box::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border);
        border-radius: 999px;
        margin: 10px auto 0;
        flex-shrink: 0;
      }
    }
    /* Skip link — visually hidden until keyboard focus, never visible on mouse */
    .skip-link{
      position:fixed;
      top:-200px;left:0;
      width:1px;height:1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      pointer-events:none;
    }
    .skip-link:focus{
      top:0;
      width:auto;height:auto;
      overflow:visible;
      clip:auto;
      pointer-events:auto;
      z-index:99999;
      background:var(--primary);color:#fff;
      padding:10px 18px;
      font-size:14px;font-weight:700;
      text-decoration:none;
      border-radius:0 0 8px 0;
      outline:3px solid #fff;
      outline-offset:2px;
    }

    .btn-primary{
      padding:8px 16px;
      background:var(--primary);
      color:#fff;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:transform .15s,box-shadow .15s,background .15s;
      white-space:nowrap;
    }
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 10px 26px rgba(37,99,235,.22)}
    .btn-primary:focus{outline:none;box-shadow:var(--focus)}
    .btn-ghost{
      padding:8px 16px;
      background:var(--surface2);
      color:var(--text);
      border-radius:999px;
      font-size:13px;
      font-weight:600;
      border:1.5px solid var(--border);
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:border-color .15s,color .15s,background .15s;
      white-space:nowrap;
    }
    .btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
    .btn-ghost:focus{outline:none;box-shadow:var(--focus)}

    /* ================= HEADER ================= */
    #site-header{
      position:sticky;top:0;z-index:1000;
      height:var(--header-h);
      background:var(--surface);
      border-bottom:1px solid var(--border);
      display:flex;align-items:center;gap:16px;
      padding:0 24px;
      backdrop-filter:blur(12px);
      transition:transform .25s;
      overflow:visible;
    }
    /* Default element order — desktop flex only (mobile uses grid, order is separate) */
    @media (min-width: 769px) {
      #site-header a.logo              { order:1; flex-shrink:0; }
      #site-header #header-search-wrap { order:2; }
      #site-header #main-nav           { order:3; display:flex;align-items:center;gap:4px; }
      #site-header .header-actions     { order:100; margin-left:auto; flex-shrink:0; }
    }

    .logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .logo-icon{
      width:36px;height:36px;border-radius:10px;
      background:linear-gradient(135deg,var(--primary),#7c3aed);
      display:flex;align-items:center;justify-content:center;overflow:hidden;
    }
    .logo-icon img{width:100%;height:100%;object-fit:cover}
    .logo-icon i{color:#fff;font-size:16px}
    .logo-text{
      font-family:var(--font-heading);
      font-size:20px;font-weight:900;letter-spacing:-.5px;
    }
    .logo-text span{color:var(--primary)}

    .header-search{
      display:flex;align-items:center;
      position:relative;
      min-width:200px;
      transition:width .2s, background .2s;
    }
    .header-search input{
      width:100%;
      padding:10px 16px 10px 40px;
      background:var(--surface2);
      border:1.5px solid var(--border);
      border-radius:999px;
      font-size:14px;color:var(--text);
      outline:none;
      transition:border-color .15s,box-shadow .15s,background .15s;
      height:100%;
    }
    .header-search input:focus{border-color:var(--primary);background:var(--surface);box-shadow:var(--focus)}
    .header-search .search-icon{
      position:absolute;left:14px;top:50%;transform:translateY(-50%);
      color:var(--text-muted);font-size:14px;pointer-events:none;
    }
    .header-search .search-btn{
      position:absolute;right:4px;top:50%;transform:translateY(-50%);
      background:var(--primary);color:#fff;border:none;
      padding:6px 14px;border-radius:999px;
      font-size:13px;font-weight:800;
      transition:background .15s;
    }
    .header-search .search-btn:hover{background:var(--primary-dark)}
    .main-nav{display:flex;align-items:center;gap:4px;flex-shrink:0;}
    .nav-link{
      padding:7px 12px;border-radius:10px;
      font-size:14px;font-weight:600;
      color:var(--text-muted);
      transition:background .15s,color .15s;
      white-space:nowrap;
    }
    .nav-link:hover{color:var(--primary);background:var(--primary-light)}
    .header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}

    /* ── Testimonials Cards ── */
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 20px;
    }
    .tcard {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: box-shadow .2s, transform .2s;
    }
    .tcard:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-2px); }
    .tcard-stars { color: #f59e0b; font-size: 16px; letter-spacing: 2px; }
    .tcard-text  { font-size: 14px; line-height: 1.7; color: var(--text-muted); font-style: italic; flex: 1; }
    .tcard-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
    .tcard-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #fff; flex-shrink: 0; }
    .tcard-name { font-size: 14px; font-weight: 900; color: var(--text); }
    .tcard-role { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

    /* ── Admin-controlled nav design ── */
    #site-header.nav-custom { background: var(--nav-bg, var(--surface)) !important; }
    #site-header.nav-custom .nav-link { color: var(--nav-text, var(--text-muted)) !important; border-radius: var(--nav-radius, 10px) !important; font-size: var(--nav-fontsize, 14px) !important; font-weight: var(--nav-fontweight, 600) !important; }
    #site-header.nav-custom .nav-link:hover, #site-header.nav-custom .nav-link:focus { background: var(--nav-hover-bg, var(--primary-light)) !important; color: var(--nav-hover-text, var(--primary)) !important; }
    #site-header.nav-border { border-bottom: 2px solid var(--nav-border, rgba(148,163,184,.2)) !important; }

    /* ── Dropdown menus ── */
    .nav-has-dropdown { position: relative; }
    .nav-has-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 4px; }
    .nav-has-dropdown > .nav-link .nav-arrow { font-size: 9px; opacity: .7; transition: transform .2s; }
    .nav-has-dropdown:hover > .nav-link .nav-arrow { transform: rotate(180deg); }
    .nav-dropdown {
      display: none;
      position: absolute; top: calc(100% + 6px); left: 0;
      min-width: 180px;
      background: var(--nav-drop-bg, var(--surface));
      border-radius: 12px;
      padding: 6px 0;
      z-index: 999;
      box-shadow: 0 8px 30px rgba(0,0,0,.18);
      border: 1px solid var(--nav-border, var(--border));
      animation: dropIn .15s ease;
    }
    @keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    .nav-has-dropdown:hover .nav-dropdown { display: block; }
    .nav-dropdown a {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 16px;
      font-size: 13px; font-weight: 600;
      color: var(--nav-text, var(--text));
      transition: background .13s, color .13s;
      white-space: nowrap; text-decoration: none;
    }
    .nav-dropdown a:hover { background: var(--nav-hover-bg, var(--primary-light)); color: var(--nav-hover-text, var(--primary)); }
    .nav-dropdown a i { width: 16px; text-align: center; opacity: .7; font-size: 12px; }

    .header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
    .icon-btn{
      width:36px;height:36px;border-radius:50%;
      background:var(--surface2);
      border:1.5px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      color:var(--text-muted);font-size:15px;
      transition:background .15s,color .15s,border-color .15s,transform .15s;
    }
    .icon-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-1px)}
    .icon-btn:focus{outline:none;box-shadow:var(--focus)}

    .mobile-menu-btn{display:none;width:36px;height:36px;border-radius:10px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text-muted)}
    .mobile-menu-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

    .auth-btns{display:flex;gap:6px;align-items:center}

    /* user dropdown */
    .dd-link{
      display:flex;align-items:center;gap:10px;
      padding:9px 12px;border-radius:10px;
      font-size:14px;font-weight:600;color:var(--text);
      transition:background .15s;
    }
    .dd-link:hover{background:var(--surface2)}

    /* ================= MOBILE NAV ================= */
    .mobile-nav{
      display:none;
      position:fixed;inset:0;z-index:2000;
      background:var(--surface);
      flex-direction:column;
      transform:translateX(-100%);
      transition:transform .28s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .mobile-nav.open{transform:translateX(0);display:flex}

    /* ================= HERO ================= */
    #hero{
      position:relative;
      min-height:72vh;
      display:flex;align-items:center;justify-content:center;
      overflow:hidden;
      background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#0f172a 100%);
    }
    .hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px}
    .hero-bg-overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 30% 50%,rgba(37,99,235,.25) 0%,transparent 60%),radial-gradient(ellipse at 70% 20%,rgba(124,58,237,.2) 0%,transparent 50%)}

    /* Hero Photo Strip — columnar scroll */
    .hero-photo-strip{
      position:absolute;right:-20px;top:0;bottom:0;width:45%;
      display:flex;flex-direction:row;
      gap:10px;
      padding:0 16px;
      opacity:.35;z-index:1;
      transform:rotate(4deg) scale(1.08);
      pointer-events:none;
      overflow:hidden;
      contain:layout style paint;
      will-change:transform;
    }
    .hero-strip-col{
      display:flex;flex-direction:column;
      gap:10px;
      flex:1;
      min-width:0;
      will-change:transform;
      contain:layout style;
    }
    .hero-strip-col.col-up{
      animation:colScrollUp 20s linear infinite;
    }
    .hero-strip-col.col-down{
      animation:colScrollDown 24s linear infinite;
    }
    .hero-strip-col.col-up-slow{
      animation:colScrollUp 28s linear infinite;
    }
    @keyframes colScrollUp{
      0%   {transform:translateY(0)}
      100% {transform:translateY(-50%)}
    }
    @keyframes colScrollDown{
      0%   {transform:translateY(-50%)}
      100% {transform:translateY(0)}
    }
    .hero-strip-col .photo-thumb{
      border-radius:14px;
      background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.10);
      overflow:hidden;
      flex-shrink:0;
      width:100%;
    }
    .hero-strip-col .photo-thumb img{
      width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
    }

    .hero-content{
      position:relative;z-index:2;
      text-align:center;
      padding:60px 20px;
      max-width:820px;width:100%;
    }
    .hero-eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(37,99,235,.2);
      border:1px solid rgba(37,99,235,.4);
      color:#93c5fd;
      font-size:12px;font-weight:900;
      padding:6px 14px;border-radius:999px;
      margin-bottom:18px;
      text-transform:uppercase;letter-spacing:.08em;
      animation:fadeInDown .5s ease both;
    }
    .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#60a5fa;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
    @keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

    .hero-title{
      font-family:var(--font-heading);
      font-size:clamp(2.1rem,5vw,3.8rem);
      font-weight:900;
      color:#fff;
      letter-spacing:-.03em;
      line-height:1.08;
      margin-bottom:14px;
      animation:fadeInUp .55s ease .05s both;
    }
    .hero-title .accent{color:#60a5fa;position:relative}
    .hero-title .accent::after{
      content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;
      background:linear-gradient(90deg,#3b82f6,#7c3aed);
      border-radius:999px;transform-origin:left;animation:lineGrow .65s ease .35s both;
    }
    @keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    .hero-subtitle{
      font-size:1.05rem;
      color:rgba(255,255,255,.68);
      line-height:1.65;
      margin:0 auto 26px;
      max-width:680px;
      animation:fadeInUp .55s ease .12s both;
    }
    .hero-search{
      display:flex;
      background:rgba(255,255,255,.98);
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 20px 60px -10px rgba(0,0,0,.4);
      max-width:640px;width:100%;
      margin:0 auto 18px;
      animation:fadeInUp .55s ease .18s both;
    }
    .hero-search input{
      flex:1;min-width:0;
      padding:14px 16px;border:none;outline:none;
      font-size:14px;color:#0f172a;background:transparent;
    }
    .hero-search .category-select{
      border:none;border-left:1.5px solid #e2e8f0;
      padding:0 10px;font-size:13px;color:#475569;
      background:transparent;outline:none;cursor:pointer;
      min-width:110px;max-width:150px;
    }
    .hero-search-btn{
      margin:6px;
      padding:10px 22px;
      background:linear-gradient(135deg,var(--primary),#7c3aed);
      color:#fff;border:none;border-radius:12px;
      font-size:15px;font-weight:900;
      display:flex;align-items:center;gap:8px;
      transition:transform .15s,opacity .15s;
      white-space:nowrap;
    }
    .hero-search-btn:hover{opacity:.92;transform:scale(1.02)}
    .hero-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;animation:fadeInUp .55s ease .24s both}
    .hero-tag{
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.2);
      color:rgba(255,255,255,.85);
      padding:5px 14px;border-radius:999px;
      font-size:13px;font-weight:700;
      cursor:pointer;
      transition:transform .15s,background .15s,color .15s;
    }
    .hero-tag:hover{background:rgba(255,255,255,.22);color:#fff;transform:translateY(-1px)}
    .hero-stats{
      display:flex;gap:32px;justify-content:center;flex-wrap:wrap;
      margin-top:32px;padding-top:24px;
      border-top:1px solid rgba(255,255,255,.10);
      animation:fadeInUp .55s ease .3s both;
      min-height:72px; /* Reserve space to prevent CLS */
    }
    .hero-stat{text-align:center;min-width:110px;min-height:58px} /* Reserve height */
    .hero-stat .num{font-family:var(--font-heading);font-size:1.7rem;font-weight:900;color:#fff;min-height:2.1rem}
    .hero-stat .label{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}

    /* ================= CATEGORY BAR ================= */
    /* ================= CATEGORY BAR ================= */
    #category-bar{
      background:var(--surface);
      border-bottom:1px solid var(--border);
      position:-webkit-sticky; position:sticky;
      top:var(--header-h); z-index:990;
      padding:0 24px;
      min-height:56px; /* Reserve height to prevent CLS while pills load */
    }
    /* ================= CATEGORY BAR SLIDER ================= */
    .category-bar-inner {
      display: flex; align-items: center; gap: 6px;
      overflow-x: auto; scrollbar-width: none;
      scroll-behavior: smooth;
    }
    .category-bar-inner::-webkit-scrollbar { display: none; }

    .cat-nav-btn {
      display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--surface); border: 1.5px solid var(--border);
      color: var(--text-muted); cursor: pointer; flex-shrink: 0; z-index: 10;
      transition: all .2s; margin: 0 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .cat-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
    .cat-pill{
      flex-shrink:0;
      padding:7px 16px;border-radius:999px;
      font-size:13px;font-weight:900;
      background:var(--surface2);
      border:1.5px solid var(--border);
      color:var(--text-muted);
      cursor:pointer;
      transition:transform .15s;
      display:flex;align-items:center;gap:8px;
    }
    .dark .cat-pill:not(.active) {
      color: #cbd5e1;
      background: #1e293b;
      border-color: #334155;
    }
    .cat-pill:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);transform:translateY(-1px)}
    .cat-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
    .cat-pill .count{background:rgba(255,255,255,.2);color:inherit;font-size:11px;padding:1px 7px;border-radius:999px}
    .cat-pill:not(.active) .count{background:var(--border);color:inherit;}
    .dark .cat-pill:not(.active) .count {
      background: #334155;
      color: #f1f5f9;
    }

    /* ================= FEATURED CATS ================= */
    /* ── Performance: off-screen rendering skipped until needed ── */
    #hero-cats-section{padding:28px 24px 0;max-width:1400px;margin:0 auto;content-visibility:auto;contain-intrinsic-size:0 240px;min-height:240px}
    .hero-cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
    .hero-cat-card{
      position:relative;border-radius:14px;overflow:hidden;
      cursor:pointer;aspect-ratio:1;
      border:2px solid var(--border);
      background:var(--surface2);
      transition:transform .18s,box-shadow .18s,border-color .18s;
    }
    .hero-cat-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 16px 36px rgba(37,99,235,.20)}
    .hero-cat-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .22s}
    .hero-cat-card:hover img{transform:scale(1.07)}
    .hero-cat-card-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.70) 100%)}
    .hero-cat-card-name{
      position:absolute;left:0;right:0;bottom:0;
      padding:12px 10px 10px;
      text-align:center;color:#fff;
      font-family:var(--font-heading);
      font-size:13px;font-weight:900;
      text-shadow:0 1px 6px rgba(0,0,0,.55);
    }
    .hero-cat-card-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
    .hero-cat-card-empty .cat-emoji{font-size:2rem}

    /* ================= LAYOUT ================= */
    .page-layout{display:flex;gap:24px;max-width:1400px;margin:0 auto;padding:28px 24px}
    #filter-sidebar{width:250px;flex-shrink:0}
    #gallery-layout.sidebar-right #filter-sidebar{order:1}
    #gallery-layout.sidebar-right #gallery-main{order:-1}
    #gallery-layout.sidebar-right .gallery-toolbar{justify-content:flex-end !important}
    #gallery-layout.sidebar-right #toolbar-spacer{display:none !important}
    #gallery-layout:not(.sidebar-right) .gallery-toolbar{justify-content:flex-start !important}
    #gallery-layout:not(.sidebar-right) #toolbar-spacer{display:none !important}
    .sidebar-card{
      background:var(--surface);
      border:1.5px solid var(--border);
      border-radius:var(--radius);
      margin-bottom:14px;
      overflow:hidden;
    }
    .sidebar-card-head{
      padding:14px 16px;
      font-size:13px;font-weight:900;
      border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between;
    }
    .sidebar-card-body{padding:14px 16px}
    .filter-option{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
    .filter-option label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer}
    .filter-count{font-size:11px;background:var(--surface2);color:var(--text-muted);padding:2px 8px;border-radius:999px}

    #gallery-main{flex:1;min-width:0;min-height:400px} /* Prevent layout shift before photos load */
    .gallery-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
    .result-count{font-size:14px;color:var(--text-muted);flex:1}
    .sort-select{
      padding:7px 12px;border:1.5px solid var(--border);
      border-radius:10px;font-size:13px;background:var(--surface);
      color:var(--text);outline:none;cursor:pointer;
    }
    .sort-select:focus{box-shadow:var(--focus)}
    .view-toggle{display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
    .view-btn{padding:7px 12px;font-size:14px;color:var(--text-muted);transition:background .15s,color .15s}
    .view-btn.active{background:var(--primary);color:#fff}
    #filter-close-btn{display:none}
    /* Mobile toolbar: first row = Filters+Sort+ViewToggle, second row = Search full width */
    @media(max-width:640px){
      .gallery-toolbar{gap:6px}
      #toolbar-search-wrap{order:10;width:100%;flex:1 1 100%}
      #toolbar-search-wrap input{width:100% !important}
      #filter-toggle-btn{order:1}
      #sort-select{order:2;flex:1}
      .view-toggle{order:3}
      #result-num{order:0}
      #toolbar-spacer{display:none}
    }

    #photos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;min-height:400px}
    #photos-grid.list-view{grid-template-columns:1fr}
    #photos-grid.list-view .photo-card{display:flex;flex-direction:row;gap:0}
    #photos-grid.list-view .photo-card-img{width:160px;flex-shrink:0}
    #photos-grid.list-view .photo-card-img img,
    #photos-grid.list-view .img-placeholder{height:120px;aspect-ratio:auto}

    /* ================= PHOTO CARD ================= */
    .photo-card{
      background:var(--surface);
      border:1.5px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden;
      transition:transform .15s,box-shadow .15s,border-color .15s;
      cursor:pointer;
      position:relative;
    }
    .photo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
    .photo-card-img{position:relative;overflow:hidden}
    .photo-card-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
    .img-placeholder{
      aspect-ratio:4/3;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--surface2),var(--border));
      font-size:2rem;color:var(--text-light);
    }
    .photo-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2}
    .badge{
      position:relative;overflow:hidden;isolation:isolate;
      padding:4px 10px;border-radius:999px;
      font-size:11px;font-weight:900;
      text-transform:uppercase;letter-spacing:.05em;
      display:inline-flex;align-items:center;gap:6px;
      color:#fff;border:1px solid rgba(255,255,255,.18);
      box-shadow:0 6px 16px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.16);
      text-shadow:0 1px 1px rgba(0,0,0,.16);
    }
    .badge::before{
      content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
      background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%,rgba(0,0,0,.08) 100%);
    }
    .badge::after{
      content:"";position:absolute;top:0;left:-42%;width:42%;height:100%;pointer-events:none;
      background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent);
      transform:skewX(-20deg);opacity:.75;
    }
    .badge-free{background:linear-gradient(135deg,#10b981 0%,#059669 55%,#047857 100%);color:#fff;border-color:rgba(16,185,129,.34);box-shadow:0 7px 18px rgba(5,150,105,.28), inset 0 1px 0 rgba(255,255,255,.18)}
    .badge-premium{background:linear-gradient(135deg,#fb923c 0%,#f97316 48%,#ea580c 100%);color:#fff;border-color:rgba(249,115,22,.34);box-shadow:0 7px 18px rgba(249,115,22,.30), inset 0 1px 0 rgba(255,255,255,.18)}
    .badge-ai{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 52%,#6d28d9 100%);color:#fff;border-color:rgba(124,58,237,.34);box-shadow:0 7px 18px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.18)}

    /* Photo overlay — hidden by design, not used in this theme */
    .photo-overlay {
      display: none !important;
    }
    .overlay-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:8px;pointer-events:auto}
    .overlay-btn{
      width:36px;height:36px;border-radius:50%;
      background:rgba(255,255,255,.94);
      display:flex;align-items:center;justify-content:center;
      font-size:14px;color:#0f172a;
      transition:transform .15s,background .15s,color .15s;
    }
    .overlay-btn:hover{background:var(--primary);color:#fff;transform:scale(1.08)}
    .overlay-btn.download{background:var(--primary);color:#fff}
    .overlay-title{color:#fff;font-size:12px;font-weight:900;line-height:1.3}
    .overlay-meta{color:rgba(255,255,255,.72);font-size:11px;margin-top:3px}

    .photo-card-body{padding:10px 12px}
    .photo-card-cat{
      font-size:11px;color:var(--primary);font-weight:900;
      text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;
    }
    .photo-card-cat .cat2-label{
      font-size:11px;font-weight:900;text-transform:uppercase;
      letter-spacing:.06em;color:var(--primary);margin-left:5px;
    }
    .photo-card-title{
      font-size:13px;font-weight:800;color:var(--text);
      line-height:1.35;margin-bottom:6px;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .photo-card-meta{display:flex;align-items:center;gap:10px}
    .photo-card-stat{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-light);font-weight:800}
    .kw-tag{background:var(--surface2);color:var(--text-muted);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}

    .gallery-empty{grid-column:1/-1;text-align:center;padding:80px 20px}
    .gallery-empty .empty-icon{font-size:4rem;color:var(--text-light);margin-bottom:14px}
    .gallery-empty h3{font-family:var(--font-heading);font-size:1.6rem;font-weight:900;margin-bottom:8px}
    .load-more-wrap{text-align:center;margin-top:32px}
    .load-more-btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:12px 32px;border-radius:999px;
      background:var(--surface);border:1.5px solid var(--border);
      font-size:14px;font-weight:900;color:var(--text);
      transition:background .15s,color .15s,border-color .15s;
    }
    .load-more-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
    /* Numbered Pagination */
    .pagination-nav{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
    .pg-btn{
      min-width:38px;height:38px;padding:0 10px;border-radius:10px;
      border:1.5px solid var(--border);background:var(--surface);
      font-size:13px;font-weight:700;color:var(--text);cursor:pointer;
      display:inline-flex;align-items:center;justify-content:center;
      transition:all .15s;
    }
    .pg-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
    .pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
    .pg-btn:disabled{opacity:.4;cursor:default}
    .pg-btn.pg-dots{border:none;background:none;cursor:default;letter-spacing:2px}

    .badge-new{background:#f97316!important}
    .badge-hot{background:#ef4444!important}
    .card-like-btn{background:none;border:none;cursor:pointer;color:var(--text-light);font-size:13px;margin-top:4px;display:inline-flex;align-items:center;gap:4px;transition:color .15s;padding:0}
    .card-like-btn:hover{color:#ef4444}
    .photo-card-author{font-size:12px;color:var(--text-muted);margin-top:2px}
    .photo-card-date{font-size:12px;color:var(--text-muted);margin-top:2px}
    /* Card style classes */
    .card-style-flat{box-shadow:none!important;border:1.5px solid var(--border)!important}
    .card-style-minimal{box-shadow:none!important;border:none!important;background:transparent!important}
    /* ================= SECTIONS ================= */
    .section{padding:60px 0}
    .section-header{text-align:center;margin-bottom:40px}
    .section-eyebrow{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:10px}
    .section-title{font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;letter-spacing:-.02em}
    .trending-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .tags-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
    .cloud-tag{
      padding:7px 18px;background:var(--surface);
      border:1.5px solid var(--border);border-radius:999px;
      font-size:13px;font-weight:800;color:var(--text-muted);
      cursor:pointer;transition:transform .15s,background .15s,color .15s,border-color .15s;
    }
    .cloud-tag:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.04)}
    .cloud-tag.lg{font-size:15px;padding:9px 22px}
    .cloud-tag.sm{font-size:11px;padding:5px 13px}

    .newsletter-section{
      background:linear-gradient(135deg,#0f172a,#1e3a8a);
      padding:64px 0;text-align:center;
      border-radius:24px;margin:0 24px 64px;
    }
    .newsletter-section h2{font-family:var(--font-heading);font-size:2rem;font-weight:900;color:#fff;margin-bottom:12px}
    .newsletter-section p{color:rgba(255,255,255,.62);margin-bottom:28px}
    .newsletter-form{display:flex;gap:8px;max-width:460px;margin:0 auto}
    .newsletter-form input{
      flex:1;padding:14px 18px;border-radius:12px;
      border:1.5px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.10);
      color:#fff;font-size:15px;outline:none;
    }
    .newsletter-form input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.18)}
    .newsletter-form button{
      padding:14px 24px;background:var(--primary);color:#fff;
      border-radius:12px;font-weight:900;font-size:15px;
    }

    .section,
    .newsletter-section,
    #site-footer{
      content-visibility:auto;
      contain-intrinsic-size:1px 900px;
    }

    /* ================= FOOTER ================= */
    #site-footer{background:#0f172a;color:#cbd5e1;padding:56px 0 max(28px,env(safe-area-inset-bottom,28px))}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
    .footer-brand .logo-text{color:#ffffff !important;font-size:22px}
    .footer-brand .logo-text span{color:#93c5fd !important}
    .footer-brand p{color:#cbd5e1 !important;font-size:14px;line-height:1.7;margin:12px 0 20px;max-width:320px}
    .footer-social{display:flex;gap:10px;flex-wrap:wrap}
    .social-btn{
      width:44px !important;height:44px !important;border-radius:12px;
      background:#1e293b;
      border:1px solid #334155;
      display:flex;align-items:center;justify-content:center;
      color:#cbd5e1;
      transition:transform .15s,background .15s,border-color .15s,color .15s;
    }
    .social-btn:hover{background:var(--primary);border-color:var(--primary);color:#ffffff;transform:translateY(-2px)}
    .footer-col h3{
      font-family:var(--font-heading);
      font-size:14px;font-weight:900;color:#ffffff !important;
      text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px
    }
    .footer-links{list-style:none;display:flex;flex-direction:column;gap:8px}
    .footer-links a{display:inline-flex;align-items:center;min-height:32px;font-size:15px;color:#cbd5e1 !important;transition:color .15s;font-weight:700}
    .footer-links a:hover{color:#ffffff !important}
    .footer-bottom{border-top:1px solid #334155;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .footer-bottom p{font-size:14px;color:#cbd5e1 !important;font-weight:700}

    /* ================= MODAL (Photo) ================= */
    .modal-overlay{
      position:fixed;inset:0;
      background:rgba(0,0,0,.75);
      backdrop-filter:blur(8px);
      z-index:2000;
      display:flex;align-items:center;justify-content:center;
      padding:20px;
      opacity:0;pointer-events:none;
      transition:opacity .2s;
      overscroll-behavior: none;
      touch-action: none;
    }
    .modal-overlay.open{opacity:1;pointer-events:auto}
    .modal-box{
      background:var(--surface);
      border-radius:20px;
      width:95vw;max-width:1200px;max-height:92vh;
      transform:scale(.96);
      transition:transform .2s;
      position:relative;
      display:flex;flex-direction:column;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
    }
    .modal-overlay.open .modal-box{transform:scale(1)}
    .modal-body-grid{display:grid;grid-template-columns:1fr 320px;flex:1;min-height:0;overflow:hidden}
    /* ================= DESKTOP MODAL IMAGE FIX ================= */
    .modal-img-area {
      background: var(--surface);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; min-height: 480px;
    }
    .modal-img-area img {
      width: 100% !important;
      height: 100% !important;
      max-height: 90vh !important;
      object-fit: contain !important;
      background: transparent !important;
    }
    .modal-info-panel{
      padding:20px 18px;
      display:flex;flex-direction:column;gap:10px;
      border-left:1px solid var(--border);
      overflow:auto;min-height:0;
    }
    .modal-bottom-panel{padding:16px 20px;border-top:1px solid var(--border);flex-shrink:0}
    .modal-close{
      position:absolute;top:12px;right:12px;z-index:2100;
      width:38px;height:38px;border-radius:50%;
      background:rgba(255,255,255,.95);
      box-shadow:0 2px 12px rgba(0,0,0,.2);
      display:flex;align-items:center;justify-content:center;
      color:#0f172a;
      transition:transform .15s;
    }
    .modal-close:hover{background:var(--danger);color:#fff;transform:scale(1.03)}
    .modal-action-sm{
      flex:1;padding:9px;border-radius:12px;
      background:var(--surface2);border:1.5px solid var(--border);
      font-size:13px;font-weight:900;color:var(--text);
      display:flex;align-items:center;justify-content:center;gap:8px;
      transition:border-color .15s,color .15s,background .15s;
    }
    .modal-action-sm:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
    .kw{
      background:var(--surface2);color:var(--text-muted);
      padding:4px 12px;border-radius:999px;
      font-size:12px;font-weight:800;cursor:pointer;
      transition:background .15s,color .15s,transform .15s;
      white-space:nowrap;
    }
    .kw:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}

    /* ================= TOAST ================= */
    .toast{
      position:fixed;
      bottom:max(24px,env(safe-area-inset-bottom,24px));
      right:max(16px,env(safe-area-inset-right,16px));
      z-index:9999;
      background:var(--secondary);color:#fff;
      padding:12px 20px;border-radius:12px;
      font-size:14px;font-weight:700;
      box-shadow:var(--shadow-lg);
      transform:translateY(80px);opacity:0;
      transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s cubic-bezier(.4,0,.2,1);
      pointer-events:none;
      max-width:calc(100vw - 32px);
      word-break:break-word;
    }
    .toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
    .toast.success{background:#065f46}
    .toast.error{background:#7f1d1d}
    .toast.info{background:#1e40af}

    /* ================= REVEAL ================= */
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s}
    .reveal.visible{opacity:1;transform:translateY(0)}

    /* ================= AUTH MODAL ================= */
    .auth-modal-overlay {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0,0,0,.65) !important;
      backdrop-filter: blur(8px) !important;
      z-index: 3000 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
    }
    .auth-modal-box {
      background: var(--surface) !important;
      border-radius: 20px !important;
      width: 100% !important;
      max-width: 420px !important;
      padding: 36px 32px 28px !important;
      position: relative !important;
      box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
      transform: scale(1) !important;
      max-height: none !important;
      height: auto !important;
      min-height: 0 !important;
      display: block !important;
      overflow: visible !important;
      flex-direction: unset !important;
    }
    .auth-modal-close {
      position: absolute !important;
      top: 14px !important; right: 14px !important;
      width: 34px !important; height: 34px !important;
      border-radius: 50% !important;
      background: var(--surface2) !important;
      border: 1.5px solid var(--border) !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      color: var(--text-muted) !important;
      cursor: pointer !important;
      font-size: 14px !important;
      transition: background .15s, color .15s !important;
    }
    .auth-modal-close:hover { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }
    .auth-input {
      width: 100% !important;
      padding: 12px 16px !important;
      border: 1.5px solid var(--border) !important;
      border-radius: 12px !important;
      font-size: 14px !important;
      background: var(--surface2) !important;
      color: var(--text) !important;
      outline: none !important;
      margin-bottom: 10px !important;
      transition: border-color .15s, box-shadow .15s !important;
      display: block !important;
    }
    .auth-input:focus { border-color: var(--primary) !important; box-shadow: var(--focus) !important; background: var(--surface) !important; }

    /* Force SweetAlert above user dashboard overlay (z-index 3000) */
    .swal-above-dashboard.swal2-container { z-index: 9999 !important; }

    /* ================= USER DASHBOARD MODAL ================= */
    .user-dashboard-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(10px);
      z-index: 3000;
      display: flex; align-items: center; justify-content: center;
      padding: 16px;
      opacity: 0; pointer-events: none;
      transition: opacity .22s;
      overscroll-behavior: none;
      touch-action: none;
    }
    .user-dashboard-overlay.open { opacity: 1; pointer-events: auto; }
    .user-dashboard-box {
      background: var(--surface);
      border-radius: 22px;
      width: 100%; max-width: 720px;
      height: 90vh; max-height: 780px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,.28);
      display: flex; flex-direction: column;
      transform: scale(.95) translateY(16px);
      transition: transform .22s;
    }
    .user-dashboard-overlay.open .user-dashboard-box { transform: scale(1) translateY(0); }
    .udb-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0; background: var(--surface);
    }
    .udb-tabs {
      display: flex; gap: 4px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2); flex-shrink: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    .udb-tabs::-webkit-scrollbar { display: none; }
    .udb-tab {
      padding: 8px 14px; border-radius: 10px;
      font-size: 13px; font-weight: 700; color: var(--text-muted);
      cursor: pointer; transition: background .15s, color .15s;
      border: none; background: none;
      display: flex; align-items: center; gap: 6px;
      white-space: nowrap; flex-shrink: 0;
    }
    .udb-tab.active { background: var(--primary); color: #fff; }
    .udb-tab:hover:not(.active) { background: var(--border); color: var(--text); }
    .udb-body { flex: 1; overflow-y: auto; padding: 24px; }
    .udb-profile-card {
      background: linear-gradient(135deg, #1d4ed8, #7c3aed);
      border-radius: 20px; padding: 28px 24px;
      color: #fff; text-align: center; margin-bottom: 20px;
      position: relative; overflow: hidden;
    }
    .udb-profile-card::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 60%);
    }
    .udb-avatar-wrap { position: relative; width: 88px; margin: 0 auto 14px; }
    .udb-avatar {
      width: 88px; height: 88px; border-radius: 50%;
      background: rgba(255,255,255,.2);
      border: 3px solid rgba(255,255,255,.4);
      overflow: hidden;
      display: flex; align-items: center; justify-content: center; font-size: 36px;
    }
    .udb-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .udb-avatar-edit {
      position: absolute; bottom: 0; right: 0;
      width: 26px; height: 26px; border-radius: 50%;
      background: #fff; color: var(--primary);
      border: 2px solid var(--primary);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; cursor: pointer; transition: transform .15s;
    }
    .udb-avatar-edit:hover { transform: scale(1.1); }
    .udb-daily-bar {
      background: rgba(255,255,255,.15);
      border-radius: 12px; padding: 12px 16px;
      margin-top: 16px; position: relative; z-index: 1;
    }
    .udb-daily-bar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .udb-daily-bar-label { font-size: 12px; font-weight: 800; opacity: .9; }
    .udb-daily-bar-nums { font-size: 13px; font-weight: 900; }
    .udb-progress-track { background: rgba(255,255,255,.25); border-radius: 999px; height: 7px; overflow: hidden; }
    .udb-progress-fill { height: 100%; border-radius: 999px; background: #fff; transition: width .4s ease; }
    .udb-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; }
    .udb-stat-card {
      background: var(--surface2); border: 1.5px solid var(--border);
      border-radius: 14px; padding: 16px 10px; text-align: center;
      transition: border-color .15s, transform .15s;
    }
    .udb-stat-card:hover { border-color: var(--primary); transform: translateY(-2px); }
    .udb-stat-card .num { font-size: 1.6rem; font-weight: 900; font-family: var(--font-heading); color: var(--text); }
    .udb-stat-card .lbl { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-top: 4px; }
    .udb-stat-card .ico { font-size: 16px; color: var(--primary); margin-bottom: 6px; }
    .udb-info-card { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
    .udb-info-card-head { padding: 13px 18px; font-size: 13px; font-weight: 900; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; color: var(--text); }
    .udb-info-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
    .udb-info-row:last-child { border-bottom: none; }
    .udb-info-row .key { color: var(--text-muted); font-weight: 600; }
    .udb-info-row .val { font-weight: 800; color: var(--text); }
    .udb-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .udb-empty i { font-size: 3rem; margin-bottom: 14px; display: block; opacity: .3; }
    .udb-empty p { font-size: 14px; font-weight: 700; }
    .udb-dl-item {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 14px; border: 1.5px solid var(--border);
      border-radius: 12px; margin-bottom: 10px; background: var(--surface2);
      transition: border-color .15s;
    }
    .udb-dl-item:hover { border-color: var(--primary); }
    .udb-dl-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
    .udb-dl-info { flex: 1; min-width: 0; }
    .udb-dl-title { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .udb-dl-meta { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
    .udb-avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
    .udb-avatar-option { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: border-color .15s, transform .15s; }
    .udb-avatar-option:hover { border-color: var(--primary); transform: scale(1.05); }
    .udb-avatar-option.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
    .udb-avatar-option img { width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 600px) {
      .auth-modal-box { padding: 28px 18px 22px !important; border-radius: 16px !important; }
      .user-dashboard-box { border-radius: 18px; height: 95vh; max-height: 95vh; }
      .udb-stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 100%; }
      .udb-body { padding: 16px; }
      /* Tabs: icon only on very small screens, text visible via scroll */
      .udb-tabs {
        padding: 6px 8px;
        gap: 4px;
        flex-wrap: wrap;
        overflow-x: visible;
      }
      .udb-tab {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
        flex: 1 1 auto;
        justify-content: center;
        min-width: 60px;
      }
      .udb-tab i { font-size: 12px; }
      /* Header compact on mobile */
      .udb-header { padding: 14px 16px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
      .reveal{opacity:1!important;transform:none!important}
    }

    /* ================= RESPONSIVE ================= */
    /* grid columns controlled by admin via #admin-grid-style */
    @media (max-width:1200px){
      .hero-cats-grid{grid-template-columns:repeat(4,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .trending-grid{grid-template-columns:repeat(3,1fr)}
      .modal-body-grid{grid-template-columns:1fr 280px}
    }
    @media (max-width:900px){
      #filter-sidebar{
        display:none;
        position:fixed;
        top:0; left:0; right:0; bottom:0;
        width:100%;
        max-width:340px;
        height:100dvh;
        overflow-y:auto;
        z-index:10000;
        background:var(--surface);
        box-shadow:4px 0 30px rgba(0,0,0,0.18);
        padding:16px;
        margin:0;
      }
      #filter-sidebar.show-mobile{display:block !important;}
      #filter-close-btn{display:flex !important;}
      /* Dark backdrop behind filter overlay */
      #filter-mobile-backdrop{
        display:none;
        position:fixed;inset:0;
        background:rgba(0,0,0,0.45);
        z-index:9999;
        overscroll-behavior: none;
        touch-action: none;
      }
      #filter-mobile-backdrop.show{display:block;}
      .page-layout{padding:14px 12px;gap:0; flex-direction:column;}
      /* #photos-grid cols at 900px set by admin */
      .header-search,.main-nav{display:none!important}
      .mobile-menu-btn{display:flex!important}
      .hero-cats-grid{grid-template-columns:repeat(3,1fr)}
      .trending-grid{grid-template-columns:repeat(3,1fr)}
      #hero{min-height:55vh}
    }
    @media (max-width:680px){
      /* #photos-grid cols at 680px set by admin */
      .hero-photo-strip{display:none!important}
      .modal-overlay{padding:0!important;align-items:flex-end!important}
      .modal-box{width:100vw!important;max-width:100vw!important;height:95vh!important;max-height:95vh!important;border-radius:22px 22px 0 0!important}
      .modal-body-grid{display:flex!important;flex-direction:column!important;overflow:auto!important}
      .modal-img-area{min-height:220px!important;max-height:35vh!important}
      .modal-info-panel{border-left:none!important;border-top:1px solid var(--border)!important}
    }
    @media (max-width:480px){
      :root{--header-h:56px}
      .container{padding:0 12px}
      #site-header{padding:0 12px;gap:8px}
      .logo-icon{width:30px;height:30px;border-radius:8px}
      .logo-text{font-size:16px}
      #hero{min-height:44vh}
      .hero-content{padding:36px 12px}
      .hero-title{font-size:clamp(1.5rem,7vw,2.0rem)!important}
      .hero-search{border-radius:12px;width:100%}
      .hero-search input{padding:11px 12px;font-size:13px}
      .hero-search-btn{padding:8px 12px;font-size:12px;margin:4px}
      .hero-search .category-select{min-width:80px;max-width:110px;font-size:11px}
      .trending-grid{grid-template-columns:repeat(2,1fr);gap:10px}
      /* ================= MOBILE FOOTER FIX ================= */
      .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 10px;
      }
      .footer-col h3 {
        font-size: 11px !important;
        margin-bottom: 12px;
      }
      .footer-links a {
        font-size: 12px !important;
      }
      .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
      }
      .footer-brand .logo {
        justify-content: center;
      }
      .footer-brand p {
        margin: 12px auto 20px;
      }
      .footer-social {
        justify-content: center;
      }
      .newsletter-form{flex-direction:column}
      .hero-cats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    }

  /* ============================================================
     📱 MOBILE HEADER — 3-zone layout:
        [Profile/Login Icon]  [LOGO centered]  [☰ Hamburger]
     ============================================================ */

  @media (max-width: 768px) {

    /* ── Header: 3-column grid layout ── */
    #site-header {
      display: grid !important;
      grid-template-columns: 48px 1fr 48px !important;
      align-items: center !important;
      padding: 0 12px !important;
      gap: 0 !important;
      height: var(--header-h) !important;
    }

    /* ── Logo: perfectly centered ── */
    #site-header .logo {
      grid-column: 2 !important;
      justify-self: center !important;
      position: static !important;
      transform: none !important;
    }

    /* ── Desktop search + nav: hidden ── */
    .header-search,
    .main-nav {
      display: none !important;
    }

    /* ── Desktop header-actions: only hamburger stays, rest hidden ── */
    .header-actions {
      grid-column: 3 !important;
      justify-self: end !important;
      display: flex !important;
      align-items: center !important;
      gap: 0 !important;
      margin: 0 !important;
      width: auto !important;
    }

    /* Hide desktop-only buttons inside header-actions on mobile */
    #dark-btn,
    #user-menu-wrap,
    #auth-btns-wrap {
      display: none !important;
    }

    /* ── Hamburger button (right) ── */
    .mobile-menu-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 10px !important;
      background: var(--surface2) !important;
      border: 1.5px solid var(--border) !important;
      color: var(--text) !important;
      font-size: 17px !important;
      box-shadow: none !important;
    }

    /* Grid position for mobile-left-btn inside the 3-col grid */
    #mobile-left-btn {
      grid-column: 1 !important;
      grid-row: 1 !important;
      order: -1 !important;
      justify-self: start !important;
      display: flex !important;    /* show on mobile */
      align-items: center !important;
    }
    /* Inner buttons */
    #mobile-profile-btn,
    #mobile-login-icon-btn {
      align-items: center !important;
    }

    /* ── Mobile NAV menu ── */
    /* ── Mobile Nav — Professional ── */
    .mnav-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 14px 16px !important;
      border-bottom: 1px solid var(--border) !important;
      flex-shrink: 0 !important;
      background: var(--surface) !important;
    }
    .mnav-icon-btn {
      width: 40px !important; height: 40px !important;
      border-radius: 50% !important;
      background: var(--surface2) !important;
      border: 1.5px solid var(--border) !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      color: var(--text-muted) !important; font-size: 15px !important; cursor: pointer !important;
      transition: all .15s !important; flex-shrink: 0 !important;
    }
    .mnav-icon-btn:active { background: var(--primary-light) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
    .mnav-logo {
      display: flex !important; align-items: center !important; gap: 8px !important;
      text-decoration: none !important;
    }
    .mnav-logo-icon {
      width: 32px !important; height: 32px !important; border-radius: 9px !important;
      background: linear-gradient(135deg, var(--primary), #7c3aed) !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      overflow: hidden !important; flex-shrink: 0 !important;
    }
    .mnav-logo-icon i, .mnav-logo-icon img { color: #fff !important; font-size: 15px !important; }
    .mnav-logo-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .mnav-logo-text {
      font-family: var(--font-heading) !important;
      font-size: 19px !important; font-weight: 900 !important; letter-spacing: -.5px !important;
      color: var(--text) !important;
    }
    .mnav-logo-text span { color: var(--primary) !important; }

    /* Links */
    .mnav-links {
      flex: 1 !important; overflow-y: auto !important; overscroll-behavior: contain !important;
      padding: 12px 14px !important;
      display: flex !important; flex-direction: column !important; gap: 4px !important;
    }
    .mnav-links a {
      display: flex !important; align-items: center !important; justify-content: space-between !important;
      padding: 13px 16px !important; border-radius: 12px !important;
      font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important;
      text-decoration: none !important; transition: background .12s, color .12s !important;
      background: transparent !important; border: none !important;
    }
    .mnav-links a:hover, .mnav-links a:active { background: var(--surface2) !important; color: var(--primary) !important; }
    .mnav-links a::after {
      content: '\f054'; font-family: "Font Awesome 6 Free"; font-weight: 900;
      font-size: 10px; color: var(--text-light); opacity: .6;
    }
    #mobile-nav-logo-link::after { display: none !important; }

    /* Footer */
    .mnav-footer {
      padding: 14px 14px 20px !important;
      border-top: 1px solid var(--border) !important;
      flex-shrink: 0 !important;
      background: var(--surface) !important;
    }
    .mnav-btn {
      width: 100% !important; justify-content: center !important;
      padding: 13px !important; border-radius: 14px !important;
      font-size: 15px !important; font-weight: 800 !important;
    }

    /* Profile card */
    .mnav-profile-card {
      display: flex !important; align-items: center !important; gap: 12px !important;
      padding: 14px !important;
      background: linear-gradient(135deg, var(--primary-light), transparent) !important;
      border: 1.5px solid var(--primary) !important;
      border-radius: 14px !important; margin-bottom: 2px !important;
    }
    .mnav-profile-avatar {
      width: 48px !important; height: 48px !important;
      border-radius: 50% !important;
      background: var(--primary-light) !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      overflow: hidden !important; flex-shrink: 0 !important;
      border: 2px solid var(--primary) !important;
    }
    .mnav-profile-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .mnav-profile-info { min-width: 0 !important; flex: 1 !important; }
    .mnav-profile-name  { font-size: 15px !important; font-weight: 900 !important; color: var(--text) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    .mnav-profile-email { font-size: 12px !important; color: var(--text-muted) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin-top: 2px !important; }

    /* Quick-action row */
    .mnav-quick-links {
      display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
    }
    .mnav-quick-btn {
      display: flex !important; flex-direction: column !important; align-items: center !important;
      gap: 5px !important; padding: 10px 6px !important;
      background: var(--surface2) !important; border: 1.5px solid var(--border) !important;
      border-radius: 12px !important; font-size: 11px !important; font-weight: 700 !important;
      color: var(--text-muted) !important; cursor: pointer !important; transition: all .15s !important;
    }
    .mnav-quick-btn i { font-size: 16px !important; color: var(--primary) !important; }
    .mnav-quick-btn:active { background: var(--primary-light) !important; border-color: var(--primary) !important; color: var(--primary) !important; }

    /* Logout */
    .mnav-logout-btn {
      width: 100% !important; display: flex !important; align-items: center !important;
      justify-content: center !important; gap: 8px !important;
      padding: 12px !important; border-radius: 12px !important;
      background: #fef2f2 !important; border: 1.5px solid #fca5a5 !important;
      color: #ef4444 !important; font-size: 14px !important; font-weight: 800 !important;
      cursor: pointer !important; transition: background .15s !important;
    }
    .dark .mnav-logout-btn { background: #450a0a !important; border-color: #7f1d1d !important; }
    .mnav-logout-btn:active { background: #fee2e2 !important; }

    /* ── MODAL: bottom sheet ── */
    .modal-overlay {
      padding: 0 !important;
      align-items: flex-end !important;
    }
    .mobile-only-logo { display: block !important; }
    .modal-box {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 96dvh !important;
      max-height: 96dvh !important;
      border-radius: 22px 22px 0 0 !important;
      display: block !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch;
    }
    .modal-mobile-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      height: 54px; min-height: 54px !important;
      padding: 0 16px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky !important;
      top: 0 !important;
      z-index: 9999 !important;
    }
    .modal-close {
      position: relative !important;
      top: auto !important; right: auto !important;
      width: 36px !important; height: 36px !important;
      background: var(--surface2) !important;
      border: none !important; box-shadow: none !important;
      color: var(--text) !important;
      font-size: 18px !important; border-radius: 50% !important;
      display: flex !important;
      align-items: center !important; justify-content: center !important;
    }
    .modal-body-grid { display: block !important; height: auto !important; overflow: visible !important; }
    .modal-img-area { min-height: auto !important; height: auto !important; padding: 0 !important; background: var(--surface2) !important; overflow: visible !important; }
    .modal-img-area img { max-height: 42vh !important; width: 100% !important; margin: 0 auto !important; object-fit: contain !important; background: transparent !important; }
    .modal-info-panel, .modal-bottom-panel {
      border-left: none !important;
      border-top: 1px solid var(--border) !important;
      overflow: visible !important; height: auto !important;
      padding: 20px 16px !important;
    }
    .modal-bottom-panel { padding-bottom: 56px !important; }

    /* ── User dropdown on mobile: full-width below header ── */
    #user-dropdown {
      position: fixed !important;
      top: var(--header-h) !important;
      left: 8px !important; right: 8px !important;
      width: auto !important; z-index: 5000 !important;
    }
  }

  /* ── mobile-left-btn: hidden on desktop, shown only on mobile ── */
  @media (min-width: 769px) {
    #mobile-left-btn { display: none !important; }
  }

	/* ================= RELATED SLIDER NAV ================= */
    .rel-nav-btn {
      position: absolute; top: 55%; transform: translateY(-50%);
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--surface); border: 1.5px solid var(--border);
      color: var(--text-muted); display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10; transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .rel-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
    /* ================= SLIDER ARROWS POSITION ================= */
    #rel-prev, #kw-prev { left: -10px; }
    #rel-next, #kw-next { right: -10px; }
    #modal-related-scroll::-webkit-scrollbar { display: none; }
	/* ================= HIDE KEYWORD SCROLLBAR ================= */
    #modal-keywords::-webkit-scrollbar { display: none; }

	/* ================= SIDEBAR SCROLL & FADE ================= */
    .sidebar-fade-bottom {
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 45px;
      background: linear-gradient(to bottom, transparent, var(--surface) 85%);
      pointer-events: none;
      border-radius: 0 0 var(--radius) var(--radius);
    }
    .custom-scroll::-webkit-scrollbar { width: 4px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary); }

    /* ── PERFORMANCE: content-visibility for off-screen sections ── */
    #trending-section,#latest-uploads-section,#tags-section,
    #newsletter-section,#testimonials-section,#trusted-brands-section,
    #contributors-section,#premium-banner-section {
      content-visibility: auto;
      contain-intrinsic-size: 0 400px;
    }

    /* ── MOBILE: font-size minimum 12px (Lighthouse legibility fix) ── */
    @media (max-width: 768px) {
      .photo-card-cat, .photo-card-stat, .overlay-meta, .cloud-tag.sm, .filter-count,
      .cat-pill .count, .photo-card-author, .photo-card-date, .badge-new, .badge-hot,
      .kw-tag, .cat2-label, .stat-label, .hero-eyebrow, .tcard-role, .footer-bottom p,
      .badge, .photo-card-title { font-size: 12px !important; }

      /* Tap targets — all interactive elements min 44×44px on mobile */
      .overlay-btn, .cat-nav-btn, .rel-nav-btn, .modal-close, .auth-modal-close, .mnav-icon-btn, .social-btn, .icon-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
      button[id$="-close"] { min-width: 44px !important; min-height: 44px !important; }
      .pg-btn { min-width: 44px !important; height: 44px !important; }
      .cat-pill { padding: 10px 16px !important; min-height: 44px !important; }
      .cloud-tag { padding: 10px 18px !important; min-height: 44px !important; }
      .cloud-tag.sm { padding: 10px 14px !important; font-size: 12px !important; }
      .card-like-btn { min-width: 44px !important; min-height: 44px !important; padding: 8px !important; }
      .load-more-btn { min-height: 48px !important; font-size: 14px !important; }
      #btn-clear-filters { min-height: 44px !important; padding: 10px 14px !important; font-size: 13px !important; }
      .btn-primary, .btn-ghost { min-height: 44px !important; padding: 10px 18px !important; }
      .hero-tag { padding: 10px 18px !important; min-height: 44px !important; font-size: 13px !important; }
      .hero-search-btn { min-height: 48px !important; padding: 12px 22px !important; }
      .header-search .search-btn { min-height: 44px !important; padding: 8px 16px !important; }
      .dd-link { min-height: 44px !important; padding: 11px 12px !important; }
      .filter-label, .filter-option label { min-height: 44px !important; display: flex; align-items: center; padding: 6px 0 !important; cursor: pointer; }
      .footer-links a { min-height: 44px !important; display: flex; align-items: center; }
    }

    /* ── MOBILE FIX: modal close button keeps desktop look, only auto-sizes on mobile ── */
    @media (max-width: 768px) {
      #btn-modal-close {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
      }
    }

    /* ── CLS: reserve space for dynamically-loaded category bar ── */
    #category-bar { min-height: 56px; }
    #category-pills { min-height: 40px; display: flex; align-items: center; }

    /* ── CLS: photo grid minimum height before JS loads cards ── */
    #photos-grid:empty { min-height: 400px; }
    #photos-grid .photo-card { contain: content; }
    .hero-photo-strip { contain: strict; }
  

    #site-global-preloader {
      position: fixed; inset: 0; z-index: 9999999;
      background: var(--bg);
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    }
    .preloader-logo-box {
      width: 64px; height: 64px; border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), #7c3aed);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
      animation: pulse-glow 2s infinite ease-in-out;
      margin-bottom: 20px;
    }
    .preloader-logo-box i {
      color: #fff; font-size: 28px;
    }
    .preloader-text {
      font-family: var(--font-heading);
      font-size: 24px; font-weight: 900; letter-spacing: -0.5px;
      color: var(--text);
      margin-bottom: 18px;
    }
    .preloader-text span {
      color: var(--primary);
    }
    .preloader-bar-container {
      width: 140px; height: 4px;
      background: var(--surface2);
      border-radius: 999px; overflow: hidden;
      position: relative;
    }
    .preloader-bar {
      position: absolute; top: 0; left: 0; height: 100%; width: 50%;
      background: linear-gradient(90deg, transparent, var(--primary), transparent);
      border-radius: 999px;
      animation: loading-slide 1.2s infinite ease-in-out;
    }
    @keyframes pulse-glow {
      0% { transform: scale(1); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3); }
      50% { transform: scale(1.08); box-shadow: 0 15px 35px rgba(124, 58, 237, 0.5); }
      100% { transform: scale(1); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3); }
    }
    @keyframes loading-slide {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(200%); }
    }
  

      @keyframes contactSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }