:root{--nav-height:63px;--container-max:1000px;--logo-h:150px;--logo-h-shrink:85px;--cats-height:48px;--logo-h-current:var(--logo-h)}
@media (max-width:768px){:root{--logo-h:120px;--logo-h-shrink:70px;--cats-height:40px;--logo-h-current:var(--logo-h)}}
html,body{margin:0;padding:0;background:#fbd9fd;color:#222;min-height:100vh}
h2{font-size:1.1rem;font-weight:400;margin:18px 0;text-align:center;padding:10px 8px}
@media (min-width:768px){h2{font-size:1.4rem;padding:16px 12px}}
.logo-bar{position:sticky;top:0;z-index:30;height:var(--logo-h-current);background:#454444;box-shadow:0 2px 8px #646464;display:flex;justify-content:center;align-items:center;transition:height .25s ease;will-change:height}
.logo-bar img{height:calc(var(--logo-h-current) - 8px);max-height:100%;width:auto;object-fit:contain;transition:height .45s ease}
.container{max-width:var(--container-max);margin:0 auto;padding-bottom:var(--nav-height)}

/* ========================= CATEGORIES (sticky under logo) ========================= */
.categories-row{background:#fbd9fd;display:flex;align-items:center;overflow-x:auto;white-space:nowrap;gap:12px;padding:8px;height:var(--cats-height);position:sticky;top:var(--logo-h-current);z-index:20;scrollbar-width:thin}
@media (max-width:768px){.categories-row{gap:6px;padding:6px 8px}.categories-row>*{font-size:12px;height:calc(var(--cats-height) - 8px);line-height:calc(var(--cats-height) - 8px)}}
.categories-row::-webkit-scrollbar{height:6px}
.categories-row::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}
.categories-row::-webkit-scrollbar-track{background:#f1f1f1}
.category-chip{min-width:100px;height:40px;display:flex;align-items:center;gap:8px;padding:0 18px 0 7px;font-weight:700;font-size:1em;border-radius:16px;cursor:pointer;color:#fff;user-select:none;border:none;outline:none;box-shadow:0 2px 8px #8b2491bd;background:var(--cat-gradient,#bdbdbd);position:relative;overflow:hidden;letter-spacing:.01em}
.category-chip svg{margin-right:2px;flex-shrink:0;height:1.15em;width:1.15em}
.category-chip.active,.category-chip:focus{box-shadow:0 5px #000000b0;outline:1px solid #000000b0}
.category-chip:active::after{content:"";position:absolute;left:50%;top:50%;width:190%;height:190%;background:#fff2;border-radius:50%;transform:translate(-50%,-50%) scale(.7);animation:ripple .38s cubic-bezier(.42,0,.58,1) forwards;z-index:2}
@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.category-section{scroll-margin-top:calc(var(--logo-h-current) + var(--cats-height) + 12px)}

/* ========================= SECTION TITLES ========================= */
.section-title{font-size:1.13em;font-weight:700;padding:14px 0;margin:24px auto 12px;border-radius:12px;width:70%;max-width:420px;text-align:center;letter-spacing:.01em;box-shadow:0 2px 12px #130014bd;color:#fff;background:var(--section-gradient,#4caf50)}
@media (max-width:600px){.section-title{width:90%;max-width:95vw;font-size:1em}}
/* ========================= STATUS CARDS ========================= */
.status-scroll-wrapper{width:100%;overflow-x:auto!important;white-space:nowrap;padding:10px 0}
.status-scroll{display:inline-flex!important;gap:19px;padding-left:17px;cursor:grab;user-select:none;scroll-behavior:smooth;width:max-content!important;flex-wrap:nowrap!important}
.status-scroll.dragging{cursor:grabbing}
.post-card-wrap{flex:0 0 auto!important;width:290px!important;min-width:290px!important;display:inline-block!important}
@media (min-width:1024px){.post-card-wrap{width:290px;min-width:290px}}
.post-card{width:100%;height:360px;background:#fff;border-radius:22px;box-shadow:0 2px 12px #8b2491bd;display:flex;flex-direction:column;overflow:hidden;position:relative;margin-bottom:0;aspect-ratio:1/1;transition:box-shadow .15s,transform .13s}
@media (min-width:1024px){.post-card{height:360px}}
.post-image{width:100%;height:100%;object-fit:cover;border-radius:22px;background:#f0f0f0;display:block}
.post-image.hidden{display:none}
/* Button */
.generate-btn{border:none;border-radius:33px;padding:13px 0 12px;font-weight:700;font-size:1.07em;width:90%;cursor:pointer;color:#fff;margin-top:10px;background:var(--btn-gradient,linear-gradient(90deg,#43ea71,#25bc43));box-shadow:0 1px 8px #0001;transition:filter .15s,background .18s;filter:brightness(1.03);letter-spacing:.01em}
.generate-btn:active{filter:brightness(.94)}
/* ========================= BOTTOM NAV (10% smaller) ========================= */
.bottom-nav{width:98vw;max-width:576px;height:var(--nav-height);position:fixed;left:50%;bottom:10.8px;transform:translateX(-50%);background:#454444;display:flex;justify-content:space-evenly;align-items:center;z-index:100;box-shadow:0 3.6px 25.2px #2223,0 0 0 #0000;border-radius:21.6px;border:.45px solid #eee2;padding-bottom:1.8px}
.nav-icon{text-align:center;font-size:12.6px;color:#fff;cursor:pointer;flex:1;padding:0 6.3px;transition:color .13s;user-select:none;letter-spacing:.01em}
.nav-icon svg{margin-bottom:1.8px;width:1.89em;height:1.89em;display:block;margin-left:auto;margin-right:auto}
.nav-icon.active,.nav-icon:active{color:#b2ff59!important}
.nav-icon.active::after{content:"";display:block;margin:5.4px auto 0;width:7.2px;height:7.2px;border-radius:50%;background:#43ea71}

/* =========================
   FEATURE BLOCKS
   ========================= */
.feature-block {
  background: linear-gradient(135deg, #f9fbe7, #f1f8e9 85%);
  border-radius: 18px; margin: 18px auto 16px; padding: 19px 14px 16px;
  box-shadow: 0 2px 18px #9be7b040; max-width: 440px; width: 90%;
}
.feature-header { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.feature-header h2 { font-size: 1.1em; font-weight: 700; color: #43ea71; margin: 0; letter-spacing: .02em; }
.feature-header svg { flex-shrink: 0; filter: drop-shadow(0 2px 8px #43ea7133); }
.feature-list { padding: 0; margin: 0; list-style: none; }
.feature-list li { font-size: 1em; color: #2d4435; padding: 6px 0 6px 2px; display: flex; align-items: center; gap: 8px; letter-spacing: .01em; }
.feature-list li span { font-size: 1.15em; margin-right: 2px; }

/* =========================
   LIGHTBOX
   ========================= */
#lightboxOverlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 20000;
  background: rgba(60, 40, 80, 0.32);
  align-items: center; justify-content: center; flex-direction: column;
  backdrop-filter: blur(16px); padding: 48px 18px 38px; box-sizing: border-box;
}
#lightboxOverlay.active { display: flex; }
#lightboxOverlay img {
  max-width: 90vw; max-height: calc(100vh - 110px);
  border-radius: 18px; box-shadow: 0 2px 40px #0009; background: #fff;
  object-fit: contain; display: block; margin: 0 auto;
}
#lightboxClose {
  position: absolute; top: 16px; right: 16px; font-size: 16px; font-weight: bold;
  color: #fff; background: rgba(228,25,11,.836); border: none; border-radius: 20px;
  padding: 8px 16px; cursor: pointer; z-index: 1000;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#lightboxClose:hover { background: rgba(228,25,11,.92); }
#lightboxClose:active { transform: scale(0.98); }
#lightboxClose:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; }

#lightboxSpinner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-bottom: 22px; z-index: 20005;
}
#lightboxOverlay.loading #lightboxImg, #lightboxOverlay.loading #lightboxDownload { display: none; }
#lightboxOverlay:not(.loading) #lightboxSpinner { display: none; }

.sandglass {
  width: 48px; height: 64px; position: relative; margin-bottom: 12px;
  border-left: 4px solid #fff; border-right: 4px solid #fff; border-top: 6px solid #fff; border-bottom: 6px solid #fff;
  border-radius: 16px; background: transparent; box-sizing: border-box;
}
.sandglass:before, .sandglass:after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(195, 0, 255, 0.4); border-radius: 16px; box-shadow: 0 1px 5px #0002;
}
.sandglass:before { top: 0; width: 36px; height: 16px; }
.sandglass:after  { bottom: 0; width: 36px; height: 16px; }
.sand {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 14px; height: 18px; background: linear-gradient(to bottom, #f6d365 70%, #ffb347 100%);
  border-radius: 0 0 12px 12px; animation: sand-drip 3s linear forwards;
}
@keyframes sand-drip { 0%{height:18px;opacity:1;} 85%{height:2px;opacity:1;} 100%{height:0;opacity:0;} }
.sand-bottom {
  position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%);
  width: 18px; height: 6px; background: #ffb347; border-radius: 50%;
  opacity: 0; animation: sand-bottom-fill 3s linear forwards;
}
@keyframes sand-bottom-fill { 0%{opacity:0;width:2px;} 85%{opacity:.7;width:15px;} 100%{opacity:1;width:18px;} }
.wait-msg { color: #fff9; font-size: 1.08em; text-align: center; margin-top: 6px; margin-bottom: 5px; letter-spacing: .01em; }

#lightboxDownload {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #bb2d8c 10%, #6879da 90%);
  color: #fff; font-weight: 600; font-size: 1.13em; padding: 13px 34px 12px 24px;
  border-radius: 24px; text-decoration: none; box-shadow: 0 4px 20px #25bc4340, 0 1px 2px #0001;
  margin-top: 16px; margin-bottom: 18px; border: none; outline: none; cursor: pointer;
  transition: background .18s, transform .11s, box-shadow .2s, filter .18s; font-family: inherit; letter-spacing: .01em;
}
#lightboxDownload:hover, #lightboxDownload:focus {
  background: linear-gradient(90deg, #e76cbe 10%, #6879da 90%);
  box-shadow: 0 6px 28px #43ea7130, 0 1px 4px #0002;
  filter: brightness(1.07); transform: translateY(-2px) scale(1.06); text-decoration: none;
}
#lightboxDownload:active { background: linear-gradient(90deg, #e76cbe 60%, #131833 100%); filter: brightness(0.98); transform: scale(0.98); }

/* ========================= SPINNER (cards) ========================= */
.spinner{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;transition:opacity .4s ease}
.spinner::before{content:"";width:40px;height:40px;border:4px solid #ddd;border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner.fade-out{opacity:0}
/* ========================= ACCESSIBILITY & UX ========================= */
body.modal-open{overflow:hidden;touch-action:none}
.generate-btn:focus-visible,.category-chip:focus-visible,.nav-icon:focus-visible,#lightboxDownload:focus-visible{outline:2px solid #43ea71;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== POPUP SAFE OVERRIDES (10% smaller; single source of truth) ===== */
#menu-btn{position:relative}
.menu-popup{display:none;position:absolute;right:0;bottom:calc(var(--nav-height) - 9px);min-width:180px;background:#fff;border-radius:14.4px;box-shadow:0 10.8px 28.8px rgba(0,0,0,.18);padding:7.2px 0;z-index:1001}
.menu-popup.open{display:block}
.menu-popup a{display:flex;align-items:center;gap:9px;padding:9.9px 14.4px;color:#333;text-decoration:none;font-size:.855rem;border-radius:9px}
.menu-popup a:hover{background:#f6f6f6}
.menu-popup a span{display:inline-flex}
.menu-popup a svg{width:13.5px;height:13.5px}
#menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.06);z-index:1000;display:none}
#menu-backdrop.open{display:block}
#big-modal-backdrop{position:fixed;inset:0;background:rgba(60,40,80,.32);backdrop-filter:blur(4px);z-index:9900;display:none}
#big-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(95vw,520px);max-height:70vh;background:#fff;border-radius:18px;box-shadow:0 12px 60px rgba(0,0,0,.35);z-index:9999;overflow:hidden;display:none}
#big-modal.open,#big-modal-backdrop.open{display:block}
#modal-close{position:absolute;top:10px;right:16px;font-size:2rem;background:none;border:0;color:#fbd9fd;cursor:pointer}

/* ===== Profile Modal ===== */
#profileModal{display:flex;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);align-items:center;justify-content:center;padding:12px;box-sizing:border-box}
#profileModal[hidden]{display:none}
#profileModal .modal-content{background:#fbd9fd;width:min(95vw,380px);max-height:95vh;overflow-y:auto;padding:24px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.25);box-sizing:border-box;-webkit-overflow-scrolling:touch}
#profileModal h3{margin:0 0 16px;text-align:center;font-weight:600;color:#222;font-size:1.1rem}
#profileModal .form-stack{display:flex;flex-direction:column;gap:14px}
#profileModal label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}
#profileModal input[type=text],#profileModal input[type=tel],#profileModal input[type=file]{width:100%;padding:12px 16px;border:1px solid #ccc;border-radius:12px;font-size:16px;box-sizing:border-box;background:#fff;color:#222}
#profileModal input[type=file]{font-size:14px;padding:8px 12px}
#profileModal input:focus{border-color:#314089;box-shadow:0 0 0 2px rgba(49,64,137,.15);outline:0}
#profileModal input::placeholder{color:#8a8a8a}
#profileModal .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#cropCanvas{display:block;max-width:100%;height:auto;margin:16px auto 10px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1);cursor:grab}
#profileModal #zoom{width:100%;margin-top:6px}
#profileModal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
#cancelProfileBtn{background:#fff;border:1px solid #ccc;color:#222;padding:8px 16px;border-radius:12px;font-size:14px;cursor:pointer}
#saveProfileBtn{background:#314089;color:#fff;border:none;padding:8px 16px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer}
@media (max-width:480px){#profileModal .modal-content{width:92vw;padding:18px;border-radius:14px}}
#profileModal{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
@supports (height:100dvh){#profileModal .modal-content{max-height:min(95dvh,640px)}}
@media (max-height:520px){#profileModal .modal-content{max-height:90vh;padding:18px}#cropCanvas{max-width:85%}}
#profileModal .actions{position:sticky;bottom:0;background:#fff;backdrop-filter:blur(2px);padding:10px}

.auth-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); }
.auth-modal[hidden]{ display:none!important; }
.auth-card { position:relative; width:min(92vw,420px); background:#fbd9fd; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:16px 14px 14px;}
.auth-close { position:absolute; right:8px; top:8px; background:#fff; border:1px solid #ccc; border-radius:10px; width:32px; height:32px; line-height:30px; text-align:center; cursor:pointer; font-size:18px; }
.auth-card-head { text-align:center; margin-bottom:6px; }
.auth-logo { display:block; margin:6px auto; width:50%; max-width:140px; height:auto; object-fit:contain; }
.auth-title { margin:4px 0 0; font-weight:600; color:#222; font-size:1.15rem; }
.auth-tabs { display:flex; gap:8px; justify-content:center; margin:8px 0 10px; }
.auth-tabs button { border:none; border-radius:10px; padding:8px 12px; cursor:pointer; background:#fff; box-shadow:0 1px 4px #0001; font-weight:600; }
.auth-tabs button.active { background:#314089; color:#fff; }
.auth-form { display:block; padding:0 12px 10px; }
.auth-form[hidden]{ display:none!important; }
.form-row { margin-bottom:12px; }
.auth-form label { display:block; font-size:14px; font-weight:500; color:#333; }
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"],
.auth-form input[type="tel"] {
  width:100%; padding:12px 16px; margin-top:6px; border:1px solid #ccc; border-radius:12px;
  font-size:16px; box-sizing:border-box; background:#fff;
}

.input-with-eye { position:relative; }
.input-with-eye input { padding-right:42px; }
.toggle-eye {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:1px solid #ccc; background:#fff; border-radius:8px; width:32px; height:32px;
  line-height:30px; text-align:center; cursor:pointer; font-size:16px;
}

.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.btn-auth-primary {
  background:#314089; color:#fff; border:none; border-radius:10px; padding:10px 16px; font-weight:600; cursor:pointer; transition:opacity .15s ease, transform .05s ease;
}
.btn-auth-secondary {
  background:#314089; color:#fff; border:none; border-radius:10px; padding:10px 16px; font-weight:600; cursor:pointer; transition:opacity .15s ease, transform .05s ease;
}
.btn-auth-primary.is-large { padding:12px 18px; font-size:16px; }
.btn-auth-primary:active { transform:scale(0.98); }

.btn-auth-primary:disabled {
  background:#9aa5d0; cursor:not-allowed; opacity:.85;
}

.center { text-align:center; }
.auth-help { margin:0 0 10px; font-size:13px; color:#444; line-height:1.5; }
.tiny-note { font-size:13px; color:#555; margin:6px 0 4px; }

.accept-wrap { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#333; margin:8px 0 6px; }
.accept-wrap input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; accent-color:#314089; }
.hint { display:block; color:#666; font-size:12px; margin-top:4px; }
.warn { margin-top:4px; font-size:12px; color:#b00020; }

@media (max-width:400px){.auth-card{width:94vw;padding:14px 12px}.auth-form input{font-size:15px;padding:11px 14px}}
.auth-card{max-height:min(92dvh,640px);overflow:auto;-webkit-overflow-scrolling:touch}
.auth-modal{padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.auth-card-head{margin-bottom:8px}
.auth-tabs{gap:6px;margin:6px 0 8px}
@media (max-width:360px){.auth-card{width:94vw;padding:12px 10px}.auth-form input{font-size:15px;padding:10px 12px}.btn-auth-primary.is-large{padding:11px 16px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.btn-auth-primary{transition:none}}

img[src*="/get_private.php"][src*="photo-last.png"],
img[src*="photo-demo.png"] {
  width: clamp(180px, 60vw, 220px) !important;
  height: clamp(180px, 60vw, 220px) !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px #0002 !important;
  max-width: none !important;
  display: inline-block;
}
/* === styles Pro QR/message === */
.pro-cta{margin:12px auto;padding:0 12px}
.pro-cta__inner{max-width:680px;margin:0 auto;background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pro-cta__title{margin:0 0 8px;font-size:1.1rem;font-weight:700;color:#2b2b2b}
.pro-cta__text{margin:0 0 8px;font-size:.95rem;color:#333}
.pro-cta__hl{font-weight:800;color:#1b7d40}
.pro-cta__note{margin:8px 0 0;font-size:.9rem;color:#2f6b32;background:#eef8f0;border:1px dashed #cde8d3;border-radius:8px;padding:8px 10px}
.pro-cta__qr img{display:block;margin:12px auto 2px;width:200px;max-width:60vw;height:auto;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
@media (min-width:768px){.pro-cta__inner{padding:20px 24px}.pro-cta__title{font-size:1.2rem}}

.fb-box{display:flex;justify-content:center;margin:10px auto}
.fb-box a{display:flex;align-items:center;gap:8px;background:#f0f6ff;padding:10px 16px;border-radius:40px;text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.08);transition:.3s}
.fb-box a:hover{background:#e4f0ff;transform:translateY(-2px)}
.fb-logo{position:relative;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1877f2,#0e5ec7);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 3px 8px rgba(24,119,242,.4)}
.fb-logo .shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(120deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 60%,transparent 80%);transform:rotate(25deg);animation:shineMove 3s infinite}
@keyframes shineMove{0%{transform:translateX(-150%) rotate(25deg)}100%{transform:translateX(150%) rotate(25deg)}}
.fb-text{font-size:15px;font-weight:600;color:#333}

:root{--ink:#777;--accent:#ff4d6d;--muted:#666}
.live-hero{padding:clamp(20px,8vw,20px) 20px;text-align:center}
.live-title{font-weight:900;color:var(--ink);font-size:clamp(36px,10vw,80px);margin:0}
.live-title .highlight{color:var(--accent)}
.live-tag{margin-top:12px;font-size:clamp(16px,2.5vw,22px);color:var(--muted)}