* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: 'Prompt', sans-serif; background: var(--backdrop); color: var(--text); -webkit-font-smoothing: antialiased; }
input, textarea, button { font-family: 'Prompt', sans-serif; }
input:focus, textarea:focus { outline: none; }
button { cursor: pointer; }
.ilp-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ilp-scroll { scrollbar-width: none; }

@keyframes ilpFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes ilpPop { 0% { transform: scale(.5); opacity: 0 } 60% { transform: scale(1.1) } 100% { transform: scale(1); opacity: 1 } }
@keyframes ilpUp { from { transform: translateY(110%) } to { transform: translateY(0) } }
@keyframes ilpFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ilpRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }

.ilp-app { min-height: 100vh; width: 100%; background: var(--backdrop); display: flex; justify-content: center; }
.ilp-shell { position: relative; width: 100%; max-width: 480px; min-height: 100vh; background: var(--bg); overflow: hidden; }
.ilp-page { position: relative; min-height: 100vh; padding-bottom: 116px; animation: ilpFade .3s ease; }
.ilp-page.no-nav { padding-bottom: 0; }
.ilp-page.has-cta { padding-bottom: 100px; }

/* header */
.ilp-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 4px; }
.ilp-header-user { display: flex; align-items: center; gap: 12px; }
.ilp-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; flex: none; border: 2px solid var(--surface); }
.ilp-avatar-btn { width: 46px; height: 46px; border-radius: 15px; border: none; color: #fff; font: 600 18px Prompt; box-shadow: 0 6px 14px -6px rgba(40,60,30,.5); }
.ilp-greet { font: 400 12.5px Prompt; color: var(--text3); }
.ilp-username { font: 600 18px Prompt; color: var(--text); line-height: 1.1; }
.ilp-icon-btn { position: relative; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); display: flex; align-items: center; justify-content: center; }
.ilp-icon-btn-row { display: flex; gap: 9px; }
.ilp-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); border: 1.5px solid var(--surface); }

/* search & chips */
.ilp-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; margin: 12px 20px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text3); }
.ilp-search input { flex: 1; border: none; background: transparent; font: 400 14.5px Prompt; color: var(--text); }
.ilp-chips { display: flex; gap: 9px; overflow-x: auto; padding: 0 20px 4px; }
.ilp-chip { flex: none; padding: 9px 16px; border-radius: 999px; font: 500 13px Prompt; border: 1px solid var(--border); background: var(--surface); color: var(--text2); }
.ilp-chip.active { background: var(--primary); color: var(--onPrimary); border-color: var(--primary); }

/* cards */
.ilp-section { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 20px 12px; }
.ilp-section-title { font: 600 18px Prompt; color: var(--text); }
.ilp-section-link { font: 500 13px Prompt; color: var(--primary); }
.ilp-feed { display: flex; flex-direction: column; gap: 16px; padding: 0 20px; }
.ilp-card { position: relative; height: 208px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadowCard); }
.ilp-card.featured { height: 300px; margin: 0 20px 8px; }
.ilp-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg2); }
.ilp-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,30,14,.8) 6%, rgba(20,30,14,.08) 52%); }
.ilp-card-top { position: absolute; top: 13px; left: 13px; right: 13px; display: flex; justify-content: space-between; align-items: flex-start; }
.ilp-badge { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #3B543A; font: 600 11.5px Prompt; }
.ilp-save-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(20,30,14,.45); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; }
.ilp-card-bottom { position: absolute; left: 15px; right: 15px; bottom: 14px; }
.ilp-card-title { font: 700 18px/1.2 Prompt; color: #fff; margin-bottom: 7px; }
.ilp-card.featured .ilp-card-title { font: 700 23px/1.25 Prompt; }
.ilp-card-meta { display: flex; align-items: center; gap: 8px; font: 500 12px Prompt; color: #D8E6C9; margin-bottom: 11px; }
.ilp-card-row { display: flex; align-items: center; justify-content: space-between; }
.ilp-going { display: flex; align-items: center; }
.ilp-going-av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); margin-left: -8px; display: flex; align-items: center; justify-content: center; font: 600 10px Prompt; color: #fff; flex: none; }
.ilp-going-av:first-child { margin-left: 0; }
.ilp-going-count { margin-left: 8px; font: 600 12px Prompt; color: #fff; }
.ilp-cd-badge { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; font: 600 11.5px Prompt; border: 1px solid rgba(255,255,255,.25); }
.ilp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; color: var(--text3); text-align: center; }

/* bottom nav */
.ilp-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; padding: 9px 16px 16px; background: var(--navBg); backdrop-filter: blur(20px); border-top: 1px solid var(--borderSoft); display: flex; align-items: flex-end; justify-content: space-between; }
.ilp-nav-btn { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 54px; padding: 4px 0; font: 500 10.5px/1 Prompt; }
.ilp-fab { width: 56px; height: 56px; border-radius: 20px; background: var(--primary); color: var(--onPrimary); border: 4px solid var(--bg); box-shadow: 0 12px 22px -8px rgba(60,90,40,.7); display: flex; align-items: center; justify-content: center; transform: translateY(-16px); }

/* buttons */
.ilp-btn-primary { width: 100%; height: 56px; border: none; border-radius: 17px; background: var(--primary); color: var(--onPrimary); font: 600 16px Prompt; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 14px 24px -10px rgba(60,90,40,.7); }
.ilp-btn-line { background: #06C755; box-shadow: 0 14px 26px -12px rgba(6,199,85,.7); }
.ilp-btn-ghost { width: 100%; height: 50px; border-radius: 15px; border: 1.5px solid var(--border); background: transparent; color: var(--text2); font: 500 15px Prompt; }
.ilp-btn-danger { border: 1.5px solid var(--danger); background: transparent; color: var(--danger); }
.ilp-btn-disabled { background: var(--bg2); color: var(--text3); }

/* login */
.ilp-login-hero { position: relative; height: 420px; border-radius: 0 0 42px 42px; overflow: hidden; background: radial-gradient(125% 95% at 72% 8%, #7A9D64, #4E6B4A 52%, #33502E); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 32px; }
.ilp-login-logo { width: 94px; height: 94px; border-radius: 28px; background: #FBFBF4; box-shadow: 0 22px 40px -16px rgba(20,40,12,.6); display: flex; align-items: center; justify-content: center; animation: ilpFloat 4.5s ease-in-out infinite; color: #4E6B4A; }
.ilp-login-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 28px 38px; }

/* detail */
.ilp-hero { position: relative; height: 320px; }
.ilp-circle-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(20,30,14,.42); backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; }
.ilp-hero-top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; }
.ilp-hero-bottom { position: absolute; left: 20px; right: 20px; bottom: 24px; }
.ilp-hero-title { font: 700 25px/1.25 Prompt; color: #fff; }
.ilp-detail-body { position: relative; margin-top: -24px; background: var(--bg); border-radius: 24px 24px 0 0; padding: 22px 20px 0; }
.ilp-org-line { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 500 13px Prompt; color: var(--text2); }
.ilp-cd-block { background: #42603D; border-radius: 20px; padding: 15px 14px; margin-bottom: 20px; }
.ilp-cd-label { font: 500 12.5px Prompt; color: rgba(255,255,255,.78); text-align: center; margin-bottom: 11px; }
.ilp-cd-tiles { display: flex; gap: 8px; }
.ilp-cd-tile { flex: 1; background: rgba(255,255,255,.13); border-radius: 14px; padding: 10px 0; text-align: center; }
.ilp-cd-num { font: 700 27px Prompt; color: #fff; line-height: 1; }
.ilp-cd-unit { font: 500 11px Prompt; color: rgba(255,255,255,.7); margin-top: 5px; }
.ilp-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 6px 16px; margin-bottom: 18px; }
.ilp-info-row { display: flex; gap: 13px; align-items: center; padding: 10px 0; }
.ilp-info-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--primarySoft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.ilp-info-top { font: 400 11.5px Prompt; color: var(--text3); margin-bottom: 1px; }
.ilp-info-bot { font: 600 14.5px Prompt; color: var(--text); }
.ilp-divider { height: 1px; background: var(--borderSoft); }
.ilp-map-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 20px; }
.ilp-map-img { position: relative; height: 150px; background: var(--bg2); }
.ilp-map-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; background: var(--surface); }
.ilp-map-btn { padding: 9px 14px; border-radius: 11px; border: none; background: var(--primarySoft); color: var(--primaryDeep); font: 600 12.5px Prompt; }
.ilp-progress-track { height: 9px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.ilp-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; }
.ilp-desc { font: 400 14px/1.75 Prompt; color: var(--text2); }
.ilp-org-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; margin-bottom: 24px; }
.ilp-contact-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: 600 12.5px Prompt; }
.ilp-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 48; padding: 14px 20px 22px; background: var(--navBg); backdrop-filter: blur(20px); border-top: 1px solid var(--borderSoft); display: flex; align-items: center; gap: 14px; }

/* sheets */
.ilp-overlay { position: fixed; inset: 0; z-index: 80; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; }
.ilp-sheet { width: 100%; max-width: 480px; background: var(--bg); border-radius: 26px 26px 0 0; padding: 18px 20px 28px; animation: ilpUp .32s cubic-bezier(.2,.9,.3,1); max-height: 86vh; overflow-y: auto; }
.ilp-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 0 auto 16px; }
.ilp-stepper { display: flex; align-items: center; gap: 14px; justify-content: center; }
.ilp-stepper-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; }
.ilp-toast { position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%); z-index: 90; background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 14px; font: 500 14px Prompt; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); animation: ilpRise .3s ease; white-space: nowrap; }

/* form */
.ilp-form { padding: 16px 20px 30px; display: flex; flex-direction: column; gap: 18px; }
.ilp-field-label { font: 600 13.5px Prompt; color: var(--text); margin-bottom: 8px; display: block; }
.ilp-input, .ilp-textarea { width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 13px 15px; font: 400 14.5px Prompt; color: var(--text); }
.ilp-textarea { resize: vertical; min-height: 90px; }
.ilp-row3 { display: flex; gap: 8px; }
.ilp-dropzone { height: 150px; border: 1.5px dashed var(--border); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); background: var(--surface2); overflow: hidden; position: relative; }
.ilp-dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ilp-check-row { display: flex; align-items: flex-start; gap: 10px; font: 400 12.5px/1.6 Prompt; color: var(--text2); padding: 4px 0; }

/* profile */
.ilp-banner { position: relative; height: 156px; background: linear-gradient(120deg, #5C7E54, #3C5739); }
.ilp-profile-body { position: relative; z-index: 2; padding: 0 20px; }
.ilp-profile-avatar { width: 84px; height: 84px; border-radius: 26px; border: 4px solid var(--bg); margin-top: -55px; box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); }
.ilp-verified { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--primarySoft); color: var(--primaryDeep); font: 600 11px Prompt; }
.ilp-points-card { background: linear-gradient(135deg,#4E6B4A,#33492F); border-radius: 20px; padding: 18px; color: #fff; margin: 16px 0; }
.ilp-stat-row { display: flex; }
.ilp-stat { flex: 1; text-align: center; padding: 14px 0; }
.ilp-stat + .ilp-stat { border-left: 1px solid var(--border); }
.ilp-tabs { display: flex; gap: 6px; background: var(--bg2); border-radius: 13px; padding: 4px; margin: 18px 0; }
.ilp-tab { flex: 1; text-align: center; padding: 10px 0; border-radius: 10px; font: 600 12.5px Prompt; color: var(--text2); border: none; background: none; }
.ilp-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 4px 10px -4px rgba(0,0,0,.2); }
.ilp-row-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borderSoft); }
.ilp-row-thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--bg2); flex: none; }