:root {
  color-scheme: light;
  --ink: #15213f;
  --green: #143c35;
  --cream: #f7f6fb;
  --orange: #e87642;
  --line: #dfe1ea;
  --violet: #6d35f5;
  --blue: #2769ee;
  --shadow: 0 18px 50px #39228a24;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); min-height: 100vh; }
.topbar { height:70px; display:none; align-items:center; justify-content:space-between; padding:0 max(22px,calc((100vw - 1060px)/2)); border-bottom:1px solid var(--line); position:sticky; top:0; background:#f7f6fbe8; backdrop-filter:blur(12px); z-index:5; }
body.authenticated .topbar { display:flex; }
.brand { color:var(--green); text-decoration:none; font-weight:850; letter-spacing:.16em; }
.brand span { display:inline-grid; place-items:center; width:32px; height:32px; margin-right:8px; border-radius:50%; color:var(--cream); background:var(--green); letter-spacing:0; }
.quiet { border:0; background:transparent; color:var(--green); font-weight:700; cursor:pointer; }
main { max-width:1060px; margin:auto; padding:56px 22px 120px; }

/* Login */
body:not(.authenticated) { background:radial-gradient(circle at 15% 10%,#d6a9ff 0,transparent 35%),radial-gradient(circle at 88% 20%,#71d6ff 0,transparent 38%),linear-gradient(145deg,#f7d7f4,#caeaff 52%,#fff0cf); }
body:not(.authenticated) main { max-width:none; min-height:100vh; padding:0; display:grid; place-items:center; }
.login { width:min(100%,430px); min-height:100vh; position:relative; overflow:hidden; background:#fff; box-shadow:0 30px 100px #19215440; }
.login-visual { height:54vh; min-height:390px; position:relative; overflow:hidden; text-align:center; background:radial-gradient(circle at 8% 8%,#ffe4f4 0,transparent 32%),radial-gradient(circle at 94% 38%,#d5e7ff 0,transparent 40%),linear-gradient(160deg,#fff 5%,#f0eaff 49%,#d9f4ff); }
.login-brand { position:relative; z-index:3; padding-top:42px; display:flex; align-items:center; justify-content:center; gap:12px; font-size:1.65rem; letter-spacing:.08em; }
.logo-mark { width:31px; height:35px; display:flex; align-items:center; gap:2px; }
.logo-mark i { width:14px; height:31px; display:block; border-radius:7px; transform:skewY(-24deg); background:linear-gradient(180deg,#fc3eb7,#6735f6 60%,#2769ee); box-shadow:7px 5px 0 -3px #71d8ff; }
.logo-mark i:last-child { transform:skewY(24deg); background:linear-gradient(180deg,#58d6ff,#2870ee 45%,#6d35f5); }
.login-visual>p { position:relative; z-index:3; margin:6px 0 0; font-size:.72rem; line-height:1.45; color:#43506e; }
.login-visual>p b { color:#6336e8; }
.feature-card { position:absolute; z-index:3; display:grid; padding:12px; border-radius:16px; color:white; text-align:left; box-shadow:0 16px 28px #30217c35; transform:rotate(-7deg); }
.feature-card small,.feature-card i { font-size:.55rem; font-style:normal; opacity:.88; }
.feature-card strong { font-size:.75rem; margin:4px 0; }
.bill-card { width:118px; left:29px; top:188px; background:linear-gradient(145deg,#19d3c1,#337bf5); }
.bill-card span { position:absolute; right:10px; top:8px; }
.document-card { width:122px; height:98px; left:145px; top:205px; transform:rotate(2deg); background:linear-gradient(145deg,#2dd8ff,#2076ef); align-content:end; }
.document-card span { position:absolute; left:-14px; top:31px; padding:5px; border-radius:5px; color:#ef5a86; background:white; font-size:.55rem; transform:rotate(-8deg); }
.reminder-card { width:126px; right:24px; top:226px; transform:rotate(7deg); background:linear-gradient(145deg,#ffb7c8,#ff858c); color:#653647; }
.hidup-card { width:92px; height:83px; place-items:center; left:50%; top:276px; transform:translateX(-50%) rotate(2deg); background:linear-gradient(145deg,#8753ff,#4a23dc); font-size:2.25rem; font-weight:900; text-align:center; }
.mini-alert { position:absolute; z-index:3; right:34px; top:145px; padding:8px 11px; border-radius:14px; background:#fff; box-shadow:0 12px 25px #563f9b25; font-size:.6rem; transform:rotate(-3deg); }
.mini-alert small { display:block; color:#8b8fa1; }
.orbit { position:absolute; border:1px dashed #9c75ef80; border-radius:50%; }
.orbit-one { width:260px; height:150px; left:-25px; top:142px; transform:rotate(15deg); }
.orbit-two { width:230px; height:160px; right:-70px; top:205px; transform:rotate(-22deg); }
.cloud { position:absolute; z-index:2; width:280px; height:95px; bottom:-35px; border-radius:50%; background:#fff; box-shadow:0 -15px 35px #9adcf180; }
.cloud-left { left:-90px; transform:rotate(8deg); }
.cloud-right { right:-85px; transform:rotate(-8deg); }
.login-panel { position:relative; z-index:4; margin-top:-24px; min-height:46vh; padding:28px 30px max(26px,env(safe-area-inset-bottom)); border-radius:36px 36px 0 0; background:#fff; }
.login-copy h1 { margin:0; font-family:inherit; font-size:2rem; font-weight:850; line-height:1.1; letter-spacing:-.04em; }
.login-copy h1 span { font-size:1.55rem; }
.login-copy p { margin:8px 0 22px; color:#858b9f; font-size:.78rem; line-height:1.5; }
.login-form { display:grid; gap:12px; }
.input-shell { display:flex; align-items:center; min-height:60px; padding:8px 13px; border:1px solid #dddfea; border-radius:14px; box-shadow:0 5px 14px #31226b0d; background:#fff; cursor:text; }
.input-icon { display:grid; place-items:center; flex:0 0 34px; height:34px; margin-right:10px; border-radius:10px; background:#eee9ff; color:var(--violet); font-weight:900; }
.input-shell>span:last-child { flex:1; min-width:0; }
.input-shell small { display:block; margin-bottom:1px; color:#969bad; font-size:.62rem; }
.input-shell input { border:0; outline:0; border-radius:0; padding:0; background:transparent; color:var(--ink); font-size:.84rem; }
.input-shell input::placeholder { color:#aeb1bf; }
.login-form>button[type=submit] { display:flex; justify-content:center; align-items:center; gap:12px; width:100%; min-height:51px; border:0; border-radius:13px; color:white; background:linear-gradient(100deg,#5d19ef,#8248f7); box-shadow:0 12px 22px #6d35f541; font-weight:750; cursor:pointer; }
.login-form>button[type=submit] span { position:absolute; margin-left:285px; font-size:1.3rem; font-weight:400; }
.login-secondary { border:0; background:transparent; color:#6d35f5; font-weight:700; cursor:pointer; }
.login-note { margin:20px 0 0; text-align:center; color:#a2a5b2; font-size:.58rem; }

/* Authenticated app */
body.authenticated { background:radial-gradient(circle at 85% 3%,#d8e9ff 0,transparent 28%),linear-gradient(180deg,#f4f1ff 0,#f8f9ff 320px,#f6f7fb 100%); }
body.authenticated .topbar { border:0; color:#17203d; background:#ffffffd9; box-shadow:0 8px 30px #3f337a0d; }
body.authenticated .brand { color:#182043; font-size:1.08rem; }
body.authenticated .brand span { border-radius:10px; color:#fff; background:linear-gradient(145deg,#854bfb,#3d60ef); box-shadow:0 7px 15px #6639e842; }
body.authenticated .quiet { color:#6d35f5; }
.eyebrow { text-transform:uppercase; font-size:.68rem; font-weight:850; letter-spacing:.17em; color:#7040e8; }
h1 { font-family:inherit; font-size:clamp(2.3rem,7vw,4.7rem); font-weight:850; line-height:1.02; letter-spacing:-.055em; margin:.25em 0; }
.lead { font-size:1.15rem; line-height:1.6; max-width:580px; }
.card { background:#fff; border:1px solid #e5e2f1; border-radius:22px; padding:22px; box-shadow:0 14px 38px #39228a12; }
.form { display:grid; gap:10px; margin-top:28px; }
.form label { font-size:.82rem; font-weight:750; margin-top:5px; }
input,textarea,select { width:100%; border:1px solid #dddbea; border-radius:13px; background:white; padding:14px; color:var(--ink); font:inherit; outline-color:#7541ee; }
textarea { min-height:145px; resize:vertical; }
button { font:inherit; }
.form button,.primary-action { border:0; border-radius:14px; padding:14px 20px; background:linear-gradient(100deg,#5d19ef,#8248f7); color:white; font-weight:750; cursor:pointer; box-shadow:0 10px 22px #6d35f52b; }
.primary-action { min-width:260px; display:flex; align-items:center; justify-content:space-between; margin:24px 0 36px; }
.primary-action span { display:grid; place-items:center; width:28px; height:28px; margin-right:10px; border-radius:9px; background:#ffffff24; }
.primary-action i { margin-left:auto; font-style:normal; font-size:1.2rem; }
.hero { padding-top:4vh; }
.home-welcome { display:flex; justify-content:space-between; align-items:center; max-width:760px; }
.welcome-badge { padding:8px 12px; border:1px solid #ded8fa; border-radius:999px; color:#6341c3; background:#fff; font-size:.7rem; font-weight:700; }
.hero h1 { max-width:760px; color:#1b2446; }
.hero h1 b { color:#7140e9; font-weight:850; }
.hero .wave { font-size:.65em; }
.home-lead { max-width:570px; margin:16px 0 0; color:#7a8096; line-height:1.6; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:760px; }
.grid article { display:grid; gap:9px; }
.grid strong { font-family:inherit; font-size:1.65rem; color:#20294a; }
.grid small { color:#8b90a4; }
.summary-card { position:relative; overflow:hidden; }
.summary-card::after { content:""; position:absolute; width:100px; height:100px; right:-30px; bottom:-45px; border-radius:50%; background:#7a52ef12; }
.summary-icon { display:grid; place-items:center; width:39px; height:39px; margin-bottom:4px; border-radius:12px; background:#ede7ff; color:#6d35f5; font-size:1rem; font-weight:900; }
.reminder-summary { background:linear-gradient(145deg,#fff,#f6f1ff); }
.vault-summary { background:linear-gradient(145deg,#fff,#eef8ff); }
#whatsapp-card { background:linear-gradient(135deg,#fff,#f1fff9); }
.whatsapp-icon { background:#dcf9e9; color:#16a466; }
.view { animation:rise .25s ease; }
.view:not(.hero) { max-width:720px; margin:auto; }
.view:not(.hero) h1 { font-size:clamp(2.2rem,6vw,4rem); }
.ask-box { display:flex; background:white; border-radius:999px; padding:7px; box-shadow:var(--shadow); }
.ask-box input { border:0; background:transparent; }
.ask-box button { border:0; border-radius:50%; background:linear-gradient(145deg,#7441ee,#536af2); color:white; min-width:48px; cursor:pointer; }
.result { white-space:pre-wrap; word-break:break-word; background:#20264a; color:#f1efff; border-radius:18px; padding:20px; line-height:1.55; margin-top:20px; max-height:50vh; overflow:auto; }
.list { display:grid; gap:12px; margin-top:20px; }
.list .card { box-shadow:none; }
.bottom-nav { position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; border:1px solid #ebe8f5; background:#ffffffed; backdrop-filter:blur(16px); padding:8px; border-radius:22px; box-shadow:0 16px 45px #34226b24; z-index:10; }
.bottom-nav a { min-width:82px; padding:8px 10px; color:#9898ad; text-decoration:none; text-align:center; font-size:1.15rem; border-radius:15px; }
.bottom-nav a span { display:block; font-size:.68rem; margin-top:4px; }
.bottom-nav a.active { background:#eee8ff; color:#6834e9; }
.toast { position:fixed; top:20px; right:20px; max-width:360px; padding:14px 18px; border-radius:12px; background:#20233a; color:white; z-index:20; box-shadow:var(--shadow); }
.hidden { display:none!important; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } }

@media (min-width:760px) {
  .login { width:min(940px,calc(100% - 48px)); min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; border-radius:32px; }
  .login-visual { height:100%; min-height:650px; }
  .login-panel { margin:0 0 0 -25px; min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:60px 55px; border-radius:42px 0 0 42px; }
  .bill-card { top:270px; left:38px; }.document-card { top:300px; left:185px; }.reminder-card { top:330px; right:28px; }.hidup-card { top:405px; }.mini-alert { top:210px; }
}
@media (max-width:640px) {
  body.authenticated main { padding-top:35px; }
  .grid { grid-template-columns:1fr; }
  .bottom-nav { width:calc(100% - 20px); justify-content:space-around; }
  .bottom-nav a { min-width:0; flex:1; padding-inline:4px; }
  .topbar { height:62px; }
  body.authenticated h1 { font-size:2.8rem; }
  .toast { left:16px; right:16px; }
}
@media (max-height:760px) and (max-width:759px) {
  .login-visual { height:48vh; min-height:330px; }
  .login-brand { padding-top:24px; }
  .bill-card { top:150px; }.document-card { top:170px; }.reminder-card { top:186px; }.hidup-card { top:238px; }.mini-alert { top:110px; }
}