/* ============ Base ============ */
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; }
  body {
    font-family:"Ubuntu Mono", ui-monospace, "Menlo", "Consolas", monospace;
    background:#110826; color:#fff; overflow:hidden;
  }
  pre, button, input, textarea { font-family:inherit; }

  /* ============ CRT Screen (full viewport) ============ */
  .crt-screen {
    position:relative; overflow:hidden; min-height:100vh; width:100%;
    display:flex; flex-direction:column;
    background:#110826;
    background-image:
      linear-gradient(to bottom, rgba(255,42,138,0.03) 1px, transparent 1px),
      radial-gradient(circle at 90% 90%, rgba(255,42,138,0.15), transparent 25%);
    background-size:100% 3px, 100% 100%;
    filter:saturate(0.85);
    animation:flicker 5s linear infinite;
  }
  .crt-screen::before {
    content:""; pointer-events:none; position:absolute; left:0; top:0; z-index:10; height:100%; width:100%;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3) 1px, transparent 1px, transparent 2px);
    opacity:0.7;
  }
  .crt-screen::after {
    content:""; pointer-events:none; position:absolute; left:0; top:0; z-index:11; height:100%; width:100%;
    background:radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.7) 100%);
  }
  .horizontal-lines {
    pointer-events:none; position:absolute; left:0; top:0; z-index:9; height:100%; width:100%;
    background-image:repeating-linear-gradient(0deg, transparent, transparent 2px,
      rgba(255,42,138,0.07) 2px, rgba(255,42,138,0.07) 3px, transparent 3px, transparent 5px);
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.98) 50%, rgba(0,0,0,0.94) 75%, rgba(0,0,0,0.98) 100%);
            mask-image:linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.98) 50%, rgba(0,0,0,0.94) 75%, rgba(0,0,0,0.98) 100%);
  }
  .scanline, .bg-scanline {
    pointer-events:none; position:absolute; left:0; top:0; z-index:12; height:100px; width:100%;
    background:linear-gradient(to bottom, transparent, rgba(255,42,138,0.15) 50%, transparent);
    animation:scanline 10s linear infinite;
  }
  .pixel-artifacts {
    pointer-events:none; position:absolute; left:0; top:0; z-index:14; height:100%; width:100%;
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.7) 1px, transparent 2px),
      radial-gradient(circle at 40% 57%, rgba(255,42,138,0.7) 0px, rgba(255,42,138,0.4) 1px, transparent 1.5px),
      radial-gradient(circle at 83% 72%, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.3) 1px, transparent 1.5px),
      radial-gradient(circle at 94% 89%, rgba(255,42,138,0.9) 0px, rgba(255,42,138,0.5) 1px, rgba(255,42,138,0.3) 2px, transparent 3px),
      radial-gradient(circle at 58% 75%, rgba(0,0,0,0.7) 0px, rgba(0,0,0,0.5) 1px, transparent 2px);
    animation:artifact-flicker 4s steps(3) infinite;
  }
  .content-pixel-artifacts {
    pointer-events:none; position:absolute; left:0; top:0; z-index:5; height:100%; width:100%;
    background-image:
      radial-gradient(circle at 25% 37%, rgba(255,255,255,0.95) 0px, rgba(255,255,255,0.8) 1px, transparent 1.5px),
      radial-gradient(circle at 72% 51%, rgba(255,42,138,0.9) 0px, rgba(255,42,138,0.7) 1px, transparent 1.5px),
      radial-gradient(circle at 51% 79%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.65) 1px, transparent 1.2px),
      radial-gradient(circle at 85% 66%, rgba(0,0,0,0.8) 0px, rgba(0,0,0,0.6) 1px, transparent 1.5px),
      radial-gradient(circle at 34% 89%, rgba(0,0,0,0.7) 0px, rgba(0,0,0,0.5) 1px, transparent 1.2px);
    animation:pixel-misfires 3s steps(2) infinite;
  }
  .noise {
    pointer-events:none; position:absolute; left:0; top:0; z-index:13; height:100%; width:100%;
    opacity:0.08; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  }

  /* ============ Keyframes ============ */
  @keyframes flicker {
    0%,100%{opacity:1} 92%{opacity:.95} 93%{opacity:.85} 94%{opacity:.9}
    95%{opacity:.93} 96%{opacity:.95} 97%{opacity:.9} 98%{opacity:.95} 99%{opacity:.98}
  }
  @keyframes scanline { 0%{transform:translateY(-100px)} 100%{transform:translateY(100vh)} }
  @keyframes artifact-flicker { 0%,100%{opacity:1} 98%{opacity:1} 99%{opacity:.8} }
  @keyframes pixel-misfires {
    0%,100%{opacity:1} 50%{opacity:.93; transform:translateX(.5px)} 75%{opacity:.97; transform:translateX(-.5px)}
  }
  @keyframes text-afterglow {
    0%,100%{text-shadow:0 0 1px #fff,0 0 2px rgba(255,42,138,.5),0 0 3px rgba(255,42,138,.3); color:#fff; opacity:.98}
    25%{text-shadow:0 0 1px #fff,0 0 2px rgba(255,42,138,.4),0 0 3px rgba(255,42,138,.2); opacity:.96}
    50%{text-shadow:0 0 1px #fff,0 0 2px rgba(255,42,138,.6),0 0 4px rgba(255,42,138,.4); opacity:1}
    75%{text-shadow:0 0 1px #fff,0 0 2px rgba(255,42,138,.5),0 0 3px rgba(255,42,138,.3); opacity:.97}
  }
  @keyframes text-afterglow-dim {
    0%,100%{text-shadow:0 0 1px #fff,0 0 2px rgba(255,42,138,.3); color:#fff5f9; opacity:.9}
    50%{text-shadow:0 0 1px #fff,0 0 2px rgba(255,42,138,.5); color:#fff; opacity:.95}
  }
  @keyframes text-afterglow-bright {
    0%,100%{text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 4px rgba(255,42,138,.6); color:#fff; opacity:.98}
    50%{text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 5px rgba(255,42,138,.8); color:#fff; opacity:1}
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
  @keyframes pulse { 0%{opacity:1} 50%{opacity:.4} 100%{opacity:1} }

  .animate-text-afterglow { animation:text-afterglow 2s ease-in-out infinite; }
  .text-afterglow-dim, .animate-text-afterglow-dim { animation:text-afterglow-dim 2.3s ease-in-out infinite; }
  .animate-text-afterglow-bright { animation:text-afterglow-bright 1.7s ease-in-out infinite; }
  .svg-glow { filter:drop-shadow(0 0 1px rgba(255,255,255,.8)) drop-shadow(0 0 3px rgba(255,42,138,.5)) drop-shadow(0 0 5px rgba(255,42,138,.3)); }
  .cursor { display:inline-block; height:18px; width:10px; background:#ff2a8a; vertical-align:middle; animation:blink 1s step-end infinite; }

  /* ============ CRT Container ============ */
  #stage { display:flex; align-items:flex-start; justify-content:center; padding-top:20px; position:relative; z-index:20; }
  .crt-container {
    position:relative; overflow:hidden;
    width:440px; height:742px; max-height:742px;
    margin-top:-20px; padding-top:20px; padding-bottom:22px;
    transform-origin:top center;
    opacity:0; transition:opacity .5s;
  }
  .crt-container.on { opacity:1; }
  .logo-corner {
    position:absolute; z-index:50; top:0px; right:6px; width:104px; height:34px;
    display:flex; align-items:center; justify-content:flex-end; pointer-events:none; overflow:visible;
  }
  .logo-corner img { height:30px; object-fit:contain; margin:auto 0; }
  .b-top, .b-bottom {
    overflow:hidden; white-space:nowrap; font-weight:bold; color:#fff;
    position:relative; height:20px; display:flex; align-items:center; padding:0 4px;
  }
  .b-top { margin-top:-7px; justify-content:space-between; }
  .b-dashes { flex:1; overflow:hidden; text-align:center; letter-spacing:0.5em; padding:0 .5em; }
  .b-mid { display:flex; height:680px; }
  .b-side { width:13px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
  .b-side div { height:24px; display:flex; align-items:center; line-height:1; font-weight:bold; color:#fff; }
  #crt-content {
    position:relative; z-index:10; overflow:hidden; flex:1;
    height:680px; max-height:680px; padding-top:6px; padding-bottom:2px; background:transparent;
  }
  .inner-pad { height:100%; max-height:100%; overflow:hidden; position:relative; z-index:2; padding:6px 4px 4px 4px; }
  .nav-btn { cursor:pointer; letter-spacing:0; animation:text-afterglow-bright 1.7s ease-in-out infinite; }
  .b-top .text-afterglow-dim, .b-bottom .text-afterglow-dim, .b-side div {
    animation:none !important; text-shadow:none !important; opacity:.38; color:rgba(255,255,255,.75); }
  .b-top, .b-bottom { animation:none; }
  .b-dash-sm { letter-spacing:.5em; margin:0 4px; }

  /* ============ Slide-up menu ============ */
  #menu {
    position:absolute; top:20px; left:13px; right:13px; z-index:40;
    border-top:1px solid #374151; border-bottom:1px solid #374151;
    background:rgb(13,6,30); backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.6);
    color:#fff; transform:translateY(-110%); visibility:hidden; transition:transform .3s ease-out, visibility .3s;
    animation:text-afterglow 2s ease-in-out infinite;
  }
  #menu.open { transform:translateY(0); visibility:visible; }
  #menu .grid { display:grid; grid-template-columns:repeat(5,1fr); justify-items:center; padding:6px 0 10px; }
  #menu a { color:#fff; text-decoration:none; font-size:11px; padding:6px 2px; cursor:pointer; letter-spacing:.02em; }
  #menu a:hover { background:rgba(22,78,99,.3); color:#67e8f9; }
  .menu-cap { display:flex; justify-content:space-between; align-items:center;
    padding:7px 10px 4px; font-size:9px; letter-spacing:.14em; opacity:.85;
    border-bottom:1px dashed rgba(255,255,255,.25); margin-bottom:2px; }
  .menu-cap .menu-close { cursor:pointer; font-size:12px; opacity:1; padding:2px 4px; }
  .menu-cap .menu-close:hover { color:#67e8f9; }
  .info-page { display:flex; flex-direction:column; height:100%; color:#fff; font-size:12px; }
  .info-page .body { flex:1; overflow-y:auto; padding:6px 10px; line-height:1.5; opacity:.85; white-space:pre-wrap; }
  .info-page .foot { padding:8px 0 4px; }
  .prof-row { display:flex; justify-content:space-between; align-items:center; font-size:12px;
    border-bottom:1px dashed rgba(255,255,255,.25); padding:9px 2px; }
  .bld-what { font-size:10px; opacity:.75; line-height:1.5; padding:0 10px 8px; color:#ff9ecb; }
  .bld-form { flex:1; min-height:0; overflow-y:auto; padding:0 10px; }
  .bld-form label { display:block; font-size:10px; opacity:.75; letter-spacing:.1em; margin:8px 0 3px; }
  .bld-form input { width:100%; background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff;
    font-family:inherit; font-size:13px; padding:8px; outline:none; caret-color:#ff2a8a; box-sizing:border-box; }
  .bld-form input:focus { border-color:#ff2a8a; box-shadow:0 0 6px rgba(255,42,138,.35); }
  .bld-prevbox { margin-top:12px; border:1px dashed rgba(255,42,138,.6); padding:14px 10px; text-align:center;
    font-size:13px; color:#ff9ecb; }
  .bld-foot { display:flex; gap:8px; padding:10px; align-items:center; }
  .bld-save { font-size:11px; padding:8px 12px; color:#ff9ecb !important; border-color:#ff2a8a !important; margin-left:auto; }
  .mix-row { display:flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.35);
    padding:6px 8px; margin-bottom:4px; font-size:12px; }
  .mix-num { opacity:.6; font-size:10px; min-width:18px; }
  .mix-t { flex:1; }
  .mix-addrow { display:flex; gap:5px; margin-top:6px; align-items:stretch; }

  /* ============ Pages ============ */
  .page { display:none; height:100%; width:100%; }
  .page.active { display:block; }
  .fade-in { animation:fadeIn .5s ease both; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }

  /* Page 1 — eye */
  #page-eye .wrap { margin:0; padding:0; display:flex; height:100%; width:100%; align-items:center; justify-content:center; }
  #page-eye .imgbox { position:relative; height:100%; width:100%; }
  #eye-img { filter:grayscale(.75); }
  #page-eye img { height:100%; width:100%; object-fit:cover; filter:contrast(1.2) brightness(0.9); }

  /* Page 2 — hero */
  #page-hero { position:relative; overflow:hidden; height:100%; }
  #page-hero .scanl { pointer-events:none; position:absolute; inset:0; z-index:10; opacity:.2;
    background-image:linear-gradient(transparent 50%, rgba(0,0,0,.4) 50%); background-size:100% 4px; }
  .ascii-logo { color:#ff2a8a; text-align:center; animation:text-afterglow 2s ease-in-out infinite; }
  .ascii-logo pre { display:inline-block; font-size:.7rem; line-height:1.15; }
  .logo-line { overflow:hidden; white-space:nowrap; display:flex; justify-content:center;
    transition:transform 2s ease-out, opacity .7s; }
  #hero-typed { white-space:pre-line; text-align:left; font-size:18px; line-height:1.25; max-width:380px; margin:0 auto; }
  #hero-buttons { margin-top:24px; display:none; text-align:center; }
  .tap-btn {
    border:none; border-radius:2px; background:#e91e63; color:#000;
    padding:10px 16px; font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.1em;
    min-width:155px; width:155px; height:36px; cursor:pointer;
    animation:pulse 1s infinite; transition:all .15s;
  }
  .tap-btn:hover { box-shadow:0 0 8px rgba(233,30,99,.8); transform:scale(1.03); }
  .tap-btn:active { transform:scale(.97); }
  #hero-biglogo {
    position:absolute; z-index:999; display:none; align-items:center;
    top:35%; left:4%; width:487px; max-width:92%; height:214px;
    opacity:0; transform:scale(.8); transition:opacity .8s, transform .8s;
  }
  #hero-biglogo.show { display:flex; opacity:1; transform:scale(1); }
  #hero-biglogo img { height:100%; width:100%; object-fit:contain; object-position:left; }

  /* Page 4 — code entry */
  #page-code .root { position:relative; display:flex; height:100%; width:100%; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:8px; color:#fff; animation:text-afterglow 2s ease-in-out infinite; overflow:hidden; }
  #page-code .divlines { pointer-events:none; position:absolute; inset:0; display:flex; justify-content:space-between; padding:0 15%; }
  #page-code .divlines div { height:100%; border-left:1px solid rgba(107,114,128,.2); }
  #page-code h2 { font-size:20px; letter-spacing:.2em; color:#d8b4fe; font-weight:normal; }
  #page-code .sub { margin-top:4px; font-size:13px; color:rgba(233,213,255,.6); }
  #page-code .padwrap { width:100%; position:relative; flex:1; min-height:0; overflow:hidden; }
  #page-code .keys { position:absolute; left:26px; top:0; }
  #page-code .keys pre { cursor:pointer; font-size:17px; line-height:1.2em; color:#fff; }
  #page-code .keys .krow:hover { color:#d8b4fe; }
  #page-code .slots { position:absolute; left:63%; top:6px; }
  #page-code .slots pre { font-size:17px; line-height:1.2em; color:#fff; }
  #page-code .digit-set { color:#ff2a8a; text-shadow:0 0 6px rgba(255,42,138,.6); }
  #page-code .slot-cursor { color:#ff2a8a; animation:blink 1s step-end infinite; }
  #page-code .backbtn { color:#d8b4fe; }
  #page-code .backbtn { cursor:pointer; text-align:center; }
  #page-code .backbtn:hover { color:#d8b4fe; }
  #page-code .submit {
    display:block; margin:0; height:44px; width:128px; box-sizing:border-box; font-family:inherit;
    background:rgba(0,0,0,.4); font-size:15px; cursor:pointer;
    border:1px solid #1f2937; color:#4b5563;
  }
  #page-code .submit.ready { border-color:#0e7490; color:#22d3ee; cursor:pointer; }
  #page-code .submit.ready:hover { border-color:#06b6d4; }
  #page-code .submit:disabled { cursor:not-allowed; }
  #code-submit-wrap { position:static; width:100%; justify-content:center; }

  /* Page 5 — user accounts */
  #page-user { color:#fff; animation:text-afterglow 2s ease-in-out infinite; }
  #page-user .title-pre { color:#22d3ee; text-align:center; display:inline-block; }
  #page-user .box { border:1px solid #fff; padding:12px; margin-bottom:12px; }
  #page-user .tabbtn { padding:4px 12px; background:none; border:none; color:#fff; cursor:pointer; font-size:15px; }
  #page-user .tabbtn.sel { border-bottom:2px solid #22d3ee; color:#22d3ee; }
  #page-user label { display:block; font-size:13px; opacity:.8; margin-bottom:4px; }
  #page-user input { width:100%; border:1px solid #fff; background:transparent; padding:6px; font-size:13px; color:#fff; }
  #page-user input:focus { outline:none; border-color:#22d3ee; }
  #page-user .go { width:100%; border:1px solid #22d3ee; background:none; padding:6px; font-size:13px; color:#22d3ee; cursor:pointer; margin-top:12px; }
  #page-user .go:hover { background:rgba(34,211,238,.1); }
  #page-user .locked { border:1px solid #fff; padding:8px; text-align:center; }
  #page-user .locked pre { display:inline-block; font-size:12px; }
  #page-user .vtag { margin-top:8px; text-align:center; font-size:8px; opacity:.6; }
  .toast {
    position:absolute; top:34px; left:50%; transform:translateX(-50%) translateY(-80px); z-index:70;
    background:rgba(8,6,19,.95); border:1px solid #22d3ee; color:#22d3ee;
    padding:6px 14px; font-size:12px; transition:transform .3s ease; white-space:nowrap;
  }
  .toast.show { transform:translateX(-50%) translateY(0); }

  /* Page 6 — my codes */
  #page-codesdb { color:#fff; font-size:13px; }
  #page-codesdb .hdr pre { color:#67e8f9; font-size:10px; text-align:center; line-height:1.2; }
  #page-codesdb .bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  #page-codesdb .addbtn { border:1px solid #06b6d4; background:none; color:#22d3ee; padding:4px 12px; font-size:12px; cursor:pointer; }
  #page-codesdb .addbtn:hover { background:rgba(22,78,99,.3); }
  #page-codesdb .tabs button { background:none; border:none; color:#9ca3af; font-size:12px; padding:4px 12px; cursor:pointer; }
  #page-codesdb .tabs button.sel { color:#22d3ee; border-bottom:2px solid #06b6d4; }
  #page-codesdb .list { max-height:360px; overflow-y:auto; padding-right:4px; }
  #page-codesdb .list::-webkit-scrollbar { width:6px; }
  #page-codesdb .list::-webkit-scrollbar-track { background:rgba(255,255,255,.06); }
  #page-codesdb .list::-webkit-scrollbar-thumb { background:#ff2a8a; }
  #page-codesdb .item { border:1px solid #374151; padding:6px; margin-bottom:8px; cursor:pointer; display:flex; }
  #page-codesdb .item:hover { background:#111827; }
  #page-codesdb .item .icon { width:40px; margin-right:12px; display:flex; align-items:center; justify-content:center; color:#22d3ee; }
  #page-codesdb .item .icon pre { font-size:10px; line-height:1.2; }
  #page-codesdb .item .t { color:#22d3ee; font-weight:bold; }
  #page-codesdb .item .id { color:#6b7280; float:right; font-weight:normal; }
  #page-codesdb .meta { color:#9ca3af; margin-top:4px; font-size:12px; line-height:1.4; }
  .hr { border-top:1px solid #1f2937; margin:8px 0; }

  /* Pages 9/10 — DBL box pages */
  .dblbox { position:absolute; z-index:10; font-size:16px; color:#fff; }
  .dblbox .row { display:flex; flex-direction:row; justify-content:space-between; }
  .dblbox .vcol { display:flex; flex-direction:column; overflow:hidden; }
  .dblbox .vcol span { line-height:1; }
  .dblbox .hline { overflow:hidden; white-space:nowrap; line-height:1; }
  .dbl-inner { flex:1; position:relative; }
  .ascii-title { position:absolute; z-index:20; font-size:16px; color:#fff; }
  .ascii-title .cap { overflow:hidden; white-space:nowrap; line-height:1; }
  .ascii-title .mid { position:absolute; top:16px; left:8px; right:8px; height:calc(100% - 32px);
    display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .share-opt { border:1px solid #fff; padding:12px; cursor:pointer; margin-bottom:12px; transition:all .2s; }
  .share-opt:hover { background:rgba(255,255,255,.05); }
  .share-opt.sel { border-color:#22d3ee; background:rgba(22,78,99,.2); }
  .share-opt .chk { height:14px; width:14px; border:1px solid #fff; margin-right:10px; display:inline-flex; align-items:center; justify-content:center; }
  .share-opt.sel .chk { border-color:#22d3ee; }
  .share-opt.sel .chk i { display:block; height:7px; width:7px; background:#22d3ee; }
  .share-detail { border:1px dashed #fff; padding:12px; margin-bottom:12px; display:none; }
  .btnrow { display:flex; justify-content:space-between; margin-top:12px; }
  .ghostbtn { border:1px solid #fff; background:transparent; color:#fff; padding:8px 16px; font-size:13px; cursor:pointer; }
  .ghostbtn:hover { background:rgba(255,255,255,.1); }
  .greenbtn { border:1px solid #22c55e; background:transparent; color:#22c55e; padding:8px 16px; font-size:13px; cursor:pointer; }
  .greenbtn:hover { background:rgba(34,197,94,.1); }
  .statgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:280px; margin:0 auto 24px; }
  .statgrid > div { border:1px solid #fff; padding:10px; text-align:left; }
  .statgrid p.k { font-size:11px; opacity:.7; }
  .statgrid p.v { margin-top:4px; font-size:19px; }


  /* ============ v2: orange 'modern vibescan' screens ============ */
  .vs2 { position:relative; height:100%; width:100%; color:#FC8B07; overflow:hidden; }
  .vs2 .bgimg { position:absolute; inset:0; height:100%; width:100%; object-fit:contain; pointer-events:none; }
  .vs2-col { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .vs2 .svgbtn { cursor:pointer; transition:filter .15s, transform .1s; display:block; }
  .vs2 .svgbtn:hover { filter:brightness(1.25) drop-shadow(0 0 6px rgba(252,139,7,.6)); }
  .vs2 .svgbtn:active { transform:scale(.98); }
  .vs2 .orange { color:#FC8B07; }
  .vs2-input { position:relative; width:255px; height:60px; }
  .vs2-input svg.frame { position:absolute; inset:0; width:100%; height:100%; }
  .vs2-input .lbl { position:absolute; top:-7px; left:26px; font-size:11px; color:#FC8B07; z-index:6; background:transparent; }
  .vs2-input input { position:absolute; inset:0; z-index:5; width:100%; height:100%; background:transparent; border:none; color:#fff; font-size:14px; padding:8px 26px; outline:none; }
  .vs2-card { position:relative; display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; margin-bottom:10px; }
  .vs2-card img.cardbg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .vs2-card:hover { filter:brightness(1.2); }
  .vs2-qrthumb { position:relative; width:64px; height:64px; padding:5px; background-image:url(assets/ad7bc2c0f.svg); background-size:contain; }
  .vs2-qrthumb pre { font-size:6px; line-height:1.1; color:#fff; }
  .vs2-toggle { cursor:pointer; }
  .vs2-toggle:hover { filter:brightness(1.3); }
  #screens-btn { display:none; position:absolute; z-index:60; top:2px; left:26px; font-size:12px; cursor:pointer; font-weight:bold;
    animation:text-afterglow-bright 1.7s ease-in-out infinite; }
  #screens-overlay {
    position:absolute; inset:20px; z-index:80; display:none; background:rgba(8,4,20,.96);
    border:1px solid #ff2a8a; box-shadow:0 0 14px rgba(255,42,138,.5); padding:18px; overflow-y:auto;
  }
  #screens-overlay.open { display:block; }
  #screens-overlay h3 { color:#ff2a8a; font-size:13px; letter-spacing:.15em; margin:12px 0 6px; font-weight:normal; }
  #screens-overlay a { display:block; color:#fff; font-size:14px; padding:4px 8px; cursor:pointer; text-decoration:none; }
  #screens-overlay a:hover { background:rgba(255,42,138,.15); color:#ff9ecb; }
  #screens-overlay .o a:hover { background:rgba(252,139,7,.15); color:#FC8B07; }


  /* ============ concierge chat ending ============ */
  #concierge { position:absolute; inset:0; z-index:30;
    display:none; flex-direction:column; font-family:inherit;
    background:transparent; }
  #concierge.show { display:flex; animation:fadeIn .5s ease both; }
  .cg-head { display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; border-bottom:1px dashed rgba(255,255,255,.4); }
  .cg-head img { height:44px; filter:drop-shadow(0 0 4px rgba(255,255,255,.35)); }
  .cg-head span { font-size:11px; letter-spacing:.15em; opacity:.85; }
  .cg-msgs { flex:1; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:8px; }
  .cg-msgs::-webkit-scrollbar { width:5px; } .cg-msgs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.4); }
  .cg-b, .cg-u { max-width:90%; padding:5px 8px; font-size:11px; line-height:1.35; }
  .cg-b { align-self:flex-start; border:none; border-left:2px solid rgba(255,255,255,.55); background:transparent; }
  .cg-u { align-self:flex-end; border:none; border-right:2px dashed rgba(255,255,255,.45); background:transparent; opacity:.9; }
  .cg-b .tag { display:block; font-size:8px; opacity:.6; margin-bottom:2px; letter-spacing:.12em; }
  .cg-actions { display:flex; gap:8px; padding:6px 8px 0; }
  .cg-actions button { flex:1; background:transparent; border:1px solid #fff; color:#fff;
    font-size:12px; padding:8px 0; cursor:pointer; letter-spacing:.08em; white-space:nowrap; }
  .cg-actions button:hover { background:rgba(255,255,255,.12); box-shadow:0 0 8px rgba(255,255,255,.3); }
  .cg-input { display:flex; gap:6px; padding:8px; }
  .cg-input input { flex:1; background:transparent; border:1px solid rgba(255,255,255,.5);
    color:#fff; font-family:inherit; font-size:13px; padding:7px 9px; outline:none; }
  .cg-input input:focus { border-color:#fff; box-shadow:0 0 6px rgba(255,255,255,.25); }
  .cg-input button { background:transparent; border:1px solid #fff; color:#fff; padding:0 14px; cursor:pointer; font-size:13px; }
  .cg-input button:hover { background:rgba(255,255,255,.12); }


  /* ============ stack editor ============ */
  .stk-slot { border:1px solid rgba(255,255,255,.55); margin-bottom:6px; }
  .stk-slot.top { border-left:3px solid #ff2a8a; box-shadow:0 0 8px rgba(255,42,138,.25); }
  .stk-slot.editing { border-color:#ff2a8a; box-shadow:0 0 12px rgba(255,42,138,.35); }
  .live-block { color:#ff2a8a; animation:blink 1s step-end infinite; text-shadow:0 0 6px rgba(255,42,138,.6); }
  .stk-slot.dimmed { opacity:.35; }
  .stk-btn.editbtn.on { color:#ff9ecb; opacity:1; }
  .stk-edit.open { background:rgba(255,42,138,.06); }
  .stk-row { display:flex; align-items:center; gap:6px; padding:7px 8px; }
  .stk-idx { opacity:.7; font-size:12px; min-width:34px; white-space:nowrap; }
  .stk-name { flex:1; font-size:13px; letter-spacing:.05em; }
  .stk-desc { display:block; font-size:10px; opacity:.6; margin-top:1px; word-break:break-all; }
  .stk-btn { cursor:pointer; opacity:.8; font-size:12px; padding:2px 4px; user-select:none; }
  .stk-btn:hover { opacity:1; text-shadow:0 0 6px rgba(255,255,255,.6); }
  .stk-edit { display:none; border-top:1px dashed rgba(255,42,138,.55); padding:8px; }
  .stk-edit.open { display:block; }
  .stk-edit label { display:block; font-size:10px; opacity:.7; margin-bottom:3px; }
  .stk-edit input { width:100%; background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; font-family:inherit; font-size:12px; padding:6px 8px; outline:none; caret-color:#ff2a8a; box-sizing:border-box; }
  .stk-edit input:focus { border-color:#ff2a8a; box-shadow:0 0 6px rgba(255,42,138,.35); }
  .stk-edit label { color:#ff9ecb; }
  .stk-edit .save { margin-top:6px; background:transparent; border:1px solid #ff2a8a; color:#ff9ecb; font-size:11px; padding:5px 12px; cursor:pointer; }
  .stk-edit .save:hover { background:rgba(255,42,138,.15); }
  .pick-row { display:flex; align-items:center; justify-content:space-between; border:1px dashed rgba(255,255,255,.45); padding:6px 8px; margin-bottom:5px; font-size:12px; }
  .pick-row .add { cursor:pointer; border:1px solid #fff; padding:2px 8px; }
  .pick-row .add:hover { background:rgba(255,255,255,.12); }
  .pick-row.slug { opacity:.38; border-style:dotted; }
  .pick-row.cfg { border-color:#ff2a8a; border-style:solid; margin-bottom:0; }
  .pick-cfg { border:1px solid #ff2a8a; border-top:none; background:rgba(255,42,138,.06);
    padding:8px; margin-bottom:5px; }
  .pick-cfg label { display:block; font-size:10px; color:#ff9ecb; margin-bottom:3px; }
  .pick-cfg input { width:100%; background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff;
    font-family:inherit; font-size:12px; padding:6px 8px; outline:none; caret-color:#ff2a8a; box-sizing:border-box; }
  .pick-cfg input:focus { border-color:#ff2a8a; box-shadow:0 0 6px rgba(255,42,138,.35); }
  .pick-cfg .save { margin-top:6px; background:transparent; border:1px solid #ff2a8a; color:#ff9ecb;
    font-size:11px; padding:5px 12px; cursor:pointer; }
  .pick-row.slug .tag { font-size:9px; letter-spacing:.12em; border:1px dotted currentColor; padding:1px 5px; }


  /* concierge v2 — per vibescan chat page spec */
  .cg-avatar { position:relative; height:21vh; min-height:120px; max-height:165px;
    border-bottom:1px dashed rgba(255,255,255,.4); overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:#000; }
  .cg-avatar img.eye { width:110%; height:110%; margin:-5% 0 0 -5%; object-fit:cover;
    filter:contrast(1.15) brightness(.85) grayscale(.75); transition:transform 2.2s ease-in-out; will-change:transform; }
  .cg-lid { position:absolute; inset:0; background:#000; transform:scaleY(0); transform-origin:top; z-index:3; }
  .cg-lid.blink { animation:blinkOnce .28s ease-in-out; }
  @keyframes blinkOnce { 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
  .cg-live { position:absolute; top:8px; left:10px; font-size:10px; letter-spacing:.15em;
    border:1px solid #fff; padding:2px 7px; animation:pulse 1.4s infinite; }
  .cg-timer { position:absolute; top:8px; right:10px; font-size:11px; opacity:.85; }
  .cg-tabs { display:flex; gap:6px; overflow-x:auto; padding:7px 8px 0;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cg-tabs::-webkit-scrollbar { display:none; }
  .cg-tab { white-space:nowrap; font-size:11px; letter-spacing:.06em; padding:5px 10px;
    border:1px dashed rgba(255,255,255,.45); cursor:pointer; opacity:.65; }
  .cg-tab.on { border-style:solid; opacity:1; box-shadow:0 0 6px rgba(255,255,255,.25); }
  .cg-agent { display:flex; align-items:center; justify-content:space-between;
    padding:7px 10px; border-bottom:1px dashed rgba(255,255,255,.4); }
  .cg-agent .who { line-height:1.25; }
  .cg-agent .who .nm { font-size:11px; }
  .cg-agent .who .hd { font-size:9px; opacity:.6; }
  .cg-agent .acts { display:flex; gap:6px; }
  .cg-agent .acts button { background:transparent; border:1px solid #fff; color:#fff;
    font-size:10px; padding:4px 8px; cursor:pointer; letter-spacing:.06em; }
  .cg-agent .acts button:hover { background:rgba(255,255,255,.12); }
  .cg-b { border-radius:2px; }
  .cg-foot { display:flex; gap:4px; padding:4px 2px 2px; align-items:center; }
  .cg-foot .ico { background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff;
    padding:0; width:36px; height:36px; font-size:13px; cursor:pointer; flex:none; box-sizing:border-box; }
  .cg-foot .ico:hover { background:rgba(255,255,255,.12); border-color:#ff2a8a; }
  .cg-foot input { flex:1; min-width:0; background:transparent; border:1px solid rgba(255,255,255,.5);
    color:#fff; font-family:inherit; font-size:13px; padding:8px; outline:none; height:36px; box-sizing:border-box;
    caret-color:#ff2a8a; }
  .cg-foot input:focus { border-color:#ff2a8a; box-shadow:0 0 6px rgba(255,42,138,.35); }

  /* active-field accents (auth + generic inputs) */
  #page-user input, #page-login input, #page-signup input, #page-claim input {
    caret-color:#ff2a8a; }
  #page-user input:focus, #page-login input:focus, #page-signup input:focus {
    border-color:#ff2a8a !important; box-shadow:0 0 6px rgba(255,42,138,.35); }

  /* preview badge */
  #preview-badge {
    position:fixed; bottom:8px; right:10px; z-index:99; font-size:10px; color:rgba(255,255,255,.35);
    letter-spacing:.08em; pointer-events:none;
  }

.crt-screen { filter: saturate(0.55) !important; }
    #crt { filter: grayscale(0.5) brightness(1.02); }

html,body { overflow:hidden !important; overscroll-behavior:none; position:fixed; inset:0; width:100%; }
  #stage { overflow:hidden; }
  html,body { height:100%; }
  #stage { padding-top:0 !important; height:100vh; height:100dvh; align-items:stretch; }
  .crt-container { margin-top:0 !important; padding-top:0 !important; padding-bottom:0 !important;
    display:flex; flex-direction:column; }
  .b-top { margin-top:0 !important; flex:none; }
  .b-bottom { flex:none; }
  .b-mid { height:auto !important; flex:1; min-height:0; }
  #crt-content { height:auto !important; max-height:none !important; flex:1; min-height:0; }
  #heroSection { height:100% !important; max-width:none !important; }
  #preview-badge { display:none !important; }