:root{
    /* --- токены 1-в-1 из стандартного MVM-шаблона (style.css), чтобы визитка
       была тем же продуктом, а не отдельным дизайном --- */
    --void:#0A0A0F;
    --void-2:#14141B;
    --void-3:#14141B;
    --card-border:rgba(255,255,255,0.06);
    --frost-bg:rgba(10,10,15,0.55);
    --frost-border:rgba(255,255,255,0.15);
    --line:rgba(198,169,105,0.35);
    --gold:#c79b63;
    --gold-2:#C6A969;
    --gold-soft:rgba(198,169,105,0.16);
    --ink:#F2EFE9;
    --ink-dim:#A9A5A0;
    --ink-faint:#6F6B67;
    --f-ui:'Rajdhani','Inter',sans-serif;
    --f-body:'Inter',sans-serif;
    --f-mono:'DM Mono',monospace;
    --card-w:400px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    background:var(--void);
    color:var(--ink);
    font-family:var(--f-body);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  body{
    display:flex;
    justify-content:center;
    padding:32px 16px 64px;
  }

  .device{
    width:100%;
    max-width:var(--card-w);
  }

  .card{
    background:linear-gradient(180deg, var(--void-2) 0%, var(--void) 60%);
    border:1px solid var(--card-border);
    border-radius:28px;
    overflow:hidden;
    position:relative;
    box-shadow:0 40px 80px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(199,155,99,0.06);
  }

  /* ---------- TOP BAR (floats over hero photo) ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 18px 0 18px;
    position:absolute;
    top:0; left:0; right:0;
    z-index:6;
  }
  .lang-switch{
    position:relative;
  }
  .lang-btn{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--frost-bg);
    backdrop-filter:blur(8px);
    border:1px solid var(--frost-border);
    color:var(--ink);
    font-family:var(--f-ui);
    font-size:12px;
    letter-spacing:0.06em;
    padding:8px 12px;
    border-radius:100px;
    cursor:pointer;
    backdrop-filter:blur(6px);
  }
  .lang-btn svg{width:12px;height:12px;stroke:var(--gold);transition:transform .2s ease;}
  .lang-btn.open svg{transform:rotate(180deg);}
  .lang-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    background:var(--void-3);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    min-width:120px;
    display:none;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.7);
  }
  .lang-menu.open{display:block;}
  .lang-menu button{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    color:var(--ink-dim);
    font-family:var(--f-ui);
    font-size:12px;
    letter-spacing:0.05em;
    padding:10px 14px;
    cursor:pointer;
  }
  .lang-menu button:hover{background:rgba(199,155,99,0.08); color:var(--gold-2);}
  .lang-menu button.active{color:var(--gold-2);}

  .topbar-left{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .expand-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px; height:34px;
    background:var(--frost-bg);
    backdrop-filter:blur(8px);
    border:1px solid var(--frost-border);
    border-radius:10px;
    color:var(--gold-2);
    font-size:13px;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:border-color .15s ease;
  }
  .expand-btn:hover{border-color:var(--gold);}
  #logoScanBtn{width:auto; padding:0 10px 0 11px; gap:4px;}
  #logoScanBtn svg{width:11px; height:11px; stroke:var(--gold); flex:none;}

  /* .brandmark — единственное правило показа [v] во всём проекте (см. стандарт
     MVM: один шрифт DM Mono, один цвет, один вес, без рамок и фонов). */
  .brandmark{
    font-family:var(--f-mono);
    font-weight:600;
    color:var(--gold);
    letter-spacing:-0.01em;
    font-size:20px;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.65));
  }

  /* ---------- FULLSCREEN PHOTO VIEWER ---------- */
  .photo-viewer{
    position:fixed; inset:0;
    background:rgba(5,6,8,0.94);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:110;
  }
  .photo-viewer.open{display:flex;}
  .photo-viewer img{
    max-width:92vw; max-height:88vh;
    border-radius:16px;
    object-fit:contain;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.8);
  }
  .photo-viewer-close{
    position:absolute; top:20px; right:20px;
    width:38px; height:38px;
    border-radius:50%;
    background:var(--frost-bg);
    backdrop-filter:blur(8px);
    border:1px solid var(--frost-border);
    color:var(--ink-dim);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:14px;
  }
  .photo-viewer-close:hover{border-color:var(--gold); color:var(--gold-2);}

  /* ---------- HERO ----------
     Full-bleed photo filling the top field of the card.
     Runs edge-to-edge, sits BEHIND the topbar (lang switch + [MVM] logo)
     and fades into the card background at the bottom via .hero-gradient.
     Recommended source image: /foto/felix.jpg — see comment near <img> tag
     for exact size spec. */
  .hero{
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 78% 15%, rgba(199,155,99,0.16), transparent 55%),
      linear-gradient(200deg, #1c2028 0%, #0c0e12 65%);
  }
  .hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 22%;
    display:block;
    cursor:pointer;
  }
  .hero-gradient{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0) 22%, rgba(10,12,16,0.15) 50%, rgba(10,12,16,0.98) 100%);
  }
  .hero-text{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:3;
    padding:0 22px 20px;
    pointer-events:none;
  }
  .hero-text .name{text-shadow:0 3px 16px rgba(0,0,0,0.75);}
  .hero-text .role{text-shadow:0 2px 10px rgba(0,0,0,0.7);}
  .hero-text .org{text-shadow:0 2px 10px rgba(0,0,0,0.7);}
  .hero .avatar-placeholder{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1;
    cursor:pointer;
  }
  .hero .avatar-placeholder svg{
    width:38%;
    opacity:0.28;
    stroke:var(--gold-2);
  }
  .hero .beam{
    position:absolute;
    top:0; right:16%;
    width:1px; height:55%;
    background:linear-gradient(180deg, transparent, var(--gold) 60%, transparent);
    opacity:0.5;
    z-index:2;
    pointer-events:none;
  }
  .verified-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 11px;
    border:1px solid var(--gold);
    border-radius:100px;
    background:rgba(199,155,99,0.09);
    width:fit-content;
  }
  .verified-badge i{color:var(--gold); font-size:11px;}
  .verified-badge span{
    font-family:var(--f-ui);
    font-size:10px;
    letter-spacing:0.08em;
    color:var(--gold-2);
  }

  /* photo swap note lives in code comment near the placeholder rule above */

  /* ---------- IDENTITY ---------- */
  .identity{padding:20px 22px 4px;}
  .name{
    font-family:var(--f-ui);
    font-weight:700;
    font-size:36px;
    letter-spacing:0.01em;
    line-height:1.05;
    color:var(--ink);
  }
  .role{
    font-family:var(--f-ui);
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--gold-2);
    text-transform:uppercase;
    margin-top:8px;
  }
  .org{
    font-family:var(--f-body);
    font-size:13px;
    color:var(--ink-dim);
    margin-top:2px;
  }
  .rule{
    width:40px; height:2px; background:var(--gold);
    margin:14px 0 14px;
  }
  .bio{
    font-size:13.5px;
    line-height:1.55;
    color:#c7cbd2;
    max-width:70%;
  }

  .actions{
    display:flex;
    gap:10px;
    margin-top:18px;
  }
  .actions button{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:var(--f-ui);
    font-size:11.5px;
    letter-spacing:0.1em;
    padding:13px 10px;
    border-radius:12px;
    cursor:pointer;
    transition:filter .15s ease, background .15s ease;
  }
  .actions button i{font-size:13px;}
  .btn-save{
    background:linear-gradient(135deg, var(--gold-2), var(--gold));
    border:1px solid var(--gold);
    color:var(--void);
    font-weight:600;
  }
  .btn-save:hover{filter:brightness(1.08);}
  .btn-share{
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold-2);
  }
  .btn-share:hover{background:rgba(199,155,99,0.1);}

  /* ---------- WALLET BLOCK (Apple/Google) ----------
     Тот же визуальный язык, что у .btn-share (золотой контур), а не своя
     придуманная приглушённая стилизация — чтобы читалось как часть общего
     набора кнопок действий, а не как второстепенный/неактивный элемент. */
  .wallet-block{
    display:flex;
    gap:10px;
    margin-top:10px;
  }
  .btn-wallet{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:var(--f-ui);
    font-weight:600;
    font-size:12px;
    letter-spacing:0.06em;
    padding:11px 8px;
    border-radius:12px;
    cursor:pointer;
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold-2);
    transition:background .15s ease;
  }
  .btn-wallet i{font-size:14px;}
  .btn-wallet:hover{background:rgba(199,155,99,0.1);}

  /* ---------- LINK LIST ---------- */
  .links{
    padding:22px 18px 0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .link-row{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--void-3);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:13px 14px;
    text-decoration:none;
    color:var(--ink);
    transition:border-color .15s ease, transform .15s ease;
  }
  .link-row:hover{border-color:var(--gold); transform:translateX(2px);}
  .link-icon{
    width:38px; height:38px;
    flex:none;
    border-radius:10px;
    border:1px solid var(--line);
    background:rgba(199,155,99,0.06);
    display:flex; align-items:center; justify-content:center;
  }
  .link-icon i{font-size:16px; color:var(--gold-2);}
  .link-text{flex:1; min-width:0;}
  .link-label{
    font-family:var(--f-ui);
    font-size:12px;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .link-handle{
    font-size:12.5px;
    color:var(--ink-dim);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .chev{color:var(--gold); flex:none; opacity:0.7; font-size:12px;}

  /* ---------- SCAN & CONNECT ---------- */
  .scan-block{
    margin:20px 18px 0;
    background:var(--void-3);
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
  }
  .scan-label{
    font-family:var(--f-ui);
    font-size:10px;
    letter-spacing:0.14em;
    color:var(--ink-dim);
    text-transform:uppercase;
  }
  .scan-btn{
    width:60px; height:60px;
    border-radius:16px;
    border:1px solid var(--gold);
    background:rgba(199,155,99,0.08);
    color:var(--gold-2);
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
  }
  .scan-btn:hover{background:rgba(199,155,99,0.16); transform:translateY(-1px);}
  .scan-hint{
    font-size:11.5px;
    color:var(--ink-dim);
    max-width:230px;
    line-height:1.5;
  }

  /* ---------- SCAN MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(5,6,8,0.82);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:100;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    width:100%; max-width:340px;
    background:var(--void-2);
    border:1px solid var(--line);
    border-radius:20px;
    padding:26px 22px 22px;
    position:relative;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.8);
  }
  .modal-close{
    position:absolute; top:14px; right:14px;
    width:30px; height:30px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    border:none;
    color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:12px;
  }
  .modal-title{
    font-family:var(--f-ui);
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--gold-2);
    text-align:center;
    margin-bottom:16px;
  }
  .modal-section{display:flex; flex-direction:column; align-items:center; gap:8px;}
  .qr-holder{
    background:#fff;
    padding:10px;
    border-radius:12px;
    width:160px; height:160px;
    display:flex; align-items:center; justify-content:center;
  }
  .modal-caption{font-size:11px; color:var(--ink-dim); text-align:center;}
  .modal-send-qr{
    display:flex; align-items:center; gap:6px;
    margin-top:10px;
    background:none; border:none;
    color:var(--gold-2);
    font-family:var(--f-ui);
    font-size:11px; letter-spacing:0.06em;
    cursor:pointer;
  }
  .modal-send-qr i{font-size:11px;}
  .modal-send-qr:hover{color:var(--gold);}
  .modal-divider{
    display:flex; align-items:center; gap:10px;
    margin:18px 0;
    color:var(--ink-dim);
    font-family:var(--f-ui);
    font-size:10px; letter-spacing:0.1em;
  }
  .modal-divider::before, .modal-divider::after{content:""; flex:1; height:1px; background:rgba(255,255,255,0.08);}
  .modal-action{
    display:flex; align-items:center; gap:8px;
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold-2);
    font-family:var(--f-ui);
    font-size:11px; letter-spacing:0.08em;
    padding:11px 18px;
    border-radius:100px;
    cursor:pointer;
  }
  .modal-action:hover{background:rgba(199,155,99,0.1);}
  .modal-utility{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%;
    margin-top:14px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.08);
    background:none; border-left:none; border-right:none; border-bottom:none;
    font-family:var(--f-body);
    font-size:12.5px;
    color:var(--ink);
    text-decoration:none;
    cursor:pointer;
  }
  .modal-utility i{color:var(--gold); font-size:13px;}
  .modal-utility:hover{color:var(--gold-2);}
  .modal-utility[hidden]{display:none;}

  /* ---------- QR SCANNER (full-screen) ----------
     Портирован 1:1 (классы, разметка, поведение) со стандартного модуля
     MVM Digital Passport — тот же движок (qr-scanner), тот же вид
     рамки-прицела с уголками, бегущей линией сканирования и
     "лок-боксом" при удачном считывании, чтобы сканер выглядел и вёл
     себя одинаково на всех продуктах платформы, а не как отдельная
     самодельная реализация. */
  .scan-overlay{
    position:fixed; inset:0; z-index:120; background:rgba(6,5,4,0.97);
    display:none; flex-direction:column; align-items:center; justify-content:center;
    padding:20px;
  }
  .scan-overlay.open{display:flex;}
  .scan-header{
    width:100%; max-width:340px; display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px; font-family:var(--f-ui); font-size:12px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-2);
  }
  .scan-close{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:var(--ink);
    width:30px; height:30px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .scan-close svg{width:14px;height:14px;}

  .scan-viewfinder{
    position:relative; width:100%; max-width:340px; aspect-ratio:1/1;
    border-radius:16px; overflow:hidden; background:#0c0b09;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.8);
  }
  #scanVideo{width:100%; height:100%; object-fit:cover;}

  .scan-corners span{
    position:absolute; width:30px; height:30px; z-index:3;
    filter:drop-shadow(0 0 6px rgba(199,155,99,0.5));
    transition:border-color .25s ease, filter .25s ease;
  }
  .sc-tl{top:14px; left:14px; border-top:2.5px solid var(--gold); border-left:2.5px solid var(--gold);}
  .sc-tr{top:14px; right:14px; border-top:2.5px solid var(--gold); border-right:2.5px solid var(--gold);}
  .sc-bl{bottom:14px; left:14px; border-bottom:2.5px solid var(--gold); border-left:2.5px solid var(--gold);}
  .sc-br{bottom:14px; right:14px; border-bottom:2.5px solid var(--gold); border-right:2.5px solid var(--gold);}
  .scan-corners.locked span{border-color:#BFE3A8; filter:drop-shadow(0 0 10px rgba(191,227,168,0.85));}

  .scan-line{
    position:absolute; left:8%; right:8%; height:2px; top:0; z-index:2;
    background:linear-gradient(90deg, transparent 0%, var(--gold) 15%, #fff 50%, var(--gold) 85%, transparent 100%);
    box-shadow:0 0 12px 2px rgba(199,155,99,0.85), 0 0 30px 6px rgba(199,155,99,0.35);
    opacity:0; pointer-events:none;
  }
  .scan-line.active{animation:scanSweep 1.9s ease-in-out infinite;}
  @keyframes scanSweep{
    0%{top:10%; opacity:0;} 8%{opacity:1;} 50%{top:90%; opacity:1;} 92%{opacity:1;} 100%{top:10%; opacity:0;}
  }

  .scan-lockbox{position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .12s ease;}
  .scan-lockbox.show{opacity:1;}
  .scan-lockbox polygon{fill:rgba(191,227,168,0.12); stroke:#BFE3A8; stroke-width:2.5; filter:drop-shadow(0 0 8px rgba(191,227,168,0.8));}

  .scan-status{
    position:absolute; bottom:0; left:0; right:0; z-index:4;
    padding:14px 16px 12px; background:linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
    font-family:var(--f-ui); font-size:12.5px; letter-spacing:0.02em; text-align:center;
    color:rgba(255,255,255,0.85); transition:color .2s ease;
  }
  .scan-status.ok{color:#B7D3A8;}
  .scan-status a{color:inherit; text-decoration:underline;}

  .scan-flash{position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none; background:#fff;}
  .scan-flash.play{animation:scanShutterFlash .55s ease forwards;}
  @keyframes scanShutterFlash{0%{opacity:0;} 15%{opacity:0.9;} 100%{opacity:0;}}

  .scanner-hint{margin-top:16px; font-size:12.5px; color:var(--ink-dim); text-align:center; max-width:320px; line-height:1.5;}

  .scan-fallback{margin-top:14px; display:flex; gap:8px; width:100%; max-width:340px;}
  .scan-fallback input{
    flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); color:var(--ink);
    padding:10px 12px; border-radius:10px; font-family:var(--f-body); font-size:12.5px;
  }
  .scan-fallback input::placeholder{color:var(--ink-faint);}
  .scan-fallback button{
    background:transparent; border:1px solid var(--line); color:var(--gold-2);
    padding:10px 16px; border-radius:10px; font-family:var(--f-ui); font-weight:700;
    font-size:11px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer;
  }

  /* ---------- VERIFICATION ID ---------- */
  .verify-id{
    margin:18px 22px 22px;
    text-align:center;
  }
  .vid-label{
    font-family:var(--f-ui);
    font-size:9px;
    letter-spacing:0.2em;
    color:var(--ink-dim);
    text-transform:uppercase;
    opacity:0.8;
  }
  .vid-code{
    font-family:var(--f-mono);
    font-size:14px;
    letter-spacing:0.1em;
    color:var(--gold-2);
    margin-top:6px;
  }

  /* ---------- PAGE FOOTER ----------
     Живёт вне .card, под всеми рамками визитки — общий "Powered by [v] MVM
     PLATFORM", один шрифт на всю строку, золотом выделен только сам [v]
     (см. angel-eyes.ru/anubis/ — тот же паттерн подвала на других продуктах). */
  .page-footer{
    margin:22px auto 0;
    text-align:center;
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .page-footer .brandmark{
    font-size:11px;
    font-weight:600;
    margin:0 1px;
  }

  .toast{
    position:fixed;
    bottom:24px; left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--void-3);
    border:1px solid var(--gold);
    color:var(--gold-2);
    font-family:var(--f-ui);
    font-size:12px;
    padding:12px 18px;
    border-radius:100px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:50;
    white-space:nowrap;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  @media (max-width:380px){
    .name{font-size:38px;}
    .bio{max-width:100%;}
  }