/* NOD v0.9 — Native Feel. Final visual layer; no business logic. */
:root{
  --native-bg:#090a0b;
  --native-surface:#111315;
  --native-surface-2:#17191c;
  --native-hairline:rgba(255,255,255,.075);
  --native-text:#f5f4ef;
  --native-muted:#8c9096;
  --native-accent:#d9ff67;
  --native-ease:cubic-bezier(.22,.8,.2,1);
}
html,body{background:var(--native-bg);}
body.premium-v08{background:var(--native-bg);color:var(--native-text);}
.app-shell{max-width:620px;padding-bottom:calc(92px + var(--safe-bottom));}
.content{padding:4px 20px 34px;}

/* Header: quieter, closer to a native navigation bar. */
.topbar{padding:calc(12px + var(--safe-top)) 20px 8px;background:rgba(9,10,11,.84);backdrop-filter:saturate(160%) blur(28px);-webkit-backdrop-filter:saturate(160%) blur(28px);border-bottom:1px solid rgba(255,255,255,.025);}
.topbar .eyebrow{display:none}.topbar h1{font-size:34px;font-weight:760;letter-spacing:-.065em;margin:0;}
.icon-button,.close-button,.back-button{border:0;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);}
.icon-button{width:40px;height:40px}.nav-icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.capture-nav .nav-icon{width:25px;height:25px;stroke-width:2}

/* Home: editorial, not dashboard. */
.hero{padding:22px 2px 18px}.premium-date{font-size:12px;color:var(--native-muted);text-transform:capitalize;letter-spacing:.01em;margin-bottom:14px}.hero-kicker{font-size:13px;color:var(--native-muted);margin-bottom:9px}.hero h2{font-size:clamp(39px,11vw,56px);font-weight:680;line-height:.98;letter-spacing:-.066em;max-width:10.5ch}.hero p{font-size:14px;line-height:1.58;color:#a8abb0;max-width:42ch;margin-top:16px}
.native-safety-line{margin:-7px 2px 18px;font-size:10px;color:#747a80;letter-spacing:.01em}.native-safety-line::before{content:'●';font-size:7px;color:#8fa54d;margin-right:7px}.native-safety-line.is-warning{color:#d4aa75}.native-safety-line.is-warning::before{color:#d4aa75}
.native-recovery-banner{display:grid;gap:3px;margin:8px 0 16px;padding:12px 14px;border-radius:16px;background:rgba(217,255,103,.08);box-shadow:inset 0 0 0 1px rgba(217,255,103,.12)}.native-recovery-banner strong{font-size:12px}.native-recovery-banner span{font-size:10px;color:var(--native-muted);line-height:1.4}
.focus-card{border:0;border-radius:26px;padding:20px;margin:8px 0 24px;background:linear-gradient(155deg,rgba(217,255,103,.13),rgba(23,25,28,.96) 58%);box-shadow:inset 0 0 0 1px rgba(217,255,103,.09),0 18px 60px rgba(0,0,0,.23)}.focus-card strong{font-size:22px;font-weight:700}.focus-label{color:#acb784}.focus-card small{color:var(--native-accent)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 28px;border-top:1px solid var(--native-hairline);border-bottom:1px solid var(--native-hairline)}.stat{background:transparent;border:0;border-radius:0;min-height:84px;padding:15px 12px 13px}.stat+.stat{border-left:1px solid var(--native-hairline)}.stat strong{font-size:25px;font-weight:650}.stat span{font-size:10px;color:var(--native-muted)}

/* Lists: remove card soup. */
.section-head{margin:28px 2px 8px}.section-head h3{font-size:17px;font-weight:650}.section-head span,.page-count{color:var(--native-muted)}
.stack,.person-grid{gap:0;border-top:1px solid var(--native-hairline)}
.card,.memory-card,.person-card,.promise-card{border:0;border-bottom:1px solid var(--native-hairline);border-radius:0;background:transparent;padding:16px 2px;box-shadow:none}.memory-card.compact{padding:14px 2px}.card:active,.memory-card:active,.person-card:active,.promise-card:active{background:rgba(255,255,255,.025);transform:none}.avatar{border:0;background:#181b1e;border-radius:13px;color:#d6d8da}.avatar-xl{border-radius:20px}.card h4{font-size:15px;font-weight:660}.card p{font-size:12.5px;color:#95999f}.chevron{font-size:19px;color:#555b61}.pill{min-height:23px;padding:4px 8px;background:transparent;border:1px solid rgba(255,255,255,.07);font-size:10px}.pill.accent{background:rgba(217,255,103,.07);border-color:rgba(217,255,103,.11)}
.page-heading{margin:24px 0 12px}.list-title{font-size:39px;font-weight:680;letter-spacing:-.06em}.page-count{background:transparent;border:0;font-size:11px;padding:0}
.empty{border:0;background:rgba(255,255,255,.025);border-radius:22px;padding:30px 22px}

/* Native tab bar, not a floating web capsule. */
.bottom-nav{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;height:calc(72px + var(--safe-bottom));padding:7px max(12px,calc((100vw - 620px)/2 + 12px)) var(--safe-bottom);grid-template-columns:1fr 1fr 1fr 1fr 1fr;background:rgba(12,13,15,.9);border-top:1px solid rgba(255,255,255,.07);border-radius:0;box-shadow:none;backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px)}.bottom-nav.is-hidden{transform:translateY(105%)}.nav-item,.capture-nav{width:auto;height:auto;min-height:54px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#73787e;display:grid;grid-template-rows:25px 13px;place-items:center;gap:2px;padding:4px 6px}.nav-item span,.capture-nav span{font-size:0}.nav-item small,.capture-nav small{display:block;font-size:9px;font-weight:570;letter-spacing:.01em}.nav-item.is-active{color:var(--native-accent)}.capture-nav{color:#a9adb1;font-size:0}.capture-nav::after{content:'Tambah';font-size:9px}.capture-nav:active,.nav-item:active{transform:scale(.95)}

/* Details: grouped native surfaces. */
.detail-top{padding:8px 0 18px}.detail-top h2{font-size:35px;font-weight:680;letter-spacing:-.055em}.detail-subtitle{font-size:11px}.detail-hero{border:0;border-radius:25px;background:var(--native-surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);padding:18px}.detail-section,.relationship-panel,.promise-controls,.promise-intel-section{border:0;border-radius:22px;background:var(--native-surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.detail-section{padding:17px;margin-top:10px}.detail-quote{font-size:17px;line-height:1.55}.action-row{margin-top:12px}
.segmented-summary{background:transparent;border:0;border-top:1px solid var(--native-hairline);border-bottom:1px solid var(--native-hairline);border-radius:0;padding:0;gap:0}.segmented-summary span{padding:13px 4px}.segmented-summary span+span{border-left:1px solid var(--native-hairline)}
.promise-radar{margin:12px 0 22px}.promise-radar-grid{gap:1px;background:var(--native-hairline);border-radius:20px;overflow:hidden}.radar-stat{border:0;border-radius:0;background:#111315;padding:12px 8px}.promise-intel-section{margin-top:10px}.promise-chip{background:rgba(255,255,255,.035)}

/* Forms/sheets */
.sheet,.relationship-dialog{width:min(100%,620px);max-height:94svh;border:0;border-radius:30px 30px 0 0;background:#101214;padding:10px 20px calc(22px + var(--safe-bottom));box-shadow:0 -24px 70px rgba(0,0,0,.38)}.sheet::backdrop,.relationship-dialog::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.sheet[open],.relationship-dialog[open]{animation:nativeSheetIn .24s var(--native-ease)}@keyframes nativeSheetIn{from{opacity:.65;transform:translateY(24px)}to{opacity:1;transform:none}}
input,textarea,select,.capture-details select,.promise-controls select{border:0;background:#191c1f;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);padding:14px;color:var(--native-text)}input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 1px rgba(217,255,103,.33),0 0 0 3px rgba(217,255,103,.055);outline:0}.primary-button,.promise-save{border-radius:15px;background:var(--native-accent);font-weight:760}.secondary-button{background:#191c1f;border:0}.danger-button{border:0}
.capture-details{border:0;background:#131619}.capture-tool-card{border:0;background:#191c1f}.draft-banner{border:0}
.backup-banner{border:0;background:#121517;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

/* One smooth content transition instead of staggered web animations. */
#app.native-view-in{animation:nativeViewIn .18s var(--native-ease)}@keyframes nativeViewIn{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
html.native-refreshing body{opacity:.35;transform:scale(.995);transition:opacity .12s ease,transform .12s ease}
button{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){#app.native-view-in,.sheet[open],.relationship-dialog[open]{animation:none!important}html.native-refreshing body{transition:none}}