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

:root {
    --green-900:#1b4332; --green-700:#2d6a4f; --green-500:#40916c;
    --green-300:#74c69d; --green-100:#d8f3dc; --orange:#e76f51; --red:#d62828;
    --white:#fff; --gray-50:#f8f9fa; --gray-100:#e9ecef; --gray-200:#dee2e6;
    --gray-400:#adb5bd; --gray-600:#6c757d; --gray-800:#343a40; --gray-900:#212529;
    --radius:12px; --shadow:0 2px 8px rgba(0,0,0,.08); --shadow-lg:0 4px 16px rgba(0,0,0,.12);
}

body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--gray-50); color:var(--gray-900); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
.hidden { display:none !important; }
.mt-10 { margin-top:10px; }
.muted { color:var(--gray-600); font-size:12px; }

.screen { display:none; }
.screen.active { display:block; }

/* Auth */
#auth-screen { position:fixed; inset:0; z-index:999; }
.auth-container { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; background:linear-gradient(160deg,var(--green-900),var(--green-700)); }
.auth-logo { font-size:56px; margin-bottom:8px; }
.auth-title { color:#fff; font-size:22px; font-weight:700; margin-bottom:4px; }
.auth-subtitle { color:var(--green-300); font-size:14px; margin-bottom:24px; text-align:center; }
#auth-fields { width:100%; max-width:300px; display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.auth-container .input { text-align:center; font-size:16px; }
.auth-container .btn { max-width:300px; width:100%; }
.error-text { color:var(--orange); font-size:13px; margin-top:8px; min-height:20px; text-align:center; }

/* Header */
.header { position:fixed; top:0; left:0; right:0; height:48px; background:var(--green-900); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 14px; z-index:100; }
.header-title { font-size:16px; font-weight:600; }
.header-right { display:flex; align-items:center; gap:10px; }
.user-chip { font-size:11px; color:var(--green-300); background:rgba(255,255,255,.1); padding:3px 8px; border-radius:10px; }
.header-btn { background:none; border:none; color:var(--green-300); font-size:18px; cursor:pointer; padding:4px; }

/* Pages */
.page { display:none; padding:56px 12px 70px; min-height:100vh; }
.page.active { display:block; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-top:8px; }
.page-header h2 { font-size:18px; font-weight:700; }
.section-title { font-size:14px; font-weight:700; color:var(--gray-600); margin:16px 0 8px; }

/* Inputs */
.input { width:100%; padding:10px 12px; border:1.5px solid var(--gray-200); border-radius:8px; font-size:14px; background:#fff; color:var(--gray-900); transition:border-color .2s; -webkit-appearance:none; }
.input:focus { outline:none; border-color:var(--green-500); }
select.input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:11px; font-weight:600; color:var(--gray-600); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.form-row { display:flex; gap:10px; margin-top:14px; }
.form-subhead { font-size:13px; font-weight:700; color:var(--gray-800); margin:12px 0 8px; }

/* Buttons */
.btn { padding:10px 18px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; text-align:center; text-decoration:none; display:inline-block; transition:transform .1s,opacity .2s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--green-700); color:#fff; }
.btn-book { background:var(--orange); color:#fff; font-size:17px; padding:14px; letter-spacing:1px; border-radius:10px; }
.btn-outline { background:none; border:1.5px solid var(--gray-200); color:var(--gray-600); }
.btn-small { padding:6px 12px; font-size:12px; background:var(--green-700); color:#fff; border-radius:6px; }
.btn-full { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Cards */
.card-list { display:flex; flex-direction:column; gap:8px; }
.card { background:#fff; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.card-title { font-size:15px; font-weight:600; margin-bottom:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.card-sub { font-size:12px; color:var(--gray-600); margin-bottom:4px; }
.card-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.card-tag { font-size:10px; padding:2px 6px; border-radius:4px; background:var(--green-100); color:var(--green-700); font-weight:600; }
.card-tag.red { background:#fde0e0; color:var(--red); }
.card-tag.orange { background:#fde8e0; color:var(--orange); }
.owner-tag { font-size:10px; padding:1px 6px; border-radius:4px; background:var(--gray-100); color:var(--gray-600); font-weight:600; }
.card-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.card-btn { padding:5px 10px; font-size:11px; border:1px solid var(--gray-200); border-radius:6px; background:none; color:var(--gray-600); cursor:pointer; text-decoration:none; display:inline-block; }

/* Form card */
.form-card { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-lg); margin-top:12px; }
.form-card h3 { font-size:16px; margin-bottom:12px; }

/* Book */
.book-card { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.book-card h2 { font-size:18px; margin-bottom:12px; color:var(--green-900); }
.count-pill { display:inline-block; background:var(--green-700); color:#fff; font-size:10px; padding:1px 7px; border-radius:10px; margin-left:4px; }
.checkbox-list { display:flex; flex-direction:column; gap:6px; }
.checkbox-item { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1.5px solid var(--gray-200); border-radius:8px; cursor:pointer; transition:all .15s; }
.checkbox-item.checked { border-color:var(--green-500); background:var(--green-100); }
.checkbox-item.disabled { opacity:.5; cursor:not-allowed; }
.check-indicator { width:18px; height:18px; border:2px solid var(--gray-400); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; color:transparent; }
.checkbox-item.checked .check-indicator { background:var(--green-500); border-color:var(--green-500); color:#fff; }
.check-body { flex:1; }
.check-label { font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.check-sub { font-size:10px; color:var(--gray-600); }

/* Booking live */
.booking-live h2 { font-size:18px; margin-bottom:12px; padding-top:8px; }
.status-card { background:#fff; border-radius:var(--radius); padding:12px 14px; margin-bottom:8px; box-shadow:var(--shadow); border-left:4px solid var(--gray-400); }
.status-card.running { border-left-color:var(--orange); }
.status-card.completed { border-left-color:var(--green-500); }
.status-card.failed { border-left-color:var(--red); }
.status-card-header { display:flex; justify-content:space-between; align-items:center; }
.status-card-name { font-weight:600; font-size:14px; }
.status-badge { font-size:10px; padding:2px 6px; border-radius:4px; font-weight:600; text-transform:uppercase; }
.status-badge.pending { background:var(--gray-100); color:var(--gray-600); }
.status-badge.running { background:#fff3e0; color:var(--orange); }
.status-badge.completed { background:var(--green-100); color:var(--green-700); }
.status-badge.failed { background:#fde0e0; color:var(--red); }
.status-step { font-size:12px; color:var(--gray-600); margin-top:3px; }
.status-ok { font-size:12px; color:var(--green-700); margin-top:4px; font-weight:600; }
.status-err { font-size:12px; color:var(--red); margin-top:4px; }
.otp-card,.payment-card { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-lg); margin-top:12px; text-align:center; }
.otp-card h3,.payment-card h3 { font-size:16px; margin-bottom:6px; }
.otp-input { text-align:center; font-size:22px; letter-spacing:8px; font-weight:700; margin:10px 0; }

/* Bottom nav */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:56px; background:#fff; display:flex; border-top:1px solid var(--gray-200); z-index:100; padding-bottom:env(safe-area-inset-bottom); }
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; color:var(--gray-400); gap:1px; }
.nav-btn.active { color:var(--green-700); }
.nav-icon { font-size:18px; }
.nav-label { font-size:9px; font-weight:600; }

/* History */
.history-item { background:#fff; border-radius:8px; padding:10px 14px; margin-bottom:6px; box-shadow:var(--shadow); border-left:3px solid var(--gray-400); }
.history-item.completed { border-left-color:var(--green-500); }
.history-item.failed { border-left-color:var(--red); }
.history-trek { font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.history-date { font-size:11px; color:var(--gray-600); margin-top:2px; }
.history-trekkers { font-size:10px; color:var(--gray-400); margin-top:1px; }
.history-reason { font-size:11px; color:var(--red); margin-top:4px; background:#fde0e0; padding:4px 8px; border-radius:4px; }
.history-actions { display:flex; gap:6px; margin-top:6px; }

/* Admin */
.overview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.stat-box { background:#fff; border-radius:10px; padding:12px 6px; text-align:center; box-shadow:var(--shadow); }
.stat-num { font-size:22px; font-weight:700; color:var(--green-700); }
.stat-label { font-size:10px; color:var(--gray-600); text-transform:uppercase; letter-spacing:.3px; }
.detail-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mini-row { font-size:12px; padding:6px 8px; background:var(--gray-50); border-radius:6px; margin-bottom:4px; }
.mini-row.completed { border-left:3px solid var(--green-500); }
.mini-row.failed { border-left:3px solid var(--red); }

/* Toast */
.toast { position:fixed; bottom:72px; left:50%; transform:translateX(-50%); background:var(--gray-800); color:#fff; padding:8px 16px; border-radius:8px; font-size:13px; z-index:200; opacity:0; transition:opacity .3s; pointer-events:none; max-width:90%; text-align:center; }
.toast.show { opacity:1; }

/* Empty */
.empty-state { text-align:center; padding:30px 20px; color:var(--gray-400); }
.empty-state-icon { font-size:40px; margin-bottom:6px; }
.empty-state-text { font-size:13px; }

/* Install prompt */
.install-prompt { position:fixed; bottom:64px; left:12px; right:12px; z-index:300; }
.install-card { background:var(--green-900); color:#fff; border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-lg); position:relative; }
.install-icon { font-size:28px; }
.install-text { flex:1; display:flex; flex-direction:column; }
.install-text strong { font-size:13px; }
.install-text span { font-size:11px; color:var(--green-300); margin-top:2px; }
.install-card .btn { padding:8px 16px; font-size:13px; }
.install-close { position:absolute; top:6px; right:8px; background:none; border:none; color:var(--green-300); font-size:14px; cursor:pointer; }