/* ── APP SHELL ── */
#app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }

/* ── HEADER ── */
#app-header { background: var(--blue-main); padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; z-index: 100; }
.app-logo-wrap { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #fff; }
.app-logo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-header-title { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2; }
.app-header-sub { font-size: 10px; color: rgba(255,255,255,0.5); font-weight: 500; }

/* ── HEADER AVATAR ── */
.header-avatar { width:36px; height:36px; border-radius:10px; background:none; border:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; cursor:pointer; flex-shrink:0; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:opacity 0.15s; position:relative; }
.header-avatar:active { opacity:0.7; }
.header-avatar img { width:26px; height:26px; object-fit:cover; border-radius:6px; outline: 1.5px solid rgba(255,255,255,0.25); box-shadow: 0 0 0 2px #CF142B; }

/* ── VIEWS ── */
.view { flex: 1; overflow-y: auto; overflow-x: hidden; display: none; -webkit-overflow-scrolling: touch; flex-direction: column; }
.view.active { display: flex; }
.view.no-scroll { overflow: hidden; }

/* ── BOTTOM NAV ── */
#bottom-nav { background: var(--blue-main); display: flex; border-top: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9px 4px 7px; gap: 3px; cursor: pointer; color: rgba(255,255,255,0.4); user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.14s; }
.nav-btn .nav-icon { width: 32px; height: 32px; object-fit: contain; transition: transform 0.14s, opacity 0.14s; opacity: 0.4; border-radius: 8px; }
.nav-btn.active .nav-icon { opacity: 1; transform: translateY(-1px); }
.nav-btn .nav-label { font-size: 9.5px; font-weight: 700; }
.nav-btn.active { color: #fff; }

/* ── HEADER SEARCH BUTTON ── */
.header-search-btn { background:none; border:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:26px; color:#fff; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.header-search-btn:active { opacity:0.7; }
.header-search-btn svg { width:22px; height:22px; }

/* ── SHARE BUTTON ── */
.header-share-btn { background:none; border:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.header-share-btn:active { opacity:0.7; }
.header-share-btn svg { width:22px; height:22px; }

/* ── SHARE OVERLAY ── */
#share-overlay { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
#share-overlay.hidden { display:none; }
#share-overlay-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
#share-sheet { position:relative; background:#fff; border-radius:20px 20px 0 0; padding:20px 20px 32px; width:100%; max-width:480px; box-shadow:0 -4px 24px rgba(0,0,0,0.15); }
#share-sheet-title { font-size:13px; font-weight:700; color:#888; text-align:center; margin-bottom:18px; letter-spacing:0.04em; text-transform:uppercase; }
.share-btn-row { display:flex; justify-content:center; gap:20px; }
.share-btn-item { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.share-btn-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.share-btn-icon.instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.share-btn-icon.whatsapp { background:#25D366; }
.share-btn-icon.copylink { background:#e8f0fe; }
.share-btn-icon svg { width:28px; height:28px; }
.share-btn-label { font-size:11px; font-weight:600; color:#444; }
#share-sheet-close { position:absolute; top:14px; right:14px; background:none; border:none; font-size:20px; color:#aaa; cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:1; padding:4px; }