@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0e1218;
  --muted:#4a5661;
  --dim:#8d98a4;
  --ph:#c6c8c3;
  --orange:#ef7f10;
  --orange-d:#e07a10;
  --orange-grad:linear-gradient(160deg,#ffa63d,#f07c0b);
  --glass:rgba(255,255,255,.58);
  --glass-b:rgba(255,255,255,.78);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px rgba(16,26,44,.08);
  --r:18px;
  --r-lg:22px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Manrope",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
#aura{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(420px 280px at 6% -2%, rgba(0,201,141,.26), transparent 60%),
   radial-gradient(400px 280px at 98% 2%, rgba(75,124,255,.22), transparent 60%),
   radial-gradient(420px 300px at 84% 34%, rgba(168,107,255,.16), transparent 60%),
   radial-gradient(380px 280px at 0% 58%, rgba(255,176,32,.18), transparent 58%),
   radial-gradient(420px 300px at 95% 82%, rgba(0,201,141,.14), transparent 60%);
}
#app{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
.view{display:none;flex-direction:column;flex:1;}
.view.on{display:flex;}

/* ---------- shared blocks ---------- */
.pad{padding:0 20px;}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px;}
.brand{font-family:"Outfit",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:22px;background:var(--orange-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.h1{font-family:"Outfit",sans-serif;font-weight:700;letter-spacing:-.02em;font-size:26px;line-height:1.2;}
.h2{font-family:"Outfit",sans-serif;font-weight:700;letter-spacing:-.02em;font-size:20px;line-height:1.25;}
.label{font-size:11.5px;font-weight:700;letter-spacing:.8px;color:#6b7681;text-transform:uppercase;}
.muted{color:var(--muted);}
.dim{color:var(--dim);}
.ph{color:var(--ph);}
.sm{font-size:13px;}
.xs{font-size:12px;}

.topbar{display:flex;align-items:center;gap:12px;padding:calc(14px + var(--safe-t)) 20px 10px;}
.topbar .sp{flex:1;}
.iconbtn{width:38px;height:38px;border-radius:13px;border:1px solid var(--glass-b);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:var(--shadow);}
.iconbtn:active{transform:scale(.94);}

.card{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r);padding:15px;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--shadow);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;gap:12px;}
.rowt{display:flex;align-items:flex-start;gap:12px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;width:100%;padding:15px;border-radius:var(--r);background:var(--orange-grad);color:#3a1a00;font-family:"Manrope",sans-serif;font-size:15.5px;font-weight:700;box-shadow:0 10px 24px rgba(240,124,11,.30);}
.btn:active{transform:scale(.985);}
.btn.ghost{background:var(--glass);color:var(--ink);border:1px solid var(--glass-b);box-shadow:var(--shadow);}
.btn.plain{background:none;box-shadow:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:12px;}
.btn.danger{background:none;box-shadow:none;color:#d2402a;border:1px solid rgba(210,64,42,.25);}

.ic{width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 14px rgba(16,26,44,.18);}
.ic svg{stroke:#fff;}
.ic.orange{background:linear-gradient(160deg,#ffb347,#ef7f10);}
.ic.blue{background:linear-gradient(160deg,#5b8cff,#2f56d4);}
.ic.red{background:linear-gradient(160deg,#ff8a5c,#e0452a);}
.ic.violet{background:linear-gradient(160deg,#b98cff,#6b3fd6);}
.ic.teal{background:linear-gradient(160deg,#3ad6c4,#0f9c9c);}
.ic.sm{width:30px;height:30px;border-radius:10px;}

.tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:linear-gradient(160deg,#ffc043,#ef7f10);color:#3a1d00;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;}
.tag.soft{background:rgba(255,255,255,.7);color:var(--muted);border:1px solid var(--glass-b);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.needs{font-size:13px;font-weight:600;color:var(--orange);}

/* ---------- bottom nav ---------- */
.nav{display:flex;justify-content:space-around;align-items:center;padding:9px 6px calc(9px + var(--safe-b));background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.75);}
.nav div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 14px;}
.nav span{font-size:10.5px;font-weight:600;color:var(--dim);}
.nav svg{stroke:var(--dim);}
.nav div.on span{color:var(--orange-d);}
.nav div.on svg{stroke:var(--orange-d);}

/* ---------- forms ---------- */
.field{margin-bottom:13px;}
.field > label{display:block;margin-bottom:6px;}
input,textarea,select{
  width:100%;font-family:"Manrope",sans-serif;font-size:15.5px;color:var(--ink);
  padding:13px 14px;border-radius:15px;border:1px solid var(--glass-b);
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:var(--shadow);outline:none;
}
input::placeholder,textarea::placeholder{color:var(--ph);}
input:focus,textarea:focus,select:focus{border-color:rgba(239,127,16,.5);box-shadow:0 0 0 3px rgba(239,127,16,.14);}
textarea{min-height:88px;resize:vertical;line-height:1.5;}
.two{display:flex;gap:10px;}
.two > *{flex:1;min-width:0;}

/* ---------- stay detail (poster) ---------- */
.poster{padding:4px 20px 30px;}
.poster .name{font-family:"Outfit",sans-serif;font-weight:800;font-size:30px;line-height:1.12;letter-spacing:-.025em;}
.moment{margin-top:16px;border-radius:var(--r-lg);padding:17px;background:linear-gradient(155deg,#1d2530,#0e1218);color:#fff;box-shadow:0 14px 34px rgba(14,18,24,.28);}
.moment .lab{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.62);}
.moment .big{font-family:"Outfit",sans-serif;font-weight:700;font-size:21px;margin-top:5px;}
.code{font-family:"Outfit",sans-serif;font-weight:800;font-size:40px;letter-spacing:.1em;line-height:1;}
.sect{margin-top:24px;}
.sect > .label{margin-bottom:10px;display:block;}
.bul{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;font-size:14.5px;line-height:1.5;}
.bul .n{width:21px;height:21px;border-radius:50%;background:var(--orange-grad);color:#3a1a00;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.bul .d{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:7px;}
.must{border:2px solid rgba(239,127,16,.55);box-shadow:0 0 0 4px rgba(239,127,16,.10), var(--shadow);}
.sec{border-radius:var(--r);border:1px solid var(--glass-b);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--shadow);overflow:hidden;flex:0 0 auto;margin-bottom:10px;}
.sec > .hd{display:flex;align-items:center;gap:12px;padding:14px 15px;}
.sec > .hd .t{flex:1;font-size:15px;font-weight:700;}
.sec > .bd{display:none;padding:0 15px 15px;font-size:14.5px;line-height:1.55;color:var(--muted);white-space:pre-wrap;}
.sec.open > .bd{display:block;}
.sec.open > .hd .chev{transform:rotate(90deg);}
.chev{transition:transform .18s;}
.gallery{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;}
.gallery img{width:132px;height:100px;object-fit:cover;border-radius:14px;flex:0 0 auto;border:1px solid var(--glass-b);}
.addphoto{width:132px;height:100px;border-radius:14px;flex:0 0 auto;border:1px dashed rgba(14,18,24,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--dim);font-size:12px;font-weight:600;background:rgba(255,255,255,.4);}

/* ---------- misc ---------- */
.list-item{display:flex;align-items:center;gap:13px;padding:14px 15px;}
.sheet{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(10,14,20,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.sheet.on{display:flex;}
.sheet > div{width:100%;max-width:520px;background:#fff;border-radius:24px 24px 0 0;padding:20px 20px calc(24px + var(--safe-b));max-height:86vh;overflow-y:auto;}
.viewer{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(8,11,15,.94);}
.viewer.on{display:flex;}
.viewer img{max-width:100%;max-height:82vh;object-fit:contain;}
.viewer .x{position:absolute;top:calc(16px + var(--safe-t));right:16px;}
.toast{position:fixed;left:50%;bottom:calc(88px + var(--safe-b));transform:translateX(-50%) translateY(14px);z-index:70;background:rgba(14,18,24,.92);color:#fff;font-size:13.5px;font-weight:600;padding:11px 17px;border-radius:999px;opacity:0;transition:.22s;pointer-events:none;white-space:nowrap;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.offbar{display:none;align-items:center;justify-content:center;gap:7px;padding:7px;background:rgba(14,18,24,.9);color:#fff;font-size:12.5px;font-weight:600;}
body.offline .offbar{display:flex;}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 30px;}
hr.sepl{border:none;border-top:1px solid rgba(14,18,24,.08);margin:18px 0;}
a{color:var(--orange-d);text-decoration:none;}
.tabs{display:flex;gap:7px;padding:2px 20px 12px;}
.tabs button{flex:1;padding:9px;border-radius:13px;border:1px solid var(--glass-b);background:var(--glass);font-family:"Manrope",sans-serif;font-size:13.5px;font-weight:700;color:var(--muted);}
.tabs button.on{background:var(--orange-grad);color:#3a1a00;border-color:transparent;box-shadow:0 8px 18px rgba(240,124,11,.26);}