/* StayHello shared palette + guest-guide styles (used by the guest page and the editor preview). */
:root{
  --bg:#FFF6EC; --surface:#FFFFFF; --ink:#2A1A2C; --muted:#6F5B69; --line:#F0E1D6; --field:#FFFBF7;
  --accent:#C93A1E; --on-accent:#FFFFFF; --on-c:#FFFFFF;
  --hero-a:#D63A22; --hero-b:#C2185B; --hero-ink:#FFFFFF; --sun:#FFD43B; --wave:#19C3BD;
  --ok:#2E7D4A; --ok-soft:#DDF3E3; --danger:#C62F22; --danger-soft:#FFE0DB; --device:#2A1A2C;
  --coral:#C93A1E; --coral-s:#FFE2DA; --mango:#A35F00; --mango-s:#FFEDC2;
  --turq:#087A75; --turq-s:#CFF4F0; --leaf:#2F7A1A; --leaf-s:#DFF3D2;
  --lav:#6A4ED6; --lav-s:#EBE3FF; --pink:#B8306C; --pink-s:#FFDFEC;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1220; --surface:#251A2D; --ink:#F7EEF0; --muted:#BBA8B6; --line:#3A2C43; --field:#1F1626;
    --accent:#FF7356; --on-accent:#1A1220; --on-c:#1A1220;
    --hero-a:#B5321C; --hero-b:#A3154D; --hero-ink:#FFF8F2; --wave:#139E99;
    --ok:#62CC86; --ok-soft:#183324; --danger:#FF8A78; --danger-soft:#43211E; --device:#0E0912;
    --coral:#FF8B71; --coral-s:#3E221D; --mango:#FFC34A; --mango-s:#3A2C12;
    --turq:#4CDCD4; --turq-s:#113634; --leaf:#8BD76B; --leaf-s:#1E3418;
    --lav:#B4A1FF; --lav-s:#2C2346; --pink:#FF80B6; --pink-s:#3E1C2D; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1A1220; --surface:#251A2D; --ink:#F7EEF0; --muted:#BBA8B6; --line:#3A2C43; --field:#1F1626;
  --accent:#FF7356; --on-accent:#1A1220; --on-c:#1A1220;
  --hero-a:#B5321C; --hero-b:#A3154D; --hero-ink:#FFF8F2; --wave:#139E99;
  --ok:#62CC86; --ok-soft:#183324; --danger:#FF8A78; --danger-soft:#43211E; --device:#0E0912;
  --coral:#FF8B71; --coral-s:#3E221D; --mango:#FFC34A; --mango-s:#3A2C12;
  --turq:#4CDCD4; --turq-s:#113634; --leaf:#8BD76B; --leaf-s:#1E3418;
  --lav:#B4A1FF; --lav-s:#2C2346; --pink:#FF80B6; --pink-s:#3E1C2D; color-scheme:dark;
}
.c-coral{--c:var(--coral);--cs:var(--coral-s)} .c-mango{--c:var(--mango);--cs:var(--mango-s)}
.c-turq{--c:var(--turq);--cs:var(--turq-s)} .c-leaf{--c:var(--leaf);--cs:var(--leaf-s)}
.c-lav{--c:var(--lav);--cs:var(--lav-s)} .c-pink{--c:var(--pink);--cs:var(--pink-s)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
button,input,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--c,var(--accent))}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Guest guide ---------- */
.g{padding-inline:14px;padding-block:0 30px;font-size:15px}
.g.full{max-width:480px;margin:0 auto;padding-inline:16px;padding-bottom:48px;font-size:16px}
.g .topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding-block:10px;background:var(--bg)}
.g.full .topbar{top:env(safe-area-inset-top,0px)}
.g .topbar .ttl{flex:1;min-width:0;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g .iconbtn{flex:none;height:38px;min-width:38px;padding-inline:9px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-size:13px;font-weight:700}
.g .flag{display:block;width:24px;height:16px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.g .hero{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--hero-a),var(--hero-b));color:var(--hero-ink);border-radius:22px;padding:20px 18px 48px;margin-top:4px}
.g .sunball{position:absolute;right:-22px;top:-22px;width:108px;height:108px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 12px rgba(255,212,59,.25)}
.g .eyebrow{position:relative;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.92}
.g .hero h1{position:relative;font-family:var(--display);font-weight:800;font-size:30px;line-height:1.03;margin:6px 0 6px;max-width:13ch;text-wrap:balance;overflow-wrap:anywhere}
.g.full .hero h1{font-size:33px}
.g .hero .sub{position:relative;margin:0;font-weight:500}
.g .waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:30px;display:block}
.g .times{position:relative;display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.g .time{background:rgba(255,255,255,.2);border-radius:13px;padding:7px 11px}
.g .time small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.g .time b{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.g .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.g .tile{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;min-height:94px;padding:12px 4px 10px;border-radius:16px;border:0;background:var(--cs);cursor:pointer;font-size:13px;font-weight:700;line-height:1.2;text-align:center;color:var(--ink);position:relative}
.g.full .tile{font-size:14px;min-height:100px}
.g .tile .ico{width:42px;height:42px;border-radius:13px;background:var(--surface);color:var(--c);display:grid;place-items:center}
.g .tile .lk{position:absolute;top:7px;right:7px;color:var(--c)}
.g .sheet h2{font-family:var(--display);font-weight:800;font-size:27px;line-height:1.05;margin:4px 0 12px;display:flex;align-items:center;gap:10px}
.g .sheet h2 .ico{flex:none;width:44px;height:44px;border-radius:13px;background:var(--cs);color:var(--c);display:grid;place-items:center}
.g .stack{display:flex;flex-direction:column;gap:10px}
.g .card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
.g .lead{margin:0;white-space:pre-line}
.g .muted{color:var(--muted)}
.g .label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g .ri{flex:none;width:32px;height:32px;border-radius:10px;background:var(--cs);color:var(--c);display:grid;place-items:center}
.g .rows{display:flex;flex-direction:column}
.g .row{display:flex;gap:10px;align-items:flex-start;padding-block:10px;border-top:1px solid var(--line)}
.g .row:first-child{border-top:0;padding-top:0}
.g .row:last-child{padding-bottom:0}
.g .rt{min-width:0;flex:1;overflow-wrap:anywhere}
.g .rt b{display:block}
.g .rt span{color:var(--muted)}
.g .steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.g .steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere}
.g .steps li > span{flex:1;min-width:0;padding-top:3px}
.g .steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--on-c);display:grid;place-items:center;font-weight:800;font-size:13px}
.g .linkbtn{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13.5px;text-decoration:none;color:var(--c)}
.g .codes .code{display:flex;align-items:center;gap:10px;padding-block:10px;border-top:1px solid var(--line)}
.g .codes .code:first-of-type{border-top:0;padding-top:4px}
.g .codes strong{display:block;font-family:var(--mono);font-size:20px;letter-spacing:.05em;overflow-wrap:anywhere;user-select:all}
.g .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok)}
.g .chips{display:flex;gap:6px;flex-wrap:wrap}
.g .chip{height:36px;padding-inline:13px;border-radius:999px;border:0;background:var(--cs);color:var(--ink);cursor:pointer;font-weight:700;font-size:13.5px}
.g .chip[aria-current="true"]{background:var(--c);color:var(--on-c)}
.g .place h3{margin:0;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.g .place .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.g .place .price{flex:none;color:var(--c);font-weight:800}
.g .place p{margin:3px 0 10px;color:var(--muted);overflow-wrap:anywhere}
.g .place .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.g .dist{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700}
.g .dist svg{color:var(--c)}
.g .sos{display:flex;align-items:center;gap:12px;padding-block:10px;border-top:1px solid var(--line)}
.g .sos:first-child{border-top:0;padding-top:0}
.g .sos:last-child{padding-bottom:0}
.g .sos .num{flex:none;min-width:58px;font-family:var(--display);font-weight:800;font-size:25px;color:var(--c);user-select:all}
.g .progress{height:9px;border-radius:99px;background:var(--cs);overflow:hidden;margin-top:6px}
.g .progress i{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .25s}
.g .checks{display:flex;flex-direction:column;gap:7px}
.g .chk{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.g .chk .box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.g .chk[aria-checked="true"] .box{background:var(--c);border-color:var(--c);color:var(--on-c)}
.g .chk[aria-checked="true"] .tx{color:var(--muted);text-decoration:line-through}
.g .done{display:flex;gap:10px;align-items:center;color:var(--ok);font-weight:800;margin:0}
.g .host{display:flex;gap:12px;align-items:center}
.g .phonerow{display:flex;align-items:center;gap:10px}
.g .phonerow strong{flex:1;min-width:0;font-size:17px;font-variant-numeric:tabular-nums;user-select:all}
.g .empty{margin:0;color:var(--muted);font-style:italic}
.g .lockcard .lh{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.g .lockcard p{margin:10px 0 0}
.g .unlock{display:flex;gap:8px;margin-top:14px}
.g .unlock input{flex:1;min-width:0;height:48px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);padding-inline:14px;font-family:var(--mono);font-size:20px;letter-spacing:.3em}
.g .unlock input:focus{border-color:var(--c);outline:none}
.g .btn{flex:none;height:48px;padding-inline:16px;border:0;border-radius:12px;background:var(--c,var(--accent));color:var(--on-c);font-weight:800;cursor:pointer}
.g .btn:disabled{opacity:.6;cursor:default}
.g .err{font-size:13.5px;color:var(--danger);font-weight:700}
.g .langs{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.g .langbtn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:2px solid transparent;background:var(--surface);cursor:pointer;font-size:17px;font-weight:700;text-align:left}
.g .langbtn .flag{width:33px;height:22px;border-radius:4px}
.g .langbtn .nm{flex:1}
.g .langbtn[aria-pressed="true"]{border-color:var(--accent)}
.g .langbtn svg:last-child{color:var(--accent)}
.g .foot-note{margin:20px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.g .foot-note a{color:var(--muted)}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:var(--sun);color:#3A2706;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:23px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;z-index:30;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 32px)}
.toast button{border:0;background:none;color:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
