@font-face{font-family:Prompt;font-weight:500;font-display:swap;src:url(/fonts/prompt-500.ttf) format('truetype')}
@font-face{font-family:Prompt;font-weight:800;font-display:swap;src:url(/fonts/prompt-800.ttf) format('truetype')}
*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#100e17;--panel:#1a1724;--border:#383245;--text:#faf7ff;--muted:#c0b9ce;--accent:#d0fb7a}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;font-family:Prompt,"Leelawadee UI",Tahoma,system-ui,sans-serif;color:var(--text);background:radial-gradient(ellipse at 90% 0,#302045 0,transparent 48%),var(--bg)}
a{color:var(--accent);text-underline-offset:4px}
h1,h2,p{margin:0}h1,h2,.overlay-qr-label strong{font-weight:800}h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 .45rem}h2{font-size:1.35rem;margin:0 0 .8rem}
.wrap{max-width:1100px;margin:auto;padding:26px 24px 48px}.guest{max-width:540px;margin:auto;padding:22px 16px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:17px;margin-bottom:28px}
.brand{font-size:1.42rem;letter-spacing:-.06em;font-weight:900}.brand span{color:var(--accent);margin-left:.15em}
.tag,.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:800;color:var(--accent)}.tag{border:1px solid var(--border);border-radius:99px;padding:.5em .8em}
.eyebrow{margin-bottom:.45rem}.muted,small{color:var(--muted)}
.setup{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin:24px 0 16px}
.panel{padding:22px;border:1px solid var(--border);border-radius:20px;background:var(--panel)}
.qr-panel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}.qr-panel img{display:block;width:clamp(92px,24vw,168px);height:auto;aspect-ratio:1;border-radius:12px;background:white}
label{display:block;color:var(--muted);margin:.55rem 0 .35rem}
input:not([type=checkbox]),select{width:100%;border:1px solid var(--border);padding:.7rem .8rem;border-radius:9px;background:#100e17;color:var(--text);font:inherit;min-width:0}
select{margin-bottom:.65rem}
button{font-family:inherit;border:0;border-radius:9px;background:var(--accent);color:#18210c;padding:.68rem .95rem;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
button:disabled{opacity:.5;cursor:wait}button.secondary{color:var(--text);background:#383145}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}.actions input{flex:1}
.obs-rows{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.obs-row label{display:block;font-size:.85rem;font-weight:700;color:var(--text);margin:0 0 .35rem}
.obs-row-fields{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.obs-row-fields input{flex:1 1 180px;min-width:0;font-size:.82rem;padding:.55rem .7rem}
.obs-row-fields button{flex:none;padding:.55rem .85rem;font-size:.82rem}
.obs-row-fields .open-link{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:.55rem .75rem;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.04);color:var(--accent);text-decoration:none;font-size:.82rem;font-weight:700;white-space:nowrap}
.obs-row-fields .open-link:hover{background:rgba(255,255,255,.08)}
.obs-row-fields .open-link:not([href]){opacity:.35;pointer-events:none;cursor:default}
.obs-screen-hint{margin-top:14px;font-size:.82rem}
#queue>.actions{justify-content:space-between}
#cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.card{border:1px solid var(--border);border-radius:14px;padding:12px;overflow-wrap:anywhere}.card img{width:100%;height:160px;object-fit:contain;background:#100e17;border-radius:8px}.card small{display:block;margin:.4rem 0}.card p{white-space:pre-wrap}
[role=status]:not(:empty){margin-top:.75rem;color:var(--accent)}
.payment{border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:16px}.payment summary{cursor:pointer}.payment p{margin:.6rem 0}.payment img{display:block;width:min(100%,245px);margin:10px auto;border-radius:8px}.payment a{display:block;text-align:center}
#display{position:relative;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:4vw;gap:3vw}
#stage{min-width:0;min-height:0;height:100%;display:grid;place-items:center}
#empty h1{font-size:clamp(2rem,6vw,7rem)}#empty .muted{font-size:clamp(1rem,2vw,2rem)}
#screen-qr{display:grid;justify-items:center;gap:1em;padding:1.25em;border:1px solid var(--border);background:var(--panel);border-radius:18px;text-align:center}
#screen-qr img{width:clamp(92px,17vw,280px);background:white;border-radius:10px}
#slide{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;max-height:100%;min-height:0;gap:1.2vh}
#slide img,#slide video{display:block;max-width:100%;max-height:73vh;object-fit:contain;border-radius:14px}
figcaption{white-space:pre-line;background:#14101c;color:white;border-radius:10px;padding:.4em .7em;max-width:100%;overflow-wrap:anywhere;text-align:center;font-size:clamp(1rem,2.3vw,3rem);line-height:1.2}figcaption:empty{display:none}
body.overlay{background:transparent;overflow:hidden}
.overlay #display{display:block;padding:3vh 3vw}.overlay #empty{display:none}.overlay #slide img,.overlay #slide video{max-height:81vh}
.overlay-qr-label{display:none}
.overlay-qr #display{position:relative;--overlay-qr-size:clamp(110px,min(15vw,27vh),300px);padding-top:calc(var(--overlay-qr-size) + 5vh)}
.overlay-qr #slide img,.overlay-qr #slide video{max-height:calc(87vh - var(--overlay-qr-size))}
.overlay-qr #screen-qr{position:absolute;top:3vh;left:3vw;display:flex;gap:clamp(12px,1.5vw,28px);align-items:center;padding:0;background:transparent;border:0;text-align:left}
.overlay-qr #screen-qr img{width:var(--overlay-qr-size);border-radius:8px}
.overlay-qr #screen-qr .brand,.overlay-qr .screen-qr-label{display:none}
.overlay-qr .overlay-qr-label{display:grid;gap:.3em;justify-items:start}
.overlay-qr-label strong{font-size:clamp(1.3rem,3.6vw,4.4rem);line-height:1.1;text-shadow:0 2px 8px #000,0 1px 3px #000}
.overlay-qr-label span{padding:.25em .75em;border-radius:100px;background:var(--accent);color:#18210c;font-size:clamp(.9rem,1.9vw,2.3rem);font-weight:800}
html:has(body.qr-source),
html.qr-source,
body.qr-source{background:transparent!important;color:var(--text);margin:0;overflow:hidden;min-height:100vh}
#qr-view.qr-source{position:fixed;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(16px,2.5vw,48px);padding:min(4vh,4vw);background:transparent!important;box-sizing:border-box;overflow:hidden}
#qr-view.qr-source img{width:min(70vh,35vw);height:min(70vh,35vw);aspect-ratio:1;object-fit:contain;background:#fff;border-radius:clamp(8px,1.2vw,20px);flex:none;display:block}
.qr-source .overlay-qr-label{display:grid;gap:clamp(6px,.35em,20px);justify-items:start;flex:none}
.qr-source .overlay-qr-label strong{font-size:min(7.5vh,3.6vw);line-height:1.15;white-space:nowrap;color:#fff;text-shadow:-2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000,0 3px 8px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.95)}
.qr-source .overlay-qr-label span{font-size:min(3.8vh,1.9vw);white-space:nowrap}

/* Landscape strip LED (e.g. 640 x 160) */
@media (min-aspect-ratio: 2/1) {
  html:has(body.qr-source),
  html.qr-source,
  body.qr-source {
    background: transparent !important;
    overflow: hidden;
  }
  #qr-view.qr-source {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 6px;
    gap: 16px;
    background: transparent !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  #qr-view.qr-source img {
    width: 148px;
    height: 148px;
    max-height: calc(100vh - 12px);
    max-width: calc(100vh - 12px);
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    flex: none;
    display: block;
    margin: 0;
  }
  .qr-source .overlay-qr-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }
  .qr-source .overlay-qr-label strong {
    display: block;
    font-family: Prompt, "Leelawadee UI", Tahoma, system-ui, sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.02em;
    margin: 0;
    text-shadow:
      -2px -2px 0 #000,
       0   -2px 0 #000,
       2px -2px 0 #000,
      -2px  0   0 #000,
       2px  0   0 #000,
      -2px  2px 0 #000,
       0    2px 0 #000,
       2px  2px 0 #000,
       0    3px 8px rgba(0, 0, 0, 0.95),
       0    1px 3px rgba(0, 0, 0, 0.95);
  }
  .qr-source .overlay-qr-label strong::first-line {
    font-size: 52px;
    line-height: 1.05;
  }
  .qr-source .overlay-qr-label strong br {
    display: inline;
  }
  .qr-source .overlay-qr-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Prompt, "Leelawadee UI", Tahoma, system-ui, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #18210c;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex: none;
  }
}

/* Portrait strip LED (e.g. 160 x 640) */
@media (max-aspect-ratio: 1/2) {
  html:has(body.qr-source),
  html.qr-source,
  body.qr-source {
    background: transparent !important;
    overflow: hidden;
  }
  #qr-view.qr-source {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 5px;
    background: transparent !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  #qr-view.qr-source img {
    width: 150px;
    height: 150px;
    max-width: calc(100vw - 10px);
    max-height: calc(100vw - 10px);
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    flex: none;
    display: block;
    margin: 0;
  }
  .qr-source .overlay-qr-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }
  .qr-source .overlay-qr-label strong {
    display: block;
    font-size: 0;
    line-height: 0;
    margin: 0;
    text-align: center;
    text-shadow:
      -2px -2px 0 #000,
       0   -2px 0 #000,
       2px -2px 0 #000,
      -2px  0   0 #000,
       2px  0   0 #000,
      -2px  2px 0 #000,
       0    2px 0 #000,
       2px  2px 0 #000,
       0    3px 8px rgba(0, 0, 0, 0.95),
       0    1px 3px rgba(0, 0, 0, 0.95);
  }
  .qr-source .overlay-qr-label strong br {
    display: none;
  }
  .qr-source .overlay-qr-label strong::before {
    content: "ส่งรูป\Aขึ้นจอ";
    white-space: pre-line;
    font-family: Prompt, "Leelawadee UI", Tahoma, system-ui, sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    letter-spacing: 0.03em;
    text-align: center;
    display: block;
    margin-bottom: 28px;
    text-shadow:
      -2px -2px 0 #000,
       0   -2px 0 #000,
       2px -2px 0 #000,
      -2px  0   0 #000,
       2px  0   0 #000,
      -2px  2px 0 #000,
       0    2px 0 #000,
       2px  2px 0 #000,
       0    3px 8px rgba(0, 0, 0, 0.95),
       0    1px 3px rgba(0, 0, 0, 0.95);
  }
  .qr-source .overlay-qr-label strong::after {
    content: "ส่งข้อความ\Aรีโพสต์";
    white-space: pre-line;
    font-family: Prompt, "Leelawadee UI", Tahoma, system-ui, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.03em;
    text-align: center;
    display: block;
    text-shadow:
      -2px -2px 0 #000,
       0   -2px 0 #000,
       2px -2px 0 #000,
      -2px  0   0 #000,
       2px  0   0 #000,
      -2px  2px 0 #000,
       0    2px 0 #000,
       2px  2px 0 #000,
       0    3px 8px rgba(0, 0, 0, 0.95),
       0    1px 3px rgba(0, 0, 0, 0.95);
  }
  .qr-source .overlay-qr-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Prompt, "Leelawadee UI", Tahoma, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--accent);
    color: #18210c;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex: none;
    margin-bottom: 4px;
  }
}
.text-slide figcaption{font-size:clamp(2rem,6vw,8rem);padding:.6em 1em;line-height:1.25}
@media(max-width:700px){.setup{grid-template-columns:1fr}.panel{padding:16px}.wrap{padding:18px 14px}.guest{padding:16px 12px}.obs-row-fields button{flex:1}}


#package-fields label{display:grid;grid-template-columns:1fr 7rem;gap:.6rem;align-items:center}

#slide video{background:#000}

#slide .duet{display:flex;gap:2vw;justify-content:center;align-items:center;max-width:100%}
#slide .duet img{max-width:48%;max-height:73vh;object-fit:contain}
.overlay #slide .duet img{max-height:81vh}.overlay-qr #slide .duet img{max-height:calc(87vh - var(--overlay-qr-size))}


.check{display:flex;align-items:baseline;gap:.5rem;margin:1rem 0}

/* ============================ guest redesign ============================ */
body.guest-page{--g-bg:#0a0c12;--g-surface:#12161f;--g-surface-2:#181d2a;--g-line:rgba(255,255,255,.09);--g-text:#f4f6fb;--g-muted:#9aa4b8;
  --g-primary:#5b8cff;--g-grad:linear-gradient(135deg,#4f86ff,#7c5cff);--g-ok:#34d399;
  background:radial-gradient(110% 55% at 50% -10%,rgba(91,140,255,.24),transparent 62%),var(--g-bg);color:var(--g-text);-webkit-font-smoothing:antialiased}
.guest{max-width:520px;margin:0 auto;padding:0 16px 24px;color:var(--g-text)}
.guest .muted,.guest small,.sheet .muted{color:var(--g-muted)}
.guest button{font-family:inherit}
.guest :focus-visible,.sheet :focus-visible{outline:2px solid #9db8ff;outline-offset:2px}

.guest .gbar{display:flex;justify-content:space-between;align-items:center;margin:0;padding:14px 0;border:0;gap:8px;flex-wrap:wrap}
.gbrand{display:flex;align-items:center;gap:10px}.gname{font-size:1.08rem;font-weight:800;letter-spacing:0}
.ghead-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lang-switch{display:inline-flex;align-items:center;padding:2px;border:1px solid var(--g-line);border-radius:99px;background:rgba(255,255,255,.03);font-size:.74rem}
.guest .lang-switch button{padding:.22rem .55rem;border:0;border-radius:99px;background:transparent;color:var(--g-muted);font-size:inherit;font-weight:700;cursor:pointer;line-height:1.2;transition:background-color .15s ease,color .15s ease}
.guest .lang-switch button[aria-pressed=true]{background:var(--g-surface-2);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.secure{display:inline-flex;align-items:center;gap:6px;padding:.38rem .75rem;border:1px solid var(--g-line);border-radius:99px;background:rgba(255,255,255,.03);color:var(--g-muted);font-size:.74rem}
.secure .ic{color:var(--g-ok)}
.guest .q-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:.38rem .75rem;border:1px solid var(--g-line);border-radius:99px;background:rgba(255,255,255,.04);color:var(--g-text);font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease}
.guest .q-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.guest .q-btn:active{transform:scale(.97)}
.guest .q-btn .ic{color:var(--g-primary)}
.q-badge{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;line-height:1}

.guest .hero{margin:8px 0 22px}
.guest h1{font-size:1.9rem;line-height:1.22;letter-spacing:0;font-weight:800;margin:0 0 .65rem}
.guest .lead{color:var(--g-muted);font-size:.95rem;line-height:1.6;margin:0 0 18px}
.steps{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.steps li{flex:1;padding:.7rem .3rem;border:1px solid var(--g-line);border-radius:14px;background:var(--g-surface);text-align:center;font-size:.76rem;color:var(--g-muted)}
.steps b{display:grid;place-items:center;width:22px;height:22px;margin:0 auto .35rem;border-radius:50%;background:var(--g-grad);color:#fff;font-size:.72rem}
.from{margin-top:14px}
.from span{display:inline-block;padding:.38rem .85rem;border:1px solid rgba(91,140,255,.35);border-radius:99px;background:rgba(91,140,255,.12);color:#a9c0ff;font-size:.84rem;font-weight:800}

.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guest .menu-card{position:relative;display:grid;align-content:start;gap:.3rem;min-height:148px;padding:16px;border:1px solid var(--g-line);border-radius:20px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 9%,var(--g-surface)),var(--g-surface));color:var(--g-text);text-align:left;white-space:normal;font-weight:500;
  transition:transform .15s ease,border-color .15s ease}
.guest .menu-card:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent)}.guest .menu-card:active{transform:scale(.97)}
.menu-card .mi{display:grid;place-items:center;width:44px;height:44px;margin-bottom:.55rem;border-radius:14px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.menu-card strong{font-size:1rem;font-weight:800}.menu-card small{max-width:calc(100% - 38px);font-size:.78rem;line-height:1.4}
.menu-card .go{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--g-muted)}
.menu-card:hover .go{background:var(--c);color:#0a0c12}
.menu-card .hot{position:absolute;top:12px;right:12px;padding:.18rem .6rem;border-radius:99px;background:var(--g-grad);color:#fff;font-size:.68rem;font-weight:800}
.menu-card:last-child{grid-column:1/-1;min-height:0;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:14px 56px 14px 16px}.menu-card:last-child .mi{grid-row:1/3;margin:0}.menu-card:last-child small{max-width:none}
.menu-card.photo{--c:#6ea0ff}.menu-card.text{--c:#34d399}.menu-card.video{--c:#ff7a90}.menu-card.repost{--c:#fbbf24}.menu-card.duet{--c:#c084fc}
.guest .fine{margin-top:18px;color:var(--g-muted);font-size:.78rem;text-align:center;line-height:1.5}

.guest .topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;margin:0 -16px 12px;padding:10px 16px;background:rgba(10,12,18,.82);backdrop-filter:blur(14px)}
.guest .topbar h1{margin:0;font-size:1.12rem}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--g-line);border-radius:14px;background:var(--g-surface);color:var(--g-text)}

.gcard{margin:0 0 14px;padding:16px;border:1px solid var(--g-line);border-radius:20px;background:var(--g-surface);min-width:0}
.step-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1rem;font-weight:800;line-height:1.3}
.step-title .no{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--g-grad);color:#fff;font-size:.78rem}
.guest label{margin:.9rem 0 .4rem;color:var(--g-muted);font-size:.85rem}
.guest input:not([type=checkbox]):not([type=file]){width:100%;padding:.8rem .9rem;border:1px solid var(--g-line);border-radius:12px;background:#0d1017;color:var(--g-text);font:inherit}
.guest input:not([type=checkbox]):not([type=file]):focus{border-color:var(--g-primary);outline:0;box-shadow:0 0 0 3px rgba(91,140,255,.2)}
.guest input[type=file]{width:100%;padding:.55rem;border:1px dashed rgba(255,255,255,.18);border-radius:12px;background:#0d1017;color:var(--g-muted);font-size:.85rem}
.guest input[type=file]::file-selector-button{margin-right:.8rem;padding:.5rem .85rem;border:0;border-radius:10px;background:var(--g-grad);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.guest input[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--g-primary)}
.guest .check{display:flex;align-items:flex-start;gap:.65rem;margin:.9rem 0;color:var(--g-muted);font-size:.84rem;line-height:1.5}

.guest .file-label{display:grid;justify-items:center;gap:.35rem;margin:0;padding:1.5rem 1rem;border:1.5px dashed rgba(255,255,255,.2);border-radius:16px;background:rgba(255,255,255,.02);color:var(--g-text);cursor:pointer;text-align:center}
.guest .file-label .ic{color:var(--g-primary)}.file-label strong{font-size:.98rem}.file-label small{font-size:.78rem}
.guest #file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.guest #preview,.guest #video-preview{display:block;width:100%;max-height:300px;margin-top:12px;border-radius:14px;object-fit:contain;background:#000}

.guest button.package{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:0 0 10px;padding:.95rem 1rem .95rem 2.8rem;border:1.5px solid var(--g-line);border-radius:16px;background:var(--g-surface-2);color:var(--g-text);font-weight:500;text-align:left;white-space:normal}
.guest button.package:last-child{margin-bottom:0}
.guest button.package::before{content:"";position:absolute;left:1rem;top:50%;width:18px;height:18px;margin-top:-9px;border:2px solid rgba(255,255,255,.28);border-radius:50%}
.guest button.package b{flex:none;font-size:1.08rem;color:#fff}
.guest button.package[aria-pressed=true]{border-color:var(--g-primary);background:rgba(91,140,255,.1);box-shadow:0 0 0 3px rgba(91,140,255,.14)}
.guest button.package[aria-pressed=true]::before{border-color:var(--g-primary);background:radial-gradient(circle,#fff 0 3px,var(--g-primary) 4px)}

.preset-group{margin:12px 0 2px}
.preset-group[hidden]{display:none!important}
.preset-hint{display:block;margin:0 0 4px;color:var(--g-muted,#9aa4b8);font-size:.78rem;font-weight:500;user-select:none}
.preset-wrap{position:relative;margin:0 -16px}
.preset-wrap::before,.preset-wrap::after{content:"";position:absolute;top:0;bottom:8px;width:44px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s ease}
.preset-wrap::before{left:0;background:linear-gradient(to right,var(--g-surface,#12161f),transparent)}
.preset-wrap::after{right:0;background:linear-gradient(to left,var(--g-surface,#12161f),transparent)}
.preset-wrap.can-scroll-left::before{opacity:1}
.preset-wrap.can-scroll-right::after{opacity:1}
#preset-chips{display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:2px 16px 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
#preset-chips::-webkit-scrollbar{display:none;width:0;height:0}
.guest button.chip{flex:none;scroll-snap-align:start;white-space:nowrap;padding:.55rem 1rem;border:1px solid var(--g-line);border-radius:99px;background:var(--g-surface-2);color:var(--g-text);font-weight:500}
.guest button.chip[aria-pressed=true]{border-color:var(--g-primary);background:rgba(91,140,255,.18);color:#fff}
.guest button.preset-scroll-btn{position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(24,29,42,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--g-text,#f4f6fb);font-size:1.15rem;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.guest button.preset-scroll-btn:hover{background:var(--g-surface-2,#181d2a);border-color:rgba(255,255,255,.3);color:#fff}
.guest button.preset-scroll-btn:active{transform:translateY(-50%) scale(.92)}
.guest button.preset-scroll-btn.prev{left:6px;padding-right:1px}
.guest button.preset-scroll-btn.next{right:6px;padding-left:1px}
@media(prefers-reduced-motion:reduce){.preset-wrap::before,.preset-wrap::after,.guest button.preset-scroll-btn{transition:none}}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:.8rem 0;padding:4px;border-radius:14px;background:#0d1017}
.guest .seg button{padding:.65rem .5rem;border-radius:11px;background:transparent;color:var(--g-muted);white-space:normal}
.guest .seg button[aria-pressed=true]{background:var(--g-surface-2);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
#duet-code{font-size:1.6rem;letter-spacing:.5em;text-align:center}
#repost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.guest button.repost-item{aspect-ratio:1;padding:4px;border:2px solid var(--g-line);border-radius:14px;background:var(--g-surface-2);color:var(--g-text);overflow:hidden;font-size:.78rem;font-weight:500;white-space:normal;word-break:break-word}
.guest button.repost-item img{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover}
.guest button.repost-item[aria-pressed=true]{border-color:var(--g-primary)}

.pay-card #fee{margin:0 0 12px;font-size:.88rem}
.guest .pay-button{width:100%;padding:.95rem 1rem;border:0;border-radius:14px;background:var(--g-grad);color:#fff;font-size:1rem;font-weight:800;box-shadow:0 8px 24px rgba(91,140,255,.28)}
.guest .pay-button:disabled,.guest #send-button:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
#privacy{display:block;margin-top:.6rem;font-size:.78rem;line-height:1.5}

.guest .submit-bar{position:sticky;bottom:0;z-index:4;margin:0 -16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(10,12,18,0),rgba(10,12,18,.94) 22%);backdrop-filter:blur(10px)}
.guest .submit-bar .consent{margin:0 0 .8rem}
.submit-row{display:flex;align-items:center;gap:16px}
.submit-total small{display:block;font-size:.7rem;color:var(--g-muted)}.submit-total b{font-size:1.35rem;font-weight:800}
.guest #send-button{flex:1;width:auto;padding:.95rem 1rem;border:0;border-radius:14px;background:var(--g-grad);color:#fff;font-size:1rem;font-weight:800;box-shadow:0 8px 24px rgba(91,140,255,.28)}
.guest [role=status]:not(:empty){margin-top:.7rem;color:#a9c0ff;font-size:.86rem;line-height:1.5}

dialog.sheet{width:min(92vw,420px);max-height:88vh;overflow:auto;padding:22px;border:1px solid var(--g-line,rgba(255,255,255,.09));border-radius:24px;background:#12161f;color:#f4f6fb;box-shadow:0 24px 70px rgba(0,0,0,.6)}
dialog.sheet::backdrop{background:rgba(4,6,10,.72);backdrop-filter:blur(3px)}
dialog.sheet[open]{animation:sheet-in .22s ease}
@keyframes sheet-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog.sheet[open]{animation:none}.guest .menu-card{transition:none}}
.sheet h2{display:flex;align-items:center;gap:8px;margin:.1rem 2.4rem .7rem 0;font-size:1.12rem}
.sheet .sheet-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:inherit;font-size:.9rem}
.rules{display:grid;gap:.5rem;margin:.9rem 0;padding:0;list-style:none}
.rules li{padding:.7rem .85rem;border:1px solid var(--g-line,rgba(255,255,255,.09));border-left:3px solid #f87171;border-radius:12px;background:#171c28;font-size:.9rem}
.sheet .hint{margin:.3rem 0 1rem;color:#9aa4b8;font-size:.82rem;line-height:1.5}
.sheet .wide{width:100%;padding:.95rem;border:0;border-radius:14px;background:linear-gradient(135deg,#4f86ff,#7c5cff);color:#fff;font-size:1rem;font-weight:800;box-shadow:0 8px 24px rgba(91,140,255,.28)}
dialog.sheet.light{background:#fff;color:#111827;border-color:#fff}
.sheet.light .sheet-close{background:#eef0f5}
.sheet.light #payment-image,.sheet.light #stripe-qr-image{display:block;width:min(100%,290px);height:auto;margin:14px auto;padding:10px;border:1px solid #e5e7eb;border-radius:18px;background:#fff}
.sheet.light .payment-qr-frame{width:min(100%,290px);margin:14px auto;overflow:hidden;border:1px solid #e5e7eb;border-radius:18px;background:#fff}
.payment-qr-frame strong{display:block;padding:.65rem;background:#123964;color:#fff;text-align:center;font-size:1rem;letter-spacing:.04em}
.sheet.light .payment-qr-frame #payment-image{width:100%;margin:0;padding:0;border:0;border-radius:0}
#pay-dialog #payment-link{margin:.85rem auto;padding:.85rem 1rem;border-radius:12px;background:#123964;color:#fff;text-decoration:none}
#stripe-qr-dialog .save-qr{padding:.85rem;border-radius:12px;background:#4f6df0;color:#fff;text-decoration:none}
#stripe-qr-progress{text-align:center;margin-top:1rem}
.sheet.light .total{text-align:center;font-size:1.05rem;color:#374151}.sheet.light .total b{display:block;margin-top:.1rem;font-size:2rem;color:#059669}
.sheet.light .hint{text-align:center;color:#6b7280}
.sheet.light .save-qr{display:block;margin-top:.4rem;color:#4f6df0;font-weight:800;text-align:center}
@media(max-width:520px){dialog.sheet{width:100%;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0}}

/* ============================ ranking ============================ */
.guest .rank-link{display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:8px;padding:.38rem .8rem;border:1px solid var(--g-line);border-radius:99px;background:rgba(255,255,255,.04);color:var(--g-text);font-size:.78rem;font-weight:800}
.guest .rank-link .ic{color:#fbbf24}
.guest .rank-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;padding:14px 16px;border:1px solid var(--g-line);border-radius:20px;background:linear-gradient(165deg,rgba(251,191,36,.1),var(--g-surface));color:var(--g-text);text-align:left;white-space:normal;font-weight:500}
.rank-card .mi{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:rgba(251,191,36,.16);color:#fbbf24}
.rank-card strong{display:block;font-size:1rem;font-weight:800}.rank-card small{color:var(--g-muted);font-size:.78rem}
.rank-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.rank-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--g-line);border-radius:18px;background:var(--g-surface)}
.rank-row .rk{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--g-surface-2);color:var(--g-muted);font-size:.82rem;font-weight:800}
.rank-row.top1 .rk{background:#fbbf24;color:#1a1300}.rank-row.top2 .rk{background:#cbd5e1;color:#0f172a}.rank-row.top3 .rk{background:#d9915b;color:#1f1105}
.rank-row.top1{border-color:rgba(251,191,36,.45)}
.rthumb{display:grid;place-items:center;flex:none;width:56px;height:56px;overflow:hidden;border-radius:14px;background:var(--g-surface-2);color:var(--g-muted);font-size:1.6rem;font-weight:800}
.rthumb img{width:100%;height:100%;object-fit:cover}
.rmeta{display:grid;gap:2px;min-width:0;flex:1}.rmeta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rmeta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rstats{display:flex;align-items:center;gap:5px;color:var(--g-muted);font-size:.76rem}.rstats i{font-style:normal}
.guest button.like{display:flex;align-items:center;gap:6px;flex:none;padding:.5rem .75rem;border:1px solid var(--g-line);border-radius:99px;background:var(--g-surface-2);color:var(--g-muted);font-weight:800}
.guest button.like[aria-pressed=true]{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.14);color:#fb7185}
.guest button.like[aria-pressed=true] .ic{fill:currentColor}

.gname,.secure,.guest .rank-link,.lang-switch{white-space:nowrap}


.handle-row{display:grid;grid-template-columns:minmax(0,38%) 1fr;gap:8px}
.guest select{width:100%;padding:.8rem .7rem;border:1px solid var(--g-line);border-radius:12px;background:#0d1017;color:var(--g-text);font:inherit;margin:0}
.guest select:focus{border-color:var(--g-primary);outline:0;box-shadow:0 0 0 3px rgba(91,140,255,.2)}
#handle-preview{display:block;min-height:1.2em;margin-top:.45rem;font-size:.78rem;color:var(--g-muted)}

/* ============================ bottom tab bar ============================ */
.guest{padding-bottom:112px}
.tabbar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;transform:translateX(-50%);width:min(calc(100% - 24px),496px);height:64px;
  display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;padding:0 6px;border:1px solid var(--g-line);border-radius:26px;
  background:rgba(18,22,31,.88);backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.guest .tabbar button{display:grid;justify-items:center;gap:3px;padding:6px 0;border:0;border-radius:16px;background:transparent;color:var(--g-muted);font-size:.66rem;font-weight:500;white-space:nowrap}
.guest .tabbar button[aria-current=page]{color:#fff}
.guest .tabbar button[aria-current=page] .ic{color:var(--g-primary)}
.guest .tabbar .tab-plus{place-items:center;align-content:center;justify-self:center;width:58px;height:58px;margin-top:-30px;padding:0;border:4px solid var(--g-bg);border-radius:50%;
  background:var(--g-grad);color:#fff;box-shadow:0 10px 26px rgba(91,140,255,.45)}
.guest .tabbar .tab-plus:active{transform:scale(.94)}
.price-list{display:grid;gap:8px;margin:.9rem 0}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.75rem .9rem;border:1px solid var(--g-line,rgba(255,255,255,.09));border-radius:14px;background:#171c28}
.price-row small{display:block;margin-top:2px;color:#9aa4b8;font-size:.76rem}.price-row b{font-size:1.1rem}

.guest input:disabled{opacity:.7;cursor:not-allowed}
.guest button.upgrade{margin-top:.6rem;padding:.55rem .9rem;border:1px solid rgba(91,140,255,.45);border-radius:12px;background:rgba(91,140,255,.1);color:#a9c0ff;font-size:.84rem;font-weight:800;white-space:normal;text-align:left}

/* floating hearts and stars while a guest's item is on screen */
#floaters{position:fixed;inset:0;z-index:30;overflow:hidden;pointer-events:none}
#floaters span{position:absolute;bottom:-12vh;line-height:1;opacity:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));animation:float-up var(--dur,5s) ease-in var(--delay,0s) forwards}
@keyframes float-up{0%{transform:translate(0,0) scale(.5) rotate(0);opacity:0}12%{opacity:1}50%{transform:translate(var(--sway,3vw),-55vh) scale(1) rotate(var(--rot,12deg))}100%{transform:translate(calc(var(--sway,3vw) * -1),-120vh) scale(1.15) rotate(calc(var(--rot,12deg) * -1));opacity:0}}
#floaters span.firework-particle{bottom:auto;font-size:0;line-height:0;filter:none;width:var(--size,6px);height:var(--size,6px);margin-left:calc(var(--size,6px) * -0.5);margin-top:calc(var(--size,6px) * -0.5);border-radius:50%;background-color:var(--color,#ffe066);box-shadow:0 0 6px var(--color,#ffe066),0 0 12px var(--color,#ffe066);opacity:1;pointer-events:none;will-change:transform,opacity;animation:firework-burst var(--dur,1.2s) cubic-bezier(0.12,0.8,0.32,1) forwards}
@keyframes firework-burst{0%{transform:translate(0,0) scale(1.3);opacity:1}50%{opacity:1}100%{transform:translate(var(--dx,0px),calc(var(--dy,0px) + 16px)) scale(0.2);opacity:0}}
@media(prefers-reduced-motion:reduce){#floaters span.firework-particle{display:none!important;animation:none!important}}

/* OBS overlay: centre the item on the whole screen (QR stays in the corner, above it) */
.overlay #slide{position:absolute;inset:0;margin:auto;width:100%;height:fit-content;max-height:96vh;padding:0 3vw}
.overlay #slide img,.overlay #slide video,.overlay-qr #slide img,.overlay-qr #slide video{max-height:78vh}
.overlay #slide .duet img,.overlay-qr #slide .duet img{max-height:78vh}
.overlay-qr #screen-qr{z-index:2}

/* bigger captions */
#slide figcaption{font-size:clamp(1.6rem,4.6vw,7rem);font-weight:800;padding:.35em .8em;border-radius:16px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.text-slide figcaption{font-size:clamp(2.4rem,8vw,11rem)}
.overlay #slide img,.overlay #slide video,.overlay-qr #slide img,.overlay-qr #slide video,.overlay #slide .duet img,.overlay-qr #slide .duet img{max-height:68vh}

/* caption floats over the picture, QR shrinks while an item is on screen, picture is bigger */
#slide{position:relative}
#slide figcaption{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:max-content;max-width:92%;background:rgba(20,16,28,.72)}
#slide.text-slide figcaption{position:static;transform:none;width:auto;background:#14101c}
.overlay #slide{width:fit-content;max-width:94vw;padding:0}
.overlay #slide.text-slide{max-width:94vw}
.overlay #slide img,.overlay #slide video,.overlay-qr #slide img,.overlay-qr #slide video,.overlay #slide .duet img,.overlay-qr #slide .duet img{max-height:92vh}
.has-slide.overlay-qr #display{--overlay-qr-size:clamp(56px,6.5vw,120px)}
.has-slide .overlay-qr-label{display:none}

/* caption: never wrap per letter; width follows the text, not the picture */
#slide figcaption{width:max-content;max-width:90vw;overflow-wrap:break-word;word-break:normal}
#slide.text-slide figcaption{width:auto;max-width:100%}

/* Instagram-style post feed */
.guest .rank-list{gap:18px}
.ig-post{overflow:hidden;border:1px solid var(--g-line);border-radius:18px;background:var(--g-surface)}
.ig-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);color:#fff;font-weight:800;box-shadow:0 0 0 2px var(--g-surface),0 0 0 4px rgba(238,42,123,.55)}
.ig-name{display:grid;min-width:0;flex:1;margin-left:4px}.ig-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}.ig-name small{color:var(--g-muted);font-size:.72rem}
.ig-rank{padding:.15rem .6rem;border-radius:99px;background:var(--g-surface-2);color:var(--g-muted);font-size:.78rem;font-weight:800}
.ig-rank.top1{background:#fbbf24;color:#1a1300}.ig-rank.top2{background:#cbd5e1;color:#0f172a}.ig-rank.top3{background:#d9915b;color:#1f1105}
.ig-media{position:relative;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ig-media img{width:100%;height:100%;object-fit:cover;display:block}
.ig-media.ig-text{background:linear-gradient(135deg,#6228d7,#ee2a7b 60%,#f9ce34);padding:8%}
.ig-media.ig-text p{color:#fff;font-size:clamp(1.5rem,7vw,2.4rem);font-weight:800;line-height:1.25;text-align:center;overflow-wrap:anywhere;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ig-burst{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;pointer-events:none}
.ig-burst .ic{fill:currentColor;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.ig-burst.go{animation:ig-pop .8s ease-out}
@keyframes ig-pop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.15)}40%{transform:scale(.95)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
.ig-bar{display:flex;align-items:center;gap:16px;padding:10px 12px 2px}
.guest button.ig-like{display:grid;place-items:center;width:auto;padding:4px;border:0;background:transparent;color:var(--g-text);box-shadow:none}
.guest button.ig-like[aria-pressed=true]{color:#ff3040}.guest button.ig-like[aria-pressed=true] .ic{fill:currentColor;animation:ig-like .35s ease}
@keyframes ig-like{0%{transform:scale(.7)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.ig-reposts{display:flex;align-items:center;gap:6px;color:var(--g-muted)}.ig-reposts i{font-style:normal;font-weight:700;font-size:.9rem}
.ig-likes{padding:2px 14px 0;font-weight:800;font-size:.9rem}
.ig-caption{padding:2px 14px 14px;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}

/* OBS caption over the picture: more see-through */
#slide figcaption{background:rgba(20,16,28,.4);text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.8)}
#slide.text-slide figcaption{background:#14101c;text-shadow:none}

/* social-media logos */
.pf-ico{display:inline-block;width:1.1em;height:1.1em;margin-right:.3em;vertical-align:-.2em}
.handle-row{flex-wrap:wrap}
.platform-picker{display:flex;flex:1 0 100%;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.platform-picker::-webkit-scrollbar{display:none}
.guest .platform-picker button{display:grid;justify-items:center;gap:4px;flex:none;min-width:58px;padding:8px 6px;border:1.5px solid var(--g-line);border-radius:14px;background:var(--g-surface-2);color:var(--g-muted);font-size:.7rem;font-weight:700;white-space:nowrap}
.guest .platform-picker button .pf-ico{width:28px;height:28px;margin:0}
.guest .platform-picker button[aria-pressed=true]{border-color:var(--g-primary,#5b8cff);background:rgba(91,140,255,.16);color:var(--g-text)}
.pf-name-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#475069;color:#fff;font-size:.8rem;font-weight:800}
.ig-name small .pf-ico{width:1em;height:1em}
#slide figcaption .credit{display:inline-block;margin-top:.1em}
#slide figcaption .credit .pf-ico{width:1.05em;height:1.05em;vertical-align:-.15em}
#platform[hidden]{display:none!important}

.handle-row{grid-template-columns:1fr}
.platform-picker{grid-column:1/-1}

/* social feed: big pictures, comments */
.feed-tabs{display:flex;gap:8px;margin:0 0 14px}
.guest .feed-tabs button{padding:.5rem 1.1rem;border:1px solid var(--g-line);border-radius:99px;background:var(--g-surface-2);color:var(--g-muted);font-weight:800}
.guest .feed-tabs button[aria-pressed=true]{background:var(--g-text);color:var(--g-bg);border-color:var(--g-text)}
.ig-media:not(.ig-text){aspect-ratio:auto;min-height:60vw;background:#0b0d12}
.ig-media:not(.ig-text) img{height:auto;max-height:88vh;object-fit:contain}
.ig-when{color:var(--g-muted);font-size:.7rem;white-space:nowrap}
.guest button.ig-comment-btn{display:grid;place-items:center;width:auto;padding:4px;border:0;background:transparent;color:var(--g-text);box-shadow:none}
.guest button.ig-more{display:block;width:100%;padding:2px 14px;border:0;background:transparent;color:var(--g-muted);font-size:.85rem;text-align:left;box-shadow:none}
.ig-thread{padding:6px 14px 14px;border-top:1px solid var(--g-line);margin-top:8px}
.ig-comment{margin:6px 0;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}.ig-comment small{color:var(--g-muted);font-size:.7rem}
.ig-comment-form{display:grid;grid-template-columns:84px 1fr auto;gap:6px;margin-top:8px}
.ig-comment-form input{min-width:0;padding:.55rem .7rem;font-size:.88rem}
.guest .ig-comment-form button{padding:.5rem .9rem;border-radius:12px;font-weight:800}
.ig-note{display:block;margin-top:4px;color:#fb7185}
.comment-admin{display:grid;gap:6px;margin-top:.6rem}
.comment-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.4rem .2rem;border-bottom:1px solid rgba(255,255,255,.08);overflow-wrap:anywhere}

/* OBS caption sits on the bottom edge of the screen */
#slide:not(.text-slide) figcaption{position:fixed;left:50%;bottom:1.5vh;transform:translateX(-50%);max-width:94vw}

/* OBS caption beside the picture (right side); wide pictures fall back to the bottom edge */
#slide:not(.text-slide) figcaption{position:absolute;left:100%;top:50%;bottom:auto;transform:translateY(-50%);margin-left:2vw;width:max-content;max-width:var(--cap-w,24vw);text-align:left}
#slide.cap-bottom:not(.text-slide) figcaption{position:fixed;left:50%;top:auto;bottom:1.5vh;transform:translateX(-50%);margin:0;max-width:94vw;text-align:center}
.summary-body{display:grid;gap:6px;margin-top:.8rem}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:.45rem .2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sum-total{font-size:1.25rem;border-bottom:2px solid var(--accent,#c6f24e)}

/* feed header: bigger warp handle, links to the guest's social profile */
.ig-head{padding:12px 14px;gap:12px}
.ig-avatar{width:46px;height:46px;font-size:1.15rem}
a.ig-name{color:inherit;text-decoration:none}
.ig-name b{font-size:1.12rem;line-height:1.25}
.ig-name small{display:flex;align-items:center;gap:2px;font-size:.84rem;color:var(--g-muted)}
.ig-name small .pf-ico{width:1.1em;height:1.1em}
.ig-follow{display:inline-flex;align-items:center;gap:5px;flex:none;padding:.45rem .85rem;border-radius:10px;background:var(--g-primary,#5b8cff);color:#fff;font-size:.86rem;font-weight:800;text-decoration:none;white-space:nowrap}
.ig-follow .pf-ico{width:1.1em;height:1.1em;margin:0}
.ig-follow:active{transform:scale(.96)}

.consent-note{display:block;margin:0 0 8px;color:var(--g-muted,#9aa4b8);font-size:.74rem;line-height:1.35}

/* posts page: platform logos large enough to recognise */
.ig-name small{gap:5px}
.ig-name small .pf-ico{width:20px;height:20px;margin:0;flex:none}
.ig-follow{gap:7px;padding:.45rem .9rem;background:#fff;color:#111;border:1px solid rgba(0,0,0,.08)}
.ig-follow .pf-ico{width:22px;height:22px}
.ig-name small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-name small .pf-ico{display:inline-block;vertical-align:-5px;margin-right:5px}
.ig-rank{flex:none}
.ig-media .ig-rank{position:absolute;top:10px;left:10px;z-index:1;padding:.3rem .75rem;font-size:.95rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ig-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-follow{padding:.42rem .75rem}
.ig-name small{font-size:.9rem}
.ig-name small .pf-ico{width:26px;height:26px;vertical-align:-8px;margin-right:6px}
.ig-follow{gap:8px;font-size:.92rem}
.ig-follow .pf-ico{width:28px;height:28px}

/* venue header */
.gbrand .venue-logo{width:44px;height:44px;flex:none;border-radius:12px;object-fit:cover;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.gbrand .venue-text{display:grid;line-height:1.15;min-width:0}
.gbrand .venue-text b{font-size:1.08rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbrand .venue-text small{color:var(--g-muted,#9aa4b8);font-size:.74rem;white-space:nowrap}

/* ============================ owner page (/admin) ============================ */
.owner-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.owner-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:20px 0}
.owner-stat-box{text-align:left;padding:16px}
.owner-stat-box small{display:block;margin-bottom:4px;font-size:.78rem;letter-spacing:.05em}
.owner-stat-box b{font-size:1.5rem;font-weight:800;color:var(--accent)}
.owner-form-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.owner-venues-grid{display:grid;gap:16px}
.venue-card{border:1px solid var(--border);border-radius:16px;padding:18px;background:#15121e;display:flex;flex-direction:column;gap:14px}
.venue-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.venue-info{display:flex;align-items:center;gap:14px;min-width:0}
.venue-logo-img{width:48px;height:48px;border-radius:12px;object-fit:cover;background:#fff;flex:none}
.venue-titles{display:grid;gap:2px;min-width:0}
.venue-name-b{font-size:1.15rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venue-slug-tag{color:var(--muted);font-size:.82rem}
.venue-badge{display:inline-block;padding:.25em .8em;border-radius:99px;font-size:.75rem;font-weight:800;white-space:nowrap}
.venue-badge.active{background:rgba(208,251,122,.15);color:var(--accent);border:1px solid rgba(208,251,122,.35)}
.venue-badge.inactive{background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.35)}
.venue-stats-bar{display:flex;gap:24px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.03);font-size:.88rem;flex-wrap:wrap}
.venue-stats-bar small{color:var(--muted);margin-right:6px}
.venue-links-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.venue-btn-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:4px;border-top:1px solid rgba(255,255,255,.06)}
.owner-upload-label{display:inline-block;font-family:inherit;font-weight:800;font-size:inherit;padding:.68rem .95rem;border-radius:9px;background:#383145;color:var(--text);cursor:pointer;white-space:nowrap}
.owner-upload-label:hover{background:#483f58}
.owner-form .actions,#owner-create-form .actions,#owner-edit-form .actions{margin-top:14px}
.owner-list-panel{margin-top:20px}
.owner-list-panel .actions{justify-content:space-between;margin-top:0;margin-bottom:14px}
#owner-new-key{font-family:monospace;font-size:1.1rem;text-align:center;margin:16px 0}
#owner-edit-dialog{width:min(92vw,560px)}

.hero-tags{position:relative;overflow:hidden;width:100%;margin:.35rem 0 1rem;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
.hero-tags-track{display:flex;width:max-content;gap:8px;padding-right:8px;animation:hero-marquee 26s linear infinite;will-change:transform}
.hero-tags:hover .hero-tags-track{animation-play-state:paused}
.hero-tags span{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:.35rem .85rem;border-radius:99px;background:linear-gradient(135deg,rgba(238,42,123,.22),rgba(98,40,215,.22));border:1px solid rgba(238,42,123,.45);color:#fff;font-size:.9rem;font-weight:800;white-space:nowrap;user-select:none}
.hero-tags span.hero-tag-bright,.hero-tags-track span:nth-child(10n+1),.hero-tags-track span:nth-child(10n+2){background:linear-gradient(135deg,rgba(255,60,140,.42),rgba(130,60,240,.42));border-color:rgba(255,90,160,.75);box-shadow:0 0 14px rgba(238,42,123,.3)}
@keyframes hero-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero-tags{-webkit-mask-image:none;mask-image:none;overflow:visible}.hero-tags-track{animation:none;transform:none;display:flex;flex-wrap:wrap;width:100%;padding-right:0}.hero-tags-track span[aria-hidden="true"]{display:none}}

/* floaters crossing the picture stay faint */
#floaters span.over-picture{--peak:.28;filter:none}
#floaters span{--peak:1}
@keyframes float-up{0%{transform:translate(0,0) scale(.5) rotate(0);opacity:0}12%{opacity:var(--peak)}50%{transform:translate(var(--sway,3vw),-55vh) scale(1) rotate(var(--rot,12deg))}88%{opacity:var(--peak)}100%{transform:translate(calc(var(--sway,3vw) * -1),-120vh) scale(1.15) rotate(calc(var(--rot,12deg) * -1));opacity:0}}

/* Warp QR (bottom-left) */
#warp-qr{position:absolute;left:3vw;bottom:3vh;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;background:var(--panel,#1a1724);border:1px solid var(--border,#383245);border-radius:14px;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.overlay #warp-qr{background:rgba(20,16,28,.88);border-color:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
#warp-qr-image{width:clamp(80px,9vw,140px);aspect-ratio:1;background:#fff;border-radius:8px;display:block}
.warp-qr-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:clamp(.75rem,1.1vw,1.3rem);font-weight:800;color:#fff;max-width:clamp(90px,11vw,170px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.warp-qr-label .pf-ico{width:1.15em;height:1.15em;flex:none}

/* Ad slide */
#slide.ad-slide{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(24px,4vw,60px);width:100%;max-width:92vw;height:100%;max-height:82vh;position:relative}
#slide.ad-slide #slide-image{max-width:min(54vw,860px);max-height:78vh;object-fit:contain;border-radius:16px;flex:0 1 auto}
.overlay-qr #slide.ad-slide #slide-image{max-height:calc(85vh - var(--overlay-qr-size,0px))}
.ad-badge{position:absolute;top:0;left:0;z-index:5;background:rgba(0,0,0,.75);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:4px 12px;font-size:clamp(.85rem,1.1vw,1.25rem);font-weight:800;letter-spacing:.05em;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.ad-content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(14px,2vh,26px);max-width:clamp(280px,34vw,560px);min-width:240px;flex:1 1 auto;text-align:left}
.ad-brand{font-size:clamp(2rem,3.6vw,4.2rem);font-weight:900;line-height:1.15;color:#fff;word-break:break-word;overflow-wrap:anywhere;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.ad-text{font-size:clamp(1.1rem,1.8vw,2.1rem);font-weight:500;line-height:1.35;color:var(--muted,#c0b9ce);word-break:break-word;overflow-wrap:anywhere;white-space:pre-line;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ad-text:empty{display:none}
.ad-qr-box{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);padding:clamp(10px,1.2vw,18px);background:var(--panel,#1a1724);border:1px solid var(--border,#383245);border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.overlay .ad-qr-box{background:rgba(20,16,28,.88);border-color:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.ad-qr-image{width:clamp(84px,10vw,160px);aspect-ratio:1;background:#fff;border-radius:10px;display:block;flex:none}
.ad-qr-label{font-size:clamp(1.1rem,1.8vw,2.2rem);font-weight:800;color:var(--accent,#d0fb7a);line-height:1.2}

/* Venue Admin: Contact Form */
#contact-form{display:grid;gap:10px;margin-top:10px}
#contact-form input{max-width:360px}

/* Venue Admin: Ads Section */
.ad-section{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.ad-section h3{margin:0 0 4px;font-size:1.05rem;font-weight:800}
.ad-packages-grid{display:grid;gap:10px;margin:12px 0}
.ad-pkg-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) auto;gap:8px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:12px;background:#13101c}
.ad-pkg-row label{margin:0;font-size:.78rem;display:flex;flex-direction:column;gap:4px}
.ad-pkg-row input,.ad-pkg-row select{margin-top:0}
.ad-pkg-row button.ad-pkg-del{padding:.65rem .85rem;margin-bottom:0}

#ad-rules-input{width:100%;border:1px solid var(--border);border-radius:10px;background:#100e17;color:var(--text);font:inherit;padding:.7rem .8rem;resize:vertical;min-height:90px;margin-top:8px}

.ad-list-header{justify-content:space-between;margin-top:0;margin-bottom:12px}
.admin-ads-list{display:grid;gap:12px}
.ad-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:#15121e;display:grid;gap:8px}
.ad-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ad-card-brand{font-size:1.1rem;font-weight:800}
.ad-pkg-badge{padding:.2em .6em;border-radius:6px;background:rgba(255,255,255,.08);color:var(--muted);font-size:.78rem;font-weight:700}
.ad-status-badge{padding:.2em .7em;border-radius:99px;font-size:.75rem;font-weight:800}
.ad-status-badge.live{background:rgba(208,251,122,.15);color:var(--accent);border:1px solid rgba(208,251,122,.35)}
.ad-status-badge.pending{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.35)}
.ad-status-badge.ended{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid rgba(255,255,255,.12)}
.ad-status-badge.refund-needed{background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.35)}
.ad-status-badge.refunded{background:rgba(148,163,184,.15);color:#94a3b8;border:1px solid rgba(148,163,184,.35)}
.ad-card-body{display:grid;gap:6px;font-size:.88rem}
.ad-card-text{margin:0;color:var(--muted);white-space:pre-wrap}
.ad-card-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
.ad-card-link{overflow-wrap:anywhere;font-size:.84rem}

/* Guest Ad Mode & Social Picker */
.ad-mode-box{margin-bottom:14px;padding:14px 16px}
.ad-mode-check{display:flex;align-items:flex-start;gap:.75rem;margin:0;cursor:pointer}
.ad-mode-label{display:grid;gap:2px}
.ad-mode-label strong{color:var(--g-text);font-size:.95rem;font-weight:800}
.ad-mode-label small{color:var(--g-muted);font-size:.8rem;line-height:1.4}
.ad-rules-box{margin-top:16px;padding:14px;border:1px solid var(--g-line);border-radius:14px;background:#0d1017}
.ad-rules-box h4{margin:0 0 8px;font-size:.9rem;font-weight:800;color:var(--g-text)}
.ad-rules-box .rules{margin:.4rem 0 .8rem}
.ad-rules-box .rules li{font-size:.82rem;padding:.5rem .75rem;border-left:3px solid #f87171}
.ad-review-note{margin:0;font-size:.82rem;line-height:1.45;color:#fbbf24;font-weight:700}
.guest button.ig-follow{border:1px solid rgba(0,0,0,.08);background:#fff;color:#111;cursor:pointer;font-family:inherit}
.handle-note{display:block;margin-top:.45rem;font-size:.78rem;color:#fbbf24}

/* Queue Sheet & Mine Posts */
.queue-content{display:grid;gap:14px;margin-top:10px}
.q-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-tile{padding:12px 10px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-surface-2);text-align:center}
.q-tile-val{display:block;font-size:1.3rem;font-weight:800;color:#fff}
.q-tile-lbl{display:block;font-size:.78rem;color:var(--g-muted);margin-top:2px;line-height:1.3}
.q-current-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(91,140,255,.35);border-radius:14px;background:rgba(91,140,255,.1);font-size:.86rem;flex-wrap:wrap}
.q-current-tag{display:inline-flex;align-items:center;gap:5px;padding:.2rem .55rem;border-radius:99px;background:var(--g-primary);color:#fff;font-size:.72rem;font-weight:800}
.q-current-ico{display:inline-flex;align-items:center;font-size:1.15rem}
.q-current-handle{font-weight:800;color:#fff}
.q-current-time{margin-left:auto;color:var(--g-muted);font-size:.8rem}
.q-section-title{font-size:.95rem;font-weight:800;margin:4px 0 0;color:var(--g-text)}
.q-mine-list{display:grid;gap:12px}
.q-card{padding:14px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-surface-2)}
.q-card-top{display:flex;gap:12px;align-items:center}
.q-card-thumb{width:56px;height:56px;flex:none;border-radius:10px;overflow:hidden;background:#000;display:grid;place-items:center}
.q-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.q-card-thumb.q-thumb-text{padding:6px;font-size:.7rem;color:var(--g-muted);line-height:1.2;text-align:center;overflow:hidden;background:#151824}
.q-card-meta{min-width:0;flex:1}
.q-card-status{font-size:.9rem;font-weight:800;color:#fff}
.q-card-caption{font-size:.78rem;color:var(--g-muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-progress{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.q-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-align:center}
.q-dot{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--g-muted);font-size:.68rem;font-weight:800;border:1px solid var(--g-line)}
.q-step.active .q-dot{background:var(--g-primary);color:#fff;border-color:var(--g-primary);box-shadow:0 0 10px rgba(91,140,255,.5)}
.q-step.done .q-dot{background:var(--g-ok);color:#0a0c12;border-color:var(--g-ok)}
.q-step.failed .q-dot{background:#ef4444;color:#fff;border-color:#ef4444}
.q-step-lbl{font-size:.68rem;color:var(--g-muted);white-space:nowrap}
.q-step.active .q-step-lbl{color:#fff;font-weight:700}
.q-step.done .q-step-lbl{color:var(--g-text)}
.q-line{flex:1;height:2px;background:rgba(255,255,255,.08);margin:-14px 4px 0}
.q-line.done{background:var(--g-ok)}
.q-empty{display:grid;place-items:center;gap:8px;padding:20px 10px;text-align:center}
.q-empty h3{font-size:1.05rem;font-weight:800;margin:0}
.q-empty p{font-size:.85rem;color:var(--g-muted);margin:0}
.q-refresh-btn{margin-top:4px;padding:.55rem 1.2rem;border-radius:10px;font-size:.85rem}
.q-help-box{display:grid;gap:10px;padding:14px;border:1px solid var(--g-line);border-radius:16px;background:rgba(255,255,255,.03);text-align:center;margin-top:6px}
.q-help-box strong{font-size:.9rem}
.q-contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.75rem 1rem;border-radius:12px;background:#06C755;color:#fff;font-weight:800;font-size:.92rem;text-decoration:none;box-shadow:0 4px 14px rgba(6,199,85,.3)}
.q-contact-btn:hover{background:#05b34c}
.q-contact-btn:active{transform:scale(.98)}
.q-send-btn{margin-top:10px}

/* ============================ Profile & LINE Login ============================ */
.line-login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:.95rem 1rem;border:0;border-radius:14px;background:#06C755;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 16px rgba(6,199,85,.35);transition:transform .15s ease,background-color .15s ease}
.line-login-btn:hover{background:#05b34c}
.line-login-btn:active{transform:scale(.98)}
.line-ico{flex:none;border-radius:4px}
.profile-user-card{display:flex;align-items:center;gap:16px}
.profile-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--g-line);background:var(--g-surface-2);flex:none}
.profile-user-info{display:grid;gap:4px;min-width:0;flex:1}
.profile-user-name{font-size:1.25rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-line-badge{display:inline-flex;align-items:center;gap:6px;color:#06C755;font-size:.8rem;font-weight:700}
.profile-line-badge .line-dot{width:8px;height:8px;border-radius:50%;background:#06C755}
.profile-guest-card{display:grid;justify-items:center;text-align:center;gap:10px;padding:24px 16px}
.profile-placeholder-avatar{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--g-surface-2);color:var(--g-muted);border:2px dashed var(--g-line);margin-bottom:4px}
.profile-logged-out-title{font-size:1.15rem;font-weight:800}
.profile-logged-out-desc{font-size:.88rem;line-height:1.45;margin:0}
#profile-login-action{width:100%;display:grid;gap:8px;margin-top:8px}
.profile-login-note{font-size:.74rem;line-height:1.4;text-align:center}
.profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 0 14px}
.card-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.card-head-row .step-title{margin:0}
.profile-warps-list{display:grid;gap:10px}
.profile-warp-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-surface-2)}
.profile-warp-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.profile-warp-ico{display:inline-flex;align-items:center;font-size:1.3rem;flex:none}
.profile-warp-handle{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-primary-badge{padding:.15rem .55rem;border-radius:99px;background:rgba(91,140,255,.2);border:1px solid rgba(91,140,255,.5);color:#a9c0ff;font-size:.72rem;font-weight:800;flex:none}
.profile-warp-actions{display:flex;align-items:center;gap:6px;flex:none}
.small-btn{padding:.35rem .7rem;font-size:.78rem;border-radius:8px}
.danger-btn{color:#f87171}
.profile-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.profile-post-cell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--g-surface-2);border:1px solid var(--g-line)}
.profile-post-thumb{width:100%;height:100%}
.profile-post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.profile-post-thumb.profile-thumb-text{display:flex;align-items:center;justify-content:center;padding:8px;background:linear-gradient(135deg,#6228d7,#ee2a7b)}
.profile-post-thumb.profile-thumb-text p{margin:0;font-size:.72rem;font-weight:700;line-height:1.25;text-align:center;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.profile-post-status{position:absolute;top:4px;left:4px;z-index:2;padding:.12rem .45rem;border-radius:99px;font-size:.64rem;font-weight:800;background:rgba(18,22,31,.85);color:#fff;backdrop-filter:blur(4px);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.profile-post-status.shown{background:rgba(52,211,153,.9);color:#0a0c12}
.profile-post-status.onscreen{background:rgba(91,140,255,.9);color:#fff}
.profile-post-status.rejected,.profile-post-status.refund{background:rgba(239,68,68,.9);color:#fff}
.profile-post-status.queued,.profile-post-status.pending,.profile-post-status.checking{background:rgba(251,191,36,.9);color:#1a1300}
.profile-post-likes{position:absolute;bottom:4px;right:4px;z-index:2;display:inline-flex;align-items:center;gap:3px;padding:.1rem .4rem;border-radius:99px;background:rgba(0,0,0,.65);color:#ff3040;font-size:.68rem;font-weight:800}
.profile-post-venue{position:absolute;bottom:4px;left:4px;z-index:2;padding:.1rem .4rem;border-radius:99px;background:rgba(0,0,0,.65);color:var(--g-muted);font-size:.62rem;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#profile-posts-more{margin-top:10px}
.profile-settings-list{display:grid;gap:6px}
.profile-setting-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-surface-2);color:var(--g-text);font-size:.92rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.profile-setting-row:hover{background:rgba(255,255,255,.06)}
.profile-setting-row:active{transform:scale(.99)}
.profile-setting-row .setting-icon{font-size:1.1rem;flex:none;width:24px;text-align:center}
.profile-setting-row .setting-label{flex:1;min-width:0}
.profile-setting-row .setting-value{color:var(--g-muted);font-size:.84rem;flex:none}
.profile-setting-row .setting-arrow{color:var(--g-muted);font-size:1.1rem;font-weight:400;flex:none}
.profile-setting-row.danger{color:#f87171}
.profile-setting-row.danger:hover{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.lang-dialog-options{display:grid;gap:8px;margin:16px 0 8px}
.lang-dialog-options button{width:100%;padding:.85rem 1rem;text-align:left;font-size:.95rem}
.login-prompt-actions{display:grid;gap:10px;margin-top:16px}
.skip-btn{width:100%;padding:.8rem;border:0;background:transparent;color:var(--g-muted);font-size:.92rem;font-weight:700;cursor:pointer;text-align:center;text-decoration:underline;text-underline-offset:4px}
.skip-btn:hover{color:var(--g-text)}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:100;padding:10px 18px;border-radius:99px;background:rgba(239,68,68,.95);color:#fff;font-size:.88rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;animation:toast-in .25s ease;white-space:nowrap}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

/* Saved Warps Checkboxes in Send Flow */
.saved-warps-group{margin-bottom:14px}
.saved-warps-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:.9rem 0 .5rem}
.saved-warps-head label{margin:0;color:var(--g-muted);font-size:.85rem}
.link-btn{background:transparent;border:0;color:var(--g-primary);font-size:.84rem;font-weight:800;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:#8cb3ff}
.saved-warps-list{display:grid;gap:8px}
.saved-warp-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--g-line);border-radius:14px;background:var(--g-surface-2);cursor:pointer;user-select:none;transition:border-color .15s ease,background-color .15s ease}
.saved-warp-item.selected{border-color:var(--g-primary);background:rgba(91,140,255,.1)}
.saved-warp-item input[type=checkbox]{flex:none;margin:0;width:18px;height:18px;accent-color:var(--g-primary)}
.saved-warp-item.disabled{opacity:.45;cursor:not-allowed}
.saved-warp-icon{display:inline-flex;align-items:center;font-size:1.15rem;flex:none}
.saved-warp-icon .pf-ico{width:22px;height:22px;margin:0}
.saved-warp-handle{font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* Multiple Warps in Post Feed */
.ig-follows-col{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none}
.guest button.ig-follow-sm,.guest a.ig-follow-sm{padding:.28rem .6rem!important;font-size:.76rem!important;border-radius:8px!important;gap:4px!important;line-height:1.2}
.ig-follow-sm .pf-ico{width:16px!important;height:16px!important;margin:0!important;vertical-align:middle!important}
.ig-warp-line{display:flex;align-items:center;gap:4px;font-size:.84rem;color:var(--g-text);line-height:1.35}
.ig-warp-line .pf-ico{width:16px;height:16px;flex:none;margin:0}
.ig-warp-lines{display:grid;gap:3px;padding:0 14px 8px}

/* Warp Card Page (/w/<code>) */
.warp-card-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.warp-card-container{width:100%;max-width:420px;margin:auto}
.warp-card-box{padding:24px 20px;border:1px solid var(--g-line);border-radius:24px;background:var(--g-surface);box-shadow:0 14px 40px rgba(0,0,0,.5);display:grid;gap:18px}
.warp-card-header{text-align:center}
.warp-card-title{font-size:1.6rem;font-weight:800;margin:0}
.warp-card-list{display:grid;gap:10px}
.warp-card-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-surface-2)}
.warp-card-row-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.warp-card-icon{display:inline-flex;align-items:center;font-size:1.35rem;flex:none}
.warp-card-icon .pf-ico{width:28px;height:28px;margin:0}
.warp-card-handle{font-size:.92rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.warp-card-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .95rem;border-radius:10px;background:#fff;color:#111;font-size:.84rem;font-weight:800;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;flex:none;transition:transform .15s ease,background-color .15s ease}
.warp-card-btn:hover{background:#f0f0f0}
.warp-card-btn:active{transform:scale(.96)}
.warp-card-loading{text-align:center;color:var(--g-muted);font-size:.9rem;margin:12px 0}
.warp-card-error{text-align:center;padding:20px 10px;color:var(--g-muted);font-size:1rem;font-weight:700}
.warp-card-footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
.upjor-brand{display:flex;align-items:center;gap:8px}
.upjor-brand .logo{width:24px;height:24px;border-radius:7px}
.upjor-name{font-size:.95rem;font-weight:800;letter-spacing:-.02em}
.upjor-link{color:var(--g-primary);font-size:.82rem;font-weight:700;text-decoration:none}
.upjor-link:hover{text-decoration:underline}

/* ==================== Photos-only screen (?caption=0) ==================== */
body.no-caption #slide-caption,
body.no-caption #slide figcaption {
  display: none !important;
}

/* ==================== Caption Strip View (?view=caption) ==================== */
html.caption-view,
body.caption-view {
  background: transparent !important;
  overflow: hidden !important;
}

body.caption-view #display {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

body.caption-view #stage,
body.caption-view #screen-qr,
body.caption-view #warp-qr,
body.caption-view #floaters {
  display: none !important;
}

.caption-strip {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  z-index: 100;
}

.caption-strip.visible {
  opacity: 1;
}

.caption-strip-track {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}

.caption-strip-track.marquee {
  justify-content: flex-start;
  max-width: none;
  width: max-content;
  will-change: transform;
  animation: caption-marquee var(--marquee-dur, 20s) linear infinite;
}

@keyframes caption-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.caption-strip-content {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 36px);
  white-space: nowrap;
  font-family: Prompt, "Leelawadee UI", Tahoma, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  line-height: 1.2;
  color: #ffffff;
  text-shadow:
    -2px -2px 0 #000,
     0   -2px 0 #000,
     2px -2px 0 #000,
    -2px  0   0 #000,
     2px  0   0 #000,
    -2px  2px 0 #000,
     0    2px 0 #000,
     2px  2px 0 #000,
     0    3px 8px rgba(0, 0, 0, 0.95),
     0    1px 3px rgba(0, 0, 0, 0.95);
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  flex: none;
}

.caption-strip-track.marquee .caption-strip-content {
  padding-right: clamp(48px, 6vw, 120px);
}

.caption-strip-text {
  white-space: nowrap;
}

.caption-strip-warp {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex: none;
  white-space: nowrap;
}

.caption-strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.caption-strip-icon .pf-ico {
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  vertical-align: -0.15em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 2px #000);
}

.caption-strip-handle {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .caption-strip {
    transition: none !important;
  }
}