/*
  Page shell, hero card, line/card/showcase/asset cards, roadmap, resources
  socials, floating photos and shared responsive rules.
  Linked LAST (after admin.css) to keep the original cascade order of the
  former inline <style> block.
*/
    .page{
      width:min(1600px, 92vw);
      margin:0 auto;
      padding: clamp(128px, 11vh, 170px) 0 60px;
      min-height: 100vh;
      display:flex;
      flex-direction:column;
      gap: 90px;
    }
    .snap-zone{
      display:flex;
      flex-direction:column;
      gap: 90px;
    }

    .hero{
      border-radius: var(--radius-xl);
      background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      overflow:visible;
      position:relative;
      min-height: 180px;
    }
    #top{ display:none; }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(800px 300px at 70% 50%, rgba(var(--accent-rgb),.14), transparent 60%);
      pointer-events:none;
    }
    .hero-inner{
      padding: 34px 34px 30px;
      display:flex;
      flex-direction:column;
      gap:10px;
      position:relative;
      z-index:1;
    }
    .hero h1{ font-size:44px; letter-spacing: -0.6px; line-height:1.05; }
    .hero p{ color: var(--muted); font-size:14px; max-width: 980px; }

    .glass-card{
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    /* ===== Line section ===== */
    #lines{ display:flex; flex-direction:column; gap: 120px; }

    .line-card{
      width: calc(100% * var(--line-scale));
      margin-inline:auto;
      position:relative;
      overflow:visible;
    }
    .line-frame{
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      backdrop-filter: blur(var(--showcase-frame-blur)) brightness(var(--showcase-frame-brightness));
      -webkit-backdrop-filter: blur(var(--showcase-frame-blur)) brightness(var(--showcase-frame-brightness));
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .line-cover{
      position:relative;
      overflow:hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
      /* Admin-tunable */
      min-height: var(--cover-min-h);
    }
    /* AUTO: height from image aspect after fitting to container width (no crop) */
    .line-cover[data-cover-mode="auto"]{
      height:auto;
      max-height: none;
    }
    .line-cover[data-cover-mode="auto"] img{
      width:100%;
      height:auto;
      display:block;
      object-fit:contain; /* no crop */
      filter: brightness(var(--line-cover-brightness, 1)) saturate(var(--line-cover-sat, 1.05)) blur(var(--line-cover-blur, 0px)) contrast(1.02);
    }

    /* FIXED: stable banner height (cropping allowed) */
    .line-cover[data-cover-mode="fixed"]{
      height: var(--cover-fixed-h);
      max-height: var(--cover-fixed-h);
    }
    .line-cover[data-cover-mode="fixed"] img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover; /* crop */
      filter: brightness(var(--line-cover-brightness, 1)) saturate(var(--line-cover-sat, 1.05)) blur(var(--line-cover-blur, 0px)) contrast(1.02);
    }
    .line-cover-image{
      opacity:0;
      transition: opacity .42s ease;
    }
    .line-cover-image.active{
      opacity:1;
    }
    .line-cover-image:not(.active){
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
    }
    .line-cover-dots{
      position:absolute;
      right: 26px;
      bottom: 24px;
      z-index:3;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 11px;
      min-width: 120px;
      pointer-events:auto;
    }
    .line-cover-dot{
      width:9px;
      height:9px;
      padding:0;
      border:0;
      border-radius:999px;
      background:rgba(244,246,248,.48);
      box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.28);
      cursor:pointer;
      transition: width .18s ease, height .18s ease, background .18s ease, transform .18s ease;
    }
    .line-cover-dot:hover{
      background:rgba(244,246,248,.78);
    }
    .line-cover-dot.active{
      width:14px;
      height:14px;
      background:#fff;
      transform:translateY(-1px);
    }
    .line-pack-hit{
      position:absolute;
      inset:0;
      z-index:1;
      border:0;
      background:transparent;
      cursor:pointer;
    }

    .line-cover::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.62));
      pointer-events:none;
    }
    .line-title{
      position:absolute;
      left: 26px;
      bottom: 30px;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      z-index:2;
      pointer-events:none;
    }
    .line-sub{
      position:absolute;
      left: 26px;
      bottom: 16px;
      color: rgba(244,246,248,.78);
      font-size: 13px;
      letter-spacing:.3px;
      z-index:2;
      pointer-events:none;
    }

    /* ===== Showcase (carousel) ===== */
    .showcase{
      border-radius: var(--radius-xl);
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.12);
      padding: 14px 0 0;
      position:relative;
      overflow:hidden;
      user-select:none;
    }
    .showcase::before,
    .showcase::after{
      content:"";
      position:absolute;
      top:0; bottom:0;
      width: 140px;
      pointer-events:none;
      z-index:1;
    }
    .showcase::before{
      left:0;
      background: linear-gradient(90deg, rgba(11,13,16,1), rgba(11,13,16,0));
    }
    .showcase::after{
      right:0;
      background: linear-gradient(270deg, rgba(11,13,16,1), rgba(11,13,16,0));
    }
    .track{
      position:relative;
      z-index:2;
      display:flex;
      gap: var(--gap);
      padding: 0 18px;
      will-change: transform;
      transform: translateX(0px);
      cursor: default;
    }
    .admin-active .track{ cursor: grab; }
    .admin-active .track.dragging{ cursor: grabbing; }


    .showcase.empty{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 22px;
    }
    .showcase.empty::before,
    .showcase.empty::after{ display:none; }
    .showcase-step{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(10,12,16,.68);
      color:#f4f6f8;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:6;
      cursor:pointer;
      font-size:22px;
      line-height:1;
      backdrop-filter: blur(10px);
      transition:background .16s ease, border-color .16s ease, transform .16s ease;
    }
    .showcase-step:hover{
      background:rgba(255,255,255,.18);
      border-color:rgba(255,255,255,.28);
      transform:translateY(-50%) scale(1.04);
    }
    .showcase-step.prev{ left:18px; }
    .showcase-step.next{ right:18px; }
    .showcase.empty .showcase-step{ display:none; }
    .empty-placeholder{
      width: min(680px, 100%);
      min-height: var(--asset-h, 240px);
      border-radius: var(--radius-lg);
      border: 1px dashed rgba(255,255,255,.18);
      background: rgba(255,255,255,.03);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 10px;
      color: rgba(244,246,248,.80);
      font-weight: 800;
      letter-spacing: .2px;
      user-select:none;
      text-align:center;
    }
    .empty-placeholder .hint{
      color: rgba(244,246,248,.55);
      font-weight: 500;
      font-size: 12px;
      max-width: 520px;
      line-height: 1.35;
    }
    .empty-placeholder .btn-add{
      pointer-events:auto;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
      color: rgba(244,246,248,.92);
      border-radius: 999px;
      padding: 8px 12px;
      cursor:pointer;
    }
    .empty-placeholder .btn-add:hover{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.26);
    }


    .asset{
      flex: 0 0 var(--asset-w);
      aspect-ratio: 16/9 !important;
      border-radius: var(--radius-lg);
      overflow:hidden;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      box-shadow: 0 14px 45px rgba(0,0,0,.35);
      position:relative;
      cursor:pointer;
      pointer-events:auto;
      transition: transform .2s ease, border-color .2s ease;
    }
    .asset:hover{ transform: scale(1.02); border-color: rgba(255,255,255,.18); }
    .asset img{ width:100%; height:100%; object-fit:cover; display:block; }
    .asset .label{
      position:absolute;
      left: 12px;
      bottom: 12px;
      font-size: 12px;
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.12);
      padding: 6px 10px;
      border-radius: 999px;
      color: rgba(244,246,248,.90);
      backdrop-filter: blur(10px);
      pointer-events:none;
    }

    /* ===== Floating Roadmap ===== */
    .roadmap{
      position: fixed;
      right: 20px;
      top: 95px;
      width: 280px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      backdrop-filter: blur(16px);
      box-shadow: 0 22px 90px rgba(0,0,0,.65);
      padding: 12px;
      z-index: 9991;
    }
    .roadmap h3{
      font-size: 11px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(244,246,248,.75);
      margin: 4px 6px 10px;
    }
    .rm-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 10px;
      border-radius: 14px;
      cursor:pointer;
      transition: background .15s ease, border-color .15s ease;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      margin-bottom: 8px;
    }
    .rm-item:hover{ background: rgba(0,0,0,.24); border-color: rgba(255,255,255,.12); }
    .rm-item.active{ background: rgba(var(--accent-rgb),.16); border-color: rgba(var(--accent-rgb),.28); }
    .rm-dot{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.35); }
    .rm-item.active .rm-dot{ background: var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.12); }
    .rm-title{ font-size: 12px; color: rgba(244,246,248,.86); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .roadmap-admin-toggle{
      width:100%;
      margin-top:4px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.045);
      color:rgba(244,246,248,.86);
      padding:10px 12px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.8px;
      text-transform:uppercase;
      cursor:pointer;
      text-align:left;
    }
    .roadmap-admin-toggle:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
    .roadmap-admin-toggle.active{ background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.30); color:#fff; }

    .btn{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.26);
      color: rgba(244,246,248,.92);
      font-size: 13px;
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); background: rgba(0,0,0,.30); }
    .btn.primary{ border-color: rgba(122,162,255,.34); background: rgba(122,162,255,.14); }
    .btn.danger{ border-color: rgba(255,120,120,.30); background: rgba(255,120,120,.10); }

    /* ===== Asset cards (admin + normal) ===== */
    /* Remove per-card buttons; edit happens by clicking the card */
    .asset-tools{ display:none !important; }

    /* Wrap card + caption */
    .asset-wrap{
      width: var(--asset-w);
      flex: 0 0 auto;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .asset{
      width: 100%;
      aspect-ratio: 16/9 !important;
      border-radius: var(--radius-lg);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      box-shadow: 0 10px 40px rgba(0,0,0,.35);
      position:relative;
      cursor:pointer;
      pointer-events:auto;
      transition: transform .2s ease, border-color .2s ease;
    }
    .asset:hover{ transform: scale(1.02); border-color: rgba(255,255,255,.18); }
    .asset img{ width:100%; height:100%; object-fit:cover; display:block; }

    /* Old overlay label disabled (title moved under card) */
    .asset .label{ display:none !important; }

    .asset-caption{
      display:none;
      font-size: 13px;
      color: rgba(244,246,248,.82);
      padding: 0 6px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      user-select: none;
      pointer-events:none;
    }
    .asset-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 0 6px;
      min-height: 32px;
      pointer-events:none;
      font-size: 12px;
    }
    .asset-price-line{ display:flex; align-items:flex-end; gap:10px; min-width:0; }
    .asset-price{ font-size:18px; line-height:1; font-weight:950; color:#f2f5f8; white-space:nowrap; }
    .asset-store{
      display:none;
      color: rgba(244,246,248,.58);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .asset-discount{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#050608;
      border:1px solid #ffd21f;
      background:#ffd21f;
      border-radius:6px;
      padding:8px 12px;
      font-size:16px;
      line-height:1;
      font-weight:950;
      min-width:68px;
      min-height:36px;
      white-space:nowrap;
    }
    .asset-rating{
      display:flex;
      align-items:center;
      gap:6px;
      color:rgba(244,246,248,.58);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
      flex:0 0 auto;
    }
    .asset-rating-star{ color:#ffd21f; font-size:14px; line-height:1; }
    .asset-rating.empty .asset-rating-star{ color:#050506; }

    @media (max-width: 1500px){
      .nav-slice{ left:calc(var(--brand-panel-w) - 58px + var(--brand-slice-offset)); width:var(--brand-slice-w); top:0; bottom:0; }
      .nav-inner{
        grid-template-columns: var(--brand-panel-w) minmax(320px, 1fr) auto;
        gap:18px;
      }
      .brand{ padding:0 92px 0 48px; }
      .brand-logo{ width:var(--brand-logo-size); height:var(--brand-logo-size); }
      .brand-name{ font-size:var(--brand-name-size); letter-spacing:var(--brand-name-letter); }
      .nav-links{ gap:20px; font-size:12px; }
      .nav-search{ height:54px; font-size:15px; }
      .admin-toggle{ padding:12px 18px; font-size:12px; }
    }

    @media (max-width: 980px){
      :root{ --asset-w: 270px; --gap: 20px; --drawer-w: 96vw; }
      .hero h1{font-size: 34px}
      .modal .content{grid-template-columns: 1fr}
      .line-title{font-size: 24px; left: 20px; bottom: 26px}
      .line-sub{left: 20px}
      .showcase::before,
      .showcase::after{ width:54px; }
      .showcase-step{
        width:36px;
        height:36px;
        font-size:19px;
      }
      .showcase-step.prev{ left:8px; }
      .showcase-step.next{ right:8px; }
      .track{ padding:0 10px; }
      .asset-shelf{ padding:0 10px; }
      .roadmap{ display:none; }
      .admin-panel{
        left:10px;
        right:10px;
        top:76px;
        width:auto;
        max-height:calc(100vh - 92px);
        border-radius:14px;
        transform:none;
      }
      .admin-panel-bar{
        border-radius:14px 14px 0 0;
      }
      .admin-panel-move{ display:none; }
      .nav::after{ width:100%; clip-path:none; opacity:calc(var(--nav-shell-alpha) * .9); }
      .nav-slice{ display:none; }
      .nav-inner{ grid-template-columns: 1fr; gap:10px; padding:12px 18px; }
      .brand{ padding:0; min-height:54px; justify-content:center; clip-path:none; border-radius:16px; }
      .brand::after{ display:none; }
      .brand-name{ font-size:20px; }
      .brand-logo{ width:42px; height:42px; }
      .nav-search{ display:none; }
      .nav-links.nav-left, .nav-links.nav-right{ justify-content:center; gap:16px; }
      .nav-links a{ padding:8px 0 10px; }
      .admin-toggle{ padding:10px 14px; }
      .admin-float-toggle{
        left: 10px;
        min-height: 42px;
        padding: 7px 11px 7px 7px;
        font-size: 10px;
      }
      .admin-float-toggle::before{ width:28px; height:28px; }
      .brand{ transform:none; }
      .about{ min-height: 780px; width:100%; }
      .hero-content{
        width:100%;
        padding:34px 24px 190px;
        gap:16px;
      }
      .hero-title{ font-size: clamp(36px, 10.5vw, 58px); }
      .hero-title-line{ white-space:normal; }
      .hero-red-stripe{
        top:122px;
        height:62px;
        left:0;
        width:100%;
      }
      .hero-copy{ max-width:68%; }
      .hero-carousel-placeholder{
        width:min(480px, 58%);
        min-height:150px;
      }
      .hero-buttons{ max-width:58%; }
      .hero-btn{
        min-height:46px;
        padding:14px 18px;
        font-size:13px;
      }
      .hero-character{
        width:min(78vw, 430px);
        left:var(--hero-char-x);
        top:var(--hero-char-y);
      }
      .hero-feature-bar{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        min-height:0;
        padding:14px;
      }
      .hero-feature{
        padding:10px;
        gap:12px;
      }
      .hero-feature.has-divider::after{ display:none; }
      .hero-feature-icon{ width:42px; height:42px; font-size:32px; }
      .hero-feature-title{ font-size:20px; }
      .hero-feature-subtitle,
      .hero-feature.compact .hero-feature-subtitle{ font-size:12px; }
      .hero-feature.compact .hero-feature-title{ font-size:14px; }
      .search-page,
      .faq-section,
      .contact-section{
        padding:16px;
      }
      .section-head{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
      }
      .search-panel{
        flex-direction:column;
        align-items:stretch;
      }
      .search-results{
        grid-template-columns:1fr;
      }
      .search-card{
        grid-template-columns:92px 1fr;
      }
      .search-thumb{ width:92px; }
      .contact-grid{
        grid-template-columns:1fr;
      }
      .faq-shell,
      .contact-shell{
        grid-template-columns:1fr;
        gap:20px;
        padding:18px;
      }
      .faq-side,
      .contact-main{
        border-right:0;
        padding-right:0;
      }
      .faq-side{
        min-height:300px;
        padding-bottom:140px;
      }
      .faq-art{
        top:134px;
        right:auto;
        width:260px;
      }
      .contact-direct{
        grid-template-columns:1fr;
      }
      .contact-market-grid{
        gap:8px;
      }
      .contact-market-item{
        width:72px;
      }
      .contact-side{
        min-height:220px;
      }
      .contact-art{
        width:250px;
        right:-42px;
        bottom:-28px;
      }
      .faq-question{
        font-size:14px;
        padding:16px;
      }
    }

    /* ===== v7: Resources compact width (no huge empty right space) ===== */
    #resources .socials{
      align-items:flex-start;
    }
    #resources .social-item{
      width: min(620px, 100%);
    }


/* ===== Asset card sizing ===== */
/* Prevent the track from stretching Assets cards into tall empty canvases. */
.track{ align-items:flex-start !important; }
.asset-wrap{
  align-self:flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events:auto !important;
  cursor:pointer;
  position:relative !important;
}

/* JS sets the Assets media box to strict 16:9 based on the card width. */
.asset{
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.asset img{
  width:100%;
  height:auto !important;
  object-fit: contain !important;
  background: transparent !important;
  display:block;
}
.asset-hover-badges{
  position:absolute;
  left:12px;
  top:12px;
  z-index:12;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.asset-wrap:hover .asset-hover-badges,
.asset-wrap:focus-within .asset-hover-badges{
  opacity:1;
  transform:translateY(0);
}
.asset img.asset-hover-badge{
  width:54px;
  height:54px !important;
  max-width:54px;
  max-height:54px;
  object-fit:contain;
  display:block;
  background:transparent !important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.38));
}

.asset-shelf{
  position:relative;
  z-index:5;
  height:28px;
  margin-top:7px;
  overflow:hidden;
  background:transparent;
}
.asset-shelf-track{
  position:relative;
  display:flex;
  gap:var(--gap);
  padding:0 18px;
  will-change:transform;
  transform:translateX(0);
}
.asset-shelf-item{
  width:var(--asset-w);
  flex:0 0 auto;
  min-width:0;
}
.asset-shelf .asset-meta{
  position:static;
  left:auto;
  right:auto;
  top:auto;
  display:flex;
  z-index:auto;
  width:100%;
  transform:none;
}

/* v21: asset card footer matches the drawer price language */
.asset-wrap{
  gap:3px !important;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
.asset{
  border-radius:var(--radius-lg) !important;
  overflow:hidden !important;
}
.asset-meta{
  position:static;
  display:flex;
  width:auto;
  min-height:20px;
  padding:0 4px 0 6px;
  border:0;
  background:transparent;
  align-items:center;
  gap:8px;
  line-height:1;
}
.asset-price-line{
  gap:8px;
  align-items:center;
  transform:translateX(-5px);
}
.asset-discount{
  min-width:48px;
  min-height:20px;
  padding:2px 7px;
  border-radius:4px;
  font-size:12px;
  line-height:1;
}
.asset-price{
  font-size:14px;
  line-height:1;
}
.asset-rating{
  color:#ffd21f;
  font-size:15px;
  gap:3px;
  line-height:1;
  margin-left:auto;
}
.asset-rating.empty{
  color:rgba(244,246,248,.42);
}
.asset-rating-star{
  font-size:15px;
}

.asset.missing-img{
  height: 72px !important;
}
.asset.missing-img img{
  display:none;
}
.asset-hit{
  position:absolute;
  inset:0;
  z-index:80;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:block;
}
.asset-hit:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.95);
  outline-offset:4px;
  border-radius:var(--radius-lg);
}

/* ===== Floating admin photos ===== */
.floating-photo-layer{
  position:absolute;
  inset:0;
  z-index:35;
  pointer-events:none;
}
.floating-photo{
  position:absolute;
  left:var(--fx);
  top:var(--fy);
  width:var(--fw);
  transform:translate(-50%, -50%) rotate(var(--fr));
  transform-origin:center;
  user-select:none;
  pointer-events:none;
}
.floating-photo img{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}
.admin-active .floating-photo{
  pointer-events:auto;
  cursor:grab;
  outline:1px dashed rgba(122,162,255,.55);
  outline-offset:6px;
}
.admin-active .floating-photo.selected{
  outline:2px solid rgba(122,162,255,.95);
}
.admin-active .floating-photo.dragging{ cursor:grabbing; }

/* empty line placeholder should match card height */
.empty-placeholder{ min-height: var(--card-h, 240px) !important; }