*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#faf9f7;--surface:#fff;--sunken:#f3f2f0;--ink:#1a1a1a;--charcoal:#37352f;--slate:#5d5b54;--steel:#787671;--mist:#b4b1ab;--hair:#e5e3df;--hair-light:#eeedea;--lavender:#7c6dd8;--green:#3a9d6a;--blue:#3b82c4;--amber:#c98a1e;--rose:#d15a8a;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--ease:cubic-bezier(.25, .1, .25, 1)}body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;font-size:15px;line-height:1.5}#app{max-width:480px;margin:0 auto;padding:0 20px 100px}.header{background:var(--bg);z-index:10;justify-content:space-between;align-items:flex-end;padding:36px 0 28px;display:flex;position:sticky;top:0}.logo{letter-spacing:-.03em;color:var(--ink);font-size:20px;font-weight:700;line-height:1}.subtitle{color:var(--mist);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-size:11px;font-weight:500}.header-nav{gap:1px;display:flex}.btn-nav{border:1px solid var(--hair);background:var(--surface);width:30px;height:30px;color:var(--slate);cursor:pointer;transition:all .15s var(--ease);justify-content:center;align-items:center;font-size:15px;display:flex}.btn-nav:first-child{border-radius:6px 0 0 6px}.btn-nav:last-child{border-left:0;border-radius:0 6px 6px 0}.btn-nav:hover{border-color:var(--slate);color:var(--ink)}.hero-score{margin-bottom:32px}.hero-score-row{align-items:center;gap:20px;display:flex}.hero-score-number{letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);min-width:90px;font-size:56px;font-weight:700;line-height:1}.hero-score-meta{flex:1}.hero-score-bar-track{background:var(--hair-light);border-radius:3px;height:6px;margin-bottom:8px;overflow:hidden}.hero-score-bar-fill{background:var(--ink);height:100%;transition:width .6s var(--ease);border-radius:3px;width:0}.hero-score-label{color:var(--steel);font-size:13px;font-weight:400}.section{margin-bottom:28px}.section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--mist);margin-bottom:12px;font-size:11px;font-weight:600}.section-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.pillar-list{background:var(--surface);border:1px solid var(--hair);border-radius:12px;flex-direction:column;gap:2px;display:flex;overflow:hidden}.pillar-row{cursor:default;transition:background .15s var(--ease);align-items:center;gap:14px;padding:14px 16px;display:flex}.pillar-row:hover{background:var(--sunken)}.pillar-row+.pillar-row{border-top:1px solid var(--hair-light)}.pillar-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.pillar-name{color:var(--charcoal);flex:1;font-size:14px;font-weight:500}.pillar-detail{color:var(--mist);text-align:right;white-space:nowrap;text-overflow:ellipsis;max-width:160px;font-size:11px;overflow:hidden}.pillar-score-val{font-variant-numeric:tabular-nums;text-align:right;min-width:28px;font-size:14px;font-weight:600}.pillar-bar{background:var(--hair-light);border-radius:2px;flex-shrink:0;width:48px;height:3px;overflow:hidden}.pillar-bar-fill{height:100%;transition:width .6s var(--ease);border-radius:2px;width:0}.pillar-row[data-pillar=keimanan] .pillar-dot{background:var(--lavender)}.pillar-row[data-pillar=kesehatan] .pillar-dot{background:var(--green)}.pillar-row[data-pillar=pengetahuan] .pillar-dot{background:var(--blue)}.pillar-row[data-pillar=ekonomi] .pillar-dot{background:var(--amber)}.pillar-row[data-pillar=sosial] .pillar-dot{background:var(--rose)}.pillar-row[data-pillar=keimanan] .pillar-bar-fill{background:var(--lavender)}.pillar-row[data-pillar=kesehatan] .pillar-bar-fill{background:var(--green)}.pillar-row[data-pillar=pengetahuan] .pillar-bar-fill{background:var(--blue)}.pillar-row[data-pillar=ekonomi] .pillar-bar-fill{background:var(--amber)}.pillar-row[data-pillar=sosial] .pillar-bar-fill{background:var(--rose)}.pillar-row[data-pillar=keimanan] .pillar-score-val{color:var(--lavender)}.pillar-row[data-pillar=kesehatan] .pillar-score-val{color:var(--green)}.pillar-row[data-pillar=pengetahuan] .pillar-score-val{color:var(--blue)}.pillar-row[data-pillar=ekonomi] .pillar-score-val{color:var(--amber)}.pillar-row[data-pillar=sosial] .pillar-score-val{color:var(--rose)}.range-tabs{background:var(--sunken);border-radius:6px;gap:0;padding:2px;display:flex}.range-tab{color:var(--steel);cursor:pointer;transition:all .15s var(--ease);background:0 0;border:0;border-radius:4px;padding:4px 10px;font-family:inherit;font-size:11px;font-weight:500}.range-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0000000f}.trend-chart-wrap{background:var(--surface);border:1px solid var(--hair);border-radius:12px;height:200px;padding:16px}.radar-wrap{background:var(--surface);border:1px solid var(--hair);border-radius:12px;max-width:300px;margin:0 auto;padding:20px}.fab{background:var(--ink);width:48px;height:48px;color:var(--surface);cursor:pointer;transition:all .2s var(--ease);z-index:20;border:0;border-radius:12px;justify-content:center;align-items:center;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014}.fab:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000029,0 4px 12px #0000001a}.fab:active{transform:scale(.94)}.modal-overlay{-webkit-backdrop-filter:blur(12px);z-index:30;background:#1a1a1a59;justify-content:center;align-items:flex-end;display:none;position:fixed;inset:0}.modal-overlay.open{display:flex}.modal{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:88vh;padding:24px 20px 32px;overflow-y:auto;box-shadow:0 -8px 40px #00000014}.modal-head{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-head h2{letter-spacing:-.02em;font-size:17px;font-weight:600}.btn-close{border:1px solid var(--hair);background:var(--surface);cursor:pointer;width:28px;height:28px;color:var(--slate);transition:all .15s var(--ease);border-radius:6px;justify-content:center;align-items:center;display:flex}.btn-close:hover{border-color:var(--slate);color:var(--ink)}.form-pillars{flex-direction:column;gap:16px;margin-bottom:20px;display:flex}.form-pillar{background:var(--sunken);border-radius:10px;padding:14px 16px}.form-pillar-head{border-bottom:1px solid var(--hair);justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;display:flex}.form-pillar-title{color:var(--charcoal);align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.form-pillar-title .dot{border-radius:50%;width:6px;height:6px}.form-pillar-pts{font-variant-numeric:tabular-nums;color:var(--mist);font-size:14px;font-weight:700}.form-questions{flex-direction:column;gap:14px;display:flex}.q-item label{color:var(--steel);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.q-counter{align-items:center;gap:12px;display:flex}.q-counter-btn{border:1px solid var(--hair);background:var(--surface);cursor:pointer;width:30px;height:30px;color:var(--slate);transition:all .15s var(--ease);border-radius:6px;justify-content:center;align-items:center;font-family:inherit;font-size:15px;font-weight:500;display:flex}.q-counter-btn:hover{border-color:var(--charcoal);color:var(--ink)}.q-counter-btn:active{transform:scale(.9)}.q-counter-val{font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-.03em;min-width:20px;font-size:18px;font-weight:700}.q-counter-hint{color:var(--mist);font-size:11px}.q-pills{flex-wrap:wrap;gap:4px;display:flex}.q-pill{border:1px solid var(--hair);background:var(--surface);color:var(--slate);cursor:pointer;transition:all .15s var(--ease);white-space:nowrap;border-radius:6px;padding:6px 10px;font-family:inherit;font-size:12px;font-weight:500}.q-pill:hover{border-color:var(--slate);color:var(--charcoal)}.q-pill.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}.q-toggle{border:1px solid var(--hair);background:var(--surface);color:var(--slate);cursor:pointer;transition:all .15s var(--ease);border-radius:6px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:500}.q-toggle:hover{border-color:var(--slate)}.q-toggle.active{color:#2d7d54;border-color:var(--green);background:#e4f5ec}.q-text{border:1px solid var(--hair);background:var(--surface);width:100%;color:var(--ink);transition:all .15s var(--ease);border-radius:6px;padding:8px 10px;font-family:inherit;font-size:13px}.q-text:focus{border-color:var(--charcoal);outline:none;box-shadow:0 0 0 3px #1a1a1a0d}.q-text::placeholder{color:var(--mist)}.form-notes{margin-bottom:16px}.form-notes label{color:var(--steel);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-notes textarea{border:1px solid var(--hair);resize:vertical;background:var(--surface);width:100%;color:var(--ink);transition:all .15s var(--ease);border-radius:6px;padding:10px 12px;font-family:inherit;font-size:13px;line-height:1.5}.form-notes textarea:focus{border-color:var(--charcoal);outline:none;box-shadow:0 0 0 3px #1a1a1a0d}.form-notes textarea::placeholder{color:var(--mist)}.btn-save{background:var(--ink);width:100%;color:var(--surface);cursor:pointer;transition:all .15s var(--ease);letter-spacing:-.01em;border:0;border-radius:8px;padding:11px;font-family:inherit;font-size:14px;font-weight:600}.btn-save:hover{opacity:.85}.btn-save:active{transform:scale(.98)}@media (width>=768px){#app{max-width:520px}.modal{border-radius:20px;margin-bottom:24px}}