/* Extracted from phone.html block 1: base */
:root{
      --bg:#0b0b0d;
      --panel:rgba(18,18,22,.88);
      --panel-2:rgba(255,255,255,.04);
      --stroke:rgba(255,255,255,.12);
      --stroke-strong:rgba(255,255,255,.18);
      --ink:rgba(255,255,255,.96);
      --muted:rgba(255,255,255,.68);
      --soft:rgba(255,255,255,.54);
      --orange:#ff7a00;
      --pink:#ff2d55;
      --purple:#7a2cff;
      --gold:#ffd166;
      --ok:#ffb347;
      --shadow:0 18px 50px rgba(0,0,0,.34);
      --radius:22px;
      --shell-pad:8px;
      --shell-gap:8px;
      --hero-h:86px;
      --footer-h:18px;
      --app-max:430px;
    }

    *{ box-sizing:border-box; }

    html,body{
      margin:0;
      width:100%;
      height:100%;
      overflow:hidden;
      background:
        radial-gradient(circle at top, rgba(122,44,255,.16), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(255,45,85,.14), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255,122,0,.10), transparent 24%),
        var(--bg);
      color:var(--ink);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-text-size-adjust:100%;
    }

    body{
      padding:var(--shell-pad);
    }

    .app{
      width:100%;
      max-width:var(--app-max);
      height:calc(100dvh - (var(--shell-pad) * 2));
      margin:0 auto;
      display:flex;
      flex-direction:column;
      gap:var(--shell-gap);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      border-radius:26px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      box-shadow:0 20px 60px rgba(0,0,0,.34);
      padding:0;
    }

    .hero{
      position:relative;
      overflow:hidden;
      min-height:var(--hero-h);
      max-height:var(--hero-h);
      padding:10px 12px;
      border-radius:20px;
      border:1px solid var(--stroke);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(10,10,13,.82);
      box-shadow:var(--shadow);
      backdrop-filter:blur(16px);
      flex:0 0 auto;
    }

    .brandRow{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:7px;
      text-align:center;
    }

    .brandTag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:5px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      font-size:9px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted);
      white-space:nowrap;
    }

    .brandDot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--orange),var(--pink));
      box-shadow:0 0 18px rgba(255,122,0,.55);
      flex:0 0 auto;
    }

    .venueChip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:0;
      padding:0;
      border-radius:0;
      border:0;
      background:transparent;
      font-size:clamp(24px, 7.2vw, 34px);
      line-height:.94;
      letter-spacing:-.055em;
      font-weight:950;
      color:#fff;
      text-align:center;
      max-width:100%;
      overflow:hidden;
      white-space:normal;
      text-wrap:balance;
    }

    .panel{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      padding:10px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        rgba(15,15,18,.84);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
      overflow:hidden;
    }

    .hidden{
      display:none !important;
    }

    .sessionStage,
    .previewStage,
    .phoneStage,
    .codeStage{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .sessionStage{
      overflow:hidden;
    }

    .sectionHead{
      flex:0 0 auto;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
      margin-bottom:6px;
    }

    .sectionHead h2{
      margin:0;
      font-size:20px;
      line-height:1.06;
      letter-spacing:-.02em;
    }

    .sectionHead p{
      margin:5px 0 0;
      color:var(--muted);
      font-size:11px;
      line-height:1.32;
    }

    .tinyBtn{
      flex:0 0 auto;
      min-width:auto;
      width:auto;
      margin:0;
      padding:8px 10px;
      border-radius:13px;
      border:1px solid var(--stroke);
      background:rgba(255,255,255,.04);
      color:#fff;
      font-size:10px;
      font-weight:800;
    }

    .status{
      flex:0 0 auto;
      margin-bottom:6px;
      padding:8px 10px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:var(--muted);
      font-size:11px;
      line-height:1.3;
    }

    .status.error{
      border-color:rgba(255,90,90,.28);
      background:rgba(255,90,90,.10);
      color:#ffd4d4;
    }

    .status.success{
      border-color:rgba(255,209,102,.24);
      background:linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,122,0,.08));
      color:#fff1cf;
    }

    #sessionPanel .sessionHead{
      margin-bottom:8px;
    }

    #sessionPanel #sessionTitle{
      max-width:12ch;
      font-size:clamp(25px, 7vw, 34px);
      line-height:.96;
      letter-spacing:-.055em;
      text-wrap:balance;
    }

    #sessionPanel #tierSubcopy{
      max-width:34ch;
      font-size:12px;
      line-height:1.36;
      color:rgba(255,255,255,.74);
    }

    .quickNoBackdropWrap{
      flex:0 0 auto;
      margin-bottom:6px;
      padding:7px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        rgba(255,255,255,.015);
      box-shadow:0 8px 20px rgba(0,0,0,.12);
    }

    .quickNoBackdropHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:6px;
    }

    .quickNoBackdropTitle{
      margin:0;
      font-size:11px;
      line-height:1.08;
      letter-spacing:-.02em;
    }

    .quickNoBackdropSub{
      margin:2px 0 0;
      color:var(--muted);
      font-size:8px;
      line-height:1.2;
    }

    .quickNoBackdropGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:7px;
    }

    .miniTierCard{
      position:relative;
      width:100%;
      text-align:left;
      margin:0;
      padding:0;
      border-radius:13px;
      border:1px solid rgba(255,209,102,.22);
      background:
        linear-gradient(135deg, rgba(255,122,0,.10), rgba(255,209,102,.06)),
        rgba(255,255,255,.022);
      color:#fff;
      cursor:pointer;
      transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
      box-shadow:0 7px 16px rgba(0,0,0,.13);
      overflow:hidden;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }

    .miniTierCard::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:3px;
      background:linear-gradient(180deg, var(--gold), var(--orange));
      opacity:.95;
    }

    .miniTierCard:active{
      transform:translateY(1px) scale(.997);
    }

    .miniTierCard.selected{
      border-color:rgba(255,122,0,.56);
      background:
        linear-gradient(135deg, rgba(255,122,0,.17), rgba(255,209,102,.09)),
        rgba(255,255,255,.035);
      box-shadow:0 0 0 1px rgba(255,122,0,.18) inset, 0 12px 22px rgba(0,0,0,.17);
    }

    .miniTierBody{
      padding:10px 12px 10px 14px;
      min-height:0;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:5px;
    }

    .miniTierTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:5px;
    }

    .miniTierName{
      margin:0;
      font-size:15px;
      line-height:1.05;
      letter-spacing:-.02em;
    }

    .miniTierPrice{
      flex:0 0 auto;
      padding:3px 6px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      font-size:10px;
      font-weight:800;
      color:#fff;
      white-space:nowrap;
    }

    .miniTierMeta{
      display:flex;
      flex-wrap:wrap;
      gap:4px;
    }

    .miniMetaPill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:17px;
      padding:3px 6px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.09);
      color:var(--muted);
      font-size:10px;
      font-weight:800;
      white-space:nowrap;
    }

    .miniTierDesc{
      margin:0;
      color:var(--muted);
      font-size:11px;
      line-height:1.25;
    }

    .quickNoBackdropFoot{
      margin:7px 0 0;
      color:rgba(255,209,102,.88);
      font-size:10px;
      line-height:1.25;
      font-weight:800;
    }

    .themeSectionHead{
      flex:0 0 auto;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:5px;
    }

    .themeSectionTitle{
      margin:0;
      font-size:11px;
      line-height:1.1;
      letter-spacing:-.02em;
    }

    .themeSectionSub{
      margin:2px 0 0;
      color:var(--muted);
      font-size:9px;
      line-height:1.2;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .tierGrid{
      flex:1 1 auto;
      min-height:0;
      display:grid;
      grid-template-columns:1fr;
      grid-auto-rows:auto;
      gap:10px;
      overflow-y:hidden;
      overflow-x:hidden;
      justify-items:stretch;
      align-content:start;
      padding:2px 0;
    }

    .tierCard{
      position:relative;
      width:100%;
      max-width:none;
      min-height:0;
      text-align:left;
      margin:0;
      padding:0;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(255,255,255,.03);
      color:#fff;
      cursor:pointer;
      transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
      box-shadow:0 14px 28px rgba(0,0,0,.22);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-self:stretch;
      align-self:start;
      isolation:isolate;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }

    .tierCard::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:4px;
      background:linear-gradient(180deg, var(--orange), var(--pink));
      opacity:.9;
      z-index:2;
    }

    .tierCard::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:19px;
      border:1px solid rgba(255,255,255,.04);
      pointer-events:none;
      z-index:1;
    }

    .tierCard:active{
      transform:translateY(1px) scale(.997);
    }

    .tierCard.selected{
      border-color:rgba(255,122,0,.54);
      background:
        linear-gradient(135deg, rgba(255,122,0,.18), rgba(255,45,85,.11)),
        rgba(255,255,255,.045);
      box-shadow:0 0 0 1px rgba(255,122,0,.20) inset, 0 20px 34px rgba(0,0,0,.24);
    }

    .tierCard.noBackdropCard{
      border-color:rgba(255,209,102,.24);
      background:
        linear-gradient(135deg, rgba(255,122,0,.12), rgba(255,209,102,.08)),
        rgba(255,255,255,.03);
    }

    .tierCard.noBackdropCard::before{
      background:linear-gradient(180deg, var(--gold), var(--orange));
    }

    .tierPreview{
      position:relative;
      width:100%;
      aspect-ratio:16 / 9;
      min-height:122px;
      max-height:164px;
      border-bottom:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      background:
        radial-gradient(circle at 20% 10%, rgba(255,122,0,.20), transparent 60%),
        radial-gradient(circle at 90% 30%, rgba(255,45,85,.16), transparent 62%),
        radial-gradient(circle at 50% 120%, rgba(123,92,255,.14), transparent 64%),
        rgba(0,0,0,.20);
      flex:0 0 auto;
    }

    .tierPreviewMedia{
      position:absolute;
      inset:0;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
    }

    .tierPreview img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      display:block;
      filter:saturate(1.05) contrast(1.03);
      transform:none;
    }

    .tierPreviewFallback{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.58);
      font-size:10px;
      letter-spacing:.08em;
      text-transform:uppercase;
      padding:12px;
      text-align:center;
    }

    .tierCardBody{
      padding:10px 11px 11px;
      min-height:0;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap:6px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
      flex:1 1 auto;
    }

    .tierTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
    }

    .tierName{
      margin:0;
      font-size:14px;
      line-height:1.08;
      letter-spacing:-.02em;
      max-width:70%;
    }

    .tierPrice{
      flex:0 0 auto;
      padding:5px 8px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.10);
      font-size:10px;
      font-weight:800;
      color:#fff;
      white-space:nowrap;
    }

    .tierMeta{
      display:flex;
      flex-wrap:wrap;
      gap:5px;
      margin-top:0;
    }

    .metaPill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:22px;
      padding:5px 8px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.09);
      color:var(--muted);
      font-size:9px;
      font-weight:700;
      white-space:nowrap;
    }

    .tierDesc{
      margin:0;
      color:var(--muted);
      font-size:9px;
      line-height:1.28;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .pager{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-top:6px;
    }

    .pagerInfo{
      color:var(--soft);
      font-size:10px;
      text-align:center;
      flex:1;
    }

    .pagerBtn{
      min-width:78px;
      min-height:36px;
      padding:8px 10px;
      border-radius:13px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:#fff;
      font-size:11px;
      font-weight:800;
    }

    .pagerBtn[disabled]{
      opacity:.4;
    }

    .previewSummary{
      flex:0 0 auto;
      margin-bottom:6px;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
    }

    .previewSummaryTitle{
      margin:0 0 3px;
      font-size:16px;
      line-height:1.08;
      letter-spacing:-.02em;
    }

    .previewSummarySub{
      margin:0;
      color:var(--muted);
      font-size:10px;
      line-height:1.28;
    }

    .expandedBackdropWrap{
      flex:0 0 auto;
      margin-bottom:8px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(255,255,255,.03);
      overflow:hidden;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }

    .expandedBackdropStage{
      position:relative;
      width:100%;
      aspect-ratio:16 / 10;
      min-height:180px;
      background:
        radial-gradient(circle at 20% 10%, rgba(255,122,0,.20), transparent 60%),
        radial-gradient(circle at 90% 30%, rgba(255,45,85,.16), transparent 62%),
        radial-gradient(circle at 50% 120%, rgba(123,92,255,.14), transparent 64%),
        rgba(0,0,0,.20);
      overflow:hidden;
    }

    .expandedBackdropStage img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform:none;
    }

    .expandedBackdropFallback{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:16px;
      color:rgba(255,255,255,.62);
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .expandedBackdropMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding:9px 10px;
      border-top:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.025);
    }

    .expandedBackdropLabel{
      margin:0;
      font-size:11px;
      font-weight:800;
      line-height:1.2;
      color:#fff;
    }

    .expandedBackdropHint{
      margin:0;
      font-size:9px;
      line-height:1.2;
      color:var(--muted);
      white-space:nowrap;
    }

    .backdropGrid{
      flex:1 1 auto;
      min-height:0;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:8px;
      align-items:stretch;
      overflow:hidden;
    }

    .backdropThumb{
      position:relative;
      width:100%;
      margin:0;
      padding:0;
      border:none;
      background:transparent;
      cursor:pointer;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }

    .backdropThumbCard{
      width:100%;
      height:100%;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
      display:grid;
      grid-template-rows:1fr auto;
    }

    .backdropThumb:hover .backdropThumbCard,
    .backdropThumb:focus-visible .backdropThumbCard,
    .backdropThumb.isActive .backdropThumbCard{
      border-color:rgba(255,122,0,.68);
      box-shadow:0 0 0 1px rgba(255,122,0,.22) inset, 0 10px 20px rgba(0,0,0,.22);
      transform:translateY(-1px) scale(1.02);
    }

    .backdropThumbImage{
      position:relative;
      min-height:0;
      background:
        radial-gradient(circle at 20% 10%, rgba(255,122,0,.20), transparent 60%),
        radial-gradient(circle at 90% 30%, rgba(255,45,85,.16), transparent 62%),
        radial-gradient(circle at 50% 120%, rgba(123,92,255,.14), transparent 64%),
        rgba(0,0,0,.20);
      overflow:hidden;
    }

    .backdropThumbImage img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .backdropThumbFallback{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.58);
      font-size:9px;
      letter-spacing:.08em;
      text-transform:uppercase;
      text-align:center;
      padding:8px;
    }

    .backdropThumbLabel{
      padding:7px 5px;
      color:var(--ink);
      font-size:9px;
      line-height:1.15;
      text-align:center;
      min-height:28px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .summaryCard{
      flex:0 0 auto;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
    }

    .summaryLabel{
      margin:0 0 4px;
      color:var(--soft);
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:800;
    }

    .summaryValue{
      margin:0;
      font-size:16px;
      line-height:1.08;
      letter-spacing:-.02em;
    }

    .summarySub{
      margin:5px 0 0;
      color:var(--muted);
      font-size:10px;
      line-height:1.28;
    }

    .externalAccessCard{
      flex:0 0 auto;
      display:grid;
      gap:7px;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,209,102,.32);
      background:
        linear-gradient(135deg, rgba(255,122,0,.14), rgba(255,45,85,.08)),
        rgba(255,255,255,.035);
      box-shadow:0 12px 26px rgba(0,0,0,.18);
    }

    .externalAccessCard[hidden],
    .externalAccessCard.hidden{
      display:none;
    }

    .externalAccessKicker{
      margin:0;
      color:#ffd166;
      font-size:9px;
      line-height:1;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:900;
    }

    .externalAccessCard h3{
      margin:0;
      font-size:15px;
      line-height:1.08;
      color:var(--ink);
    }

    .externalAccessCard p{
      margin:0;
      color:var(--muted);
      font-size:10px;
      line-height:1.3;
    }

    .externalAccessCheckRow{
      display:flex;
      align-items:flex-start;
      gap:8px;
      color:rgba(255,255,255,.94);
      font-size:10px;
      line-height:1.25;
      font-weight:800;
    }

    .externalAccessCheckRow input{
      width:17px;
      height:17px;
      margin:0;
      flex:0 0 auto;
      accent-color:#ff7a00;
    }

    .externalAccessRefRow{
      display:grid;
      gap:4px;
      color:var(--soft);
      font-size:9px;
      line-height:1.2;
      font-weight:800;
    }

    .externalAccessRefRow input{
      width:100%;
      min-width:0;
      padding:9px 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.18);
      color:var(--ink);
      font:inherit;
      font-size:12px;
      outline:none;
    }

    .externalAccessRefRow input:focus{
      border-color:rgba(255,209,102,.72);
      box-shadow:0 0 0 2px rgba(255,209,102,.16);
    }

    .phoneStage{
      gap:6px;
    }

    .phoneBody{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      gap:6px;
      overflow:hidden;
    }

    .phoneBox{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      margin:0;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      font-size:18px;
      font-weight:800;
      letter-spacing:.15em;
      text-align:center;
    }

    .helper{
      margin:0;
      color:var(--soft);
      font-size:9px;
      line-height:1.25;
      text-align:center;
    }

    .keypad{
      flex:1 1 auto;
      min-height:0;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(4, 1fr);
      gap:7px;
    }

    .keypad button{
      width:100%;
      height:100%;
      min-height:38px;
      margin:0;
      padding:0;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
        rgba(255,255,255,.03);
      color:#fff;
      font-size:18px;
      font-weight:800;
      box-shadow:none;
    }

    .keypad button:active{
      transform:translateY(1px);
    }

    .consentRow{
      flex:0 0 auto;
      display:flex;
      gap:10px;
      align-items:flex-start;
      margin-top:0;
      padding:9px 9px;
      border-radius:16px;
      border:2px solid rgba(255,122,0,.50);
      background:
        linear-gradient(180deg, rgba(255,122,0,.12), rgba(255,122,0,.06)),
        rgba(255,255,255,.03);
      font-size:11px;
      cursor:pointer;
      transition:all .18s ease;
      box-shadow:0 0 0 1px rgba(255,122,0,.08) inset;
    }

    .consentRow.active{
      border-color:rgba(255,122,0,1);
      box-shadow:
        0 0 0 2px rgba(255,122,0,.18),
        0 0 28px rgba(255,122,0,.10);
      background:
        linear-gradient(180deg, rgba(255,122,0,.18), rgba(255,122,0,.10)),
        rgba(255,255,255,.03);
    }

    .consentRow input{
      width:18px;
      height:18px;
      margin:1px 0 0;
      accent-color:#ff7a00;
      flex:0 0 auto;
    }

    .consentCopy{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }

    .consentRow label{
      display:block;
      cursor:pointer;
      font-size:11px;
      line-height:1.3;
      font-weight:700;
      color:rgba(255,255,255,.96);
    }

    .consentNote{
      margin:0;
      color:rgba(255,255,255,.74);
      font-size:9px;
      line-height:1.28;
    }

    .consentNote a,
    .consentRow label a{
      color:#ffd166;
      text-decoration:underline;
      text-underline-offset:2px;
      font-weight:800;
    }

    .buttonRow{
      flex:0 0 auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin-top:auto;
    }

    .buttonRow.stickyBottom{
      margin-top:auto;
      padding-top:0;
    }

    #previewPanel .previewActionRow{
      flex:0 0 auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      position:static;
      z-index:auto;
      clear:both;
      margin-top:16px;
      margin-bottom:0;
      padding-top:0;
    }

    .primaryBtn,
    .secondaryBtn{
      width:100%;
      min-height:44px;
      padding:12px 13px;
      border-radius:16px;
      font-size:13px;
      font-weight:800;
      letter-spacing:.01em;
    }

    .primaryBtn{
      border:none;
      color:#fff;
      background:linear-gradient(135deg, var(--orange), var(--pink));
      box-shadow:0 12px 28px rgba(255,122,0,.22);
    }

    .primaryBtn[disabled]{
      opacity:.45;
      box-shadow:none;
    }

    .secondaryBtn{
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      background:rgba(255,255,255,.04);
    }

    .codePanel{
      text-align:center;
      padding:12px 12px 10px;
    }

    .codeStage{
      justify-content:space-between;
      gap:8px;
    }

    .codeTop{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:8px;
    }

    .codePanel h2{
      margin:0;
      font-size:20px;
      line-height:1.06;
      letter-spacing:-.02em;
    }

    .codePanel p{
      margin:0;
      color:var(--muted);
      font-size:11px;
      line-height:1.3;
    }

    .codeCard{
      text-align:center;
      padding:14px 12px;
      border-radius:20px;
      border:1px solid rgba(255,209,102,.24);
      background:
        linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,122,0,.08)),
        rgba(255,255,255,.03);
      margin-top:0;
    }

    .codeCard h3{
      margin:0;
      font-size:13px;
      color:#fff;
    }

    .codeDigits{
      margin:9px 0 7px;
      font-size:36px;
      line-height:1;
      letter-spacing:.18em;
      font-weight:900;
      color:#fff;
    }

    .codeCard p{
      margin:0;
      color:#fff1cf;
      font-size:10px;
      line-height:1.28;
    }

    .footer{
      flex:0 0 var(--footer-h);
      min-height:var(--footer-h);
      max-height:var(--footer-h);
      text-align:center;
      color:rgba(255,255,255,.46);
      font-size:10px;
      line-height:var(--footer-h);
      overflow:hidden;
    }

    @media (max-width:380px){
      :root{
        --shell-pad:7px;
        --shell-gap:7px;
        --hero-h:48px;
      }

      .panel{ padding:9px; }
      .tierGrid{ gap:8px; }
      .tierCard{
        max-width:100%;
      }
      .tierPreview{
        min-height:110px;
        max-height:148px;
      }
      .tierCardBody{ padding:10px 10px 11px; gap:7px; }
      .tierName{ font-size:13px; }
      .tierDesc{ font-size:8px; }
      .phoneBox{ min-height:42px; font-size:17px; letter-spacing:.12em; }
      .keypad button{ font-size:17px; min-height:36px; }
      .codeDigits{ font-size:32px; }
      .quickNoBackdropGrid{ gap:5px; }
      .miniTierBody{ min-height:64px; }
      .expandedBackdropStage{ min-height:160px; }
    }

    @media (max-height:760px){
      :root{
        --hero-h:48px;
      }

      .hero{ padding:7px 9px; }
      .panel{ padding:9px; }
      .sectionHead{ margin-bottom:5px; }
      .status{ margin-bottom:5px; padding:7px 9px; }
      .quickNoBackdropWrap{ margin-bottom:5px; padding:6px; }
      .themeSectionHead{ margin-bottom:4px; }
      .tierGrid{ gap:7px; }
      .tierCard{ max-width:none; }
      .tierPreview{
        min-height:102px;
        max-height:134px;
      }
      .tierCardBody{ padding:8px 9px 9px; gap:5px; }
      .tierName{ font-size:13px; }
      .tierMeta{ gap:4px; }
      .metaPill{ min-height:20px; font-size:8px; padding:4px 7px; }
      .tierDesc{ font-size:8px; }
      .previewSummary,
      .summaryCard{ margin-bottom:5px; padding:9px 10px; }
      .expandedBackdropWrap{ margin-bottom:6px; }
      .expandedBackdropStage{ min-height:148px; }
      .phoneStage{ gap:5px; }
      .phoneBody{ gap:5px; }
      .phoneBox{ min-height:42px; font-size:17px; }
      .keypad{ gap:6px; }
      .keypad button{ min-height:34px; }
      .consentRow{ padding:8px; }
      .primaryBtn,
      .secondaryBtn{ min-height:42px; font-size:12px; }
      .codeCard{ padding:12px 10px; }
      .codeDigits{ font-size:32px; }
    }

/* PHONE_REAL_DEVICE_VIEWPORT_FIX_V1
   Real phone fix:
   - protects iPhone safe-area/notch/browser top
   - removes cramped desktop phone-frame behavior on actual mobile width
   - lets the phone menu fill the screen and scroll naturally
*/
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .phone-shell,
  .phoneShell,
  .app-shell,
  .appShell,
  .cc-phone-shell,
  .cc-phoneShell,
  .mobile-shell,
  .mobileShell,
  main,
  #app,
  #phoneApp {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100svh - 24px) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .device-frame,
  .phone-frame,
  .phoneFrame,
  .mock-phone,
  .mockPhone,
  .viewport-frame,
  .viewportFrame {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100svh - 24px) !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 18px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  header,
  .header,
  .hero,
  .phone-hero,
  .phoneHero,
  .cc-phone-hero,
  .venue-hero,
  .venueHero {
    margin-top: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    transform: none !important;
  }

  h1,
  .venue-title,
  .venueTitle,
  .phone-title,
  .phoneTitle,
  .hero-title,
  .heroTitle {
    font-size: clamp(34px, 10vw, 54px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  .eyebrow,
  .menu-pill,
  .menuPill,
  .photo-booth-menu,
  .photoBoothMenu {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    transform: none !important;
  }

  .session-panel,
  .sessionPanel,
  .sessions-panel,
  .sessionsPanel,
  .cc-session-panel,
  .card-panel,
  .cardPanel {
    margin-top: 14px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .session-list,
  .sessionList,
  .tiers-list,
  .tiersList,
  .backdrop-list,
  .backdropList {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .pager,
  .phone-pager,
  .phonePager,
  .bottom-nav,
  .bottomNav {
    position: sticky !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    margin-top: 18px !important;
  }
}