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

:root{
  --bg: #EAF2E2;
  --deep: #1F3D2B;
  --deep-2: #274A34;
  --lime: #8BC34A;
  --lime-dark: #6FA23A;
  --lime-pale: #E4F0D2;
  --badge: #D7E85B;
  --ink: #1C2420;
  --ink-soft: rgba(28,36,32,0.58);
  --white: #FFFFFF;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Plus Jakarta Sans', sans-serif;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 10% 15%, rgba(139,195,74,0.18), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(139,195,74,0.16), transparent 50%),
    var(--bg);
  display:flex;
  justify-content:center;
  color: var(--ink);
}

#app-container {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  background: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.05);
}

.status-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 22px 4px;
  font-size:0.72rem; font-weight:700;
  flex-shrink:0;
}

/* ---------- SCREEN 1 : WELCOME ---------- */
.screen-welcome{
  background: linear-gradient(170deg, var(--deep-2) 0%, var(--deep) 60%, #10241A 100%);
  height: 100dvh; display:flex; flex-direction:column; color:#fff; position:relative;
}
.screen-welcome .status-bar{ color: rgba(255,255,255,0.9); }
.watermark{
  position:absolute; top:40px; left:50%;
  transform: translateX(-50%);
  font-size:3.5rem; font-weight:800; letter-spacing:0.15em;
  color: rgba(255,255,255,0.15); white-space:nowrap;
  text-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tree-hero{ flex:1; display:flex; align-items:center; justify-content:center; min-height: 0; }
.welcome-text{ padding: 0 30px 30px; }
.welcome-text h1{ font-size:2rem; font-weight:800; line-height:1.15; margin-bottom:8px; }
.welcome-text p{ font-size:0.9rem; color:rgba(255,255,255,0.7); font-weight:400; margin-bottom:20px; line-height:1.4; }
.btn-lime{
  background: var(--lime);
  color: var(--deep);
  border:none; padding:16px 22px; border-radius:100px;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:1rem;
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  box-shadow: 0 8px 20px rgba(139,195,74,0.35);
  transition: opacity 0.2s, transform 0.1s;
}
.btn-lime:active { opacity: 0.8; transform: scale(0.98); }
.btn-lime:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- FLOATING AVATARS ---------- */
@keyframes floatUpAndFade {
  0% { opacity: 0; transform: translateY(20px) scale(0.6); }
  15% { opacity: 1; transform: translateY(0px) scale(1); }
  85% { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.6); }
}
.floating-avatar {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2.5px solid var(--lime);
  background-size: cover;
  background-position: center;
  background-color: var(--lime-pale);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  animation: floatUpAndFade 3s ease-in-out forwards;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* ---------- SCREEN 2: QUICK REGISTER ---------- */
.screen-form{ background: var(--white); min-height:100vh; display:flex; flex-direction:column; }
.appbar{ display:flex; align-items:center; justify-content:space-between; padding: 12px 22px 18px; }
.appbar .side-icon{ width:40px; height:40px; border-radius:50%; background: var(--lime-pale); display:flex; align-items:center; justify-content:center; color:var(--deep); cursor:pointer; }
.appbar h3{ font-size:1.2rem; font-weight:800; color:var(--deep); }

.form-scroll{ flex:1; overflow-y:auto; padding: 4px 22px 24px; }
.form-scroll::-webkit-scrollbar { display: none; }

.hero-card{
  position:relative;
  border-radius:22px;
  background: linear-gradient(120deg, var(--deep) 0%, var(--lime-dark) 100%);
  padding: 20px;
  min-height: 160px;
  display:flex;
  align-items:flex-end;
  margin-bottom: 20px;
  overflow:hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  border-radius: 22px;
}
.hero-card.has-image::after { background: rgba(0,0,0,0.3); }

.chip-row{ position:absolute; top:14px; left:14px; display:flex; gap:8px; z-index: 2; }
.chip{ width:34px; height:34px; border-radius:10px; background: rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:#fff; backdrop-filter: blur(4px); }
.ribbon{
  position:absolute; top:16px; right:-36px;
  background: var(--badge);
  color: var(--deep);
  font-size:0.7rem; font-weight:800;
  padding: 6px 40px;
  transform: rotate(35deg);
  letter-spacing:0.05em;
  z-index: 2;
}
.hero-tree{ position:absolute; right:8px; top:6px; opacity:0.95; z-index: 1;}
.hero-caption{ color:#fff; position:relative; z-index:3; }
.hero-caption .k{ font-size:0.75rem; opacity:0.85; font-weight:600; text-transform: uppercase; }
.hero-caption .v{ font-size:1.15rem; font-weight:800; }
#image-input { display: none; }

.mini-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:20px; }
.mini-card{
  background: var(--lime-pale);
  border-radius:18px;
  padding: 16px 14px 14px;
  position:relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.mini-card:active { border-color: var(--lime); }
.mini-card .icon{ width:30px; height:30px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:10px; color:var(--lime-dark); }
.mini-card .name{ font-size:0.85rem; font-weight:700; color:var(--deep); }
.mini-card .val{ font-size:0.75rem; color:var(--ink-soft); font-weight:600; margin-top:4px; line-height: 1.3;}
.auto-chip{
  position:absolute; top:12px; right:12px;
  background: var(--deep); color:#fff;
  font-size:0.6rem; font-weight:800;
  padding: 4px 10px; border-radius:100px; letter-spacing:0.04em;
}

/* Hide date picker visually but keep functional */
#date-input {
  position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer;
}

.section-label{ font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--deep); margin: 10px 0 12px; }
.field{ margin-bottom:14px; }
.input-row{
  display:flex; align-items:center; gap:12px;
  background: #F5F8F0;
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 16px;
  transition: background 0.2s, border-color 0.2s;
}
.input-row:focus-within{ border-color: var(--lime); background:#fff; }
.input-row .ic{ color: var(--lime-dark); flex-shrink:0; }
.input-row input{
  border:none; outline:none; background:none; width:100%;
  font-family:'Plus Jakarta Sans', sans-serif; font-size:0.95rem; font-weight:600; color:var(--ink);
}
.input-row input::placeholder{ color: rgba(28,36,32,0.4); font-weight:500; }

.submit-wrap{ padding: 10px 22px 24px; }

/* ---------- MODAL FOR CROPPING ---------- */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none; flex-direction: column;
  z-index: 1000;
}
.cropper-container-wrapper {
  flex: 1; width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cropper-container-wrapper img {
  max-width: 100%; max-height: 100%;
}
.modal-actions {
  padding: 20px; display: flex; gap: 10px; background: #fff;
}

/* ---------- SCREEN 3: CONFIRMATION ---------- */
.screen-confirm{ background: var(--white); min-height:100vh; display:flex; flex-direction:column; }
.confirm-scroll{ flex:1; overflow-y:auto; padding: 4px 22px 24px; }
.confirm-scroll::-webkit-scrollbar { display: none; }
.confirm-hero{
  position:relative;
  border-radius:24px;
  background: linear-gradient(135deg, var(--deep) 0%, var(--lime-dark) 100%);
  height: 220px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: -40px;
}
.check-badge{
  position:absolute; bottom:-20px; right:24px;
  width:56px; height:56px; border-radius:50%;
  background: var(--lime);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(139,195,74,0.4);
  z-index:3;
}
.info-panel{
  position:relative; z-index:2;
  background:#fff;
  border-radius: 24px;
  margin: 0 4px;
  padding: 30px 22px 22px;
  box-shadow: 0 -8px 25px rgba(20,40,30,0.08);
}
.tree-id{ font-size:0.75rem; font-weight:800; letter-spacing:0.06em; color: var(--lime-dark); text-transform:uppercase; margin-bottom:6px;}
.name-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.name-row h2{ font-size:1.6rem; font-weight:800; color:var(--deep); }
.pts-chip{
  display:flex; align-items:center; gap:6px;
  background: var(--badge); color:var(--deep);
  padding: 8px 14px; border-radius: 100px;
  font-size:0.85rem; font-weight:800; white-space:nowrap;
}
.desc{ font-size:0.9rem; line-height:1.6; color: var(--ink-soft); margin-bottom:24px; }
.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:24px; }
.stat{ background: var(--lime-pale); border-radius:16px; padding:12px 10px; text-align:center; }
.stat .ic{ margin-bottom:8px; color: var(--lime-dark); display:flex; justify-content:center; }
.stat .k{ font-size:0.65rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; }
.stat .v{ font-size:0.85rem; font-weight:800; color:var(--deep); margin-top:4px; }
.confirm-footer{ padding: 6px 4px 4px; }
.btn-deep{
  background: var(--deep); color:#fff; border:none;
  padding: 16px 22px; border-radius:100px;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:1rem;
  width:100%; cursor:pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-deep:active { opacity: 0.8; transform: scale(0.98); }