@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../PPNeueMontreal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Zapus Sans';
    src: local('Zapus Sans');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --sidebar-w: 340px;
    --font-heading: 'JetBrains Mono', monospace;
    --font-body: 'PP Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-loader: 'Zapus Sans', 'PP Neue Montreal', 'Inter', sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    font-family: var(--font-body);
    background: #0F0F0F;
    color: #fff;
  }

  /* ===== LAYOUT ===== */
  .page {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  /* ===== SIDEBAR ===== */
  .sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    height: 100vh;
    padding: 5px 4px 5px 5px;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 10;
    position: relative;
    background: #242424;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.4s cubic-bezier(.4,0,.2,1),
                min-width 0.4s cubic-bezier(.4,0,.2,1),
                opacity 0.35s ease,
                transform 0.4s cubic-bezier(.4,0,.2,1),
                padding 0.4s cubic-bezier(.4,0,.2,1);
  }

  .page.collapsed .sidebar {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    transform: translateX(-100%);
    overflow: hidden;
  }

  /* ===== MAIN AREA ===== */
  .main {
    flex: 1;
    position: relative;
    height: 100vh;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
  }

  /* ===== PANNABLE CANVAS ===== */
  .canvas-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    /* Infinite dot grid lives here — CSS background tiles forever */
    background-color: #0F0F0F;
    background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px);
    background-size: 66px 57px;
    /* background-position updated by JS to follow pan+zoom */
  }
  .canvas-viewport:active { cursor: grabbing; }
  .canvas-world {
    position: absolute;
    /* no fixed size — children are absolutely positioned */
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    transition: none;
    transform-origin: 0 0;
    will-change: transform;
  }

  /* ===== COLLAPSE BUTTON (State 1: visible sidebar — small circle "−") ===== */
  .collapse-btn {
    position: fixed;
    top: 10px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: #F7F9F9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 50;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    color: #141414;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
  }
  .collapse-btn .btn-label { display: none; }
  .collapse-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .collapse-btn:hover { background: #edf0f0; transform: scale(1.05); }

  /* ===== COLLAPSE BUTTON (State 2: collapsed — pill "Обо мне +") ===== */
  .page.collapsed .collapse-btn {
    top: 18px;
    left: 18px;
    width: auto;
    height: 38px;
    padding: 8px 12px 8px 16px;
    border-radius: 12px;
    background: #F7F9F9;
    color: #141414;
  }
  .page.collapsed .collapse-btn .btn-label {
    display: inline;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #141414;
  }
  .page.collapsed .collapse-btn svg {
    stroke: #141414;
  }

  /* ===== AVATAR CARD ===== */
  .avatar-card {
    width: 100%;
    height: 220px;
    border-radius: 14px 24px 24px 24px;
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
    flex-shrink: 0;
  }
  .avatar-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .avatar-icons {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .av-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
  }
  .av-icon:hover { transform: scale(1.12); }
  .av-icon svg { width: 16px; height: 16px; fill: #fff; }
  .av-icon.tg { background: #333; }
  .av-icon.phone { background: #ff3b30; }
  .av-icon.cam { background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); }

  /* ===== PROFILE CARD ===== */
  .profile-card {
    width: 100%;
    background: #fff;
    border-radius: 33px;
    color: #000;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 22px 0 16px;
    margin-top: -78px;
    position: relative;
    z-index: 2;
    flex: 1;
  }
  .profile-card h1 {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 79.061%;
    letter-spacing: -3.2px;
    color: #141414;
    margin-bottom: 10px;
  }
  .profile-subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #141414;
    opacity: 0.6;
    line-height: 99%;
    margin-bottom: 42px;
  }

  /* Experience row */
  .exp-row {
    display: flex;
    justify-content: center;
    gap: 36px;
    padding: 0 16px;
  }
  .exp-col { text-align: center; flex: 1; min-width: 0; }
  .exp-num-unit {
    font-family: var(--font-heading);
    font-size: 33px;
    font-weight: 400;
    line-height: 79.061%;
    letter-spacing: -2.64px;
    color: #141414;
    text-align: center;
  }
  .exp-desc {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #141414;
    opacity: 0.6;
    margin-top: 12px;
    line-height: 99%;
  }

  /* ===== WORK / EDUCATION CARD ===== */
  .info-card {
    width: 100%;
    background: #fff;
    border-radius: 33px 33px 47px 47px;
    color: #000;
    padding: 22px 40px 22px 43px;
    margin-top: 2px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }
  .info-section {
    width: 100%;
  }
  .info-section + .info-section { margin-top: 0; }
  .info-card h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 12px;
    line-height: 79.061%;
    letter-spacing: -1.92px;
    color: #141414;
  }
  .logos-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 60px;
    cursor: pointer;
    outline: none;
  }
  .logo-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .logo-item:hover .logo-circle,
  .logo-item:focus-visible .logo-circle {
    box-shadow: 0 0 0 2px rgba(20,20,20,0.2);
    transform: translateY(-2px);
  }
  .logo-circle { transition: transform 0.22s ease, box-shadow 0.22s ease; }
  .logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .logo-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: #141414;
    opacity: 0.6;
    text-align: center;
    line-height: 99%;
  }

  /* ===== EXPERIENCE POPUP ===== */
  .experience-popup {
    position: fixed;
    inset: 0;
    z-index: 10020;
    width: auto;
    height: auto;
    color: #fff;
    background: rgba(0,0,0,0.68);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }
  .experience-popup.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .experience-popup-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 547px;
    height: var(--experience-card-height, 578px);
    overflow: hidden;
    border-radius: 24px;
    background: #242424;
    box-shadow: 0 28px 90px rgba(0,0,0,0.38);
    transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
    transition: transform 0.32s cubic-bezier(.2,.75,.25,1);
  }
  .experience-popup.open .experience-popup-card { transform: translate(-50%, -50%) scale(1); }
  .experience-popup-close {
    position: absolute;
    left: calc(50% + 282.5px);
    top: calc(50% - var(--experience-card-height, 578px) / 2);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #242424;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .experience-popup-close:hover { background: #303030; transform: scale(1.04); }
  .experience-popup-close svg { width: 24px; height: 24px; }
  .experience-popup-heading {
    position: static;
    width: 100%;
    text-align: center;
  }
  .experience-popup-copy {
    position: absolute;
    top: 34px;
    left: 48px;
    width: 451px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .experience-popup-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 79.1%;
    letter-spacing: -3.2px;
  }
  .experience-popup-description {
    margin-top: 13px;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1;
  }
  .experience-popup-metric {
    position: static;
    width: 220px;
    text-align: center;
  }
  .experience-popup-metric-value {
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 79.1%;
    letter-spacing: -3.2px;
  }
  .experience-popup-metric-label {
    margin-top: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    line-height: 0.99;
  }
  .experience-popup-visuals {
    position: absolute;
    top: 280px;
    left: 50%;
    width: 500px;
    height: 230px;
    transform: translateX(-50%);
  }
  .experience-popup-media {
    position: absolute;
    top: 0;
    left: 50%;
    width: 176px;
    height: 176px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(0,0,0,0.24);
    transform: translateX(-50%);
  }
  .experience-popup-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .experience-popup-visuals.has-three .experience-popup-media:nth-child(1) { left: calc(50% - 118px); transform: translateX(-50%) rotate(-6.27deg); }
  .experience-popup-visuals.has-three .experience-popup-media:nth-child(2) { left: calc(50% + 118px); transform: translateX(-50%) rotate(6.27deg); }
  .experience-popup-visuals.has-three .experience-popup-media:nth-child(3) { top: 51px; z-index: 2; }
  .experience-popup-visuals.is-single .experience-popup-media {
    top: 16px;
    width: 194px;
    height: 194px;
    border-radius: 50%;
  }
  .experience-popup-case {
    position: absolute;
    left: 32px;
    bottom: 19px;
    width: 483px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    line-height: 0.99;
  }
  .experience-popup-visuals.is-clickable { cursor: pointer; }
  .experience-popup-visuals.is-clickable .experience-popup-media { transition: transform 0.22s ease, filter 0.22s ease; }
  .experience-popup-visuals.is-clickable:hover .experience-popup-media { filter: brightness(1.08); }
  .experience-popup-visuals.is-clickable:focus-visible { outline: 1px solid rgba(255,255,255,0.75); outline-offset: 7px; border-radius: 18px; }

  @media (max-width: 700px) {
    .experience-popup-card {
      width: min(547px, calc(100vw - 32px));
      height: min(var(--experience-card-height, 578px), calc(100dvh - 32px));
    }
    .experience-popup-close { left: auto; right: 16px; top: 16px; }
    .experience-popup-copy { left: 24px; width: calc(100% - 48px); top: 28px; }
    .experience-popup-title { font-size: 34px; letter-spacing: -2.4px; }
    .experience-popup-description { font-size: 16px; }
    .experience-popup-visuals { top: 268px; width: 100%; transform: translateX(-50%) scale(0.88); transform-origin: top center; }
    .experience-popup-case { left: 28px; width: calc(100% - 56px); }
  }
  html.experience-modal-open { overflow: hidden; }

  /* ===== FILTER CHIPS ===== */
  .filters {
    position: absolute;
    z-index: 5;
    top: 18px;
    display: flex;
    gap: 4px;
    left: 50%;
    transform: translateX(-50%);
  }
  .chip {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 999px;
    height: 38px;
    padding: 0 16px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .chip:hover { background: #eee; transform: translateY(-1px); }
  .chip.active {
    background: #141414;
    color: #fff;
  }
  .chip.active:hover { background: #333; }
  .chip .plus-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
  }
  .chip .plus-icon svg { width: 16px; height: 16px; stroke: #000; }
  .chip.active .plus-icon svg { stroke: #fff; }

  /* ===== FILTER VISIBILITY ===== */
  [data-project] {
    transition: top 0.5s ease, left 0.5s ease, opacity 0.4s ease !important;
  }
  [data-project].filtered-out {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ===== PROJECT CARDS ===== */
  .project-card {
    position: absolute;
    border-radius: 43px;
    overflow: hidden;
    cursor: pointer;
    padding: 10px;
    /* Liquid glass */
    background: linear-gradient(
      135deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0.03) 60%,
      rgba(255,255,255,0.12) 100%
    );
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow:
      0 16px 48px rgba(0,0,0,0.5),
      0 4px 16px rgba(0,0,0,0.25),
      inset 0 1px 1px rgba(255,255,255,0.3),
      inset 0 -1px 1px rgba(0,0,0,0.15);
    transition: box-shadow 0.35s ease;
  }
  /* Liquid glass highlight sheen on border area */
  .project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius, 43px);
    background: linear-gradient(
      160deg,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.05) 30%,
      transparent 55%,
      rgba(255,255,255,0.08) 100%
    );
    pointer-events: none;
    z-index: 0;
  }
  .project-card:hover, .project-card:focus-visible {
    box-shadow:
      0 24px 64px rgba(0,0,0,0.6),
      0 8px 24px rgba(0,0,0,0.35),
      inset 0 1px 1px rgba(255,255,255,0.35),
      inset 0 -1px 1px rgba(0,0,0,0.2);
  }
  [data-project]:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 4px;
    border-radius: inherit;
  }
  .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 33px;
    clip-path: inset(0 round 33px);
    position: relative;
    z-index: 1;
  }

  /* Card 1 — QR Exhibition (large, left) */
  .card-qr {
    width: 421px;
    height: 536px;
    top: 536px;
    left: 608px;
    z-index: 3;
    transform: rotate(-8.00deg);
    transition: top 0.4s ease, left 0.4s ease;
  }
  .page.collapsed .card-qr {
    top: 530px;
    left: 748px;
  }

  /* Card 2 — Yuliawave (bottom-right overlap) */
  .card-yulia {
    width: 402px;
    height: 415px;
    top: 768px;
    left: 835px;
    z-index: 4;
    transform: rotate(5.00deg);
    transition: top 0.4s ease, left 0.4s ease;
  }
  .page.collapsed .card-yulia {
    top: 762px;
    left: 975px;
  }

  /* Badge — Вещь */
  .badge-vesh {
    position: absolute;
    top: 652px;
    left: 998px;
    display: inline-flex;
    padding: 11px 16px;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 24px;
    color: #141414;
    z-index: 10;
    cursor: pointer;
    transform: rotate(3.348deg);
    transition: top 0.4s ease, left 0.4s ease;
    white-space: nowrap;
  }
  .page.collapsed .badge-vesh {
    top: 646px;
    left: 1141px;
  }
  .badge-vesh h4 {
    font-family: var(--font-heading);
    font-size: 33px;
    font-weight: 400;
    line-height: 79.061%;
    letter-spacing: -2.64px;
    text-align: center;
    color: #141414;
  }
  .badge-vesh p {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 99%;
    text-align: center;
    color: #141414;
    opacity: 0.6;
  }

  /* Badge — комдиз tag */
  .badge-komdiz {
    position: absolute;
    top: 644px;
    left: 1136px;
    display: inline-flex;
    padding: 6px 13px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #2A2A2A;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    border-radius: 12px;
    z-index: 11;
    cursor: pointer;
    transform: rotate(15.49deg);
    transition: top 0.4s ease, left 0.4s ease;
  }

  /* ===== NEW PROJECT CARDS ===== */

  /* Project 3 — Ozon (row1, col3) */
  .card-ozon1 { width: 421px; top: 340px; left: 2620px; z-index: 3; transform: rotate(-5.09deg); padding: 10px; transition: top 0.4s ease, left 0.4s ease; }
  .card-ozon1 img { height: auto; object-fit: contain; }
  .card-ozon2 { width: 290px; top: 180px; left: 2960px; z-index: 4; transform: rotate(5.33deg); padding: 10px; transition: top 0.4s ease, left 0.4s ease; border-radius: 56px; }
  .card-ozon2 img { height: auto; object-fit: contain; }
  .badge-ozon { position: absolute; top: 222px; left: 2699px; display: flex; width: 251px; padding: 11px 28px; flex-direction: column; align-items: center; gap: 15px; background: #fff; border-radius: 24px; color: #141414; z-index: 10; cursor: pointer; transform: rotate(-5.64deg); transition: top 0.4s ease, left 0.4s ease; white-space: nowrap; }
  .badge-ozon h4 { font-family: var(--font-heading); font-size: 33px; font-weight: 400; line-height: 79.061%; letter-spacing: -2.64px; text-align: center; color: #141414; }
  .badge-ozon p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 99%; text-align: center; color: #141414; opacity: 0.6; }
  .tag-ozon { position: absolute; display: inline-flex; padding: 6px 13px; justify-content: center; align-items: center; background: #2A2A2A; color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 400; border-radius: 12px; z-index: 11; cursor: pointer; transition: top 0.4s ease, left 0.4s ease; }
  .tag-ozon-1 { top: 823px; left: 3100px; transform: rotate(22.046deg); }
  .tag-ozon-2 { top: 826px; left: 3162px; transform: rotate(-6.461deg); }
  .tag-ozon-3 { top: 872px; left: 3126px; transform: rotate(11.151deg); }

  /* Project 4 — ACT (row2, col1) */
  .card-redis1 { width: 648px; top: 1560px; left: 350px; z-index: 3; transform: rotate(-3.66deg); padding: 10px; transition: top 0.4s ease, left 0.4s ease; }
  .card-redis1 img { height: auto; object-fit: contain; }
  .card-redis2 { display: none; }
  .badge-redis { position: absolute; top: 1530px; left: 200px; display: flex; width: 215px; padding: 11px 16px; flex-direction: column; align-items: center; gap: 15px; background: #fff; border-radius: 24px; color: #141414; z-index: 10; cursor: pointer; transform: rotate(-9.042deg); transition: top 0.4s ease, left 0.4s ease; } /* frameRadius not specified in JSON */
  .badge-redis h4 { font-family: var(--font-heading); font-size: 33px; font-weight: 400; line-height: 79.061%; letter-spacing: -2.64px; text-align: center; color: #141414; }
  .badge-redis p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 99%; text-align: center; color: #141414; opacity: 0.6; }
  .tag-redis { position: absolute; display: inline-flex; padding: 6px 13px; justify-content: center; align-items: center; background: #2A2A2A; color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 500; border-radius: 12px; z-index: 11; cursor: pointer; transition: top 0.4s ease, left 0.4s ease; }
  .tag-redis-1 { top: 1653px; left: 225px; transform: rotate(-18.52deg); }
  .tag-redis-2 { top: 1522px; left: 431px; transform: rotate(3deg); }

  /* Project 5 — TALA (row2, col2) */
  .card-tala1 { width: 648px; top: 1571px; left: 1422px; z-index: 3; transform: rotate(4deg); padding: 10px; transition: top 0.4s ease, left 0.4s ease; }
  .card-tala1 img { height: auto; object-fit: contain; }
  .badge-tala { position: absolute; top: 1491px; left: 1878px; display: flex; width: 232px; padding: 11px 16px; flex-direction: column; align-items: center; gap: 15px; background: #fff; border-radius: 24px; color: #141414; z-index: 10; cursor: pointer; transform: rotate(4.13deg); transition: top 0.4s ease, left 0.4s ease; }
  .badge-tala h4 { font-family: var(--font-heading); font-size: 33px; font-weight: 400; line-height: 79.061%; letter-spacing: -2.64px; text-align: center; color: #141414; }
  .badge-tala p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 99%; text-align: center; color: #141414; opacity: 0.6; }
  .tag-tala { position: absolute; display: inline-flex; padding: 6px 13px; justify-content: center; align-items: center; background: #2A2A2A; color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 400; border-radius: 12px; z-index: 11; cursor: pointer; transition: top 0.4s ease, left 0.4s ease; }
  .tag-tala-1 { top: 1442px; left: 1866px; transform: rotate(-5deg); }
  .tag-tala-2 { top: 1533px; left: 1821px; transform: rotate(3deg); }
  .tag-tala-3 { top: 1480px; left: 1780px; transform: rotate(7deg); }

  /* Project 6 — Т-Банк (row2, col3) */
  .card-tbank1 { width: 400px; height: 490px; top: 1600px; left: 2600px; z-index: 3; transform: rotate(-3.00deg); transition: top 0.4s ease, left 0.4s ease; } /* no changes from JSON */
  .card-tbank2 { width: 370px; height: 400px; top: 1841px; left: 2875px; z-index: 4; transform: rotate(8.00deg); transition: top 0.4s ease, left 0.4s ease; } /* no changes from JSON */
  .badge-tbank { position: absolute; top: 1712px; left: 3030px; display: inline-flex; width: 216px; padding: 11px 16px; flex-direction: column; align-items: center; gap: 15px; background: #fff; border-radius: 24px; color: #141414; z-index: 10; cursor: pointer; transform: rotate(-5.5deg); transition: top 0.4s ease, left 0.4s ease; }
  .badge-tbank h4 { font-family: var(--font-heading); font-size: 33px; font-weight: 400; line-height: 79.061%; letter-spacing: -2.64px; text-align: center; color: #141414; }
  .badge-tbank p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 99%; text-align: center; color: #141414; opacity: 0.6; }
  .tag-tbank { position: absolute; top: 1658px; left: 3181px; display: inline-flex; padding: 6px 13px; justify-content: center; align-items: center; background: #2A2A2A; color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 500; border-radius: 12px; z-index: 11; cursor: pointer; transform: rotate(9deg); transition: top 0.4s ease, left 0.4s ease; }

  /* Project 7 — Календари (row3, col1) */
  .card-kalendar1 { width: 420px; height: 500px; top: 2210px; left: 483px; z-index: 3; transform: rotate(5deg); transition: top 0.4s ease, left 0.4s ease; }
  .card-kalendar1 img { height: auto; object-fit: contain; }
  .card-kalendar2 { width: 380px; height: 420px; top: 2473px; left: 771px; z-index: 4; transform: rotate(-7deg); transition: top 0.4s ease, left 0.4s ease; }
  .card-kalendar2 img { height: auto; object-fit: contain; }
  .badge-kalendar { position: absolute; top: 2391px; left: 954px; width: 211px; display: inline-flex; padding: 11px 16px; flex-direction: column; align-items: center; gap: 15px; background: #fff; border-radius: 24px; color: #141414; z-index: 10; cursor: pointer; transform: rotate(3.7deg); transition: top 0.4s ease, left 0.4s ease; }
  .badge-kalendar h4 { font-family: var(--font-heading); font-size: 33px; font-weight: 400; line-height: 79.061%; letter-spacing: -2.64px; text-align: center; color: #141414; }
  .badge-kalendar p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 99%; text-align: center; color: #141414; opacity: 0.6; }
  .tag-kalendar { position: absolute; top: 2371px; left: 1117px; display: inline-flex; padding: 6px 13px; justify-content: center; align-items: center; background: #2A2A2A; color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 500; border-radius: 12px; z-index: 11; cursor: pointer; transform: rotate(-10deg); transition: top 0.4s ease, left 0.4s ease; }

  /* Project 8 — UI Concepts (row3, col3) */
  .card-ui1 { width: 510px; top: 2280px; left: 3550px; z-index: 3; transform: rotate(-4deg); padding: 9px; transition: top 0.4s ease, left 0.4s ease; }
  .card-ui2 { width: 250px; top: 2410px; left: 3960px; z-index: 4; transform: rotate(7deg); padding: 8px; transition: top 0.4s ease, left 0.4s ease; }
  .card-ui1 img, .card-ui2 img { height: auto; object-fit: contain; }
  .badge-ui { position: absolute; top: 2170px; left: 3770px; display: flex; width: 232px; padding: 11px 16px; flex-direction: column; align-items: center; gap: 12px; background: #fff; border-radius: 24px; color: #141414; z-index: 10; cursor: pointer; transform: rotate(3deg); transition: top 0.4s ease, left 0.4s ease; }
  .badge-ui h4 { font-family: var(--font-heading); font-size: 33px; font-weight: 400; line-height: 82%; letter-spacing: -2.4px; text-align: center; color: #141414; }
  .badge-ui p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 99%; text-align: center; color: #141414; opacity: 0.6; }
  .tag-ui { position: absolute; top: 2146px; left: 3992px; display: inline-flex; padding: 6px 13px; justify-content: center; align-items: center; background: #2A2A2A; color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 500; border-radius: 12px; z-index: 11; cursor: pointer; transform: rotate(-8deg); transition: top 0.4s ease, left 0.4s ease; }

  /* Project 8 — Плакат (row3, col2) */

  /* Project 1 — Electric Lines */
  .card-electric1 {
    width: 620px; top: 366.5px; left: 380.167px; z-index: 3;
    padding: 10px; border-radius: 56px;
    transform: rotate(-4deg);
    transition: top 0.4s ease, left 0.4s ease;
  }
  .card-electric2 {
    width: 430px; top: 638.78px; left: 763px; z-index: 4;
    padding: 10px; border-radius: 50px;
    transform: rotate(7deg);
    transition: top 0.4s ease, left 0.4s ease;
  }
  .card-electric1 img, .card-electric2 img { height: auto; object-fit: contain; }
  .badge-electric {
    position: absolute; top: 300px; left: 500px; z-index: 10;
    display: flex; width: 286px; padding: 11px 18px;
    flex-direction: column; align-items: center; gap: 15px;
    background: #fff; color: #141414; border-radius: 24px;
    cursor: pointer; transform: rotate(-5deg);
    transition: top 0.4s ease, left 0.4s ease;
  }
  .badge-electric h4 {
    font-family: var(--font-heading); font-size: 33px; font-weight: 400;
    line-height: 79.061%; letter-spacing: -2.64px; text-align: center;
  }
  .badge-electric p {
    font-family: var(--font-body); font-size: 15px; font-weight: 400;
    line-height: 99%; text-align: center; opacity: 0.6;
  }
  .tag-electric {
    position: absolute; display: inline-flex; padding: 6px 13px;
    justify-content: center; align-items: center;
    background: #2A2A2A; color: #fff; border-radius: 12px;
    font-family: var(--font-body); font-size: 13px; font-weight: 400;
    z-index: 11; cursor: pointer;
    transition: top 0.4s ease, left 0.4s ease;
  }
  .tag-electric-1 { top: 248px; left: 763px; transform: rotate(8deg); }
  .tag-electric-2 { top: 292px; left: 805px; transform: rotate(-5deg); }

  /* Electric Lines takes the first slot; the previous projects move forward. */
  .card-qr { top: -101px; left: 1327px; }
  .card-yulia { top: 131px; left: 1554px; }
  .badge-vesh { top: 15px; left: 1717px; }
  .badge-komdiz { top: 7px; left: 1855px; }
  .page.collapsed .card-qr { top: -101px; left: 1327px; }
  .page.collapsed .card-yulia { top: 131px; left: 1554px; }
  .page.collapsed .badge-vesh { top: 15px; left: 1717px; }

  .card-ozon1 { top: 267.78px; left: 2215.25px; }
  .card-ozon2 { top: 112.28px; left: 2552.75px; }
  .badge-ozon { top: 144.5px; left: 2286.75px; }
  .tag-ozon-1 { top: 750.78px; left: 2695.25px; }
  .tag-ozon-2 { top: 753.78px; left: 2757.25px; }

  .card-redis1 { top: 1550px; left: 2400px; }
  .badge-redis { top: 1520px; left: 2250px; }
  .tag-redis-1 { top: 1643px; left: 2275px; }
  .tag-redis-2 { top: 1512px; left: 2481px; }

  .card-tala1 { top: 873.78px; left: 1327px; border-radius: 21px; }
  .card-tala1 img { border-radius: 12px; }
  .badge-tala { top: 829.78px; left: 1783.26px; transform: rotate(-3deg); }
  .tag-tala-1 { top: 799.43px; left: 1361.76px; }
  .tag-tala-2 { top: 801.78px; left: 1430.43px; transform: rotate(-12.32deg); }
  .tag-tala-3 { top: 765px; left: 1408.76px; }

  .card-tbank1 { top: 1301.5px; left: 261.167px; }
  .card-tbank2 { top: 1542.5px; left: 536.167px; }
  .badge-tbank { top: 1408.5px; left: 690.167px; }
  .tag-tbank { top: 1394px; left: 858.167px; }

  .card-kalendar1 { top: 2210px; left: 2500px; }
  .card-kalendar2 { top: 2473px; left: 2788px; }
  .badge-kalendar { top: 2391px; left: 2971px; }
  .tag-kalendar { top: 2371px; left: 3134px; }

  .card-ui1 { top: 2280px; left: 3550px; }
  .card-ui2 { top: 2410px; left: 3960px; }
  .badge-ui { top: 2170px; left: 3770px; }
  .tag-ui { top: 2146px; left: 3992px; }


  /* Placeholder gradient cards (no real images yet) */
  .placeholder-img {
    width: 100%; height: 100%; border-radius: 16px; position: relative; z-index: 1;
  }
  .ph-1 { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
  .ph-2 { background: linear-gradient(135deg, #2d132c, #801336, #c72c41); }
  .ph-3 { background: linear-gradient(135deg, #0a3d62, #3c6382, #60a3bc); }
  .ph-4 { background: linear-gradient(135deg, #2c3e50, #4ca1af, #2c3e50); }
  .ph-5 { background: linear-gradient(135deg, #1b1b2f, #162447, #1f4068); }
  .ph-6 { background: linear-gradient(135deg, #0d0d0d, #1a1a2e, #16213e); }
  .ph-7 { background: linear-gradient(135deg, #2b2d42, #8d99ae, #edf2f4); }
  .ph-8 { background: linear-gradient(135deg, #1b262c, #0f4c75, #3282b8); }
  .ph-9 { background: linear-gradient(135deg, #303841, #3a4750, #d72323); }
  .ph-10 { background: linear-gradient(135deg, #212121, #323232, #0d7377); }
  .ph-11 { background: linear-gradient(135deg, #1a1a2e, #e94560, #533483); }
  .ph-12 { background: linear-gradient(135deg, #2d2d2d, #4a4a4a, #1a1a1a); }
  .ph-13 { background: linear-gradient(135deg, #0c0c0c, #1c1c3d, #6c63ff); }
  .ph-14 { background: linear-gradient(135deg, #141e30, #243b55, #141e30); }

  /* ===== ENTRY ANIMATIONS ===== */
  @keyframes fadeSlideUp {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .project-card { animation: fadeSlideUp 0.55s ease-out both; }
  .card-qr { animation-delay: 0.1s; }
  .card-yulia { animation-delay: 0.25s; }
  .badge-vesh { animation: fadeSlideUp 0.45s ease-out 0.4s both; }
  .badge-komdiz { animation: fadeSlideUp 0.4s ease-out 0.5s both; }
  .filters { animation: fadeIn 0.5s ease-out 0.15s both; }

  /* ===== SETTINGS BUTTON ===== */
  .settings-btn {
    position: absolute;
    z-index: 1000;
    top: 18px;
    right: 18px;
    display: inline-flex;
    padding: 8.84px;
    justify-content: center;
    align-items: center;
    gap: 8.84px;
    border-radius: 13.26px;
    background: #F7F9F9;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    animation: fadeIn 0.5s ease-out 0.15s both;
  }
  .settings-btn:hover { background: #edf0f0; transform: scale(1.05); }
  .settings-btn svg { width: 22.3px; height: 22.3px; display: block; }

  /* ===== SETTINGS DROPDOWN ===== */
  .settings-dropdown {
    position: absolute;
    z-index: 1001;
    top: 58px;
    right: 18px;
    background: #F7F9F9;
    border-radius: 12px;
    padding: 10px 14px 10px 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .settings-dropdown.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  .lang-switch {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #222;
    white-space: nowrap;
    line-height: 1;
    cursor: default;
  }
  .lang-option {
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .lang-option:hover { opacity: 0.7; }
  .lang-option.active {
    text-decoration: underline;
    color: #222;
  }
  .lang-option.inactive {
    color: #c8c8c8;
    text-decoration: none;
  }

  /* Hand control toggle in settings */
  .settings-divider {
    height: 1px;
    background: #ddd;
    margin: 8px 0;
  }
  /* hand-control-toggle now uses .settings-row */

  /* Hand tracking indicator */
  .hand-indicator {
    position: absolute; z-index: 100;
    top: 18px; right: 62px;
    display: none; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(20,20,20,0.85); color: #fff;
    border-radius: 10px; font-family: var(--font-body);
    font-size: 13px; backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease-out;
  }
  .hand-indicator.visible { display: inline-flex; }
  .hand-indicator .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; animation: pulse-dot 1.5s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .hand-indicator .gesture-icon {
    font-size: 15px; min-width: 18px; text-align: center;
  }

  /* Camera video (hidden, used by MediaPipe) */
  .hand-video {
    position: fixed; top: -9999px; left: -9999px;
    width: 320px; height: 240px;
    pointer-events: none; opacity: 0;
  }

  /* ===== DETAIL TAGS ===== */
  .detail-tags {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
  }
  .detail-tag {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 999px;
    background: #333;
    color: #fff;
    font-family: 'PP Neue Montreal', var(--font-body);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1100px) {
    :root { --sidebar-w: 300px; }
    .avatar-card, .profile-card, .info-card { width: 292px; }
    .card-qr { width: 340px; height: 450px; left: 140px; }
    .card-yulia { width: 340px; height: 350px; left: 340px; }
    .badge-vesh { left: 420px; }
    .badge-komdiz { left: 540px; }
  }
  @media (max-width: 1100px) {
    .page { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
    html, body { overflow: auto; }
    .sidebar {
      position: relative;
      width: 100% !important;
      min-width: 100% !important;
      height: auto;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 8px;
      padding: 16px;
      justify-content: flex-start;
      align-items: center;
      overflow: visible;
    }
    .page.collapsed .sidebar {
      height: 0;
      width: 100% !important;
      min-width: 100% !important;
      padding: 0;
      transform: translateY(-100%);
    }
    .collapse-btn { display: none; }
    .avatar-card { width: 100%; height: 200px; }
    .profile-card { width: 100%; margin-top: -60px; }
    .info-card { width: 100%; padding: 20px; margin-top: 0; }
    .main { height: 100vh; min-height: 100vh; width: 100%; }
    .card-qr { width: 55%; height: 400px; left: 5%; top: 100px; }
    .card-yulia { width: 50%; height: 300px; left: 35%; top: 300px; }
    .badge-vesh { left: 50%; top: 240px; }
    .badge-komdiz { left: 65%; top: 230px; }
    .about-circle { width: 80px; height: 80px; bottom: 16px; right: 16px; }
    .about-circle-text { font-size: 14px; }
    .about-circle-photo { width: 62px; height: 62px; left: 9px; bottom: -24px; }

    /* Project detail — mobile: stack vertically, full-width photos */
    .project-detail { overflow-y: auto !important; overflow-x: hidden !important; }
    .detail-body {
      flex-direction: column !important;
      padding-top: 60px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
      padding-bottom: 40px !important;
      gap: 8px !important;
      overflow: visible !important;
      height: auto !important;
      min-height: 100%;
    }
    .detail-sidebar {
      width: 100% !important;
      min-width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      border-radius: 16px !important;
      flex-shrink: 0 !important;
    }
    .detail-project-info { padding: 20px 16px 12px !important; }
    .detail-project-info h2 { font-size: 30px !important; }
    .detail-project-info p { font-size: 15px !important; }
    .detail-accordions { padding: 0 8px 8px !important; }
    .detail-gallery {
      flex: none !important;
      overflow: visible !important;
      border-radius: 16px !important;
      height: auto !important;
    }
    .detail-gallery img, .detail-gallery video, .detail-gallery .gallery-img-wrap {
      width: 100% !important;
      border-radius: 12px;
    }
    .detail-back { top: 12px; left: 12px; font-size: 14px; height: 34px; z-index: 220 !important; position: fixed !important; }

    /* Reflow all projects into a single column for mobile */
    .card-qr { width: 340px !important; height: 430px !important; left: 30px !important; top: 100px !important; }
    .card-yulia { width: 320px !important; height: 330px !important; left: 200px !important; top: 320px !important; }
    .badge-vesh { left: 380px !important; top: 240px !important; }
    .badge-komdiz { left: 400px !important; top: 200px !important; }


    .card-ozon1 { width: 400px !important; left: 30px !important; top: 1600px !important; transform: rotate(-3deg) !important; }
    .card-ozon2 { width: 280px !important; left: 280px !important; top: 1450px !important; transform: rotate(4deg) !important; }
    .badge-ozon { left: 40px !important; top: 1400px !important; transform: rotate(-6deg) !important; }
    .tag-ozon-1 { left: 50px !important; top: 2050px !important; }
    .tag-ozon-2 { left: 120px !important; top: 2050px !important; }
    .tag-ozon-3 { left: 200px !important; top: 2050px !important; }

    .card-redis1 { width: 500px !important; left: 30px !important; top: 2350px !important; transform: rotate(-2deg) !important; }
    .badge-redis { left: 40px !important; top: 2230px !important; }
    .tag-redis-1 { left: 50px !important; top: 2320px !important; }
    .tag-redis-2 { left: 150px !important; top: 2320px !important; }

    .card-tala1 { width: 500px !important; height: auto !important; left: 30px !important; top: 3100px !important; transform: rotate(2deg) !important; }
    .badge-tala { left: 40px !important; top: 2980px !important; }
    .tag-tala-1 { left: 50px !important; top: 3070px !important; }
    .tag-tala-2 { left: 130px !important; top: 3070px !important; }
    .tag-tala-3 { left: 220px !important; top: 3040px !important; }

    .card-tbank1 { width: 380px !important; height: auto !important; left: 30px !important; top: 3800px !important; transform: rotate(-2deg) !important; }
    .card-tbank2 { width: 340px !important; height: auto !important; left: 250px !important; top: 4100px !important; transform: rotate(5deg) !important; }
    .badge-tbank { left: 40px !important; top: 3700px !important; }
    .tag-tbank { left: 50px !important; top: 3670px !important; }

    .card-kalendar1 { width: 380px !important; height: auto !important; left: 30px !important; top: 4600px !important; transform: rotate(3deg) !important; }
    .card-kalendar2 { width: 340px !important; height: auto !important; left: 200px !important; top: 4900px !important; transform: rotate(-4deg) !important; }
    .badge-kalendar { left: 40px !important; top: 5120px !important; }
    .tag-kalendar { left: 50px !important; top: 5100px !important; }

  }

  /* Scrollbar for sidebar */
  .sidebar::-webkit-scrollbar { width: 0; }


  /* About me circle link — fixed bottom-right */
  .about-circle {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 102px; height: 102px;
    border-radius: 10000px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    z-index: 900;
  }
  .about-circle:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(255,255,255,0.15);
  }
  .about-circle-text {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    font-weight: 400;
    color: #141414;
    letter-spacing: -1.36px;
    line-height: 0.79;
    text-align: center;
    white-space: nowrap;
  }
  .about-circle-photo {
    position: absolute;
    left: 12px; bottom: -30px;
    width: 78px; height: 78px;
    border-radius: 1000px;
    object-fit: cover;
  }

  /* ========================================
     PROJECT DETAIL VIEW
     ======================================== */
  .project-detail {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #1c1c1c;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    overflow: hidden;
    clip-path: none !important;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.995);
    transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.24s ease;
  }
  .project-detail.open {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  .project-detail.morphing {
    opacity: 1;
    visibility: visible;
  }
  .project-detail.closing {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.995);
  }
  .project-detail.switching { clip-path: inset(0) !important; transition: none !important; }
  .project-detail.switching .detail-body { opacity: 0; transform: translateY(10px); }
  .project-detail .detail-body { transition: opacity 0.22s ease, transform 0.22s ease; }

  /* Back button */
  .detail-back {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 210;
    height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #F7F9F9;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    color: #141414;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    transition: background 0.2s;
  }
  .detail-back:hover { background: #edf0f0; }
  .detail-next {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 212;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f7f9f9;
    color: #141414;
    font: 30px/1 var(--font-heading);
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .detail-next svg { width: 26px; height: 26px; }
  .detail-next:hover { background: #d4ff00; }
  @media (max-width: 1100px) {
    .detail-next { right: 14px; bottom: 14px; width: 46px; height: 46px; font-size: 26px; }
    .detail-next svg { width: 22px; height: 22px; }
  }
  body:has(.project-detail.open) .about-circle { display: none !important; }

  /* Detail layout */
  .detail-body {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 73px;
    padding-left: 18px;
    padding-right: 18px;
    gap: 2px;
    overflow: hidden;
  }

  /* Detail sidebar */
  .detail-sidebar {
    width: 319px;
    min-width: 319px;
    height: calc(100vh - 73px - 18px);
    background: #242424;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
  }
  .detail-project-info {
    padding: 34px 22px 0;
    text-align: center;
  }
  .detail-project-info h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -3.2px;
    line-height: 79.061%;
    text-align: center;
    margin-bottom: 13px;
  }
  .detail-project-info p {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    opacity: 0.6;
    line-height: 99%;
    text-align: center;
  }

  /* Accordion sections */
  .detail-accordions {
    margin-top: auto;
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(100% - 300px);
    gap: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }
  .detail-accordions::-webkit-scrollbar { width: 5px; }
  .detail-accordions::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
  }
  .accordion-wrap {
    border-radius: 12px;
    background: #F7F9F9;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .accordion-btn {
    width: 100%;
    min-height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    color: #242424;
    line-height: 99%;
    transition: opacity 0.2s;
  }
  .accordion-btn:hover { opacity: 0.7; }
  .accordion-btn .acc-icon {
    font-size: 20px;
    font-weight: 300;
    color: #242424;
    flex-shrink: 0;
    line-height: 1;
  }
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(.4,0,.2,1), padding 0.3s cubic-bezier(.4,0,.2,1), opacity 0.25s ease;
    padding: 0 16px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #242424;
    line-height: 116%;
    opacity: 0;
  }
  .accordion-content.expanded {
    padding: 0 16px 14px;
    opacity: 0.6;
  }

  /* ===== EDIT MODE ===== */
  .edit-mode-section {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
  .edit-password {
    width: 130px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    background: #fff;
    outline: none;
  }
  .edit-password:focus { border-color: #999; }
  .edit-unlock-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #141414;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .edit-unlock-btn:hover { background: #333; }
  .edit-toolbar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .edit-tool-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    background: #141414;
    color: #fff;
  }
  .edit-tool-btn:hover { background: #333; }
  .edit-exit-btn { background: #c00; }
  .edit-exit-btn:hover { background: #e00; }
  .edit-visibility-section {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .edit-vis-title {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .edit-vis-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    margin: 2px 8px 2px 0;
    user-select: none;
  }
  .edit-vis-toggle input { accent-color: #00c8ff; width: 14px; height: 14px; cursor: pointer; }
  .edit-vis-toggle span { opacity: 0.8; }
  .edit-vis-toggle input:not(:checked) + span { opacity: 0.35; text-decoration: line-through; }
  .edit-vis-open {
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 11px; cursor: pointer; padding: 0 4px;
    font-family: var(--font-body); text-decoration: underline;
  }
  .edit-vis-open:hover { color: #fff; }

  /* Edit mode active state */
  body.edit-mode [data-project] {
    outline: 2px dashed rgba(0,200,255,0.5);
    outline-offset: 4px;
    cursor: move !important;
  }
  body.edit-mode [data-project]:hover {
    outline-color: rgba(0,200,255,0.9);
  }
  body.edit-mode [data-project].editing {
    outline: 2px solid #00c8ff;
    outline-offset: 4px;
  }
  .edit-props-panel {
    position: fixed;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 12px 16px 12px 10px;
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 10002;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    max-width: 520px;
    user-select: none;
  }
  .edit-props-panel.visible { display: flex; }
  .edit-props-handle {
    cursor: grab;
    color: rgba(255,255,255,0.3);
    font-size: 16px;
    letter-spacing: -2px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
  }
  .edit-props-handle:active { cursor: grabbing; }
  .edit-prop-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }
  .edit-prop-group label {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
  }
  .edit-prop-group input[type="range"] {
    width: 100px;
    accent-color: #00c8ff;
  }
  .edit-prop-value {
    font-family: var(--font-heading);
    font-size: 12px;
    color: #00c8ff;
    min-width: 32px;
    text-align: center;
  }
  .edit-rotate-handle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #00c8ff;
    border-radius: 50%;
    cursor: grab;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .edit-rotate-handle:hover { background: #00a0dd; }
  .edit-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #00c8ff;
    border: 2px solid #fff;
    border-radius: 2px;
    z-index: 9999;
    cursor: nwse-resize;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .edit-resize-handle.rh-br { bottom: -7px; right: -7px; cursor: nwse-resize; }
  .edit-resize-handle.rh-bl { bottom: -7px; left: -7px; cursor: nesw-resize; }
  .edit-resize-handle.rh-r { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }
  .edit-resize-handle.rh-l { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
  .edit-resize-handle:hover { background: #00a0dd; }
  .edit-info {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #141414;
    color: #fff;
    padding: 8px 20px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .edit-info.visible { opacity: 1; }


  /* ===== THEME TOGGLE ===== */
  html.light-theme body { background: #f0f0f0; color: #000; }
  html.light-theme .canvas-viewport {
    background-color: #f0f0f0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
  }
  html.light-theme .project-detail { background: #e8e8e8; }
  html.light-theme .detail-sidebar { background: #fff; }
  html.light-theme .detail-project-info h2 { color: #141414; }
  html.light-theme .detail-project-info p { color: #141414; }
  html.light-theme .detail-back { background: #141414; color: #fff; }
  html.light-theme .detail-back:hover { background: #333; }
  html.light-theme .detail-tag { background: #141414; color: #fff; }
  /* Shared settings row style */
  .settings-row {
    display: flex; align-items: center; cursor: pointer;
    font-family: var(--font-body); font-size: 15px; color: #222;
    padding: 2px 0; user-select: none; white-space: nowrap;
  }
  .settings-row svg { display: none; }
  .settings-row span { flex: 1; opacity: 0.8; }
  .settings-row .toggle-pill {
    width: 36px; height: 20px; border-radius: 10px;
    background: #ccc; position: relative; transition: background 0.25s;
    flex-shrink: 0; margin-left: 12px;
  }
  .settings-row .toggle-pill::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform 0.25s;
  }
  .settings-row.active .toggle-pill { background: #141414; }
  .settings-row.active .toggle-pill::after { transform: translateX(16px); }

  /* ===== TILT EFFECT ===== */
  .project-card { transform-style: preserve-3d; }
  .canvas-world { perspective: 1200px; }

  /* morphing transition styles merged into .project-detail above */

  /* ===== AUTO-TOUR ===== */
  .tour-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 40px; pointer-events: none;
  }
  .tour-skip {
    background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; padding: 10px 24px; border-radius: 99px;
    font-family: var(--font-body); font-size: 15px;
    cursor: pointer; pointer-events: auto;
    transition: background 0.2s;
  }
  .tour-skip:hover { background: rgba(255,255,255,0.25); }

  /* sound-toggle & theme-toggle now use .settings-row */

  /* ===== ADMIN ENHANCEMENTS ===== */
  .edit-props-panel {
    flex-wrap: wrap;
    max-width: 600px;
  }
  .edit-prop-row {
    display: flex; gap: 14px; align-items: center; width: 100%;
  }
  .edit-zindex-btns {
    display: flex; gap: 4px;
  }
  .edit-zindex-btns button {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1);
    color: #fff; font-size: 14px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
  }
  .edit-zindex-btns button:hover { background: rgba(255,255,255,0.2); }
  .edit-group-indicator {
    position: absolute; top: -8px; right: -8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #ff6b00; color: #fff; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; font-weight: 700;
  }
  body.edit-mode [data-project].grouped {
    outline-color: #ff6b00 !important;
  }

  /* ===== TEXT ME TRAIL ===== */
  .trail-pill {
    position: fixed;
    z-index: 999;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.5) translateY(8px);
    animation: trailIn 0.3s ease forwards;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .trail-pill.fading {
    opacity: 0 !important;
    transform: scale(0.4) translateY(-10px) !important;
    pointer-events: none;
  }
  @keyframes trailIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* Detail image gallery (scrollable) */
  .detail-gallery {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #242424;
    border-radius: 24px;
    scroll-behavior: smooth;
  }
  .detail-gallery::-webkit-scrollbar { width: 0; }
  .detail-gallery img, .detail-gallery video, .detail-gallery .gallery-img-wrap {
    width: 100%;
    display: block;
    height: auto;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(30px);
    animation: galleryStagger 0.4s ease forwards;
  }
  .detail-gallery video {
    background: #141414;
    object-fit: contain;
  }
  .detail-gallery [data-src] {
    min-height: min(52vw, 520px);
  }
  .detail-gallery [data-src].media-ready {
    min-height: 0;
  }
  @keyframes galleryStagger {
    to { opacity: 1; transform: translateY(0); }
  }
  /* placeholder colored blocks for gallery */
  .gallery-placeholder {
    width: 100%;
    aspect-ratio: 922 / 519;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .gallery-placeholder:nth-child(odd) { background: #2e2e2e; }
  .gallery-placeholder:nth-child(even) { background: #242424; }

  /* UI Concepts: media-only horizontal strip. */
  .project-detail[data-layout="media-strip"] { background: #000000; }
  .project-detail[data-layout="media-strip"] .detail-sidebar { display: none; }
  .project-detail[data-layout="media-strip"] .detail-body {
    height: 100%;
    padding: 74px 28px 28px;
    overflow: hidden;
  }
  .project-detail[data-layout="media-strip"] .detail-gallery {
    width: 100%;
    height: 100%;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 7vw;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    background: transparent;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 7vw;
    overscroll-behavior-x: contain;
  }
  .project-detail[data-layout="media-strip"] .detail-gallery::-webkit-scrollbar { height: 0; }
  .project-detail[data-layout="media-strip"] .detail-gallery img {
    width: auto;
    height: clamp(420px, 68vh, 700px);
    max-width: none;
    flex: 0 0 auto;
    border-radius: 16px;
    object-fit: contain;
    scroll-snap-align: center;
    box-shadow: 0 18px 48px rgba(0,0,0,0.25);
  }
  .project-detail[data-layout="media-strip"] .detail-gallery [data-src] {
    min-height: 0;
  }

  /* =========================================================
     VESH PROJECT — ArtCircles-style DARK layout + edit mode
     ========================================================= */
  .vesh-layout-container { display: none; }
  .project-detail[data-layout="vesh"] .detail-sidebar,
  .project-detail[data-layout="vesh"] .detail-gallery { display: none; }
  .project-detail[data-layout="vesh"] {
    background: #0f0f0f;
  }
  .project-detail[data-layout="vesh"] .detail-body {
    display: block;
    padding: 0;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    scroll-behavior: smooth;
    background: #0f0f0f;
  }
  .project-detail[data-layout="vesh"] .detail-body::-webkit-scrollbar { width: 0; }
  .project-detail[data-layout="vesh"] .vesh-layout-container { display: block; }

  /* ───────── HERO — dark, ring of tilted photos + central triad ───────── */
  .vesh-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f0f;
    overflow: hidden;
    padding: 80px 72px 40px;
  }
  .vesh-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .vesh-float {
    position: absolute;
    border-radius: 3px;
    overflow: hidden;
    background: #262626;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.55);
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0ms);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
    pointer-events: auto;
    will-change: transform;
  }
  .vesh-float.s-sm { width: 74px;  height: 86px;  }
  .vesh-float.s-md { width: 96px;  height: 114px; }
  .vesh-float.s-lg { width: 120px; height: 138px; }
  .project-detail[data-layout="vesh"].open .vesh-float {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
    animation: veshBob 7s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0ms) + 1.2s);
  }
  .vesh-float img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  @keyframes veshBob {
    0%, 100% { transform: translate(-50%, calc(-50% + 0px)) rotate(var(--rot, 0deg)) scale(1); }
    50%      { transform: translate(-50%, calc(-50% - 6px)) rotate(var(--rot, 0deg)) scale(1); }
  }

  /* Vertical side labels */
  .vesh-side-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.35em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.8s ease 1.2s;
  }
  .project-detail[data-layout="vesh"].open .vesh-side-label { opacity: 1; }
  .vesh-side-left  { left: 14px;  transform-origin: left center;  transform: translateY(-50%) rotate(-90deg); left: 30px; }
  .vesh-side-right { right: 14px; transform-origin: right center; transform: translateY(-50%) rotate(90deg);  right: 30px; }

  /* Central triad — left photo | middle text | right photo */
  .vesh-triad {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(auto, 360px) auto;
    gap: 34px;
    align-items: center;
    max-width: 920px;
    width: 100%;
  }
  .vesh-card {
    position: relative;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .project-detail[data-layout="vesh"].open .vesh-card {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .vesh-card.left  { transition-delay: 0.45s; }
  .vesh-card.mid   { transition-delay: 0.55s; }
  .vesh-card.right { transition-delay: 0.65s; }

  .vesh-card-img {
    width: 200px;
    height: 240px;
    border-radius: 3px;
    overflow: hidden;
    background: #262626;
    box-shadow: 0 18px 42px rgba(0,0,0,0.5);
  }
  .vesh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vesh-card-caption {
    margin-top: 18px;
    text-align: center;
    font-family: var(--font-body);
    color: #fff;
    line-height: 1.25;
  }
  .vesh-card-caption strong { display: block; font-size: 14px; font-weight: 500; }
  .vesh-card-caption span   { font-size: 12px; opacity: 0.5; }

  /* Middle text card */
  .vesh-middle {
    text-align: center;
    color: #fff;
    font-family: var(--font-body);
    padding: 0 4px;
  }
  .vesh-middle-brand {
    font-family: var(--font-heading);
    font-size: 42px;
    line-height: 0.9;
    letter-spacing: -2px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 10px;
  }
  .vesh-middle-brand .tiny {
    display: block;
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 400;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 6px;
  }
  .vesh-middle-rule {
    height: 1px;
    background: rgba(255,255,255,0.25);
    width: 64%;
    margin: 18px auto 16px;
  }
  .vesh-title {
    font-family: 'PP Neue Montreal', var(--font-body);
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #fff;
    margin: 0 0 10px;
  }
  .vesh-curated {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0 0 14px;
  }
  .vesh-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    margin: 0 auto 22px;
    max-width: 300px;
    opacity: 0.75;
  }
  .vesh-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #0f0f0f;
    border: none;
    border-radius: 100px;
    padding: 14px 26px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  .vesh-cta:hover  { background: #dcdcdc; }
  .vesh-cta:active { background: #bfbfbf; transform: translateY(2px) scale(0.97); box-shadow: inset 0 2px 6px rgba(0,0,0,0.3); }

  /* ───────── Scroll sections — cinematic ───────── */
  .vesh-cine {
    position: relative;
    background: #0f0f0f;
    padding: 120px 0 0;
  }
  .vesh-section-num {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.35em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 24px;
  }
  .vesh-section-head {
    font-family: 'PP Neue Montreal', var(--font-body);
    font-size: 40px;
    letter-spacing: -0.8px;
    color: #fff;
    text-align: center;
    margin: 0 0 48px;
    line-height: 1;
  }

  /* Full-bleed cinematic shot */
  .vesh-bleed {
    width: 100%;
    max-height: 86vh;
    overflow: hidden;
    margin: 0 0 120px;
  }
  .vesh-bleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .vesh-bleed img.in-view { opacity: 1; transform: scale(1); }

  /* Asymmetric collage — absolute-positioned items within a canvas */
  .vesh-collage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 120px;
    padding: 0 24px;
    aspect-ratio: 11 / 8;
  }
  .vesh-collage-item {
    position: absolute;
    overflow: hidden;
    border-radius: 4px;
    background: #262626;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .vesh-collage-item.in-view { opacity: 1; transform: translateY(0); }
  .vesh-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vesh-collage-item.k1 { left: 4%;  top: 6%;  width: 28%; aspect-ratio: 3/4; }
  .vesh-collage-item.k2 { left: 36%; top: 0%;  width: 36%; aspect-ratio: 16/10; }
  .vesh-collage-item.k3 { left: 75%; top: 14%; width: 22%; aspect-ratio: 3/4; }
  .vesh-collage-item.k4 { left: 10%; top: 56%; width: 30%; aspect-ratio: 16/10; }
  .vesh-collage-item.k5 { left: 44%; top: 54%; width: 24%; aspect-ratio: 1/1; }
  .vesh-collage-item.k6 { left: 70%; top: 60%; width: 26%; aspect-ratio: 4/3; }

  /* Infinite horizontal marquee of photos */
  .vesh-marquee {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin-bottom: 120px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .vesh-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: veshMarquee 42s linear infinite;
  }
  .vesh-marquee-track:hover { animation-play-state: paused; }
  .vesh-marquee-track img {
    height: 260px;
    width: auto;
    border-radius: 4px;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  }
  @keyframes veshMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Closing section */
  .vesh-closing {
    text-align: center;
    padding: 80px 24px 120px;
    background: #0f0f0f;
  }
  .vesh-closing-big {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16/9;
    margin: 0 auto 40px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  }
  .vesh-closing-big img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s ease, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .vesh-closing-big img.in-view { opacity: 1; transform: scale(1); }
  .vesh-closing-text {
    font-family: 'PP Neue Montreal', var(--font-body);
    font-size: 42px;
    line-height: 1;
    color: #fff;
    letter-spacing: -1px;
    margin: 0 0 24px;
  }
  .vesh-closing-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.35em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
  }

  /* ───────── EDIT MODE — Vesh ───────── */
  /* Inline editable text fields */
  body.edit-mode [data-vesh-edit] {
    outline: 1px dashed rgba(255,255,255,0.28);
    outline-offset: 4px;
    cursor: text;
    transition: outline-color 0.15s;
  }
  body.edit-mode [data-vesh-edit]:hover { outline-color: rgba(255,255,255,0.55); }
  body.edit-mode [data-vesh-edit]:focus { outline: 1px solid #D4FF00; }

  /* Removable blocks get a wrapper with a corner "×" button */
  .vesh-block-wrap { position: relative; }
  .vesh-remove-btn {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ff3b30;
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transition: transform 0.15s, background 0.15s;
  }
  .vesh-remove-btn:hover { background: #e0332b; transform: scale(1.08); }
  body.edit-mode .vesh-remove-btn { display: flex; }
  body.edit-mode .vesh-float .vesh-remove-btn,
  body.edit-mode .vesh-collage-item .vesh-remove-btn {
    display: flex;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    font-size: 12px;
  }
  body.edit-mode .vesh-float { outline: 1px dashed rgba(255,59,48,0.5); outline-offset: 2px; }
  body.edit-mode .vesh-collage-item { outline: 1px dashed rgba(255,59,48,0.5); outline-offset: 2px; }
  body.edit-mode .vesh-card  { outline: 1px dashed rgba(255,59,48,0.3); outline-offset: 8px; }
  body.edit-mode .vesh-bleed,
  body.edit-mode .vesh-marquee,
  body.edit-mode .vesh-closing { outline: 1px dashed rgba(255,59,48,0.25); outline-offset: -4px; }

  /* Edit toolbar shown only when body has .edit-mode AND data-layout="vesh" */
  .vesh-edit-toolbar {
    display: none;
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 260;
    gap: 10px;
    align-items: center;
    background: rgba(20,20,20,0.92);
    border: 1px solid rgba(212,255,0,0.35);
    backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #D4FF00;
    text-transform: uppercase;
    pointer-events: auto;
  }
  body.edit-mode .project-detail[data-layout="vesh"] ~ .vesh-edit-toolbar,
  body.edit-mode .project-detail[data-layout="vesh"].open .vesh-edit-toolbar {
    display: flex;
  }
  .vesh-edit-toolbar .sep {
    opacity: 0.35;
    padding: 0 4px;
  }
  .vesh-edit-toolbar .btn {
    background: transparent;
    border: 1px solid rgba(212,255,0,0.4);
    color: #D4FF00;
    padding: 5px 10px;
    border-radius: 100px;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .vesh-edit-toolbar .btn:hover { background: #D4FF00; color: #0f0f0f; }

  @media (max-width: 1024px) {
    .vesh-hero { padding: 70px 48px 40px; }
    .vesh-triad { grid-template-columns: 1fr 1fr 1fr; gap: 18px; max-width: none; }
    .vesh-card-img { width: 100%; height: auto; aspect-ratio: 5/6; }
    .vesh-middle-brand { font-size: 36px; }
    .vesh-section-head, .vesh-closing-text { font-size: 32px; }
  }
  @media (max-width: 1100px) {
    .vesh-hero { padding: 80px 16px 40px; min-height: auto; }
    .vesh-side-label { display: none; }
    .vesh-triad {
      grid-template-columns: 1fr;
      gap: 28px;
      max-width: 320px;
    }
    .vesh-card.left, .vesh-card.right { display: none; }
    .vesh-middle-brand { font-size: 32px; }
    .vesh-title { font-size: 28px; }
    .vesh-float.s-sm { width: 56px; height: 66px; }
    .vesh-float.s-md { width: 68px; height: 82px; }
    .vesh-float.s-lg { width: 82px; height: 96px; }
    .vesh-cine { padding: 60px 0 0; }
    .vesh-bleed { margin-bottom: 60px; }
    .vesh-collage { aspect-ratio: 3/4; margin-bottom: 60px; padding: 0 12px; }
    .vesh-collage-item.k1 { left: 2%;  top: 2%;  width: 45%; }
    .vesh-collage-item.k2 { left: 50%; top: 6%;  width: 48%; }
    .vesh-collage-item.k3 { left: 8%;  top: 36%; width: 40%; }
    .vesh-collage-item.k4 { left: 52%; top: 34%; width: 44%; }
    .vesh-collage-item.k5 { left: 4%;  top: 68%; width: 44%; }
    .vesh-collage-item.k6 { left: 52%; top: 66%; width: 44%; }
    .vesh-marquee { margin-bottom: 60px; }
    .vesh-marquee-track img { height: 160px; }
    .vesh-closing { padding: 40px 16px 80px; }
    .vesh-closing-text { font-size: 28px; }
  }

  /* ===== SIDEBAR LOAD ANIMATION ===== */
  .sidebar > * {
    opacity: 0;
    transform: translateY(20px);
  }
  .sidebar.animate-in > * {
    animation: sidebarFadeIn 0.5s ease forwards;
  }
  .sidebar.animate-in > *:nth-child(1) { animation-delay: 0.1s; }
  .sidebar.animate-in > *:nth-child(2) { animation-delay: 0.25s; }
  .sidebar.animate-in > *:nth-child(3) { animation-delay: 0.4s; }
  @keyframes sidebarFadeIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===== CUSTOM CURSOR ===== */
  .custom-cursor {
    position: fixed; top: 0; left: 0;
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10050;       /* above loader (10000) AND intro (10001) */
    transition: width 0.2s, height 0.2s, margin 0.2s, opacity 0.2s;
    mix-blend-mode: difference;
    margin: -4px 0 0 -4px;
  }
  .custom-cursor.hover {
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    background: #9a9a9a;   /* gray fill (difference blend keeps it subtle) */
    opacity: 0.2;          /* 20% as requested */
  }
  .custom-cursor.hidden { opacity: 0; }
  body { cursor: none !important; }
  body * { cursor: none !important; }

  /* ===== LOADER ===== */
  .loader-screen {
    position: fixed; inset: 0; z-index: 10000;
    background: #0F0F0F;
    transition: opacity 0.6s ease;
    overflow: hidden;
    cursor: grab;
    user-select: none;
  }
  .loader-screen.dragging { cursor: grabbing; }
  .loader-screen.fade-out { opacity: 0; pointer-events: none; }
  .loader-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
  }
  .loader-scene {
    position: absolute; inset: 0;
    perspective: 1600px;
    perspective-origin: 50% 50%;
    pointer-events: none;
  }
  .loader-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .loader-card {
    position: absolute;
    left: 0; top: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 14px 50px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
    opacity: 0;
    backface-visibility: hidden;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* ===== LOADER — FILM GRAIN OVERLAY ===== */
  .loader-grain {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    animation: grainShift 0.6s steps(6) infinite;
  }
  @keyframes grainShift {
    0%   { background-position:    0    0; }
    16%  { background-position:  -30px -60px; }
    33%  { background-position:   40px -20px; }
    50%  { background-position:  -50px  30px; }
    66%  { background-position:   20px  60px; }
    83%  { background-position:  -40px -30px; }
    100% { background-position:    0    0; }
  }
  .loader-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none;
  }
  @media (max-width: 640px) {
    .loader-screen {
      touch-action: none;
    }
    .loader-scene {
      perspective: 980px;
      perspective-origin: 50% 48%;
    }
    .loader-ring {
      top: 48%;
    }
    .loader-card {
      border-radius: 5px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 1px 6px rgba(0,0,0,0.35);
    }
    .loader-grain {
      opacity: 0.12;
    }
  }
  /* ===== THEME MORPH ===== */
  .theme-morph {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    contain: strict;
    will-change: opacity;
    transition: opacity 0.22s ease;
  }
  .theme-morph.expand { opacity: 1; }
  .theme-morph.fade { opacity: 0; transition: opacity 0.18s ease; }

  /* =========================================================
     INTRO SCREEN — после лоадера, перед главной
     ========================================================= */
  .intro-screen {
    position: fixed; inset: 0;
    z-index: 10001;           /* above the loader so main never flashes */
    background: #0f0f0f;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  .intro-screen.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .intro-screen.leaving {
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  /* Technical top & bottom meta bars */
  .intro-meta {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    display: flex;
    gap: 24px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .intro-meta.tl { top: 22px; left: 24px; }
  .intro-meta.tr { top: 22px; right: 24px; }
  .intro-meta.bl { bottom: 22px; left: 24px; transform: translateY(8px); }
  .intro-meta.br { bottom: 22px; right: 24px; transform: translateY(8px); }
  .intro-screen.visible .intro-meta { opacity: 1; transform: translateY(0); }

  /* Horizontal scan line */
  .intro-scan {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    opacity: 0;
    transform: translateY(0);
    pointer-events: none;
  }
  .intro-screen.visible .intro-scan {
    animation: introScan 1.4s cubic-bezier(0.7, 0, 0.3, 1) 0.05s forwards;
  }
  @keyframes introScan {
    0%   { opacity: 0; top: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; top: 100%; }
  }

  /* Central stack */
  .intro-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(340px, 92vw);
  }

  /* Title — exact Figma spec: 70px condensed */
  .intro-title {
    font-family: 'PP Neue Montreal', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 70px;
    line-height: 0.82;
    letter-spacing: -0.05em;
    text-align: center;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  .intro-title .row {
    display: block;
    opacity: 0;
    filter: blur(14px);
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                filter   0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .intro-screen.visible .intro-title .row {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
  .intro-screen.visible .intro-title .row.r1 { transition-delay: 0.35s; }
  .intro-screen.visible .intro-title .row.r2 { transition-delay: 0.55s; }

  /* Polaroid — Figma spec: 112x118 cells, 10px padding, 14px gap */
  .intro-photos {
    margin-top: 10px;
    margin-bottom: 14px;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    gap: 14px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: scale(0.86) translateY(8px) rotate(-1deg);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 14px 34px rgba(0,0,0,0.32);
  }
  .intro-screen.visible .intro-photos {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
    transition-delay: 0.85s;
  }
  .intro-photos .cell {
    width:  112px;
    height: 118px;
    border-radius: 4px;
    overflow: hidden;
    background: #222;
  }
  .intro-photos .cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Subtitle under photos — Figma: 20px, line-height 0.71, opacity 0.6 */
  .intro-sub {
    font-family: 'PP Neue Montreal', 'Inter', sans-serif;
    font-size: 20px;
    line-height: 1.05;
    color: rgba(255,255,255,0.6);
    text-align: center;
    max-width: 273px;
    margin: 0 0 40px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .intro-screen.visible .intro-sub {
    opacity: 1; transform: translateY(0);
    transition-delay: 1.15s;
  }

  /* Question — Figma: 20px, width 165px (natural wrap to 3 lines) */
  .intro-q {
    font-family: 'PP Neue Montreal', 'Inter', sans-serif;
    font-size: 20px;
    line-height: 1.1;
    color: #fff;
    text-align: center;
    max-width: 165px;
    margin: 0 0 18px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .intro-screen.visible .intro-q {
    opacity: 1; transform: translateY(0);
    transition-delay: 1.4s;
  }
  .intro-q,
  .intro-pills {
    display: none !important;
  }

  /* Pills — stacked, zero gap (touching each other) */
  .intro-pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .intro-pill {
    background: #383838;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: -0.07em;
    text-transform: uppercase;
    padding: 16px 15px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.22s ease,
                color 0.22s ease,
                box-shadow 0.22s ease;
  }
  .intro-pill:hover {
    background: #242424;          /* a bit darker on hover */
  }
  .intro-pill:active {
    background: #1a1a1a;          /* noticeably darker on press */
    transform: translateY(2px) scale(0.96);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
  }
  .intro-screen.visible .intro-pill { opacity: 1; transform: translateY(0); }
  /* Per-property delays: only the entrance (opacity+transform) is delayed;
     hover/active transitions (background/box-shadow) stay instant. */
  .intro-screen.visible .intro-pill.p1 { transition-delay: 1.65s, 1.65s, 0s, 0s, 0s; }
  .intro-screen.visible .intro-pill.p2 { transition-delay: 1.75s, 1.75s, 0s, 0s, 0s; }
  .intro-screen.visible .intro-pill.p3 { transition-delay: 1.85s, 1.85s, 0s, 0s, 0s; }
  .intro-screen.visible .intro-pill.p4 { transition-delay: 1.95s, 1.95s, 0s, 0s, 0s; }
  .intro-screen.leaving .intro-pill.picked {
    background: #fff; color: #000;
  }

  /* Small grain layer on intro */
  .intro-grain {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.1;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: grainShift 0.6s steps(6) infinite;
  }

  @media (max-width: 640px) {
    .intro-title { font-size: 54px; }
    .intro-photos { padding: 8px; gap: 10px; }
    .intro-photos .cell { width: 92px; height: 98px; }
    .intro-sub  { font-size: 17px; margin-bottom: 28px; }
    .intro-q    { font-size: 17px; margin-bottom: 14px; }
    .intro-pill { font-size: 13px; padding: 14px 14px; }
    .intro-meta { font-size: 10px; gap: 12px; }
    .intro-meta.tl, .intro-meta.tr { top: 12px; }
    .intro-meta.bl, .intro-meta.br { bottom: 12px; }
  }

  /* ===== INLINE EDIT ===== */
  body.edit-mode .detail-project-info h2[contenteditable],
  body.edit-mode .detail-project-info p[contenteditable] {
    outline: 1px dashed rgba(255,255,255,0.3);
    outline-offset: 4px;
    cursor: text;
  }
  body.edit-mode .detail-project-info h2[contenteditable]:focus,
  body.edit-mode .detail-project-info p[contenteditable]:focus {
    outline: 1px solid rgba(255,255,255,0.6);
  }
  body.edit-mode .detail-tag[contenteditable] {
    outline: 1px dashed rgba(255,255,255,0.3);
    outline-offset: 2px;
    cursor: text;
  }
  /* ===== RESPONSIVE PREVIEW ===== */
  .preview-overlay {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(0,0,0,0.85);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
  }
  .preview-overlay.active { display: flex; }
  .preview-bar {
    display: flex; gap: 8px; align-items: center;
  }
  .preview-bar button {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; padding: 8px 16px; border-radius: 8px;
    font-family: var(--font-body); font-size: 13px; cursor: pointer;
  }
  .preview-bar button.active { background: #fff; color: #000; }
  .preview-close {
    position: absolute; top: 20px; right: 20px;
    background: rgba(255,255,255,0.15); border: none;
    color: #fff; width: 36px; height: 36px; border-radius: 50%;
    font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
  }
  .preview-frame {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transition: width 0.3s ease, height 0.3s ease;
  }
  .preview-frame iframe {
    width: 100%; height: 100%; border: none;
  }
  /* ===== PHOTO MANAGEMENT ===== */
  .gallery-edit-bar {
    display: none; position: sticky; top: 0; z-index: 5;
    padding: 8px; background: rgba(20,20,20,0.9);
    backdrop-filter: blur(8px); border-radius: 12px;
    margin-bottom: 8px; gap: 8px; align-items: center;
  }
  body.edit-mode .gallery-edit-bar { display: flex; }
  .gallery-edit-bar button {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; padding: 6px 14px; border-radius: 8px;
    font-family: var(--font-body); font-size: 13px; cursor: pointer;
  }
  .gallery-edit-bar button:hover { background: rgba(255,255,255,0.25); }
  .gallery-img-wrap {
    position: relative; display: inline-block;
  }
  body.edit-mode .gallery-img-wrap { cursor: grab; }
  body.edit-mode .gallery-img-wrap:active { cursor: grabbing; }
  .gallery-img-remove {
    display: none; position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,0,0,0.8); color: #fff; border: none;
    font-size: 16px; cursor: pointer; z-index: 3;
    align-items: center; justify-content: center;
  }
  body.edit-mode .gallery-img-remove { display: flex; }
  /* ===== DELETE PROJECT ===== */
  .detail-delete-btn {
    display: none; margin-top: 16px; padding: 10px 20px;
    background: #ff3b30; color: #fff; border: none;
    border-radius: 12px; font-family: var(--font-body);
    font-size: 14px; cursor: pointer; width: 100%;
  }
  body.edit-mode .detail-delete-btn { display: block; }
  .detail-delete-btn:hover { background: #e0332b; }
  .confirm-modal {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.7); display: none;
    align-items: center; justify-content: center;
  }
  .confirm-modal.active { display: flex; }
  .confirm-box {
    background: #1a1a1a; border-radius: 16px; padding: 24px;
    text-align: center; color: #fff; max-width: 320px;
    font-family: var(--font-body);
  }
  .confirm-box h3 { margin-bottom: 8px; font-size: 18px; }
  .confirm-box p { margin-bottom: 20px; opacity: 0.7; font-size: 14px; }
  .confirm-box .confirm-btns { display: flex; gap: 8px; }
  .confirm-box .confirm-btns button {
    flex: 1; padding: 10px; border: none; border-radius: 10px;
    font-family: var(--font-body); font-size: 14px; cursor: pointer;
  }
  .confirm-cancel { background: #333; color: #fff; }
  .confirm-delete { background: #ff3b30; color: #fff; }
  /* ===== ANALYTICS ===== */
  .analytics-panel {
    display: none; margin-top: 8px;
    background: rgba(255,255,255,0.05); border-radius: 12px;
    padding: 12px; font-size: 13px;
  }
  body.edit-mode .analytics-panel { display: block; }
  .analytics-panel h4 {
    font-size: 14px; margin-bottom: 8px; opacity: 0.7;
    font-family: var(--font-body);
  }
  .analytics-stat {
    display: flex; justify-content: space-between;
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-body); font-size: 13px; color: #ccc;
  }
  .analytics-stat:last-child { border-bottom: none; }
  .analytics-stat .count { color: #fff; font-weight: 500; }

  /* ===== MOBILE POLISH ===== */
  @media (max-width: 1100px) {
    html, body {
      height: auto !important;
      min-height: 100%;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior-y: contain;
    }
    body, body * { cursor: auto !important; }
    .custom-cursor, .collapse-btn, .hand-indicator, .hand-video { display: none !important; }

    .page {
      display: block !important;
      height: auto !important;
      min-height: 100vh;
      overflow: visible !important;
      background: #0f0f0f;
    }
    .sidebar {
      position: relative !important;
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      padding: 10px 10px 6px !important;
      gap: 8px !important;
      overflow: visible !important;
      background: #0f0f0f !important;
      transform: none !important;
      opacity: 1 !important;
    }
    .avatar-card {
      width: 100% !important;
      height: clamp(176px, 48vw, 220px) !important;
      border-radius: 18px !important;
    }
    .avatar-icons { bottom: 10px !important; left: 10px !important; }
    .av-icon { width: 38px !important; height: 38px !important; }
    .profile-card {
      width: 100% !important;
      margin-top: -44px !important;
      padding: 18px 14px 16px !important;
      border-radius: 22px !important;
      min-height: 0 !important;
      flex: none !important;
    }
    .profile-card h1 {
      font-size: clamp(32px, 9vw, 40px) !important;
      letter-spacing: -2.2px !important;
      margin-bottom: 8px !important;
    }
    .profile-subtitle {
      font-size: 14px !important;
      margin-bottom: 18px !important;
    }
    .exp-row {
      width: 100%;
      gap: 10px !important;
      padding: 0 !important;
    }
    .exp-col {
      padding: 12px 8px;
      border-radius: 14px;
      background: #f3f3f3;
    }
    .exp-num-unit {
      font-size: 27px !important;
      letter-spacing: -1.7px !important;
    }
    .exp-desc {
      font-size: 13px !important;
      margin-top: 8px !important;
    }
    .info-card {
      width: 100% !important;
      padding: 16px 14px !important;
      border-radius: 22px !important;
      gap: 18px !important;
      flex: none !important;
      align-items: center !important;
    }
    .info-section {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .info-card h3 {
      font-size: 20px !important;
      margin-bottom: 10px !important;
      text-align: center !important;
      letter-spacing: -1.1px !important;
    }
    .logos-row {
      justify-content: center !important;
      gap: 12px !important;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 2px;
      -webkit-overflow-scrolling: touch;
    }
    .logo-item {
      min-width: 64px;
      flex: 0 0 64px;
    }

    .main {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      padding-bottom: 28px;
      background: #0f0f0f;
    }
    .filters {
      position: sticky !important;
      top: 0 !important;
      left: auto !important;
      transform: none !important;
      z-index: 60 !important;
      display: flex !important;
      width: 100%;
      overflow-x: auto;
      gap: 6px !important;
      padding: 10px 58px 10px 10px;
      background: linear-gradient(#0f0f0f 72%, rgba(15,15,15,0));
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .filters::-webkit-scrollbar { display: none; }
    .chip {
      height: 36px !important;
      padding: 0 13px !important;
      font-size: 14px !important;
      flex: 0 0 auto;
      box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    }
    .settings-btn {
      position: fixed !important;
      top: 10px !important;
      right: 10px !important;
      z-index: 80 !important;
      width: 38px !important;
      height: 38px !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    }
    .settings-dropdown {
      position: fixed !important;
      top: 54px !important;
      right: 10px !important;
      left: 10px !important;
      width: auto !important;
      max-height: calc(100vh - 72px);
      overflow-y: auto;
      z-index: 90 !important;
    }

    .canvas-viewport {
      position: relative !important;
      inset: auto !important;
      overflow: hidden !important;
      height: 6140px !important;
      min-height: 6140px !important;
      margin: 8px 10px 34px;
      padding: 0;
      border-radius: 0;
      cursor: auto !important;
      touch-action: pan-y !important;
      background-color: #0F0F0F !important;
      background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px) !important;
      background-size: 36px 31px !important;
      background-position: 0 0 !important;
      box-shadow: none;
    }
    .canvas-world {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      width: min(100%, 430px) !important;
      height: 6140px !important;
      display: block !important;
      margin: 0 auto;
      transform: none !important;
      will-change: auto !important;
      touch-action: pan-y !important;
    }

    .project-card,
    [class*="badge-"],
    [class*="tag-"] {
      transition: opacity 0.25s ease !important;
    }
    .project-card,
    .badge-electric, .badge-vesh, .badge-ozon, .badge-redis,
    .badge-tala, .badge-tbank, .badge-kalendar, .badge-ui {
      position: absolute !important;
      height: auto !important;
      margin: 0 !important;
      cursor: pointer;
      touch-action: pan-y;
    }
    .project-card {
      min-height: 0 !important;
      padding: 7px !important;
      border-radius: 22px !important;
      box-shadow:
        0 14px 34px rgba(0,0,0,0.38),
        inset 0 1px 1px rgba(255,255,255,0.18) !important;
    }
    .project-card::before { border-radius: 22px !important; }
    .project-card img,
    .project-card .placeholder-img {
      width: 100% !important;
      height: auto !important;
      display: block;
      border-radius: 16px !important;
      clip-path: inset(0 round 16px) !important;
      object-fit: contain !important;
    }
    .project-card .placeholder-img {
      aspect-ratio: 4 / 3;
      min-height: 260px;
    }
    .card-yulia, .card-ozon2, .card-tbank2, .card-kalendar2, .card-ui2,
    .card-redis2 { display: none !important; }
    .badge-electric, .badge-vesh, .badge-ozon, .badge-redis,
    .badge-tala, .badge-tbank, .badge-kalendar, .badge-ui {
      display: flex !important;
      padding: 16px !important;
      border-radius: 18px !important;
      gap: 8px !important;
      align-items: flex-start !important;
      text-align: left !important;
      white-space: normal !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    }
    .badge-electric h4, .badge-vesh h4, .badge-ozon h4, .badge-redis h4,
    .badge-tala h4, .badge-tbank h4, .badge-kalendar h4, .badge-ui h4 {
      font-size: 28px !important;
      letter-spacing: -1.8px !important;
      line-height: 0.9 !important;
      text-align: left !important;
      margin: 0 !important;
    }
    .badge-electric p, .badge-vesh p, .badge-ozon p, .badge-redis p,
    .badge-tala p, .badge-tbank p, .badge-kalendar p, .badge-ui p {
      font-size: 14px !important;
      line-height: 1.05 !important;
      text-align: left !important;
      margin: 0 !important;
    }

    .badge-komdiz,
    [class*="tag-"] {
      position: absolute !important;
      display: inline-flex !important;
      width: auto !important;
      height: auto !important;
      padding: 6px 13px !important;
      border-radius: 12px !important;
      background: #2A2A2A !important;
      color: #fff !important;
      font-size: 13px !important;
      z-index: 20 !important;
      touch-action: pan-y;
    }

    .badge-electric { top: 48px !important; left: 44px !important; width: 286px !important; transform: rotate(-4deg) !important; }
    .tag-electric-1 { top: 138px !important; left: 218px !important; transform: rotate(8deg) !important; }
    .tag-electric-2 { top: 164px !important; left: 274px !important; transform: rotate(-5deg) !important; }
    .card-electric1 { top: 194px !important; left: 10px !important; width: 350px !important; height: auto !important; transform: rotate(-4deg) !important; }
    .card-electric2 { top: 390px !important; left: 138px !important; width: 228px !important; height: auto !important; transform: rotate(7deg) !important; }

    .canvas-world [data-project]:not([data-project="electric"]) {
      translate: 0 620px !important;
    }

    .badge-vesh { top: 52px !important; left: 82px !important; width: 238px !important; transform: rotate(3deg) !important; }
    .badge-komdiz { top: 126px !important; left: 244px !important; transform: rotate(14deg) !important; }
    .card-qr { top: 164px !important; left: 18px !important; width: 260px !important; height: auto !important; transform: rotate(-8deg) !important; }
    .card-yulia { top: 384px !important; left: 132px !important; width: 220px !important; height: auto !important; transform: rotate(5deg) !important; }


    .badge-ozon { top: 1234px !important; left: 78px !important; width: 248px !important; transform: rotate(-5deg) !important; }
    .card-ozon2 { top: 1166px !important; left: 248px !important; width: 150px !important; height: auto !important; transform: rotate(5deg) !important; }
    .card-ozon1 { top: 1356px !important; left: 34px !important; width: 272px !important; height: auto !important; transform: rotate(-4deg) !important; }
    .tag-ozon-1 { top: 1695px !important; left: 42px !important; transform: rotate(17deg) !important; }
    .tag-ozon-2 { top: 1698px !important; left: 104px !important; transform: rotate(-6deg) !important; }
    .tag-ozon-3 { top: 1740px !important; left: 150px !important; transform: rotate(9deg) !important; }

    .badge-redis { top: 1890px !important; left: 30px !important; width: 220px !important; transform: rotate(-7deg) !important; }
    .tag-redis-1 { top: 1982px !important; left: 52px !important; transform: rotate(-13deg) !important; }
    .tag-redis-2 { top: 1974px !important; left: 154px !important; transform: rotate(3deg) !important; }
    .card-redis1 { top: 2028px !important; left: 18px !important; width: 332px !important; transform: rotate(-2deg) !important; }

    .badge-tala { top: 2540px !important; left: 96px !important; width: 232px !important; transform: rotate(4deg) !important; }
    .tag-tala-1 { top: 2500px !important; left: 86px !important; transform: rotate(-5deg) !important; }
    .tag-tala-2 { top: 2588px !important; left: 44px !important; transform: rotate(3deg) !important; }
    .tag-tala-3 { top: 2620px !important; left: 152px !important; transform: rotate(7deg) !important; }
    .card-tala1 { top: 2664px !important; left: 20px !important; width: 332px !important; height: auto !important; transform: rotate(3deg) !important; }

    .badge-tbank { top: 3208px !important; left: 32px !important; width: 224px !important; transform: rotate(-5deg) !important; }
    .tag-tbank { top: 3180px !important; left: 246px !important; transform: rotate(9deg) !important; }
    .card-tbank1 { top: 3340px !important; left: 24px !important; width: 276px !important; height: auto !important; transform: rotate(-3deg) !important; }
    .card-tbank2 { top: 3608px !important; left: 154px !important; width: 220px !important; height: auto !important; transform: rotate(6deg) !important; }

    .card-kalendar1 { top: 3950px !important; left: 24px !important; width: 286px !important; height: auto !important; transform: rotate(4deg) !important; }
    .card-kalendar2 { top: 4208px !important; left: 134px !important; width: 228px !important; height: auto !important; transform: rotate(-5deg) !important; }
    .badge-kalendar { top: 4472px !important; left: 68px !important; width: 224px !important; transform: rotate(4deg) !important; }
    .tag-kalendar { top: 4440px !important; left: 258px !important; transform: rotate(-10deg) !important; }

    .badge-ui { top: 4720px !important; left: 62px !important; width: 230px !important; transform: rotate(-3deg) !important; }
    .tag-ui { top: 4690px !important; left: 260px !important; transform: rotate(7deg) !important; }
    .card-ui1 { top: 4840px !important; left: 18px !important; width: 342px !important; height: auto !important; transform: rotate(3deg) !important; }


    [data-project].filtered-out { display: none !important; }

    .about-circle {
      width: 74px !important;
      height: 74px !important;
      right: 12px !important;
      bottom: 12px !important;
      z-index: 75 !important;
      box-shadow: 0 10px 28px rgba(0,0,0,0.32);
    }
    .about-circle-text {
      font-size: 12px !important;
      top: 7px !important;
      letter-spacing: -0.8px !important;
    }
    .about-circle-photo {
      width: 54px !important;
      height: 54px !important;
      left: 10px !important;
      bottom: -20px !important;
    }

    .project-detail.open {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch;
    }
    .detail-back {
      top: 10px !important;
      left: 10px !important;
      height: 36px !important;
      padding: 0 13px !important;
      border-radius: 12px !important;
      font-size: 14px !important;
      z-index: 230 !important;
    }
    .detail-body {
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;
      min-height: 100vh !important;
      overflow: visible !important;
      padding: 56px 10px 28px !important;
      gap: 10px !important;
    }
    .detail-sidebar {
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      border-radius: 18px !important;
      overflow: visible !important;
      flex: none !important;
    }
    .detail-project-info {
      padding: 22px 16px 14px !important;
      text-align: left !important;
    }
    .detail-project-info h2,
    .detail-project-info p {
      text-align: left !important;
    }
    .detail-project-info h2 {
      font-size: 32px !important;
      letter-spacing: -2px !important;
      line-height: 0.88 !important;
    }
    .detail-project-info p {
      font-size: 15px !important;
      line-height: 1.08 !important;
    }
    .detail-tags { justify-content: flex-start !important; }
    .detail-accordions {
      margin-top: 0 !important;
      padding: 0 10px 10px !important;
      flex: none !important;
      overflow: visible !important;
    }
    .detail-gallery {
      width: 100% !important;
      height: auto !important;
      overflow: visible !important;
      border-radius: 18px !important;
      flex: none !important;
      gap: 10px !important;
    }
    .detail-gallery img,
    .detail-gallery video,
    .detail-gallery .gallery-img-wrap {
      width: 100% !important;
      height: auto !important;
      border-radius: 14px !important;
    }
    .project-detail[data-layout="media-strip"] .detail-body {
      height: 100% !important;
      padding: 62px 0 18px !important;
      overflow: hidden !important;
    }
    .project-detail[data-layout="media-strip"] .detail-gallery {
      width: 100% !important;
      height: 100% !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 0 8vw !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      border-radius: 0 !important;
      scroll-padding-inline: 8vw;
    }
    .project-detail[data-layout="media-strip"] .detail-gallery img {
      width: auto !important;
      height: auto !important;
      max-width: calc(100vw - 28px) !important;
      max-height: min(64vh, 560px) !important;
      border-radius: 12px !important;
    }
  }

  /* ===== TOUR ORDER ===== */
  .tour-order-panel {
    display: none; margin-top: 8px;
  }
  body.edit-mode .tour-order-panel { display: block; }
  .tour-order-title {
    font-size: 14px; opacity: 0.7; margin-bottom: 6px;
    font-family: var(--font-body);
  }
  .tour-order-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: rgba(255,255,255,0.08);
    border-radius: 8px; margin-bottom: 4px;
    cursor: grab; font-family: var(--font-body);
    font-size: 13px; color: #ccc; user-select: none;
  }
  .tour-order-item:active { cursor: grabbing; background: rgba(255,255,255,0.15); }
  .tour-order-item .drag-handle { opacity: 0.4; }
  .tour-order-item.drag-over { border-top: 2px solid #fff; }

  /* ===== ADMIN WORKBENCH ===== */
  .admin-workbench {
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 370px;
    z-index: 10020;
    display: none;
    flex-direction: column;
    color: #f5f5f5;
    background: rgba(20,20,20,0.96);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    box-shadow: 0 20px 70px rgba(0,0,0,0.55);
    backdrop-filter: blur(22px);
    overflow: hidden;
    font-family: var(--font-body);
  }
  body.edit-mode .admin-workbench { display: flex; }
  .admin-workbench-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .admin-view-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex: 1;
    padding: 2px;
    border-radius: 9px;
    background: rgba(255,255,255,0.08);
  }
  .admin-view-switch button,
  .admin-tab,
  .admin-icon-btn,
  .admin-action-btn {
    border: 0;
    color: #ddd;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }
  .admin-view-switch button {
    min-height: 30px;
    border-radius: 7px;
    font-size: 13px;
  }
  .admin-view-switch button.active { background: #fff; color: #111; }
  .admin-save-state {
    min-width: 74px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    text-align: right;
  }
  .admin-save-state.dirty { color: #d4ff00; }
  .admin-publish-state {
    padding: 5px 7px;
    border-radius: 7px;
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.62);
    font-size: 11px;
    white-space: nowrap;
  }
  .admin-publish-state.published { background: #d4ff00; color: #101010; }
  .admin-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
  }
  .admin-tab.active { background: rgba(255,255,255,0.14); color: #fff; }
  .admin-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
  }
  .admin-panel.active { display: block; }
  .admin-section-title {
    margin: 4px 0 8px;
    color: rgba(255,255,255,0.48);
    font-size: 11px;
    text-transform: uppercase;
  }
  .admin-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-bottom: 12px;
  }
  .admin-coordinate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 10px;
  }
  .admin-coordinate-grid label { color: rgba(255,255,255,0.5); font-size: 10px; }
  .admin-coordinate-grid input {
    width: 100%;
    margin-top: 3px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    background: rgba(255,255,255,0.07);
    color: #fff;
    font: 12px var(--font-body);
  }
  .admin-icon-btn,
  .admin-action-btn {
    min-height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.09);
  }
  .admin-icon-btn:hover,
  .admin-action-btn:hover { background: rgba(255,255,255,0.16); }
  .admin-action-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
  }
  .admin-layer-list,
  .admin-gallery-list,
  .admin-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .admin-layer-filters {
    display: grid;
    grid-template-columns: 1fr 112px;
    gap: 5px;
    margin-bottom: 8px;
  }
  .admin-layer-filters .admin-field,
  .admin-layer-filters .admin-select { margin: 0; }
  .admin-layer-group {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
  }
  .admin-layer-group-header {
    display: grid;
    grid-template-columns: 24px 22px 1fr 30px 30px;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 3px 4px;
    background: rgba(255,255,255,0.1);
    font-size: 12px;
    font-weight: 700;
  }
  .admin-layer-group-header button { color: #eee; }
  .admin-layer-group.collapsed .admin-layer-group-items { display: none; }
  .admin-layer-group-items { display: flex; flex-direction: column; gap: 2px; padding: 3px; }
  .admin-layer-row {
    display: grid;
    grid-template-columns: 24px 1fr 30px 30px;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 3px 4px;
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
  }
  .admin-layer-row.selected { background: rgba(0,200,255,0.18); }
  .admin-layer-row.locked { opacity: 0.62; }
  .admin-layer-row.hidden { opacity: 0.42; }
  .admin-layer-row input[type="checkbox"] { accent-color: #00c8ff; }
  .admin-layer-name {
    width: 100%;
    border: 0;
    outline: 0;
    color: #eee;
    background: transparent;
    font: inherit;
    font-size: 13px;
  }
  .admin-layer-action {
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    color: #ddd;
    background: transparent;
    cursor: pointer;
  }
  .admin-layer-action:hover { background: rgba(255,255,255,0.12); }
  .admin-object-hidden { display: none !important; }
  .admin-object-deleted { display: none !important; }
  body.edit-mode [data-project].admin-object-locked { cursor: not-allowed !important; }
  body.edit-mode [data-project].admin-object-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0,0,0,0.12);
    pointer-events: none;
  }
  .admin-field,
  .admin-textarea,
  .admin-select {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    outline: none;
    background: rgba(255,255,255,0.07);
    color: #fff;
    font: inherit;
    font-size: 13px;
    padding: 9px 10px;
    margin-bottom: 7px;
  }
  .admin-textarea { min-height: 90px; resize: vertical; line-height: 1.25; }
  .admin-select option { color: #111; }
  .admin-accordion-editor {
    position: relative;
    padding: 8px 0 2px;
    border-top: 1px solid rgba(255,255,255,0.09);
  }
  .admin-remove-row {
    position: absolute;
    top: 8px;
    right: 0;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: rgba(255,80,80,0.13);
    color: #ff9b9b;
    cursor: pointer;
  }
  .admin-gallery-item {
    display: grid;
    grid-template-columns: 44px 48px 1fr 28px;
    align-items: center;
    gap: 7px;
    min-height: 54px;
    padding: 5px;
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
  }
  .admin-gallery-item.drag-over { box-shadow: inset 0 2px #00c8ff; }
  .admin-gallery-thumb {
    width: 48px;
    height: 42px;
    object-fit: cover;
    border-radius: 5px;
    cursor: zoom-in;
  }
  .admin-gallery-meta { min-width: 0; font-size: 11px; color: rgba(255,255,255,0.55); }
  .admin-gallery-meta .warning { color: #ffcf67; }
  .admin-gallery-meta .error { color: #ff8686; }
  .admin-gallery-meta strong {
    display: block;
    overflow: hidden;
    color: #eee;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
    font-size: 12px;
  }
  .admin-history-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 8px;
  }
  .admin-preflight-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
  .admin-preflight-item { padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,0.06); font-size: 11px; }
  .admin-preflight-item.error { color: #ff9a9a; }
  .admin-preflight-item.warning { color: #ffcf67; }
  .admin-preflight-item.ok { color: #d4ff00; }
  .admin-zoom-row {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
  }
  .admin-zoom-row input { width: 100%; accent-color: #fff; }
  .admin-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 13px;
  }
  .admin-guide-line {
    position: absolute;
    z-index: 10030;
    display: none;
    pointer-events: none;
    background: #00c8ff;
  }
  .admin-guide-line.vertical { top: -8000px; width: 1px; height: 16000px; }
  .admin-guide-line.horizontal { left: -8000px; width: 16000px; height: 1px; }
  .admin-distance-label {
    position: fixed;
    z-index: 10031;
    display: none;
    padding: 4px 7px;
    border-radius: 6px;
    background: #00c8ff;
    color: #071014;
    font: 11px var(--font-heading);
    pointer-events: none;
  }
  .admin-lasso {
    position: fixed;
    z-index: 10032;
    display: none;
    border: 1px solid #00c8ff;
    background: rgba(0,200,255,0.12);
    pointer-events: none;
  }
  body.admin-lasso-mode .canvas-viewport { cursor: crosshair !important; }
  .admin-mobile-safe-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10025;
    display: none;
    width: calc(var(--admin-mobile-width, 390px));
    height: 6140px;
    border-left: 1px dashed rgba(212,255,0,0.8);
    border-right: 1px dashed rgba(212,255,0,0.8);
    pointer-events: none;
  }
  body.admin-mobile-edit .admin-mobile-safe-frame { display: block; }
  body.edit-mode [data-project].admin-outside-safe {
    outline-color: #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255,107,107,0.24) !important;
  }
  .admin-safe-status { margin-top: 6px; color: rgba(255,255,255,0.55); font-size: 12px; }
  .admin-safe-status.warning { color: #ffcf67; }
  .admin-minimap {
    display: block;
    width: 100%;
    height: 150px;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: #0b0b0b;
    cursor: crosshair;
  }
  .admin-asset-preview {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0,0,0,0.86);
  }
  .admin-asset-preview.open { display: flex; }
  .admin-asset-preview img,
  .admin-asset-preview video { max-width: 90vw; max-height: 82vh; object-fit: contain; }
  .admin-asset-preview-meta {
    position: absolute;
    left: 20px;
    bottom: 18px;
    color: #fff;
    font-size: 13px;
  }
  body.admin-mobile-edit .sidebar,
  body.admin-mobile-edit .filters,
  body.admin-mobile-edit .settings-btn,
  body.admin-mobile-edit .about-circle { display: none !important; }
  body.admin-mobile-edit .page {
    display: block !important;
    width: var(--admin-mobile-width, 430px) !important;
    height: 100vh !important;
    margin-left: 18px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.admin-mobile-edit .main {
    width: var(--admin-mobile-width, 430px) !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  body.admin-mobile-edit .canvas-viewport {
    position: relative !important;
    inset: auto !important;
    width: var(--admin-mobile-width, 430px) !important;
    height: 6140px !important;
    min-height: 6140px !important;
    overflow: hidden !important;
    cursor: default !important;
  }
  body.admin-mobile-edit .canvas-world {
    position: relative !important;
    width: var(--admin-mobile-width, 430px) !important;
    height: 6140px !important;
    transform: none !important;
  }

  /* Canonical desktop layout from portfolio-backup-2026-08-31 (3).json. */
  .card-tala1 {
    padding: 5px;
    border-radius: 22px;
    --card-radius: 22px;
  }
  .card-tala1 img {
    border-radius: 17px;
    clip-path: inset(0 round 17px);
  }
  .tag-tala { padding: 5px 11px; }

  @media (min-width: 901px) {
    .card-electric1 { top: 366.5px; left: 380.167px; transform: rotate(-4deg); }
    .card-electric2 { top: 638.78px; left: 763px; transform: rotate(7deg); }
    .badge-electric { top: 300px; left: 500px; transform: matrix(0.996195, -0.0871557, 0.0871557, 0.996195, 0, 0); }
    .tag-electric-1 { top: 248px; left: 763px; transform: matrix(0.990268, 0.139173, -0.139173, 0.990268, 0, 0); }
    .tag-electric-2 { top: 292px; left: 805px; transform: matrix(0.996195, -0.0871557, 0.0871557, 0.996195, 0, 0); }
    .card-qr { top: -101px; left: 1327px; transform: rotate(-8deg); }
    .card-yulia { top: 131px; left: 1554px; transform: rotate(5deg); }
    .badge-vesh { top: 15px; left: 1717px; transform: matrix(0.998293, 0.0584004, -0.0584004, 0.998293, 0, 0); }
    .badge-komdiz { top: 7px; left: 1855px; transform: matrix(0.963677, 0.26707, -0.26707, 0.963677, 0, 0); }
    .card-ozon1 { top: 267.78px; left: 2215.25px; transform: rotate(-5.09deg); }
    .card-ozon2 { top: 112.28px; left: 2552.75px; transform: rotate(5.33deg); }
    .badge-ozon { top: 144.5px; left: 2286.75px; transform: rotate(-5.64deg); }
    .tag-ozon-1 { top: 750.78px; left: 2695.25px; transform: rotate(22.046deg); }
    .tag-ozon-2 { top: 753.78px; left: 2757.25px; transform: rotate(-6.461deg); }
    .card-redis1 { top: 1130px; left: 2372.62px; transform: rotate(-3.66deg); }
    .badge-redis { top: 1083.5px; left: 2316.75px; transform: matrix(0.987573, -0.157158, 0.157158, 0.987573, 0, 0); }
    .tag-redis-1 { top: 1219.89px; left: 2302.75px; transform: matrix(0.948213, -0.317636, 0.317636, 0.948213, 0, 0); }
    .tag-redis-2 { top: 1071px; left: 2542.53px; transform: matrix(0.99863, 0.052336, -0.052336, 0.99863, 0, 0); }
    .card-tala1 { top: 1065px; left: 1300.74px; transform: rotate(4deg); }
    .badge-tala { top: 1021px; left: 1757px; transform: rotate(-3deg); }
    .tag-tala-1 { top: 986px; left: 1360px; transform: rotate(-5deg); }
    .tag-tala-2 { top: 988px; left: 1418px; transform: rotate(-12.32deg); }
    .tag-tala-3 { top: 963px; left: 1395px; transform: rotate(7deg); }
    .card-tbank1 { top: 1301.5px; left: 261.167px; transform: rotate(-3deg); }
    .card-tbank2 { top: 1542.5px; left: 536.167px; transform: rotate(8deg); }
    .badge-tbank { top: 1408.5px; left: 690.167px; transform: rotate(-5.5deg); }
    .tag-tbank { top: 1394px; left: 858.167px; transform: rotate(9deg); }
    .card-kalendar1 { top: 1742.5px; left: 1344.57px; transform: rotate(5deg); }
    .card-kalendar2 { top: 1989px; left: 1632.57px; transform: rotate(-7deg); }
    .badge-kalendar { top: 1907px; left: 1815.57px; transform: matrix(0.997916, 0.0645323, -0.0645323, 0.997916, 0, 0); }
    .tag-kalendar { top: 1887.5px; left: 1976.57px; transform: matrix(0.984808, -0.173648, 0.173648, 0.984808, 0, 0); }
    .card-ui1 { top: 1779.25px; left: 2367.75px; transform: rotate(-4deg); }
    .card-ui2 { top: 1909.25px; left: 2777.75px; transform: rotate(7deg); }
    .badge-ui { top: 1700.5px; left: 2683.75px; transform: matrix(0.99863, 0.052336, -0.052336, 0.99863, 0, 0); }
    .tag-ui { top: 1828.5px; left: 2887.62px; transform: matrix(0.990268, -0.139173, 0.139173, 0.990268, 0, 0); }
  }