@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800&family=Trirong:wght@500;600;700&display=swap');
:root{--night:#211a38;--night2:#332452;--gold:#d9b45a;--gold2:#eed490;--saffron:#c26418;--deep:#9c4a10;--paper:#fcf7ea;--palm:#f4ecd9;--ink:#322a24;--muted:#746958;--line:#e3d6b8;--blue:#234c85;--orange:#e36b22}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Sarabun,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0,rgba(217,180,90,.12),transparent 34%),var(--palm)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(#b08c3a,#8a6a25);-webkit-mask:url('../images/nataraja.svg') center 42%/82vmin no-repeat;mask:url('../images/nataraja.svg') center 42%/82vmin no-repeat;opacity:.045}
button,input,select{font:inherit}.app-shell{position:relative;min-height:100dvh;padding-bottom:84px}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:max(10px,env(safe-area-inset-top)) 16px 10px;background:linear-gradient(135deg,#141026,var(--night) 50%,var(--night2));border-bottom:1px solid rgba(217,180,90,.45);box-shadow:0 5px 24px rgba(20,16,38,.35)}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;object-fit:contain;border-radius:50%;box-shadow:0 0 0 1px rgba(217,180,90,.5),0 0 14px rgba(217,180,90,.25)}.brand h1{font:700 18px/1.1 Trirong,Sarabun;color:var(--gold2);margin:0}.brand p{margin:2px 0 0;color:var(--gold);font-size:11px;letter-spacing:.08em}.icon-btn{border:1px solid rgba(217,180,90,.35);background:rgba(255,255,255,.04);color:#f2ead7;border-radius:12px;width:40px;height:40px}
main{width:min(100%,760px);margin:auto}.screen{padding:18px 14px 28px}.hidden{display:none!important}.hero-card{position:relative;overflow:hidden;text-align:center;padding:22px 18px;border-radius:22px;background:linear-gradient(145deg,#211a38,#3b2b5d);color:#f6edd9;box-shadow:0 12px 30px rgba(33,26,56,.25);margin-bottom:14px}.hero-card h2{font:700 25px Trirong,Sarabun;color:var(--gold2);margin:0 0 8px}.hero-card p{font-size:14px;line-height:1.65;margin:0;opacity:.9}.lotus-glow{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(217,180,90,.22),transparent 68%);top:-100px;right:-60px}
.card{background:rgba(252,247,234,.96);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(51,36,82,.08)}.form-card{padding:18px}.field{display:block;margin-bottom:15px}.field>span,.wheel-row label>span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 6px}.field input,.field select,.wheel-row select{width:100%;border:1px solid #dacaa6;border-radius:13px;background:#fffdfa;color:var(--ink);padding:12px 13px;outline:none}.field input:focus,.field select:focus,.wheel-row select:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(194,100,24,.12)}.section-title{font-weight:800;margin:17px 0 9px;color:#46382c}.wheel-row{display:flex;gap:8px;align-items:flex-end}.wheel-row label{flex:1}.birth-row .year-field{flex:1.15}.birth-row .era-field{flex:.9}.time-row{max-width:240px}.colon{font-weight:800;font-size:22px;padding-bottom:8px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#eee4ce;border-radius:14px;padding:4px;margin-bottom:14px}.seg{border:0;background:transparent;border-radius:11px;padding:10px;font-weight:700;color:#6a604f}.seg.active{background:linear-gradient(160deg,var(--saffron),var(--deep));color:white;box-shadow:0 4px 10px rgba(156,74,16,.25)}.primary,.secondary{border-radius:14px;padding:13px 16px;font-weight:800;border:1px solid transparent;cursor:pointer}.primary{width:100%;background:linear-gradient(160deg,var(--saffron),var(--deep));color:#fff;box-shadow:0 5px 14px rgba(156,74,16,.25)}.secondary{background:#f7efdd;border-color:#d9c9a7;color:#493d30}
.confirm-card{padding:22px}.seal{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 9px;background:var(--night);color:var(--gold2);font-size:28px;box-shadow:0 0 0 4px rgba(217,180,90,.2)}.confirm-card h2{text-align:center;font:700 24px Trirong;margin:5px 0 18px}.summary-list{display:grid;gap:9px}.summary-row{display:flex;justify-content:space-between;gap:15px;border-bottom:1px dashed #dfd1b5;padding-bottom:8px}.summary-row span{color:var(--muted)}.summary-row b{text-align:right}.warning{margin:18px 0;padding:13px;background:#fff4e5;border-left:4px solid var(--saffron);border-radius:10px;font-size:13px;line-height:1.6}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions .primary{width:auto}
.welcome-block{text-align:center;padding:12px 8px 18px}.eyebrow{font-size:12px;color:var(--muted);margin:0 0 7px}.welcome-block h2{font:700 25px Trirong,Sarabun;margin:0;color:var(--night)}.identity{font-size:17px;line-height:1.5;margin:8px 0 12px}.identity strong{color:var(--deep)}.age-pill{display:inline-block;padding:7px 12px;border-radius:999px;background:#ede1c3;color:#554831;font-size:13px}.age-pill b{color:var(--night)}
.kala-card,.chart-card{padding:16px;margin-bottom:14px}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.mini-label{font-size:11px;font-weight:800;color:var(--deep);letter-spacing:.04em}.card-head h3{font:700 18px Trirong,Sarabun;margin:2px 0 0;color:var(--night)}.locked{font-size:11px;background:#eee4ce;padding:6px 8px;border-radius:999px;white-space:nowrap}.kala-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.kala-grid div{background:#f7efdd;border:1px solid #eadfc7;border-radius:13px;padding:10px}.kala-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.kala-grid b{font-size:13px}.chart-title{align-items:center}.legend{display:flex;gap:8px;font-size:10px;white-space:nowrap}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.natal-dot{background:var(--blue)}.transit-dot{background:var(--orange)}.mini-chart{width:min(100%,430px);aspect-ratio:1;margin:10px auto 0}.mini-chart svg{width:100%;height:100%;display:block}.chart-note{text-align:center;font-size:11px;color:var(--muted);margin:3px 0 0}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-card{min-height:112px;text-align:left;border:1px solid var(--line);border-radius:17px;background:var(--paper);padding:14px;color:var(--ink);box-shadow:0 5px 16px rgba(51,36,82,.06)}.quick-card>span{font-size:23px;color:var(--deep)}.quick-card b,.quick-card small{display:block}.quick-card b{margin-top:7px}.quick-card small{margin-top:4px;color:var(--muted);line-height:1.35}.quick-card.paid{background:linear-gradient(145deg,#251d40,#3d2d5f);color:#f8edd4;border-color:rgba(217,180,90,.5)}.quick-card.paid small{color:#d7c9ab}.quick-card.paid>span{color:var(--gold2)}
.bottom-nav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);height:70px;padding:6px 12px max(6px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);background:rgba(252,247,234,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -5px 20px rgba(51,36,82,.08)}.bottom-nav button{border:0;background:transparent;color:#766b5b;font-size:11px;font-weight:700}.bottom-nav button span{display:block;font-size:20px;margin-bottom:2px}.bottom-nav button.active{color:var(--deep)}
@media(max-width:430px){.screen{padding-left:11px;padding-right:11px}.brand h1{font-size:16px}.birth-row{gap:5px}.wheel-row select{padding:11px 7px}.kala-grid{gap:7px}.quick-grid{gap:8px}.quick-card{padding:12px}.card-head h3{font-size:16px}.legend{display:grid;gap:2px}}
.auth-screen{padding-top:28px}.auth-hero{margin-top:7vh}.password-wrap{display:grid;grid-template-columns:1fr auto;border:1px solid #dacaa6;border-radius:13px;background:#fffdfa;overflow:hidden}.password-wrap input{border:0!important;border-radius:0!important;box-shadow:none!important}.password-wrap button{border:0;border-left:1px solid #e7dcc3;background:#f7efdd;padding:0 13px;color:var(--deep);font-weight:700}.text-btn{display:block;margin:12px auto 0;border:0;background:transparent;color:var(--deep);font-weight:700;padding:8px}.closed-signup{margin-top:14px;padding:11px;border-radius:12px;background:#eee4ce;color:#675a48;font-size:12px;text-align:center}.form-status{min-height:20px;margin:9px 0 0;text-align:center;color:#4f6b3a;font-size:12px}.form-status.bad{color:#b3342b}.account-dialog{border:0;border-radius:20px;padding:0;width:min(92vw,420px);background:var(--paper);box-shadow:0 20px 60px rgba(20,16,38,.35)}.account-dialog::backdrop{background:rgba(20,16,38,.55);backdrop-filter:blur(3px)}.dialog-inner{padding:22px}.dialog-inner h3{font:700 22px Trirong;margin:0 0 7px;color:var(--night)}.dialog-inner>p{overflow-wrap:anywhere}.full{width:100%;margin-top:9px}.danger{border:0;border-radius:14px;padding:13px 16px;font-weight:800;background:#8e2f2a;color:white}.location-panel select{width:100%;border:1px solid #dacaa6;border-radius:13px;background:#fffdfa;color:var(--ink);padding:12px 13px}
.year-field-wide{grid-column:span 2}.year-field-wide select{min-width:150px}

/* Mobile wheel pickers */
.wheel-picker{position:relative;align-items:center}.wheel-picker::after{content:"";position:absolute;left:0;right:0;top:50%;height:42px;transform:translateY(-50%);border-top:1px solid #c9a95f;border-bottom:1px solid #c9a95f;background:rgba(255,250,240,.58);pointer-events:none;z-index:0}.wheel-picker label,.wheel-picker .colon{position:relative;z-index:1}.wheel-select{width:100%;height:176px;border:0!important;border-radius:14px;background:linear-gradient(to bottom,rgba(255,253,248,.45),#fffdf8 42%,#fffdf8 58%,rgba(255,253,248,.45));padding:65px 6px!important;text-align:center;font-size:17px;font-weight:750;color:#2f2941;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;box-shadow:inset 0 0 0 1px #dfd0aa}.wheel-select option{height:38px;padding:8px 4px;scroll-snap-align:center}.wheel-picker label>span{display:block;text-align:center;margin-bottom:7px;font-size:12px;color:var(--muted)}.birth-row{grid-template-columns:.75fr 1.15fr 1.65fr}.time-row{grid-template-columns:1fr auto 1fr}.time-row .colon{font-size:25px;margin-top:27px;color:var(--deep)}

/* Searchable location bottom sheet */
.location-panel{display:grid;gap:10px;margin-top:12px}.location-choice{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label arrow" "value arrow";align-items:center;width:100%;padding:13px 14px;border:1px solid #dacaa6;border-radius:14px;background:#fffdfa;color:var(--ink);text-align:left}.location-choice span{grid-area:label;font-size:12px;color:var(--muted)}.location-choice b{grid-area:value;margin-top:3px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-choice i{grid-area:arrow;font-style:normal;font-size:28px;color:var(--gold);padding-left:12px}.selected-place{margin:12px 0 2px;padding:10px 12px;border-radius:12px;background:#f3ead4;color:#66583f;font-size:12px;line-height:1.45}.picker-dialog{width:100%;max-width:760px;height:78vh;margin:auto 0 0;max-height:78vh;border:0;border-radius:22px 22px 0 0;padding:0;background:#fffaf0}.picker-dialog::backdrop{background:rgba(22,17,38,.55);backdrop-filter:blur(3px)}.picker-sheet{height:100%;display:grid;grid-template-rows:auto auto auto 1fr;padding:8px 14px max(14px,env(safe-area-inset-bottom))}.picker-grab{width:44px;height:5px;border-radius:99px;background:#d1c5ad;margin:0 auto 8px}.picker-head{display:flex;align-items:center;justify-content:space-between}.picker-head h3{margin:0;font:700 19px Trirong;color:var(--night)}.picker-head button{border:0;background:transparent;color:var(--deep);font-weight:800;padding:9px}.picker-search{width:100%;margin:8px 0 10px;border:1px solid #dacaa6;border-radius:13px;background:#fff;padding:12px 13px;font-size:16px}.picker-list{overflow:auto;border-top:1px solid #eadfc6}.picker-list button{display:block;width:100%;border:0;border-bottom:1px solid #eee4cf;background:transparent;padding:12px 4px;text-align:left;color:var(--ink)}.picker-list button b,.picker-list button small{display:block}.picker-list button b{font-size:15px}.picker-list button small{margin-top:2px;color:var(--muted);font-size:12px}.empty-list{text-align:center;color:var(--muted);padding:30px}
@media(max-width:430px){.wheel-select{height:164px;font-size:15px}.birth-row{gap:6px}.year-field-wide select{min-width:0}.picker-dialog{height:82vh;max-height:82vh}}
.en-note{font-size:.92em;opacity:.82;line-height:1.45}.lock-notice{margin-top:.7rem}.hero-card .lock-notice{padding-top:.55rem;border-top:1px solid rgba(255,255,255,.14)}

/* Compact one-line birth date and time fields */
.compact-title{margin-bottom:7px}.compact-picker-trigger{width:100%;min-height:58px;border:1px solid #dacaa6;border-radius:14px;background:#fffdfa;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;text-align:left;font-weight:750;box-shadow:0 2px 8px rgba(51,36,82,.04)}.compact-picker-trigger:active{transform:scale(.995)}.compact-picker-trigger i{font-style:normal;font-size:28px;line-height:1;color:var(--deep);font-weight:400}.compact-picker-trigger span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.date-time-picker-dialog{border:0;padding:0;background:transparent;width:100%;max-width:760px;max-height:92dvh;margin:auto auto 0}.date-time-picker-dialog::backdrop{background:rgba(20,16,38,.52);backdrop-filter:blur(3px)}.date-time-sheet{background:var(--paper);border-radius:24px 24px 0 0;padding:9px 14px max(20px,env(safe-area-inset-bottom));box-shadow:0 -16px 48px rgba(20,16,38,.3)}.date-time-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:3px 0 10px}.date-time-head h3{margin:0;text-align:center;font:700 17px Trirong,Sarabun;color:var(--night);white-space:nowrap}.date-time-head button{border:0;background:transparent;padding:9px 4px;color:var(--deep);font-weight:800}.date-time-head button:last-child{text-align:right}.date-time-panel{padding:16px 0 4px}.compact-wheel{max-width:100%;margin:auto}.compact-wheel .wheel-select{height:180px}.time-wheel-centered{max-width:390px}.date-time-picker-dialog[open]{animation:sheetIn .2s ease-out}@keyframes sheetIn{from{transform:translateY(25px);opacity:.5}to{transform:translateY(0);opacity:1}}
@media(max-width:430px){.compact-picker-trigger{min-height:54px;padding:0 14px}.date-time-sheet{padding-left:10px;padding-right:10px}.date-time-head h3{font-size:15px}.date-time-head button{font-size:12px}.compact-wheel .wheel-select{font-size:16px;padding-left:3px!important;padding-right:3px!important}.compact-wheel label>span{font-size:10px;text-align:center}.compact-wheel .year-field-wide{flex:1.35}}

/* Unified multi-step onboarding on desktop and mobile. Legacy responsive rules removed because they hid navigation buttons on desktop. */
/* v0.09 — one multi-step flow on desktop and mobile, Tinder-style numeric birthday */
.responsive-onboarding{max-width:680px;margin-left:auto;margin-right:auto;min-height:430px;padding:22px}
.responsive-onboarding .onboarding-step{display:none!important}
.responsive-onboarding .onboarding-step.active{display:block!important;animation:mobileStepIn .18s ease-out}
.mobile-step-indicator{display:flex!important;align-items:center;justify-content:center;margin:0 0 24px}
.mobile-step-indicator span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eee4ce;color:#786b58;font-weight:800;font-size:13px}
.mobile-step-indicator span.active,.mobile-step-indicator span.done{background:linear-gradient(160deg,var(--saffron),var(--deep));color:#fff}
.mobile-step-indicator i{width:42px;height:2px;background:#dfd0ae}
.mobile-step-indicator i.done{background:var(--saffron)}
.mobile-step-title{display:block!important;font:700 22px Trirong,Sarabun;color:var(--night);margin:4px 0 26px;text-align:center}
.mobile-step-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.mobile-step-actions.one-action{grid-template-columns:1fr}
.mobile-step-actions .primary,.mobile-step-actions .secondary{width:100%}
.tinder-date-row,.tinder-time-row{display:flex;align-items:end;justify-content:center;gap:10px;margin:14px auto 8px;max-width:560px}
.tinder-date-row label,.tinder-time-row label{display:grid;gap:8px;flex:1;min-width:0}
.tinder-date-row .year-input{flex:1.5}
.tinder-date-row label span,.tinder-time-row label span{text-align:center;color:var(--muted);font-size:12px;font-weight:700}
.tinder-date-row input,.tinder-time-row input{width:100%;height:68px;border:0;border-bottom:2px solid #c9a95f;background:transparent;border-radius:0;text-align:center;font-size:30px;font-weight:800;color:var(--night);padding:8px 2px;outline:none}
.tinder-date-row input:focus,.tinder-time-row input:focus{border-bottom-color:var(--deep);background:rgba(255,250,240,.75)}
.tinder-date-row>b,.tinder-time-row>b{font-size:28px;color:#9a8564;padding-bottom:15px}
.tinder-time-row{max-width:350px}
.input-preview{text-align:center;margin:18px auto 4px;padding:11px 14px;border-radius:12px;background:#f3ead4;color:#66583f;font-size:13px;max-width:560px}
@media(max-width:520px){
  .responsive-onboarding{padding:16px;min-height:410px}
  .mobile-step-indicator i{width:26px}
  .mobile-step-title{font-size:20px;margin-bottom:20px}
  .tinder-date-row{gap:5px}
  .tinder-date-row input,.tinder-time-row input{height:60px;font-size:24px}
  .tinder-date-row label span,.tinder-time-row label span{font-size:10px}
  .tinder-date-row>b,.tinder-time-row>b{font-size:22px;padding-bottom:14px}
}
/* Deterministic multi-step visibility */
.onboarding-step[hidden]{display:none!important}
.onboarding-step.active:not([hidden]){display:block!important}


/* v0.12 navigation fix: buttons must remain visible on every device */
.responsive-onboarding .mobile-step-actions{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  position:sticky;
  bottom:0;
  z-index:8;
  margin:28px -6px -8px;
  padding:12px 6px max(8px,env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(255,253,250,0),#fffdfa 22%,#fffdfa);
}
.responsive-onboarding .mobile-step-actions.one-action{grid-template-columns:1fr!important}
.responsive-onboarding .mobile-step-actions:not(.one-action){grid-template-columns:1fr 1fr!important}
.responsive-onboarding .mobile-step-actions button{display:block!important;min-height:52px!important}
@media (max-width:480px){
  .responsive-onboarding{padding:16px 14px;min-height:480px}
  .responsive-onboarding .mobile-step-actions{margin-left:-4px;margin-right:-4px}
}

.build-marker{text-align:right;font-size:10px;color:#9a8f7c;margin:-8px 0 6px;user-select:none}


/* v0.13 compact full-screen onboarding */
html,body{height:100%;overflow:hidden}
.app-shell{height:100dvh;min-height:100dvh;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{flex:0 0 auto}
main{flex:1;min-height:0;width:min(100%,760px);display:flex;overflow:hidden}
.screen{width:100%;height:100%;padding:10px 14px 12px;overflow:hidden}
#onboarding{display:flex;flex-direction:column;gap:8px}
#onboarding.hidden{display:none!important}
#onboarding .hero-card{flex:0 0 auto;margin:0;padding:12px 16px;border-radius:17px}
#onboarding .hero-card h2{font-size:19px;margin-bottom:3px}
#onboarding .hero-card p{font-size:11px;line-height:1.35}
#onboarding .lock-notice{margin-top:3px!important}
.responsive-onboarding{flex:1;min-height:0;padding:12px 16px;display:flex;flex-direction:column;overflow:hidden}
.mobile-step-indicator{flex:0 0 auto;margin-bottom:6px}
.onboarding-step.active{flex:1;min-height:0;display:flex!important;flex-direction:column;justify-content:center;overflow:hidden}
.mobile-step-title{margin-bottom:12px}
.mobile-step-actions{margin-top:auto;padding-top:12px;flex:0 0 auto}
.dropdown-date-row{display:grid;grid-template-columns:.72fr 1.2fr 1.5fr;gap:8px;align-items:end}
.dropdown-date-row label,.dropdown-time-row label{min-width:0}
.dropdown-date-row span,.dropdown-time-row span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;white-space:nowrap}
.dropdown-date-row select,.dropdown-time-row select{width:100%;min-height:50px;border:1px solid #dacaa6;border-radius:13px;background:#fffdfa;color:var(--ink);padding:10px 32px 10px 11px;font-weight:700;outline:none}
.dropdown-date-row select:focus,.dropdown-time-row select:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(194,100,24,.12)}
.dropdown-time-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;max-width:420px;margin:0 auto;width:100%}
.dropdown-time-row>b{font-size:25px;padding-bottom:8px}
.input-preview{margin-top:12px;text-align:center;font-size:13px;color:var(--deep);font-weight:700}
#profileStatus{flex:0 0 auto}
@media(max-height:700px){
  #onboarding .hero-card p{display:none}
  #onboarding .hero-card{padding:9px 14px}
  .responsive-onboarding{padding:9px 14px}
  .mobile-step-title{margin-bottom:8px}
  .dropdown-date-row select,.dropdown-time-row select{min-height:44px;padding-top:8px;padding-bottom:8px}
}
@media(max-width:480px){
  .screen{padding:8px 10px 10px}
  #onboarding .hero-card h2{font-size:16px}
  .dropdown-date-row{grid-template-columns:.72fr 1.2fr 1.45fr;gap:5px}
  .dropdown-date-row span,.dropdown-time-row span{font-size:9px}
  .dropdown-date-row select,.dropdown-time-row select{font-size:13px;padding-left:8px;padding-right:23px}
}

/* v0.14 — Prajñāstra-style location dropdowns and proper desktop width */
.location-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.location-field{margin:0}
.location-field select{width:100%;min-height:54px;border:1px solid #dacaa6;border-radius:13px;background:#fffdfa;color:var(--ink);padding:11px 40px 11px 13px;font-size:15px;font-weight:700;outline:none}
.location-field select:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(194,100,24,.12)}
@media (min-width:900px){
  main{width:min(100%,1280px)}
  .screen{padding:18px 28px 22px}
  #onboarding{gap:14px}
  #onboarding .hero-card{max-width:1180px;width:100%;margin:0 auto;padding:18px 24px}
  #onboarding .hero-card h2{font-size:23px}
  #onboarding .hero-card p{font-size:13px}
  .responsive-onboarding{width:min(100%,1080px);max-width:1080px;min-height:460px;padding:24px 34px;margin:0 auto}
  .mobile-step-title{font-size:25px;margin-bottom:22px}
  .dropdown-date-row{max-width:880px;margin:0 auto;grid-template-columns:.8fr 1.25fr 1.45fr;gap:18px}
  .dropdown-time-row{max-width:560px;gap:18px}
  .location-select-grid{max-width:920px;margin:18px auto 0}
  .segmented{max-width:720px;margin-left:auto;margin-right:auto}
  .selected-place{max-width:920px;margin:16px auto 2px}
  .mobile-step-actions{max-width:760px;width:100%;margin-left:auto!important;margin-right:auto!important}
  #displayName{max-width:720px;margin-left:auto;margin-right:auto}
  .onboarding-step[data-step="1"] .field{max-width:720px;width:100%;margin-left:auto;margin-right:auto}
}
@media (max-width:700px){
  .location-select-grid{grid-template-columns:1fr;gap:10px;margin-top:12px}
}
/* v0.15: Prajnastra engine/chart integration */
.jataka-small-chart{max-width:560px;margin:0 auto}.jataka-small-chart svg{display:block;width:100%;height:auto}.jataka-kala .calendar-combined-block{display:grid;gap:.55rem}.jataka-kala p{margin:0;line-height:1.65}.age-pill b{white-space:nowrap}@media(min-width:900px){.screen{max-width:1180px!important}.form-card.responsive-onboarding{max-width:1050px!important}.onboarding-step{max-width:940px;margin-inline:auto}.location-select-grid{grid-template-columns:1fr 1fr}.dropdown-date-row{grid-template-columns:.7fr 1.25fr 1.4fr}.dropdown-time-row{max-width:680px;margin-inline:auto}.dashboard-grid{max-width:1180px}}

/* v0.16 dashboard: scrollable results and recommendation/analysis pages */
#dashboard{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;display:block}
#dashboard.hidden{display:none!important}
#dashboard .welcome-block,#dashboard .card,#dashboard .dashboard-insights,#dashboard .analysis-page{max-width:1080px;margin-left:auto;margin-right:auto}
.dashboard-insights{display:grid;gap:14px;margin-top:14px}
.insight-card{padding:18px 20px}
.insight-card h3{margin:.35rem 0 .5rem;color:var(--night)}
.insight-card p{margin:0;line-height:1.65}
.gem-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.gem-grid>div{padding:14px;border:1px solid #e5d6b7;border-radius:14px;background:rgba(255,252,244,.8)}
.gem-grid h3{font-size:16px;margin:0 0 6px}.gem-grid p{font-weight:700;color:var(--deep)}
.gem-note{display:block;margin-top:12px;color:var(--muted);line-height:1.5}
.analysis-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.analysis-entry{border:1px solid #d9c59b;border-radius:18px;background:linear-gradient(145deg,#fffdf7,#f3ead7);padding:18px;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;color:var(--ink);box-shadow:0 8px 22px rgba(41,31,60,.07)}
.analysis-entry>span{grid-row:1/3;font-size:24px;color:var(--deep)}.analysis-entry b{font-size:16px}.analysis-entry small{color:var(--muted)}
.analysis-page{display:grid;gap:14px}.analysis-page.hidden{display:none!important}
.analysis-back{justify-self:start;border:1px solid #d9c59b;background:#fffaf0;color:var(--deep);border-radius:999px;padding:10px 16px;font-weight:800}
.analysis-result{padding:20px}.analysis-result h2{margin:.35rem 0 .8rem}.analysis-result>p{line-height:1.65}
.result-list ul,.body-zone ul{margin:10px 0 0;padding-left:1.4rem;columns:2;column-gap:36px}.result-list li,.body-zone li{break-inside:avoid;margin:0 0 7px;line-height:1.45}
.body-zone{padding:14px 0;border-top:1px solid #eadfc8}.body-zone:first-child{border-top:0}.body-zone h3{margin:0;color:var(--deep)}
.empty-result{color:var(--muted);font-style:italic}.medical-note{text-align:center;color:var(--muted);font-size:12px;padding:0 12px}
.caution-list{display:grid;gap:14px}.caution-period{border:1px solid #e0c99b;border-radius:16px;padding:16px;background:#fffaf0}.caution-period h3{margin:0 0 10px;color:#9e3f24}.caution-period p{margin:7px 0;line-height:1.65}.calculating{color:var(--muted)}
@media(max-width:700px){
  .gem-grid,.analysis-entry-grid{grid-template-columns:1fr}
  .result-list ul,.body-zone ul{columns:1}
  #dashboard{padding-left:10px!important;padding-right:10px!important}
  .insight-card,.analysis-result{padding:16px}
}


/* v0.17 profile body metrics */
.body-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.body-metrics-grid .field{margin-bottom:0}
.gem-carat{display:block;margin-top:9px;color:#9e3f24;font-size:15px}
.rice-donation{margin-top:12px!important;padding:11px 13px;border-radius:12px;background:#fff5d9;color:var(--deep);font-weight:800}
.profile-dialog .dialog-inner{width:min(92vw,460px)}
.profile-dialog input[readonly]{background:#f2ecdf;color:#766d5d}
.profile-name-display{font-weight:800;color:var(--deep);font-size:18px;margin-top:-4px}
.profile-help{font-size:12px;color:var(--muted);line-height:1.55}
@media(max-width:520px){.body-metrics-grid{grid-template-columns:1fr 1fr;gap:10px}.body-metrics-grid input{min-width:0}}

/* v0.18 */
.bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.bottom-nav button{min-width:0;font-size:clamp(.68rem,2.6vw,.86rem)}
#profileHeightCm[readonly]{opacity:.72;background:rgba(77,64,54,.08);cursor:not-allowed}


/* v0.19 avatar, profile actions, and dashboard polish */
.welcome-block{position:relative;padding-right:104px}
.dashboard-avatar-button{position:absolute;top:12px;right:14px;border:0;background:transparent;padding:0;display:grid;justify-items:center;gap:4px;color:var(--muted);font-size:10px;cursor:pointer}
.dashboard-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #e8c980;box-shadow:0 8px 22px rgba(30,20,50,.2);background:#2a2045}
.dashboard-avatar-button span{background:rgba(255,250,240,.88);padding:2px 7px;border-radius:999px}
.profile-avatar-editor{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;margin:8px 0 18px}
.profile-avatar-preview{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid #e1bf71;background:#2a2045}
.profile-avatar-editor small{display:block;margin-top:7px;color:var(--muted);line-height:1.35}
.avatar-upload-button{display:inline-block;border:1px solid #cfaa60;background:#fff9ec;color:var(--deep);padding:8px 11px;border-radius:10px;font-weight:800;font-size:12px;cursor:pointer}
.add-profile-in-profile{margin-top:10px}
@media(max-width:520px){.welcome-block{padding-right:88px}.dashboard-avatar{width:64px;height:64px}.profile-avatar-editor{grid-template-columns:72px 1fr}.profile-avatar-preview{width:68px;height:68px}}

/* v0.20 timezone, age emphasis, Venus-Saturn caution */
.age-pill{display:inline-flex!important;align-items:center;gap:9px;margin-top:12px;padding:10px 16px!important;border:1px solid #d7b66b;border-radius:999px;background:linear-gradient(135deg,#fff7dd,#f4dfaa);color:var(--deep);font-size:15px!important;font-weight:800;box-shadow:0 6px 18px rgba(120,76,18,.12)}
.age-pill b{font-size:clamp(18px,3.4vw,24px)!important;color:#8e301f;letter-spacing:.01em}
.caution-emotional{background:linear-gradient(145deg,#fff8fb,#f8edf3);border-color:#d9b5c6}
.caution-emotional h3{color:#7d3155}

/* v0.21 natal divisions and caution priority */
.natal-division-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.natal-division-grid>div{padding:11px 12px;border:1px solid rgba(183,120,36,.28);border-radius:12px;background:rgba(255,255,255,.035)}
.natal-division-grid span{display:block;font-size:.78rem;opacity:.72;margin-bottom:3px}
.natal-division-grid b{display:block;line-height:1.35}
.caution-saturn-asc{border-width:2px}
@media(max-width:560px){.natal-division-grid{grid-template-columns:1fr}}

/* v0.22: natal data table and teacher contact */
.dashboard-top-actions{position:absolute;top:16px;right:16px;display:flex;align-items:flex-start;gap:10px;z-index:3}
.dashboard-top-actions .dashboard-avatar-button{position:static}
.contact-teacher-button{border:1px solid rgba(183,120,36,.55);background:rgba(255,248,233,.96);color:#6d4311;border-radius:999px;padding:10px 14px;font-weight:800;box-shadow:0 6px 18px rgba(45,28,12,.12);cursor:pointer;white-space:nowrap}
.contact-option{display:block;text-decoration:none;border:1px solid rgba(183,120,36,.3);border-radius:14px;padding:14px 16px;margin:10px 0;color:inherit;background:#fffaf0;line-height:1.55}
.contact-option strong{font-size:1.05rem}
.contact-option.line{background:#f1fff3}
.natal-data-module{border:1px solid rgba(183,120,36,.25);border-radius:16px;overflow:hidden;background:#fffdf8}
.natal-data-module>summary{list-style:none;cursor:pointer;padding:15px 17px;font-weight:800;color:#5b3410;display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(180deg,#fff8e8,#f8ecd3)}
.natal-data-module>summary::-webkit-details-marker{display:none}
.natal-data-module>summary span{font-size:.78rem;font-weight:600;opacity:.65}
.natal-table-wrap{overflow-x:auto}
.natal-data-table{width:100%;border-collapse:collapse;table-layout:fixed}
.natal-data-table th,.natal-data-table td{padding:11px 13px;border-top:1px solid rgba(91,52,16,.12);vertical-align:top;text-align:left;line-height:1.55}
.natal-data-table th{width:31%;color:#6d4311;background:rgba(248,236,211,.38);font-weight:800}
.natal-data-table td{word-break:break-word}
@media (max-width:640px){
  .dashboard-top-actions{top:10px;right:10px;gap:6px}
  .contact-teacher-button{padding:8px 10px;font-size:.78rem}
  .dashboard-top-actions .dashboard-avatar-button{transform:scale(.9);transform-origin:top right}
  .natal-data-table th{width:35%;font-size:.84rem}
  .natal-data-table td{font-size:.88rem}
}


/* v0.24: balanced กาลชะตา grid and pinned caution */
.natal-data-module>summary{position:relative}
.natal-data-module>summary>span{font-size:1rem;font-weight:900;opacity:1}
.natal-data-module>summary i{width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease;margin-right:4px}
.natal-data-module[open]>summary i{transform:rotate(225deg) translate(-2px,-2px)}
.natal-card-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;gap:10px;padding:12px;background:#fffdf8;align-items:stretch}
.natal-data-card{grid-column:span 3;min-width:0;min-height:112px;padding:12px 13px;border:1px solid rgba(183,120,36,.25);border-radius:13px;background:linear-gradient(145deg,#fffdf8,#faf1df);display:flex;flex-direction:column;justify-content:flex-start}
.natal-data-card.natal-span-2{grid-column:span 6;min-height:128px}
.natal-data-card.natal-core{grid-column:span 3;min-height:116px}
.natal-data-card.natal-calc{grid-column:span 4;min-height:96px;justify-content:center;text-align:center}
.natal-data-card>span{display:block;color:#77501d;font-size:.77rem;font-weight:800;margin-bottom:5px}
.natal-data-card>strong{display:block;color:var(--ink);font-size:.94rem;line-height:1.5;overflow-wrap:anywhere}
.natal-data-card small{display:block;font-size:.79rem;font-weight:600;color:var(--muted);margin-top:4px;line-height:1.45}
.natal-data-card.natal-calc>strong{font-size:1.08rem;color:#7b341e}
.caution-saturn-asc{position:relative;box-shadow:0 8px 22px rgba(102,72,32,.12)}
.caution-saturn-asc::before{content:"📌";position:absolute;top:11px;right:13px;font-size:1.05rem}
@media(max-width:900px){
  .natal-data-card.natal-span-2{grid-column:span 12}
  .natal-data-card.natal-core{grid-column:span 6}
  .natal-data-card.natal-calc{grid-column:span 4}
}
@media(max-width:640px){
  .natal-card-grid{gap:8px;padding:9px}
  .natal-data-card{padding:10px;min-height:104px}
  .natal-data-card.natal-span-2{grid-column:span 12;min-height:auto}
  .natal-data-card.natal-core{grid-column:span 6;min-height:112px}
  .natal-data-card.natal-calc{grid-column:span 4;min-height:88px;padding:8px 5px}
  .natal-data-card>strong{font-size:.86rem}
  .natal-data-card small{font-size:.74rem}
  .natal-data-card.natal-calc>span{font-size:.7rem}
  .natal-data-card.natal-calc>strong{font-size:.95rem}
}


/* v0.27: auspicious timing, grouped health results, live timestamp */
.bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.bottom-nav button{padding-left:3px;padding-right:3px}
.organ-group-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.organ-group{border:1px solid #e4d3b2;border-radius:14px;padding:13px 14px;background:#fffaf0}
.organ-group h3,.organ-group h4{margin:0 0 7px;color:#6d4311;font-size:.94rem}
.organ-group p{margin:0;line-height:1.65}
.organ-group-list.compact{margin-top:10px}
.good-day-help{padding:12px 14px;border-radius:13px;background:#fff7df;color:#5a4320}
.nearest-good-day{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px;border:1px solid #d5b66f;border-radius:16px;background:linear-gradient(135deg,#fff9e8,#f5dfaa);margin:12px 0}
.nearest-good-day strong{font-size:clamp(1.02rem,3vw,1.3rem);color:#713c15}
.nearest-good-day span{font-weight:900;color:#9e3f24;white-space:nowrap}
.good-day-all summary{cursor:pointer;font-weight:900;color:#6d4311;padding:9px 0}
.good-day-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.good-day-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #ead9b7;border-radius:11px;background:#fffdf8}
.good-day-row b{color:#9e3f24;white-space:nowrap}.good-day-row.past{opacity:.48}
.lakshmi-current-time{font-weight:900;color:#8e301f;margin-bottom:12px!important}
.lakshmi-periods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lakshmi-period{position:relative;border:1px solid #e1d0ad;border-radius:14px;padding:13px;background:#fffdf8;overflow:hidden}
.lakshmi-period-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.lakshmi-period time{display:block;font-weight:900;color:#4e391c}
.lakshmi-period p{margin:0;line-height:1.55}
.lakshmi-status-badge,.current-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:900;line-height:1.2}
.tone-excellent{border-left:6px solid #237a3b;background:#f0faF3}.tone-excellent .lakshmi-status-badge{background:#237a3b;color:#fff}
.tone-good{border-left:6px solid #62a64b;background:#f5fbf0}.tone-good .lakshmi-status-badge{background:#dff2d7;color:#245b25;border:1px solid #92c683}
.tone-stay{border-left:6px solid #d78319;background:#fff8e9}.tone-stay .lakshmi-status-badge{background:#fff0c9;color:#8b4b00;border:1px solid #e6b45e}
.tone-bad{border-left:6px solid #b9362f;background:#fff2f1}.tone-bad .lakshmi-status-badge{background:#b9362f;color:#fff}
.tone-hide{border-left:6px solid #72529a;background:#f7f2fb}.tone-hide .lakshmi-status-badge{background:#e8dcf3;color:#513270;border:1px solid #b59acb}
.lakshmi-period.current{border-width:3px;box-shadow:0 0 0 3px rgba(183,120,36,.16),0 10px 25px rgba(75,46,12,.18);transform:translateY(-1px)}
.current-badge{margin-top:10px;background:#2f2417;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.16)}
@media(max-width:700px){
  .bottom-nav button{font-size:.62rem}
  .organ-group-list,.good-day-list,.lakshmi-periods{grid-template-columns:1fr}
  .nearest-good-day{align-items:flex-start;flex-direction:column;gap:7px}
}

.password-rule{margin:2px 0 12px;color:#675a48;font-size:12px;text-align:center}.password-rule::before{content:"🔐 ";}
/* Jataka local overrides */
.ascendant-notice{
  position:relative;
  overflow:hidden;
  margin:22px 0 18px;
  padding:20px 20px 18px;
  border:2px solid #b8862f;
  border-radius:18px;
  background:linear-gradient(145deg,#fff8df 0%,#f5e4b8 100%);
  box-shadow:0 10px 26px rgba(91,45,130,.14),0 0 0 4px rgba(184,134,47,.10);
  color:#3d2b18;
  text-align:left;
  line-height:1.72;
}
.ascendant-notice::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:linear-gradient(#6b367f,#b8862f);
}
.ascendant-notice-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 12px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(113,73,22,.22);
}
.ascendant-notice-icon{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#5b2d82;
  color:#fff;
  font:900 21px/1 system-ui,sans-serif;
  box-shadow:0 4px 10px rgba(91,45,130,.28);
}
.ascendant-notice-head strong{
  display:block;
  color:#48205f;
  font-size:1.12rem;
  line-height:1.35;
  letter-spacing:.01em;
}
.ascendant-notice p{margin:0;font-size:.98rem}
.ascendant-notice p+p{margin-top:10px}
.ascendant-notice b{color:#522668;font-weight:850}
.ascendant-notice-result{
  padding:10px 12px;
  border-radius:11px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(113,73,22,.16);
  font-weight:750;
  color:#5c3716;
}
@media (max-width:560px){
  .ascendant-notice{margin:18px 0 16px;padding:17px 15px 15px 18px;border-radius:15px}
  .ascendant-notice-head{align-items:flex-start;gap:9px;margin-bottom:10px;padding-bottom:9px}
  .ascendant-notice-icon{flex-basis:30px;width:30px;height:30px;font-size:18px}
  .ascendant-notice-head strong{font-size:1rem}
  .ascendant-notice p{font-size:.9rem;line-height:1.65}
  .ascendant-notice-result{padding:9px 10px}
}

/* v0.33 — mobile scrolling fix for confirmation and long content screens */
main{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.screen{
  height:auto!important;
  min-height:100%;
  overflow:visible!important;
}
#onboarding{
  height:100%!important;
  min-height:0;
  overflow:hidden!important;
}
#confirmScreen{
  height:auto!important;
  min-height:100%;
  overflow:visible!important;
  padding-bottom:calc(36px + env(safe-area-inset-bottom))!important;
}
#confirmScreen .confirm-card{
  margin-bottom:24px;
}
@media(max-width:520px){
  #confirmScreen{padding:10px 10px calc(42px + env(safe-area-inset-bottom))!important}
  #confirmScreen .confirm-card{padding:18px 14px}
  #confirmScreen .summary-row{align-items:flex-start;gap:10px}
  #confirmScreen .summary-row span{flex:0 0 31%;font-size:14px}
  #confirmScreen .summary-row b{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
  #confirmScreen .ascendant-notice{margin-left:0;margin-right:0}
  #confirmScreen .actions{position:relative;grid-template-columns:1fr;gap:9px}
  #confirmScreen .actions button{width:100%}
}

/* v0.33 — confirmation notice placed before chart details */
#confirmScreen .ascendant-notice{margin-top:14px;margin-bottom:20px}
#confirmScreen .ascendant-notice + .summary-list{margin-top:0}
@media(max-width:520px){
  #confirmScreen .ascendant-notice{margin-top:12px;margin-bottom:16px;padding:15px 14px 14px 17px}
  #confirmScreen .ascendant-notice-head{margin-bottom:8px;padding-bottom:8px}
  #confirmScreen .ascendant-notice p{line-height:1.58}
}
