/* ===================== ROOT VARIABLES ===================== */
:root {
    --bg: #0D0D0D;
    --bg-2: #111510;
    --bg-card: #161c10;
    --green: #A0D925;
    --green-2: #B2F227;
    --green-dark: #2C4018;
    --green-mid: #51731F;
    --text: #F2F2F2;
    --text-dim: #9aaa8a;
    --text-muted: #5a6a4a;
    --red: #ff5252;
    --orange: #ff9f43;
    --yellow: #ffd32a;
    --blue: #54a0ff;
    --purple: #a29bfe;
    --border: rgba(160,217,37,0.15);
    --font: 'Outfit', system-ui, sans-serif;
    --radius: 14px;
    --radius-sm: 8px;
}

/* ===================== RESET ===================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5; overflow-x:hidden; min-height:100vh; }
ul { list-style:none; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font); cursor:pointer; border:none; background:none; }

/* ===================== LOCK SCREEN ===================== */
.lock-screen {
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:flex-start; justify-content:center;
    overflow-y:auto;
    padding-bottom:2rem;
}
.lock-bg {
    position:fixed; inset:0;
    background-size:cover; background-position:center;
    filter:brightness(0.2) blur(3px);
}
.lock-overlay {
    position:fixed; inset:0;
    background:linear-gradient(180deg,rgba(13,13,13,0.6) 0%,rgba(13,13,13,0.95) 60%);
}
.lock-content {
    position:relative; z-index:2;
    width:100%; max-width:440px;
    padding:2rem 1.2rem;
    display:flex; flex-direction:column; align-items:center;
    gap:0.8rem;
}
.lock-logo {
    width:90px; height:90px; object-fit:contain;
    border-radius:50%; border:3px solid var(--green);
    background:rgba(0,0,0,0.6); padding:10px;
    box-shadow:0 0 30px rgba(160,217,37,0.3);
}
.lock-name { font-size:1.8rem; font-weight:800; text-align:center; }
.lock-subtitle { color:var(--green); font-size:0.9rem; font-weight:600; text-align:center; margin-bottom:0.5rem; }
.lock-card {
    width:100%;
    background:rgba(22,28,16,0.9);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.5rem;
    backdrop-filter:blur(10px);
    text-align:center;
}
.lock-icon { font-size:2rem; margin-bottom:0.5rem; }
.lock-card h2 { font-size:1.2rem; font-weight:700; margin-bottom:0.4rem; }
.lock-card > p { font-size:0.9rem; color:var(--text-dim); margin-bottom:1.2rem; }
.input-group { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:0.8rem; }
.input-group input {
    width:100%; padding:0.9rem 1rem;
    background:rgba(0,0,0,0.5); border:1.5px solid rgba(160,217,37,0.35);
    border-radius:var(--radius-sm); color:var(--text);
    font-size:1.1rem; font-family:var(--font); text-align:center;
    letter-spacing:0.1em;
    transition:border-color 0.2s;
}
.input-group input:focus { outline:none; border-color:var(--green); }
.input-group button {
    padding:0.9rem; border-radius:var(--radius-sm);
    background:var(--green); color:#0D0D0D;
    font-size:1rem; font-weight:700;
    transition:opacity 0.2s;
}
.input-group button:active { opacity:0.8; }
.lock-error { color:var(--red); font-size:0.85rem; margin-top:0.3rem; }
.lock-public-info { margin-top:1rem; text-align:left; }
.lock-hint { font-size:0.8rem; color:var(--text-muted); margin-bottom:0.6rem; text-align:center; }
.public-contacts { display:flex; flex-direction:column; gap:0.4rem; }
.pub-contact {
    display:block; padding:0.6rem 0.8rem;
    background:rgba(160,217,37,0.05); border:1px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.85rem; color:var(--green);
    text-align:center;
}
.pub-info-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.45rem 0.6rem;
    border-bottom:1px solid rgba(255,255,255,0.04);
    font-size:0.82rem; color:var(--text-dim);
    gap:0.5rem;
}
.pub-info-row span:last-child { color:var(--text); text-align:right; }

/* ===================== APP LAYOUT ===================== */
.app { max-width:600px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }

/* ===================== HEADER ===================== */
.app-header { position:relative; padding-bottom:0.5rem; }
.header-bg {
    width:100%; height:160px;
    background-size:cover; background-position:center;
}
.header-overlay {
    position:absolute; top:0; left:0; right:0; height:160px;
    background:linear-gradient(180deg,rgba(13,13,13,0.1) 0%,var(--bg) 100%);
}
.header-content {
    position:relative; z-index:2; margin-top:-60px;
    padding:0 1rem;
    display:flex; align-items:center; gap:1rem;
}
.header-logo {
    width:76px; height:76px; object-fit:contain; flex-shrink:0;
    border-radius:50%; border:3px solid var(--green);
    background:var(--bg); padding:8px;
    box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.header-text { flex:1; }
.header-text h1 { font-size:1.35rem; font-weight:800; line-height:1.2; }
.header-text p { font-size:0.8rem; color:var(--text-dim); }
.lock-btn {
    background:rgba(255,255,255,0.06); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:0.5rem 0.7rem;
    font-size:1.1rem; color:var(--text-dim);
    transition:background 0.2s;
}
.lock-btn:active { background:rgba(255,255,255,0.12); }
.header-tags {
    position:relative; z-index:2;
    display:flex; flex-wrap:wrap; gap:0.4rem;
    padding:0.6rem 1rem;
    overflow-x:auto;
}
.header-tags::-webkit-scrollbar { display:none; }
.tag {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.3rem 0.65rem; border-radius:20px;
    font-size:0.75rem; font-weight:600; white-space:nowrap;
}
.tag.red { background:rgba(255,82,82,0.15); border:1px solid rgba(255,82,82,0.4); color:#ff7878; }
.tag.orange { background:rgba(255,159,67,0.15); border:1px solid rgba(255,159,67,0.4); color:#ffb860; }
.tag.yellow { background:rgba(255,211,42,0.15); border:1px solid rgba(255,211,42,0.4); color:#ffd32a; }
.tag.green { background:rgba(160,217,37,0.1); border:1px solid var(--border); color:var(--green); }

/* ===================== NAV PILLS ===================== */
.nav-pills {
    display:flex; gap:0.4rem; padding:0.5rem 1rem;
    overflow-x:auto; position:sticky; top:0; z-index:100;
    background:var(--bg); border-bottom:1px solid var(--border);
}
.nav-pills::-webkit-scrollbar { display:none; }
.nav-pill {
    flex-shrink:0; padding:0.45rem 0.9rem;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    border-radius:20px; font-size:0.78rem; font-weight:600; color:var(--text-dim);
    transition:all 0.2s; white-space:nowrap;
}
.nav-pill.active { background:var(--green); color:#0D0D0D; border-color:var(--green); }
.nav-pill:active { transform:scale(0.96); }

/* ===================== SECTIONS ===================== */
.section { display:none; padding:1rem; flex-direction:column; gap:0.8rem; }
.section.active { display:flex; }
.section-header {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.6rem 0; border-bottom:1px solid var(--border);
    margin-bottom:0.2rem;
}
.section-header span { font-size:1.4rem; }
.section-header h2 { font-size:1.15rem; font-weight:700; }
.emergency-header { border-color:rgba(255,82,82,0.3); }
.emergency-header h2 { color:#ff7878; }

/* ===================== CARDS ===================== */
.card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1rem;
    display:flex; flex-direction:column; gap:0.7rem;
}
.card h3 { font-size:0.95rem; font-weight:700; color:var(--green); }
.red-card { border-color:rgba(255,82,82,0.3); background:rgba(255,82,82,0.05); }
.red-card h3 { color:#ff7878; }
.orange-card { border-color:rgba(255,159,67,0.3); background:rgba(255,159,67,0.05); }
.orange-card h3 { color:var(--orange); }
.yellow-card { border-color:rgba(255,211,42,0.3); background:rgba(255,211,42,0.04); }
.yellow-card h3 { color:var(--yellow); }

/* ===================== INFO ROWS ===================== */
.info-row {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:0.5rem; font-size:0.87rem; padding:0.35rem 0;
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.info-row:last-child { border-bottom:none; padding-bottom:0; }
.label { color:var(--text-dim); font-weight:600; white-space:nowrap; min-width:80px; }
.info-row span:last-child { text-align:right; flex:1; }
.info-note {
    background:rgba(160,217,37,0.05); border-left:3px solid var(--green);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:0.6rem 0.8rem; font-size:0.85rem; color:var(--text-dim);
}
.info-note.warning {
    background:rgba(255,159,67,0.07); border-left-color:var(--orange); color:#e0b07a;
}

/* ===================== BADGES ===================== */
.badge-list { display:flex; flex-wrap:wrap; gap:0.4rem; }
.badge {
    padding:0.3rem 0.65rem; border-radius:20px;
    font-size:0.78rem; font-weight:600;
}
.badge-red { background:rgba(255,82,82,0.15); color:#ff7878; border:1px solid rgba(255,82,82,0.3); }
.badge-orange { background:rgba(255,159,67,0.15); color:var(--orange); border:1px solid rgba(255,159,67,0.3); }
.badge-yellow { background:rgba(255,211,42,0.12); color:var(--yellow); border:1px solid rgba(255,211,42,0.3); }
.badge-green { background:rgba(160,217,37,0.12); color:var(--green); border:1px solid var(--border); }
.badge-blue { background:rgba(84,160,255,0.12); color:var(--blue); border:1px solid rgba(84,160,255,0.3); }
.badge-purple { background:rgba(162,155,254,0.12); color:var(--purple); border:1px solid rgba(162,155,254,0.3); }

/* ===================== MED ITEMS ===================== */
.med-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.05); gap:0.5rem;
}
.med-item:last-child { border-bottom:none; }
.med-name { font-size:0.88rem; font-weight:600; color:var(--text); }
.med-dose { font-size:0.8rem; color:var(--orange); text-align:right; }
.prescriber { font-size:0.8rem; color:var(--text-muted); font-style:italic; }

/* ===================== DOCTORS ===================== */
.doctor-item { padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.doctor-item:last-child { border-bottom:none; }
.doctor-name { font-size:0.9rem; font-weight:700; }
.doctor-info { font-size:0.8rem; color:var(--text-dim); margin-top:0.1rem; }

/* ===================== EMERGENCY CONTACTS ===================== */
.emergency-contact {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:0.88rem; gap:0.5rem;
}
.emergency-contact:last-child { border-bottom:none; }
.call-btn {
    background:rgba(160,217,37,0.12); border:1px solid var(--border);
    border-radius:20px; padding:0.35rem 0.8rem;
    font-size:0.78rem; font-weight:600; color:var(--green); white-space:nowrap;
}

/* ===================== SURGERY ===================== */
.surgery-item { padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.surgery-item:last-child { border-bottom:none; }
.surgery-date { font-size:0.75rem; color:var(--green); font-weight:700; }
.surgery-name { font-size:0.9rem; font-weight:700; margin:0.1rem 0; }
.surgery-detail { font-size:0.82rem; color:var(--text-dim); }
.surgery-note {
    background:rgba(255,159,67,0.08); border:1px solid rgba(255,159,67,0.25);
    border-radius:var(--radius-sm); padding:0.7rem;
    font-size:0.82rem; color:#e0b07a; margin-top:0.3rem;
}

/* ===================== ACCORDION ===================== */
.accordion { display:flex; flex-direction:column; gap:0.6rem; }
.acc-item {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
}
.acc-header {
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:0.9rem 1rem; font-size:0.9rem; font-weight:600; color:var(--text);
    text-align:left; gap:0.5rem; transition:background 0.2s;
}
.acc-header:active { background:rgba(160,217,37,0.04); }
.acc-icon { color:var(--green); font-size:1.2rem; flex-shrink:0; transition:transform 0.3s; }
.acc-item.open .acc-icon { transform:rotate(45deg); }
.acc-body {
    max-height:0; overflow:hidden;
    transition:max-height 0.35s ease;
    padding:0 1rem; border-top:0px solid var(--border);
}
.acc-item.open .acc-body {
    padding:0.8rem 1rem 1rem;
    border-top:1px solid var(--border);
}
.sub-title { font-size:0.8rem; font-weight:700; color:var(--green); margin:0.8rem 0 0.4rem; text-transform:uppercase; letter-spacing:0.05em; }

/* ===================== TIMELINE ===================== */
.timeline { display:flex; flex-direction:column; gap:0; }
.tl-item {
    display:flex; gap:1rem;
    padding:0.8rem 0; border-bottom:1px solid rgba(255,255,255,0.05);
    position:relative;
}
.tl-item::before {
    content:''; position:absolute; left:56px; top:0; bottom:0;
    width:1px; background:var(--border);
}
.tl-date {
    min-width:52px; font-size:0.72rem; font-weight:700;
    color:var(--text-muted); text-align:right; padding-top:0.1rem;
    line-height:1.3;
}
.tl-content { flex:1; padding-left:1rem; }
.tl-prescriber { font-size:0.75rem; color:var(--green); font-weight:700; margin-bottom:0.3rem; }
.tl-med { font-size:0.88rem; font-weight:600; margin-top:0.3rem; }
.tl-info { font-size:0.8rem; color:var(--text-dim); margin-bottom:0.1rem; }
.active-tl .tl-date { color:var(--green); }
.active-tl .tl-content { border-left:2px solid var(--green); padding-left:0.9rem; }
.active-tl { background:rgba(160,217,37,0.03); border-radius:var(--radius-sm); }

/* ===================== LAB ROWS ===================== */
.lab-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.35rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
    font-size:0.83rem; gap:0.5rem;
}
.lab-row:last-child { border-bottom:none; }
.lab-val { font-weight:600; text-align:right; font-size:0.82rem; }
.lab-val.red { color:var(--red); }
.lab-val.orange { color:var(--orange); }
.lab-val.green { color:var(--green); }

/* ===================== PERSONS ===================== */
.person-item {
    display:flex; align-items:center; gap:0.8rem;
    padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.person-item:last-child { border-bottom:none; }
.person-avatar {
    width:40px; height:40px; border-radius:50%;
    background:var(--green-dark); display:flex; align-items:center;
    justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.person-name { font-size:0.9rem; font-weight:600; }
.person-rel { font-size:0.78rem; color:var(--text-dim); }

/* ===================== PSYCH ===================== */
.quote-block {
    background:rgba(160,217,37,0.05); border-left:3px solid var(--green);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:0.8rem; font-size:0.88rem; font-style:italic; color:var(--text-dim);
    line-height:1.6;
}
.disc-badge {
    display:inline-block; background:var(--green); color:#0D0D0D;
    font-weight:800; font-size:1rem; padding:0.4rem 1rem;
    border-radius:20px; margin-bottom:0.6rem;
}
.trait-list { padding-left:0; display:flex; flex-direction:column; gap:0.3rem; }
.trait-list li {
    font-size:0.85rem; color:var(--text-dim); padding:0.3rem 0;
    border-bottom:1px solid rgba(255,255,255,0.04);
    padding-left:0.8rem; position:relative;
}
.trait-list li::before { content:'•'; position:absolute; left:0; color:var(--green); }
.enea-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.4rem; font-size:0.82rem; }
.enea-row span { min-width:140px; color:var(--text-dim); }
.enea-bar { flex:1; background:rgba(255,255,255,0.06); border-radius:20px; overflow:hidden; height:18px; }
.enea-fill {
    height:100%; background:linear-gradient(90deg,var(--green-dark),var(--green));
    border-radius:20px; display:flex; align-items:center; justify-content:flex-end;
    padding-right:6px; font-size:0.72rem; font-weight:700; color:#0D0D0D;
}

/* ===================== ASTROLOGY ===================== */
.astro-big {
    display:flex; gap:0.6rem; justify-content:center;
    flex-wrap:wrap;
}
.astro-planet {
    flex:1; min-width:90px; max-width:120px;
    background:rgba(160,217,37,0.05); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:0.8rem 0.5rem;
    text-align:center;
}
.planet-icon { font-size:1.6rem; }
.planet-sign { font-size:0.85rem; font-weight:700; margin-top:0.3rem; }
.planet-house { font-size:0.75rem; color:var(--green); }
.astro-row {
    display:flex; gap:0.6rem; align-items:flex-start;
    padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
    font-size:0.83rem;
}
.astro-row:last-child { border-bottom:none; }
.astro-p { font-weight:700; min-width:70px; color:var(--green); font-size:0.82rem; }
.aspect-item { font-size:0.83rem; color:var(--text-dim); padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.04); line-height:1.4; }
.aspect-item:last-child { border-bottom:none; }
.aspect-item strong { color:var(--text); }

/* ===================== TAROT ===================== */
.tarot-card-item {
    display:flex; align-items:center; gap:0.8rem;
    padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.tarot-card-item:last-child { border-bottom:none; }
.tarot-num {
    width:38px; height:38px; border-radius:var(--radius-sm);
    background:var(--green-dark); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:800; color:var(--green); flex-shrink:0;
}
.tarot-name { font-size:0.9rem; font-weight:700; }
.tarot-meaning { font-size:0.78rem; color:var(--text-dim); }
.consult-item {
    background:rgba(160,217,37,0.03); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:0.8rem; margin-bottom:0.6rem;
}
.consult-item:last-child { margin-bottom:0; }
.consult-q { font-size:0.85rem; font-weight:600; font-style:italic; color:var(--text-dim); margin-bottom:0.4rem; }
.consult-card { font-size:0.88rem; font-weight:700; color:var(--purple); margin-bottom:0.4rem; }
.consult-ans { font-size:0.85rem; font-weight:700; padding:0.3rem 0.6rem; border-radius:20px; display:inline-block; }
.green-ans { background:rgba(160,217,37,0.1); color:var(--green); border:1px solid var(--border); }
.consult-spread { font-size:0.78rem; color:var(--text-dim); display:flex; flex-direction:column; gap:0.2rem; margin:0.4rem 0; padding-left:0.5rem; border-left:2px solid var(--border); }

/* ===================== FOOTER ===================== */
.app-footer {
    margin-top:auto; padding:2rem 1rem;
    border-top:1px solid var(--border); text-align:center;
    display:flex; flex-direction:column; gap:0.3rem;
}
.app-footer p { font-size:0.8rem; color:var(--text-muted); }
.footer-lock {
    margin-top:0.8rem; padding:0.7rem 1.5rem;
    border:1px solid var(--border); border-radius:20px;
    font-size:0.85rem; font-weight:600; color:var(--text-dim);
    background:rgba(255,255,255,0.03);
}

/* ===================== SHAKE ANIMATION ===================== */
@keyframes shake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-8px)}
    40%{transform:translateX(8px)}
    60%{transform:translateX(-6px)}
    80%{transform:translateX(6px)}
}
.shake { animation:shake 0.4s ease; }

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--green-dark); border-radius:4px; }