:root{ /* Radius kartu/tombol/chip di seluruh app. Variabel ini dipanggil di 118 tempat tapi tidak pernah didefinisikan di :root manapun (harusnya datang dari css/cips-accessibility-foundation.css yang hilang dari build), sehingga browser fallback ke 0px (sudut tajam/lancip) di semua kartu. */ --cips-radius-sm: 10px; --cips-radius-md: 14px; --cips-radius-lg: 20px; --bg: #020203; --surface-1: #181B24; --surface-2: #20242F; --hairline: #2B303C; --text-primary: #F1F3F9; --text-muted: #A3ACC0; --text-shadow-ambient: rgba(0,0,0,0.4); --habit: #96FFBE; --habit-dim: rgba(150,255,190,0.20); --ibadah: #FFD68C; --ibadah-dim: rgba(255,214,140,0.20); --kesehatan: #82CDFF; --kesehatan-dim: rgba(130,205,255,0.20); /* Token warna Meal & Gym (redesain 2026-08-13) -- pecahan dari --kesehatan flat lama, khusus dipakai elemen .mg-*. --kesehatan sendiri TETAP ada (masih dipakai modul Kesehatan non-mg lain: .health-hero, dashboard kategori, dll -- di luar cakupan redesain ini). */ --meal-lime: #CFE23D; --meal-lime-dim: rgba(207,226,61,0.16); --gym-violet: #A855F7; --gym-violet-dim: rgba(168,85,247,0.18); --financial: #FFAA78; --financial-dim: rgba(255,170,120,0.20); --settings: #C3A6FF; --settings-dim: rgba(195,166,255,0.20); --danger: #FF5C5C; --danger-dim: rgba(255,92,92,0.20); --warning: #E0A100; --warning-dim: rgba(224,161,0,0.08); /* Token warna TEKS terpisah dari warna aksen dasar (item #9 — audit kontras WCAG AA). Di tema gelap nilainya identik dengan warna aksen (tidak ada perubahan visual). Warna aksen dasar (--habit dkk) tetap dipakai apa adanya untuk background/border/glow/ikon dekoratif yang sudah punya kontras cukup terhadap surface gelap/terang; token -text ini KHUSUS dipakai di elemen yang warna aksennya jadi warna teks langsung, karena versi pastel aslinya gagal kontras 4.5:1 di atas surface terang. */ --habit-text: var(--habit); --ibadah-text: var(--ibadah); --kesehatan-text: var(--kesehatan); --meal-lime-text: var(--meal-lime); --gym-violet-text: var(--gym-violet); --financial-text: var(--financial); --settings-text: var(--settings); --danger-text: var(--danger); --warning-text: var(--warning); --shadow-ambient: rgba(150,255,190,0.14); --ease-premium: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --glass-blur: blur(18px); --glass-border: rgba(255,255,255,0.08); --glass-surface: rgba(255,255,255,0.035); /* Token baru (item lama audit -- hex/rgba hardcoded). Ditambahkan HANYA untuk nilai yang benar-benar berulang >=2x di styles.css (dicek lewat skrip, bukan tebakan manual), supaya token ini betulan mengurangi duplikasi -- bukan sekadar dibungkus var() tanpa manfaat. Nilai warna SAMA PERSIS dengan sebelumnya, murni penamaan ulang lewat custom property, tidak ada perubahan tampilan. Skala overlay hitam/putih (dipakai lintas shadow/glow/border/glass di banyak komponen berbeda): */ --cips-overlay-black-08: rgba(0,0,0,0.08); --cips-overlay-black-35: rgba(0,0,0,0.35); --cips-overlay-black-40: rgba(0,0,0,0.4); --cips-overlay-black-45: rgba(0,0,0,0.45); --cips-overlay-black-50: rgba(0,0,0,0.5); --cips-overlay-black-55: rgba(0,0,0,0.55); --cips-overlay-white-03: rgba(255,255,255,0.03); --cips-overlay-white-035: rgba(255,255,255,0.035); --cips-overlay-white-04: rgba(255,255,255,0.04); --cips-overlay-white-05: rgba(255,255,255,0.05); --cips-overlay-white-06: rgba(255,255,255,0.06); --cips-overlay-white-08: rgba(255,255,255,0.08); --cips-overlay-white-10: rgba(255,255,255,0.1); --cips-overlay-white-12: rgba(255,255,255,0.12); --cips-overlay-white-16: rgba(255,255,255,0.16); --cips-overlay-white-18: rgba(255,255,255,0.18); --cips-overlay-white-35: rgba(255,255,255,0.35); --cips-overlay-white-95: rgba(255,255,255,0.95); /* Warna teks-di-atas-aksen & varian gradient tint/shade (dipakai badge ikon Kesehatan/Financial, dan teks di atas chip Habit/Ibadah/Financial yang warna latarnya pastel terang): */ --cips-white: #fff; --cips-on-accent-cool: #0A0C11; --cips-on-accent-warm: #20180A; --cips-on-accent-warm-dark: #1A0F08; --cips-badge-near-black: #05060A; --cips-kesehatan-tint: #C3E8FF; --cips-kesehatan-shade: #3E8FD6; --cips-financial-tint: #FFC79A; --cips-financial-shade: #E0703A; } html[data-theme="light"]{ --bg: #F5F1E8; --surface-1: #FFFDF9; --surface-2: #F1ECE0; --hairline: #E4DDCE; --text-primary: #1B1D24; --text-muted: #545767; --text-shadow-ambient: rgba(0,0,0,0); --shadow-ambient: rgba(150,255,190,0.10); /* Warna aksen pastel asli (--habit dkk) kontrasnya cuma ~1.1–2.2:1 di atas surface terang — jauh di bawah minimum WCAG AA 4.5:1 untuk teks. Jadi khusus tema terang, token -text di-override ke versi lebih gelap dari hue yang sama (dicek manual, kontras ~6:1 terhadap semua level surface terang). Warna aksen dasarnya sendiri TIDAK diubah supaya background/ border/glow yang sudah pas tetap sama. */ --habit-text: #006A28; --ibadah-text: #7E5100; --kesehatan-text: #005E9D; /* --meal-lime dan --gym-violet gagal kontras 4.5:1 di atas surface terang kalau dipakai langsung sebagai warna teks (dicek manual, ~4:1 dan ~3.9:1) -- sama seperti --kesehatan-text di atas, override ke varian lebih gelap dari hue yang sama (~7:1) khusus tema terang. */ --meal-lime-text: #3F6212; --gym-violet-text: #6D28D9; --financial-text: #9F3B00; --settings-text: #6317FF; --danger-text: #BB0000; --warning-text: #775500; } *{ box-sizing:border-box; margin:0; padding:0; } html{ height:100%; overflow:hidden; touch-action:manipulation; } body{ height:100%; width:100%; position:fixed; inset:0; overflow:hidden; overscroll-behavior:none; background: radial-gradient(circle at 20% -10%, rgba(150,255,190,0.05) 0%, transparent 45%), radial-gradient(circle at 90% 10%, rgba(255,170,120,0.04) 0%, transparent 40%), var(--bg); display:flex; align-items:center; justify-content:center; font-family:'Inter', sans-serif; font-weight:500; padding:max(env(safe-area-inset-top),16px) 16px max(env(safe-area-inset-bottom),16px); transition: background .25s ease; } .eyebrow, .greeting, .date{ text-shadow: 0 1px 3px var(--text-shadow-ambient); } /* Transisi ganti tema gelap<->terang: dipakai setTheme() (app-03-navigation-onboarding.js). ~18 kartu/panel utama (fdash-card, fan-card, list-item, tx-row, settings-block, dkk) dikasih transisi background-color/border-color .25s ease, DIGABUNG ke transisi yg sudah ada (bukan menimpa) supaya animasi transform/box-shadow lain tetap utuh. Sengaja TIDAK diterapkan ke semua ~118 pemakaian var(--cips-radius-*) sekaligus -- sempat dicoba di semua elemen barengan, tapi di device user itu kebanyakan repaint bersamaan bikin compositor ke-overload sampai muncul frame flash hitam/putih. */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } .phone{ width: 380px; height: 800px; max-height: 92vh; background: radial-gradient(circle at 14% 8%, rgba(150,255,190,0.05) 0%, transparent 32%), radial-gradient(circle at 88% 18%, rgba(255,214,140,0.045) 0%, transparent 30%), radial-gradient(circle at 80% 78%, rgba(130,205,255,0.04) 0%, transparent 34%), var(--bg); border-radius: 46px; border: 10px solid var(--cips-badge-near-black); box-shadow: 0 0 0 1px var(--cips-overlay-white-04), 0 40px 80px -20px var(--cips-overlay-black-55), 0 0 60px -10px var(--shadow-ambient); overflow: hidden; position: relative; transform: translateZ(0); /* jadikan .phone containing block utk position:fixed (toast dsb), biar presisi di dalam frame */ display:flex; flex-direction:column; opacity: 1; transition: background .25s ease; } .toast{ position:absolute; left:50%; bottom:calc(110px + env(safe-area-inset-bottom, 0px)); z-index:50; background: linear-gradient(160deg, rgba(32,36,47,.94) 0%, rgba(24,27,36,.96) 100%); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.09); color:var(--text-primary); padding:11px 18px; border-radius:var(--cips-radius-lg); font-size:12.5px; font-weight:500; max-width:280px; text-align:center; transform:translate(-50%, 8px) scale(0.94); opacity:0; transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .22s ease, background-color .25s ease, border-color .25s ease; pointer-events:none; box-shadow: 0 14px 30px -10px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-06); } [data-theme="light"] .toast{ background: linear-gradient(160deg, rgba(255,253,249,.94) 0%, rgba(241,236,224,.96) 100%); border-color: rgba(20,20,20,.08); } .toast.show{ transform:translate(-50%, 0) scale(1); opacity:1; } /* Fix QA Audit F-02 (HIGH): banner update SW -- beda dari .toast di atas, ini SENGAJA tidak auto-hide (versi baru tetap tersedia sampai user benar-benar reload), dan punya tombol aksi nyata (bukan cuma teks pasif) -- lihat js/app-09-main-boot.js reloadForUpdate(). */ .update-banner{ position:absolute; left:12px; right:12px; top:calc(env(safe-area-inset-top, 0px) + 10px); z-index:60; background: linear-gradient(160deg, rgba(32,36,47,.96) 0%, rgba(24,27,36,.98) 100%); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border:1px solid var(--cips-overlay-white-10); color:var(--text-primary); padding:12px 14px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; gap:10px; transform:translateY(-14px); opacity:0; pointer-events:none; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; box-shadow: 0 14px 30px -10px var(--cips-overlay-black-55), inset 0 1px 0 var(--cips-overlay-white-06); } .update-banner.show{ transform:translateY(0); opacity:1; pointer-events:auto; } .update-banner-text{ flex:1; font-size:12.5px; font-weight:500; line-height:1.35; } .update-banner-btn{ flex-shrink:0; background:var(--habit); color:#04120a; border:none; border-radius:var(--cips-pill-radius); padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; } [data-theme="light"] .update-banner{ background: linear-gradient(160deg, rgba(255,253,249,.96) 0%, rgba(241,236,224,.98) 100%); border-color: rgba(20,20,20,.09); } /* Di device mobile asli: .phone mengisi persis ukuran layar (edge-to-edge), bukan lagi mockup terbingkai — presisi mengikuti device, tanpa celah goyang. */ @media (max-width: 600px){ body{ padding:0; } .phone{ width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); /* dipaksa JS (app-09-main-boot.js) -- lihat forceViewportRecalc */ max-height: 100vh; max-height: 100dvh; max-height: var(--app-vh, 100dvh); border-radius: 0; border: 0; box-shadow: none; } .notch{ display:none; } /* device asli sudah punya notch/dynamic island sendiri */ .dock-wrap{ padding-bottom: calc(22px + env(safe-area-inset-bottom)); } } .notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:var(--cips-badge-near-black); border-radius:var(--cips-radius-lg); z-index:5; } .screen{ flex:1; overflow-y:auto; overflow-x:hidden; overflow-anchor: none; /* cegah browser "mengunci" scroll ke elemen lama saat DOM berubah drastis (reset data / reload) */ overscroll-behavior-y: contain; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; padding: calc(18px + env(safe-area-inset-top)) 20px 0; scrollbar-width:none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, black calc(env(safe-area-inset-top) + 10px), black 100%); mask-image: linear-gradient(to bottom, transparent 0, black calc(env(safe-area-inset-top) + 10px), black 100%); } .screen::-webkit-scrollbar{ display:none; } /* "1 layar, tanpa scroll": class ini dipasang/dilepas otomatis oleh JS (updateScreenScrollLock() di app-03-navigation-onboarding.js) untuk VIEW APA PUN yang sedang aktif -- Dashboard, Habit, Finance, Religion, Health, Settings, dll -- kalau kontennya beneran muat 1 layar tanpa sisa. Kalau konten sebuah view bertambah panjang (banyak kartu/list/notifikasi) sampai melebihi 1 layar, JS-nya otomatis melepas class ini lagi supaya scroll tetap bisa dipakai -- jangan pernah kunci class ini permanen lewat CSS saja. overflow-x tetap hidden seperti .screen dasar; overflow-y dikunci sepenuhnya (bukan sekadar overscroll-behavior) supaya tidak ada rubber-band/bounce sisa di iOS Safari saat kontennya pas 1 layar. */ .screen.no-scroll{ overflow-y:hidden; } .view{ display:none; } .view.active{ display:block; } .view.anim-forward{ animation: viewInForward .32s cubic-bezier(.22,.61,.36,1) both; } .view.anim-back{ animation: viewInBack .32s cubic-bezier(.22,.61,.36,1) both; } @keyframes viewInForward{ from{ opacity:0; transform:translateX(22px);} to{ opacity:1; transform:translateX(0);} } @keyframes viewInBack{ from{ opacity:0; transform:translateX(-22px);} to{ opacity:1; transform:translateX(0);} } /* ==== Premium polish: shine sweep, breathing glow, cascade entrance ==== */ @keyframes shineSweep{ 0%{ transform: translateX(-130%) skewX(-18deg); opacity:0; } 8%{ opacity:.55; } 45%{ opacity:.55; } 60%{ transform: translateX(160%) skewX(-18deg); opacity:0; } 100%{ transform: translateX(160%) skewX(-18deg); opacity:0; } } @keyframes glowBreathe{ 0%,100%{ opacity:0.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } } @keyframes cascadeIn{ from{ opacity:0; transform:translateY(14px) scale(0.985); } to{ opacity:1; transform:translateY(0) scale(1); } } @keyframes badgePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(150,255,190,0.55); } 50%{ box-shadow:0 0 0 6px rgba(150,255,190,0); } } .premium-shine{ position:relative; overflow:hidden; } .premium-shine::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background: linear-gradient(100deg, transparent 30%, var(--cips-overlay-white-16) 48%, rgba(255,255,255,0.28) 50%, var(--cips-overlay-white-16) 52%, transparent 70%); animation: shineSweep 5.5s var(--ease-premium) infinite; animation-delay: 1.2s; } .eyebrow{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; color: var(--habit-text); opacity:0.9; margin-bottom:6px; } .greeting{ font-family:'Space Grotesk', sans-serif; font-size:25px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; } .date{ font-size:12.5px; color:var(--text-muted); margin-top:4px; } .icon-btn{ position:relative; /* Perbaikan UI Review #1: dibutuhkan sebagai konteks posisi untuk ::before di bawah -- tidak mengubah tampilan sama sekali (relative tanpa top/left/dst tidak menggeser apa pun). */ width:38px; height:38px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-1); color:var(--text-primary); font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition: transform .15s var(--ease-spring), box-shadow .15s ease, border-color .15s ease; box-shadow: 0 4px 12px -8px var(--cips-overlay-black-40); } /* Perbaikan UI Review #1 (Accessibility): target sentuh 38px di bawah rekomendasi 44px (Apple HIG/Material Design). Diperbaiki TANPA mengubah tampilan visual sama sekali -- teknik standar: elemen semu transparan yang memperluas area bisa-di-tap ke 44x44 (38px + 3px tiap sisi), sementara kotak yang TERLIHAT tetap 38px persis seperti sebelumnya. Nol risiko terhadap kerapihan desain karena tidak ada satu pun properti visual (warna/ukuran/border/shadow) yang berubah -- ini murni memperluas hit-area, bukan mengubah rupa tombol. */ .icon-btn::before{ content:''; position:absolute; inset:-3px; } .icon-btn:active{ transform:scale(0.88); box-shadow: 0 0 0 4px rgba(150,255,190,0.10); } .subheader-pill-btn{ height:38px; padding:0 14px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-1); color:var(--text-primary); font-size:13px; font-weight:600; display:flex; align-items:center; gap:5px; cursor:pointer; flex-shrink:0; white-space:nowrap; font-family:'Space Grotesk', sans-serif; transition: transform .15s ease; } .subheader-pill-btn:active{ transform:scale(0.94); } .icon-btn.active-gear{ background:var(--financial-dim); color:var(--financial-text); border-color:rgba(255,170,120,0.4); } .hero{ position:relative; background: linear-gradient(155deg, var(--habit-dim) 0%, var(--surface-1) 65%); border: 1px solid rgba(150,255,190,0.28); border-radius: 26px; padding: 22px; margin-bottom: 16px; overflow:hidden; box-shadow: 0 18px 40px -24px rgba(150,255,190,0.3), 0 6px 16px -12px var(--cips-overlay-black-40); } /* ---- Health: hero header senada dgn ap-hero/fdash-hero/ibadah-header ---- Padding-top 2px & margin-bottom 18px disamain persis ke 3 header dock lain, biar pas pindah dock, bagian atas layar nggak "loncat". */ .health-hero{ display:flex; align-items:flex-start; gap:12px; padding:16px; margin:2px 0 18px; background: linear-gradient(155deg, rgba(130,205,255,0.12) 0%, var(--surface-1) 65%); border: 1px solid rgba(130,205,255,0.28); border-radius: 22px; box-shadow: 0 18px 38px -24px rgba(130,205,255,0.4), inset 0 1px 0 var(--cips-overlay-white-04); position: relative; } .health-history-btn{ position:absolute; top:14px; right:14px; } .health-header-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0; background: linear-gradient(145deg, var(--cips-kesehatan-tint), var(--kesehatan) 55%, var(--cips-kesehatan-shade)); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px -6px rgba(130,205,255,0.6), inset 0 1px 0 var(--cips-overlay-white-35); position:relative; } .health-header-icon::after{ content:""; position:absolute; inset:-5px; border-radius:16px; background: radial-gradient(circle, rgba(130,205,255,0.35), transparent 72%); z-index:-1; } .health-hero-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--kesehatan-text); margin-bottom:8px; opacity:.95; } .health-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; color:var(--text-primary); letter-spacing:-.3px; line-height:1.15; } .health-hero-accent{ color:var(--kesehatan-text); } .health-hero-tagline{ font-size:12.5px; color:var(--text-muted); margin-top:8px; line-height:1.5; max-width:240px; } /* ---- Health dashboard: kartu Berat Badan (tren) ---- */ .health-weight-card{ position:relative; overflow:hidden; cursor:pointer; background: linear-gradient(160deg, rgba(130,205,255,0.10) 0%, var(--surface-1) 60%); border: 1px solid rgba(130,205,255,0.28); border-radius: var(--cips-radius-lg); padding: 18px; margin-bottom: 12px; box-shadow: 0 16px 34px -22px rgba(130,205,255,0.4), inset 0 1px 0 var(--cips-overlay-white-03); transition: transform .16s var(--ease-spring); } /* Blob glow pojok + hairline atas — pola sama persis dgn .religion-next-card, direplikasi ke kartu hero Health (item #10 polish visual). */ .health-weight-card::before{ content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(130,205,255,0.20), transparent 70%); } .health-weight-card::after{ content:''; position:absolute; top:0; left:16px; right:16px; height:1px; background: linear-gradient(90deg, transparent, var(--cips-overlay-white-18), transparent); pointer-events:none; z-index:1; } .health-weight-card:active{ transform: scale(.985); } .health-weight-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:1; } .health-weight-label{ font-size:12px; color:var(--text-muted); } .health-weight-value{ font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--text-primary); margin-top:4px; text-shadow:0 0 18px rgba(130,205,255,0.35); } .health-weight-add-btn{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background: linear-gradient(145deg, var(--cips-kesehatan-tint), var(--kesehatan) 60%, var(--cips-kesehatan-shade)); display:flex; align-items:center; justify-content:center; color:var(--cips-on-accent-cool); font-size:18px; font-weight:700; box-shadow: 0 6px 14px -4px rgba(130,205,255,0.55); } .health-weight-delta{ font-size:12px; font-weight:600; margin-top:8px; position:relative; z-index:1; } .health-weight-svg{ width:100%; height:64px; margin-top:10px; display:block; position:relative; z-index:1; } .health-weight-empty{ display:none; font-size:12px; color:var(--text-muted); margin-top:10px; text-align:center; padding:8px 0 2px; position:relative; z-index:1; } /* Tahap 1 (Body Measurement): grafik tren per-field, mengikuti pola persis grafik Berat Badan di atas (SVG murni, tanpa library chart) supaya konsisten. */ .health-meas-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } /* Override scoped by ID, bukan ubah .toggle-btn.active global -- Health pakai warna --kesehatan, modul lain yang sudah pakai .toggle-btn (Settings dkk) tidak boleh ikut berubah. */ #healthMeasChips .toggle-btn{ white-space:nowrap; padding:8px 14px; font-size:12.5px; } #healthMeasChips .toggle-btn.active{ background:var(--kesehatan-dim); border-color:var(--kesehatan); color:var(--kesehatan-text); box-shadow:none; } .health-meas-svg{ width:100%; height:64px; margin-top:10px; display:block; } .health-meas-empty{ display:none; font-size:12px; color:var(--text-muted); margin-top:10px; text-align:center; padding:8px 0 2px; } /* Tahap 5 (Workout Tracker): chip kecil per-set yang sudah dicatat. */ .woset-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .woset-chip{ font-size:12px; padding:5px 9px; border-radius:var(--cips-pill-radius); background:var(--kesehatan-dim); color:var(--kesehatan-text); display:inline-flex; align-items:center; gap:6px; } /* ---- Health dashboard: grid Langkah + BMI ---- */ .health-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; } .health-photo-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .health-photo-thumb{ position:relative; aspect-ratio:3/4; border-radius:var(--cips-radius-md); overflow:hidden; background:var(--surface-2); border:1px solid var(--hairline); cursor:pointer; } .health-photo-thumb.health-photo-missing{ display:flex; align-items:center; justify-content:center; } .health-photo-thumb.health-photo-missing::after{ content:'📷'; font-size:22px; opacity:.35; } .health-photo-thumb-tag{ position:absolute; left:0; right:0; bottom:0; padding:4px 6px; font-size:10.5px; font-weight:600; color:var(--cips-white); text-align:center; background:linear-gradient(to top, rgba(0,0,0,0.65), transparent); } .health-mini-card{ background: linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 130%); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px; box-shadow: 0 12px 26px -20px var(--cips-overlay-black-50); transition: background-color .25s ease, border-color .25s ease;} .health-mini-title{ font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700; color:var(--text-primary); margin-bottom:10px; } .health-steps-body{ display:flex; align-items:center; gap:10px; } .health-steps-numbers{ min-width:0; } .health-steps-value{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); line-height:1.1; } .health-steps-goal{ font-size:11px; color:var(--text-muted); margin-top:2px; } .health-steps-actions{ display:flex; gap:8px; margin-top:12px; justify-content:center; } .health-bmi-value{ font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:700; color:var(--kesehatan-text); text-shadow:0 0 16px rgba(130,205,255,0.35); } .health-bmi-card{ cursor:pointer; transition: background-color .25s ease, border-color .25s ease, transform .16s var(--ease-spring); } .health-bmi-card:active{ transform: scale(.985); } .health-bmi-category{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--cips-radius-sm); margin-top:4px; } .bmi-gauge{ position:relative; height:8px; margin-top:14px; } .bmi-gauge-track{ position:absolute; inset:0; border-radius:6px; background: linear-gradient(90deg, var(--kesehatan) 0%, var(--habit) 22%, var(--habit) 45%, var(--warning) 65%, var(--danger) 100%); opacity:0.85; } .bmi-gauge-marker{ position:absolute; top:50%; width:3px; height:16px; border-radius:2px; background:var(--cips-white); transform:translate(-50%,-50%); box-shadow: 0 0 8px 1px rgba(255,255,255,0.6); transition: left .4s var(--ease-premium); } .bmi-gauge-labels{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--text-muted); margin-top:5px; } .hero-ibadah{ background: linear-gradient(155deg, var(--ibadah-dim) 0%, var(--surface-1) 65%); border-color: rgba(255,214,140,0.3); box-shadow: 0 18px 40px -24px rgba(255,214,140,0.32), 0 6px 16px -12px var(--cips-overlay-black-40); } .hero-ibadah::before{ background: radial-gradient(circle, rgba(255,214,140,0.28), transparent 70%); } .hero-ibadah .hero-label{ color:var(--ibadah-text); } .hero-ibadah .hero-arrow{ background:var(--ibadah-dim); color:var(--ibadah-text); } .hero::before{ content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(150,255,190,0.28), transparent 70%); filter: blur(4px); } .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; } .hero-label{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:2px; color:var(--habit-text); text-transform:uppercase; margin-bottom:4px; } .hero-title{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); } .hero-arrow{ width:34px; height:34px; border-radius:50%; background:var(--habit-dim); display:flex; align-items:center; justify-content:center; color:var(--habit-text); font-size:16px; } .hero-body{ display:flex; align-items:center; gap:20px; position:relative; z-index:1; } .ring-wrap{ position:relative; width:88px; height:88px; flex-shrink:0; } .ring-wrap svg{ transform:rotate(-90deg); } .ring-bg{ fill:none; stroke:rgba(130,140,160,0.16); stroke-width:8; } .ring-fg{ fill:none; stroke: var(--habit); stroke-width:8; stroke-linecap:round; stroke-dasharray: 226; stroke-dashoffset: 75; transition: stroke-dashoffset .5s ease; } .ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } #religionRingFg{ filter: drop-shadow(0 0 6px rgba(255,214,140,.45)); } #quranRingFg{ filter: drop-shadow(0 0 6px rgba(255,214,140,.45)); } .ring-pct{ font-family:'JetBrains Mono', monospace; font-size:16px; font-weight:600; color:var(--text-primary); } .hero-stats{ display:flex; flex-direction:column; gap:8px; } .stat-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-primary); } .stat-sub{ font-size:12px; color:var(--text-muted); } .chip{ width:22px; height:22px; border-radius:var(--cips-radius-sm); background: var(--habit); opacity:0.9; } .chip.off{ background: rgba(130,140,160,0.18); } .hero-clickable{ cursor:pointer; transition: transform .15s ease; } .hero-clickable:active{ transform:scale(0.98); } /* Layer dashboard mengisi persis tinggi .screen (flex fill), overflow disembunyikan sebagai jaminan tambahan supaya tidak pernah perlu di-scroll. */ .habit-hour-item .list-item-row{ align-items:flex-start; } .habit-hour-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; } .habit-cat-badge{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.3px; padding:3px 9px; border-radius:var(--cips-radius-sm); cursor:pointer; white-space:nowrap; flex-shrink:0; } .habit-target-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; font-family:'JetBrains Mono', monospace; } /* ---- Blok "waktu luang" (gap): gabungan jam-jam kosong berurutan di Daily Checklist Habit jadi satu strip tipis non-interaktif, biar checklist gak berat 24 baris penuh. Ketuk buat expand & isi cepat lewat updateHabitHourLabel, sama seperti custom label per jam biasa. (v74: dulu jalur ini terkunci premium, sekarang terbuka untuk semua.) ---- */ .habit-gap-block{ border:1px dashed var(--hairline); border-radius:var(--cips-radius-lg); margin-bottom:10px; overflow:hidden; background: rgba(150,255,190,0.03); transition: background .15s ease; } .habit-gap-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .habit-gap-header:active{ background: rgba(150,255,190,0.06); } .habit-gap-range{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted); flex-shrink:0; } .habit-gap-status{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); font-family:'Space Grotesk', sans-serif; } .habit-gap-chevron{ font-size:11px; opacity:0.7; transition: transform .15s ease; flex-shrink:0; } .habit-gap-block.open .habit-gap-chevron{ transform: rotate(180deg); } .habit-gap-hours{ border-top:1px dashed var(--hairline); } .habit-gap-hour-row{ display:flex; align-items:center; gap:10px; padding:9px 14px; } .habit-gap-hour-row + .habit-gap-hour-row{ border-top:1px solid var(--hairline); } .habit-gap-hour-time{ font-size:11.5px; color:var(--text-muted); font-family:'JetBrains Mono', monospace; width:40px; flex-shrink:0; } .habit-gap-hour-input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text-primary); font-family:'Inter', sans-serif; font-size:13.5px; padding:4px 0; } .habit-gap-hour-input::placeholder{ color:var(--text-muted); opacity:0.7; } /* ================= AURA dashboard (dipindah identik dari app AURA) ================= */ .ap-hero{ position:relative; padding:2px 0 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .ap-hero-glow{ position:absolute; top:50%; left:50%; width:170%; height:170%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(150,255,190,0.30) 0%, rgba(150,255,190,0.14) 38%, rgba(150,255,190,0.05) 62%, transparent 78%); filter:blur(16px); pointer-events:none; z-index:0; animation: glowBreathe 4.5s ease-in-out infinite; } .ap-hero-text{ position:relative; z-index:1; flex:1; min-width:0; } .ap-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--habit-text); margin-bottom:8px; opacity:.95; } .ap-greeting{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; color:var(--text-primary); letter-spacing:-.3px; line-height:1.15; } .ap-greeting .ap-accent{ color:var(--habit-text); } .ap-tagline{ font-size:12.5px; color:var(--text-muted); margin-top:8px; line-height:1.5; max-width:210px; } .ap-hero-orb{ position:relative; width:104px; height:104px; flex-shrink:0; z-index:1; } .ap-hero-orb svg{ position:relative; z-index:1; width:100%; height:100%; transform:rotate(-90deg); filter:drop-shadow(0 0 10px rgba(150,255,190,0.25)); } .ap-hero-orb .ap-arc{ fill:none; stroke-width:9; stroke-linecap:round; } .ap-orbit-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--cips-white); box-shadow:0 0 8px 2px rgba(255,255,255,.7), 0 0 16px 4px rgba(150,255,190,.5); top:50%; left:50%; margin:-3.5px; animation:apOrbit 7s linear infinite; z-index:2; } @keyframes apOrbit{ from{ transform:rotate(0deg) translateX(52px) rotate(0deg);} to{ transform:rotate(360deg) translateX(52px) rotate(-360deg);} } .ap-orb-settings{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; font-size:28px; background:radial-gradient(circle, var(--surface-1) 0%, var(--surface-1) 62%, transparent 100%); border:1px solid var(--hairline); color:var(--text-muted); cursor:pointer; transition:transform .15s var(--ease-spring), color .15s ease, border-color .15s ease, box-shadow .15s ease; box-shadow: 0 6px 14px -6px var(--cips-overlay-black-40); } .ap-orb-settings:active{ transform:translate(-50%,-50%) scale(.88); } .ap-orb-settings:hover{ color:var(--habit-text); border-color:rgba(150,255,190,.4); box-shadow: 0 0 0 5px rgba(150,255,190,.1), 0 6px 14px -6px var(--cips-overlay-black-40); } .ap-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(5px,1.6vw,8px); margin-bottom:16px; min-width:0; } .ap-mini-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; } .ap-mini-chip{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px; padding:11px 10px; border-radius:var(--cips-radius-lg); min-width:0; overflow:hidden; box-sizing:border-box; background:var(--surface-1); border:1px solid var(--hairline); cursor:default; transition: transform .15s var(--ease-spring); } .ap-mini-chip[role="button"]{ cursor:pointer; } .ap-mini-chip[role="button"]:active{ transform: scale(0.95); } .ap-mini-icon{ font-size:16px; line-height:1; flex-shrink:0; } .ap-mini-body{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0; } .ap-mini-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); white-space:nowrap; } .ap-mini-pct{ display:block; width:100%; max-width:100%; font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; line-height:1.15; } .ap-mc-focus{ border-color:rgba(255,214,140,0.35); } .ap-mc-focus .ap-mini-pct{ color:var(--ibadah-text); } .ap-mc-action{ border-color:rgba(130,205,255,0.35); } .ap-mc-action .ap-mini-pct{ color:var(--kesehatan-text); } .ap-mc-result{ border-color:rgba(150,255,190,0.35); } .ap-mc-result .ap-mini-pct{ color:var(--habit-text); } /* ===== Quick Input "kegiatan mendadak" di dashboard ===== */ .ap-quick-input-wrap{ margin-bottom:16px; position:relative; } .ap-quick-input{ width:100%; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:13px 44px 13px 16px; font-family:'Inter', sans-serif; font-size:13px; font-weight:500; color:var(--text-primary); outline:none; cursor:pointer; box-sizing:border-box; transition: border-color .15s ease, box-shadow .15s ease; } .ap-quick-input::placeholder{ color:var(--text-muted); opacity:0.75; font-weight:500; } .ap-quick-input:focus{ border-color:rgba(150,255,190,0.45); box-shadow:0 0 0 3px rgba(150,255,190,0.10); } .ap-quick-input-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--text-muted); pointer-events:none; } .ap-log-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:0; } .ap-log-list:not(:empty){ margin-bottom:16px; } .ap-log-item{ display:flex; align-items:center; gap:10px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-md); padding:10px 12px; } .ap-log-item-icon{ font-size:15px; flex-shrink:0; } .ap-log-item-text{ flex:1; font-size:12.5px; color:var(--text-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ap-log-item-meta{ font-size:10.5px; color:var(--text-muted); margin-top:2px; } .ap-log-item-badge{ font-size:9.5px; font-weight:600; color:var(--habit-text); background:rgba(150,255,190,0.12); padding:3px 7px; border-radius:var(--cips-radius-lg); white-space:nowrap; flex-shrink:0; } /* Fix QA M-4 (Batch 3 follow-up): badge permanen untuk item Quick Log yang jamnya bentrok dengan item lain dan sedang TIDAK tampil di checklist Habit -- sebelumnya user cuma dapat toast sekali-lihat saat submit. */ .ap-log-item-conflict{ border-color:var(--warning-dim); } .ap-log-item-badge-conflict{ color:var(--warning-text); background:var(--warning-dim); } .ap-log-item-del{ background:none; border:none; color:var(--text-muted); font-size:13px; cursor:pointer; flex-shrink:0; padding:4px; } .ap-log-item-del:active{ transform:scale(0.9); } /* ===== Form popup "Catat Kegiatan Mendadak" ===== */ .qlf-field-block{ margin-bottom:14px; } .qlf-field-label{ font-size:13px; color:var(--text-primary); margin-bottom:6px; display:block; } .qlf-input{ width:100%; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:11px 12px; font-family:'Inter', sans-serif; font-size:13.5px; box-sizing:border-box; } .qlf-input:focus{ outline:none; border-color:var(--ibadah); box-shadow: 0 0 0 3px rgba(255,214,140,0.16); } .qlf-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; } .qlf-repeat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .qlf-repeat-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 10px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition: transform .15s var(--ease-spring), border-color .2s ease, box-shadow .2s ease; } .qlf-repeat-btn:active{ transform:scale(0.96); } .qlf-repeat-btn .qlf-repeat-ico{ font-size:18px; } .qlf-repeat-btn.active{ border-color:var(--habit); box-shadow: 0 0 0 3px rgba(150,255,190,0.16); } .qlf-repeat-sub{ font-size:10px; color:var(--text-muted); font-weight:500; } .habit-row-highlight{ animation: habitRowPulse 1.6s ease-out; border-radius:var(--cips-radius-lg); } @keyframes habitRowPulse{ 0%{ box-shadow:0 0 0 2px var(--habit), 0 0 18px rgba(150,255,190,0.45); } 100%{ box-shadow:0 0 0 0 rgba(150,255,190,0); } } .ap-stat-card{ background: linear-gradient(155deg, var(--surface-1) 0%, var(--surface-2) 100%); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:clamp(14px,4vw,18px) clamp(8px,2.4vw,12px) clamp(8px,2.2vw,10px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(6px,2vw,9px); width:100%; min-width:0; box-sizing:border-box; opacity:0; transform:translateY(10px); animation:apCardIn .5s cubic-bezier(.22,.61,.36,1) forwards; box-shadow: 0 10px 22px -14px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-03); transition: transform .18s var(--ease-spring), box-shadow .18s ease, border-color .18s ease, background-color .25s ease; } .ap-stat-body{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; width:100%; overflow:hidden; gap:2px; } .ap-stat-card:nth-child(1){ animation-delay:.05s; } .ap-stat-card:nth-child(2){ animation-delay:.12s; } .ap-stat-card:nth-child(3){ animation-delay:.19s; } .ap-stat-card:nth-child(4){ animation-delay:.26s; } .ap-c-habit{ box-shadow: 0 10px 22px -14px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-03), 0 0 0 1px rgba(150,255,190,0.10); } .ap-c-ibadah{ box-shadow: 0 10px 22px -14px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-03), 0 0 0 1px rgba(255,214,140,0.10); } .ap-c-kesehatan{ box-shadow: 0 10px 22px -14px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-03), 0 0 0 1px rgba(130,205,255,0.10); } .ap-c-financial{ box-shadow: 0 10px 22px -14px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-03), 0 0 0 1px rgba(255,170,120,0.10); } @keyframes apCardIn{ to{ opacity:1; transform:translateY(0); } } .ap-stat-icon{ width:clamp(32px,9vw,40px); height:clamp(32px,9vw,40px); flex-shrink:0; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; position:relative; overflow:visible; } .ap-stat-icon-tap{ cursor:pointer; } .ap-stat-icon-tap:active{ transform: scale(0.88); } .ap-stat-icon svg{ width:14px; height:14px; } .ap-stat-icon-anim{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .ap-stat-icon-anim .ap-ia-base, .ap-stat-icon-anim .ap-ia-accent{ position:absolute; line-height:1; filter:drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor); } .ap-stat-icon-anim .ap-ia-base{ font-size:clamp(19px,5.2vw,24px); } .ap-stat-icon-anim .ap-ia-accent{ font-size:clamp(10px,2.8vw,13px); } /* Sholat: kubah diam (di depan), bulan-bintang "adzan" kecil mengintip keluar-masuk dari balik kubah */ .ap-ia-sholat .ap-ia-base{ position:relative; z-index:2; } .ap-ia-sholat .ap-ia-accent{ top:-2px; font-size:6px; opacity:0; z-index:1; animation:apAdzanPulse 2.6s ease-in-out infinite; } @keyframes apAdzanPulse{ 0%{ opacity:0; transform:translateY(6px) scale(.3); } 18%{ opacity:1; transform:translateY(-1.5px) scale(.9); } 38%{ opacity:1; transform:translateY(-3px) scale(.95); } 58%{ opacity:1; transform:translateY(-1.5px) scale(.9); } 78%{ opacity:1; transform:translateY(-2.5px) scale(.95); } 100%{ opacity:0; transform:translateY(6px) scale(.3); } } /* Olahraga: gelembung (bubble) mengambang naik-turun dengan smooth, sebagai ganti figur lari */ .ap-ia-olahraga{ position:relative; } .ap-ia-bubble-main{ width:15px; height:15px; border-radius:50%; background: radial-gradient(circle at 30% 25%, var(--cips-overlay-white-95) 0%, var(--kesehatan) 45%, rgba(130,205,255,.35) 100%); filter: drop-shadow(0 0 5px rgba(130,205,255,.55)); animation: apBubbleFloat 2.4s cubic-bezier(.45,0,.55,1) infinite; } .ap-ia-bubble-dot{ position:absolute; top:2px; right:3px; width:6px; height:6px; border-radius:50%; background: radial-gradient(circle at 30% 25%, var(--cips-overlay-white-95) 0%, var(--kesehatan) 55%, transparent 100%); opacity:.8; animation: apBubbleFloat2 2.4s cubic-bezier(.45,0,.55,1) infinite .5s; } @keyframes apBubbleFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-3.5px) scale(1.08); } } @keyframes apBubbleFloat2{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2.5px) scale(.9); } } @keyframes apUtensilTap{ 0%,100%{ transform:translate(-3.5px,0) rotate(-10deg); } 50%{ transform:translate(3.5px,0) rotate(10deg); } } /* Saldo: dompet diam (di depan), koin kecil mengintip keluar-masuk dari balik dompet sambil memudar */ .ap-ia-saldo .ap-ia-base{ font-size:16px; position:relative; z-index:2; } .ap-ia-saldo .ap-ia-accent{ top:-1px; right:1px; font-size:7px; opacity:0; z-index:1; animation:apCoinFlow 2.2s cubic-bezier(.45,0,.55,1) infinite; } @keyframes apCoinFlow{ 0%{ opacity:0; transform:translateY(6px) scale(.3); } 20%{ opacity:1; transform:translateY(0px) scale(.75); } 40%{ opacity:1; transform:translateY(-2px) scale(.85); } 60%{ opacity:1; transform:translateY(-1px) scale(.8); } 80%{ opacity:1; transform:translateY(-2.5px) scale(.85); } 100%{ opacity:0; transform:translateY(6px) scale(.3); } } /* Habit: clipboard diam (di depan), centang kecil muncul-tenggelam dari balik clipboard sambil memudar — merepresentasikan checklist harian yang "dicentang" */ .ap-ia-habit .ap-ia-base{ position:relative; z-index:2; } .ap-ia-habit .ap-ia-accent{ top:-2px; right:-1px; font-size:7px; opacity:0; z-index:1; animation:apHabitCheck 2.4s ease-in-out infinite; } @keyframes apHabitCheck{ 0%{ opacity:0; transform:translateY(6px) scale(.3); } 20%{ opacity:1; transform:translateY(0px) scale(.85); } 40%{ opacity:1; transform:translateY(-2px) scale(.95); } 60%{ opacity:1; transform:translateY(-1px) scale(.9); } 80%{ opacity:1; transform:translateY(-2.5px) scale(.95); } 100%{ opacity:0; transform:translateY(6px) scale(.3); } } /* Meal: piring diam (di depan), apel kecil muncul-tenggelam -- pola animasi SAMA PERSIS dengan kategori lain (pop+fade), cuma nama keyframe beda per kategori mengikuti konvensi yang sudah ada (apHabitCheck/apAdzanPulse/apCoinFlow). */ .ap-ia-meal .ap-ia-base{ position:relative; z-index:2; } .ap-ia-meal .ap-ia-accent{ top:-2px; right:-1px; font-size:7px; opacity:0; z-index:1; animation:apMealBite 2.4s ease-in-out infinite; } @keyframes apMealBite{ 0%{ opacity:0; transform:translateY(6px) scale(.3); } 20%{ opacity:1; transform:translateY(0px) scale(.85); } 40%{ opacity:1; transform:translateY(-2px) scale(.95); } 60%{ opacity:1; transform:translateY(-1px) scale(.9); } 80%{ opacity:1; transform:translateY(-2.5px) scale(.95); } 100%{ opacity:0; transform:translateY(6px) scale(.3); } } /* Gym: lengan diam (di depan), ikon angkat-beban kecil muncul-tenggelam -- gantikan animasi bubble lama (dulu dipakai gabungan Meal & Gym), sekarang konsisten base+accent seperti kategori lain. */ .ap-ia-gym .ap-ia-base{ position:relative; z-index:2; } .ap-ia-gym .ap-ia-accent{ top:-2px; right:-1px; font-size:7px; opacity:0; z-index:1; animation:apGymFlex 2.4s ease-in-out infinite; } @keyframes apGymFlex{ 0%{ opacity:0; transform:translateY(6px) scale(.3); } 20%{ opacity:1; transform:translateY(0px) scale(.85); } 40%{ opacity:1; transform:translateY(-2px) scale(.95); } 60%{ opacity:1; transform:translateY(-1px) scale(.9); } 80%{ opacity:1; transform:translateY(-2.5px) scale(.95); } 100%{ opacity:0; transform:translateY(6px) scale(.3); } } @media (prefers-reduced-motion: reduce){ .ap-ia-sholat .ap-ia-accent, .ap-ia-bubble-main, .ap-ia-bubble-dot, .ap-ia-saldo .ap-ia-accent, .ap-ia-habit .ap-ia-accent, .ap-ia-meal .ap-ia-accent, .ap-ia-gym .ap-ia-accent{ animation:none; } } .ap-stat-label{ font-size:clamp(9.5px,2.6vw,11px); color:var(--text-muted); font-weight:600; letter-spacing:.03em; width:100%; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ap-stat-value{ font-family:'JetBrains Mono', monospace; font-size:clamp(15px,4.2vw,19px); font-weight:700; color:var(--text-primary); line-height:1.15; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:100%; text-align:center; } .ap-c-habit .ap-stat-icon{ color:var(--habit-text); } .ap-c-ibadah .ap-stat-icon{ color:var(--ibadah-text); } .ap-c-kesehatan .ap-stat-icon{ color:var(--kesehatan-text); } .ap-c-financial .ap-stat-icon{ color:var(--financial-text); } .ap-wallet-row{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; width:100%; } .ap-wallet-value{ cursor:pointer; } .ap-wallet-value:active{ transform:scale(0.9); } .ap-card{ background: linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 120%); border:1px solid var(--hairline); border-radius:22px; padding:18px; margin-bottom:16px; box-shadow: 0 16px 32px -22px var(--cips-overlay-black-55), inset 0 1px 0 var(--cips-overlay-white-03); position:relative; overflow:hidden; transition: background-color .25s ease, border-color .25s ease;} .ap-card::before{ content:''; position:absolute; top:0; left:14px; right:14px; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); pointer-events:none; } .ap-card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; } .ap-card-title{ font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); } .ap-card-sub{ font-size:11.5px; color:var(--text-muted); margin-top:3px; } /* ===== Header kartu "Habit Hari Ini": judul & tombol (+) sejajar satu baris. align-items:center (bukan flex-start bawaan .ap-card-head) supaya judul yang bisa wrap 2 baris tetap sejajar-tengah dengan tombol (+) yang tingginya tetap 30px. */ .ap-card-head-habit{ align-items:center; margin-bottom:14px; } .ap-ring-title{ flex-shrink:0; text-align:left; white-space:nowrap; font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.25; } /* Fix OODA-1: tombol ini aksinya "Tambah Transaksi" (Finance), BUKAN aksi Habit -- sebelumnya dipakaikan warna habit (--habit-text/--habit-dim) padahal duduk di card "Ringkasan Hari Ini" yang gabungan ring Habit + panel Finance, jadi user awam mengira ini tombol tambah Habit. Sekarang dipakaikan warna --financial (sama seperti ikon SALDO di stat card atas) + label teks "Transaksi" supaya fungsinya jelas tanpa perlu menebak dari posisi/ikon semata. Lebar auto (bukan 30px persegi) tapi tinggi tetap 30px supaya align-items:center di .ap-card-head-habit tetap rapi dengan judul 2 baris. */ .ap-plus-btn{ height:30px; padding:0 10px; border-radius:var(--cips-radius-sm); flex-shrink:0; color:var(--financial-text); background:var(--financial-dim); border:1px solid rgba(255,170,120,.35); display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; line-height:1; white-space:nowrap; transition: transform .15s var(--ease-spring), box-shadow .15s ease; } .ap-plus-btn .ap-plus-ico{ font-size:16px; line-height:1; } .ap-plus-btn:active{ transform:scale(.92); box-shadow: 0 0 0 4px rgba(150,255,190,0.12); } /* align-items:center di .ap-progress-body (di bawah) otomatis membuat ring naik & center secara vertikal terhadap panel Finance di sebelahnya, sekarang judul sudah dipindah keluar dari kolom ring. */ .ap-progress-body{ display:flex; gap:16px; align-items:flex-start; } .ap-ring-wrap{ position:relative; width:132px; height:132px; flex-shrink:0; cursor:pointer; } .ap-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); shape-rendering:geometricPrecision; } .ap-ring-bg{ fill:none; stroke:rgba(130,140,160,0.14); stroke-width:11; } .ap-ring-fg{ fill:none; stroke:var(--habit); stroke-width:11; stroke-linecap:round; stroke-dasharray:346; stroke-dashoffset:346; transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); } /* Glow dipisah dari garis progress: sebuah radial gradient tipis di BELAKANG ring, dibatasi persis di dalam area .ap-ring-wrap. Sebelumnya glow pakai filter:drop-shadow langsung di stroke SVG, yang bikin cahaya "bocor" tidak rata & merusak presisi tepi lingkaran saat arc-nya sebagian (dashoffset berubah). Pola ini konsisten & tetap presisi di semua persentase. */ .ap-ring-glow{ position:absolute; inset:8px; border-radius:50%; background:radial-gradient(circle, rgba(150,255,190,0.16) 0%, transparent 70%); pointer-events:none; } .ap-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .ap-ring-pct{ font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--text-primary); } .ap-ring-label{ font-size:10.5px; color:var(--text-muted); margin-top:1px; } .ap-cat-track{ height:5px; border-radius:3px; background:rgba(130,140,160,0.14); overflow:hidden; } .ap-cat-fill{ height:100%; border-radius:3px; width:0%; transition:width 1s cubic-bezier(.22,.61,.36,1); } /* ===== Panel Finance (goal tabungan + tagihan hari ini) di kartu "Habit Hari Ini" ===== Menggantikan daftar kategori habit (Religion/Meal & Gym/Business) yang sudah terwakili lewat kartu-kartu ringkasan lain di dashboard. Semua nama (goal & tagihan) panjangnya bebas tergantung input user, jadi setiap baris pakai min-width:0 + text-overflow:ellipsis supaya otomatis menyesuaikan tanpa pernah merusak layout kartu. */ .ap-fin-panel{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; } .ap-fin-goal{ display:flex; flex-direction:column; cursor:pointer; } /* Judul "🎯 Target Keuangan" & rincian goal (dot + nama + persen) memakai persis font-family/ukuran/warna yang sama dengan judul "🧾 Tagihan Hari Ini" & baris tagihannya di bawah, supaya kedua blok terlihat presisi & konsisten satu sama lain. */ .ap-fin-goal-title{ font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; } .ap-fin-goal-main{ min-width:0; } .ap-fin-goal-item{ display:flex; align-items:center; gap:6px; min-width:0; } .ap-fin-goal-dot{ width:4px; height:4px; border-radius:50%; background:var(--financial); flex-shrink:0; } .ap-fin-goal-name{ font-size:10.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; } .ap-fin-goal-pct{ font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600; color:var(--financial-text); flex-shrink:0; white-space:nowrap; margin-left:4px; } /* Bar dirapatkan sejajar dengan huruf pertama nama goal: indent kiri = lebar dot (4px) + gap baris (6px) = 10px, jadi track dimulai tepat di bawah huruf pertama "apFinGoalName". */ .ap-fin-goal-bar-wrap{ margin-left:10px; margin-top:6px; } .ap-fin-bills{ border-top:1px solid var(--hairline); padding-top:14px; cursor:pointer; } .ap-fin-bills-title{ font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; } .ap-fin-bill-list{ display:flex; flex-direction:column; gap:6px; } .ap-fin-bill-item{ display:flex; align-items:center; gap:6px; min-width:0; } .ap-fin-bill-dot{ width:4px; height:4px; border-radius:50%; background:var(--financial); flex-shrink:0; } .ap-fin-bill-name{ font-size:10.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; } .ap-fin-bill-amount{ font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600; color:var(--text-muted); flex-shrink:0; white-space:nowrap; margin-left:4px; } .ap-fin-bill-more{ font-size:10px; color:var(--text-muted); padding-left:10px; } .ap-fin-bills-empty{ font-size:10.5px; color:var(--text-muted); opacity:.75; } .ap-dropdown{ font-family:'Space Grotesk', sans-serif; font-size:11px; font-weight:600; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--hairline); padding:6px 24px 6px 10px; border-radius:var(--cips-radius-md); white-space:nowrap; flex-shrink:0; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A3ACC0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; } .ap-dropdown:focus-visible{ outline:2px solid var(--habit); outline-offset:1px; } .ap-bars{ position:relative; display:flex; align-items:flex-end; gap:8px; height:118px; margin-top:6px; } .ap-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; } .ap-bar-fill-wrap{ width:100%; height:78px; display:flex; align-items:flex-end; } .ap-bar-fill{ width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, var(--habit) 0%, rgba(150,255,190,.35) 100%); height:0%; transition:height 1s cubic-bezier(.22,.61,.36,1); position:relative; display:flex; align-items:center; justify-content:center; overflow:visible; } .ap-bar-fill.today{ background:linear-gradient(180deg, var(--cips-white) 0%, var(--habit) 55%); box-shadow:0 0 10px 1px rgba(150,255,190,.4); } .ap-bar-pct{ font-family:'JetBrains Mono', monospace; font-size:8px; font-weight:800; color:#064a24; line-height:1; white-space:nowrap; opacity:0; transition:font-size 1s cubic-bezier(.22,.61,.36,1), opacity .4s ease; } .ap-bar-day{ font-size:9.5px; color:var(--text-muted); font-weight:600; } .ap-bar-col.today .ap-bar-day{ color:var(--text-primary); } /* Fix VISUAL-02 (Launch Audit): overlay terpusat di atas bar 0px saat rentang kosong total -- lihat komentar di renderOnboardingChecklist()/apWeekBars. */ .ap-bars-empty{ position:absolute; inset:0 0 20px 0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:10.5px; color:var(--text-muted); opacity:.75; padding:0 8px; pointer-events:none; } /* ===== Finance dashboard (fdash-) — halaman utama dock Finance ===== */ .fdash-hero{ display:flex; align-items:flex-start; justify-content:space-between; padding:2px 0 18px; gap:10px; } .fdash-hero-brand{ display:flex; align-items:center; gap:12px; min-width:0; } .fdash-header-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0; background: linear-gradient(145deg, var(--cips-financial-tint), var(--financial) 55%, var(--cips-financial-shade)); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px -6px rgba(255,170,120,0.55), inset 0 1px 0 var(--cips-overlay-white-35); position:relative; } .fdash-header-icon::after{ content:""; position:absolute; inset:-5px; border-radius:16px; background: radial-gradient(circle, rgba(255,170,120,0.35), transparent 72%); z-index:-1; } .fdash-greet{ font-family:'Space Grotesk', sans-serif; font-size:21px; font-weight:600; color:var(--text-primary); letter-spacing:-.2px; } .fdash-sub{ font-size:12.5px; color:var(--text-muted); margin-top:5px; } .fdash-card{ background: linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 120%); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:12px; box-shadow: 0 16px 32px -22px var(--cips-overlay-black-55), inset 0 1px 0 var(--cips-overlay-white-03); transition: background-color .25s ease, border-color .25s ease;} .fdash-balance{ border-color: rgba(255,170,120,0.4); box-shadow: 0 18px 40px -18px rgba(255,170,120,0.45), inset 0 1px 0 var(--cips-overlay-white-04); background: linear-gradient(160deg, rgba(255,170,120,0.10) 0%, var(--surface-1) 55%, var(--surface-2) 130%); } /* Blob glow pojok + hairline atas — pola sama persis dgn .religion-next-card, direplikasi ke kartu hero Finance (item #10 polish visual). */ .fdash-balance::before{ content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(255,170,120,0.20), transparent 70%); } .fdash-balance::after{ content:''; position:absolute; top:0; left:16px; right:16px; height:1px; background: linear-gradient(90deg, transparent, var(--cips-overlay-white-18), transparent); pointer-events:none; z-index:1; } .fdash-balance{ position:relative; overflow:hidden; } .fdash-balance.clickable{ cursor:pointer; } .fdash-balance.clickable:active{ transform:scale(.99); } .fdash-balance-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; } .fdash-label{ font-size:12px; color:var(--text-muted); margin-bottom:8px; position:relative; z-index:1; } .fdash-balance-value{ font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:700; color:var(--financial-text); letter-spacing:-.3px; text-shadow:0 0 18px rgba(255,170,120,0.35); } .fdash-delta{ display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:11.5px; font-weight:600; color:var(--habit-text); background:var(--habit-dim); padding:5px 10px; border-radius:var(--cips-radius-lg); position:relative; z-index:1; } .fdash-balance-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .fdash-eye-btn{ width:38px; height:38px; border-radius:var(--cips-radius-lg); background:var(--financial-dim); border:1px solid rgba(255,170,120,0.25); color:var(--financial-text); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0; line-height:1; } .fdash-eye-btn:active{ transform:scale(0.92); } /* ---- Analytics dropdown di dalam kartu Total Saldo (dipindah dari kartu Business di baris "Kelola Finance"). Default tertutup (max-height:0), baru melebar ke bawah pas di-tap -- tidak makan tempat kalau tidak dibuka. ---- */ .fdash-an-toggle{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding:9px 12px; background:var(--cips-overlay-white-04); border:1px solid rgba(255,170,120,0.22); border-radius:var(--cips-radius-lg); cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-primary); } .fdash-an-toggle:active{ transform:scale(.98); } .fdash-an-toggle-chevron{ font-size:11px; color:var(--text-muted); transition:transform .25s ease; } .fdash-an-toggle[aria-expanded="true"] .fdash-an-toggle-chevron{ transform:rotate(180deg); } .fdash-an-drop{ position:relative; z-index:1; max-height:0; overflow:hidden; transition:max-height .28s ease; } .fdash-an-drop.open{ max-height:260px; } .fdash-an-drop-inner{ padding-top:10px; } .fdash-an-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px; font-size:12.5px; color:var(--text-muted); border-bottom:1px solid var(--hairline); } .fdash-an-row:last-of-type{ border-bottom:none; } .fdash-an-row b{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; color:var(--text-primary); } .fdash-an-link{ margin-top:10px; text-align:center; font-size:12px; font-weight:600; color:var(--financial-text); padding:9px; background:var(--financial-dim); border-radius:var(--cips-radius-lg); cursor:pointer; } .fdash-an-link:active{ transform:scale(.98); } /* ===== Finance Analytics (fan-) — halaman Analytics di dalam dock Finance ===== */ .fan-header-row{ display:flex; align-items:flex-start; justify-content:space-between; padding:2px 0 4px; gap:10px; } .fan-title{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; } .fan-export-btn{ display:flex; align-items:center; gap:6px; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700; color:var(--habit-text); background:var(--habit-dim); border:1px solid rgba(150,255,190,0.3); padding:9px 14px; border-radius:var(--cips-radius-lg); cursor:pointer; white-space:nowrap; flex-shrink:0; } .fan-export-btn:active{ transform:scale(.95); } .fan-sub{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-bottom:14px; } .fan-filter-row{ display:flex; gap:10px; margin-bottom:16px; } .fan-filter-chip{ display:flex; align-items:center; gap:7px; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--hairline); padding:10px 13px; border-radius:var(--cips-radius-lg); cursor:pointer; white-space:nowrap; } .fan-filter-chip:active{ transform:scale(.97); } .fan-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:12px; transition: background-color .25s ease, border-color .25s ease;} .fan-greet{ font-family:'Space Grotesk', sans-serif; font-size:16.5px; font-weight:600; color:var(--text-primary); margin-bottom:14px; } .fan-flag{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--text-muted); letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; } .fan-flag-dot{ width:7px; height:7px; border-radius:50%; background:var(--financial); flex-shrink:0; } .fan-flag-dot.pos{ background:var(--habit); } .fan-cashflow-value{ font-family:'Space Grotesk', sans-serif; font-size:30px; font-weight:700; color:var(--text-primary); letter-spacing:-.5px; margin-bottom:10px; } .fan-trend-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; } .fan-trend-pill{ font-weight:700; padding:4px 9px; border-radius:var(--cips-radius-lg); } .fan-trend-pill.up{ color:var(--habit-text); background:var(--habit-dim); } .fan-trend-pill.down{ color:var(--financial-text); background:var(--financial-dim); } .fan-trend-pill.neutral{ color:var(--text-muted); background:var(--surface-2); } .fan-trend-text{ color:var(--text-muted); } .fan-metric-block{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-top:12px; } .fan-metric-label{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; } .fan-metric-value{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:8px; } .fan-health-badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; padding:8px 14px; border-radius:var(--cips-radius-lg); margin-bottom:20px; } .fan-health-badge .dot{ width:8px; height:8px; border-radius:50%; } .fan-health-badge.healthy{ color:var(--habit-text); background:var(--habit-dim); } .fan-health-badge.healthy .dot{ background:var(--habit); } .fan-health-badge.ok{ color:var(--ibadah-text); background:rgba(255,214,140,0.18); } .fan-health-badge.ok .dot{ background:var(--ibadah); } .fan-health-badge.bad{ color:var(--financial-text); background:var(--financial-dim); } .fan-health-badge.bad .dot{ background:var(--financial); } .fan-health-badge.neutral{ color:var(--text-muted); background:var(--surface-2); } .fan-health-badge.neutral .dot{ background:var(--text-muted); } .fan-ring-wrap{ position:relative; width:190px; height:190px; margin:0 auto 6px; } .fan-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); } .fan-ring-bg{ fill:none; stroke:var(--hairline); stroke-width:11; } .fan-ring-fg{ fill:none; stroke-width:11; stroke-linecap:round; transition:stroke-dasharray .5s ease; } .fan-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .fan-ring-pct{ font-family:'Space Grotesk', sans-serif; font-size:32px; font-weight:700; color:var(--text-primary); letter-spacing:-.5px; } .fan-ring-label{ font-size:11.5px; color:var(--text-muted); margin-top:4px; } .fan-ring-desc{ text-align:center; font-size:13px; color:var(--text-muted); line-height:1.5; margin-top:16px; } .fan-sumrow{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--hairline); } .fan-sumrow:first-child{ padding-top:0; } .fan-sumrow:last-child{ border-bottom:none; padding-bottom:0; } .fan-sumrow-label{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); } .fan-sumrow-arrow{ font-size:13px; } .fan-sumrow-arrow.up{ color:var(--habit-text); } .fan-sumrow-arrow.down{ color:var(--financial-text); } .fan-sumrow-main{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); margin:6px 0 3px; } .fan-sumrow-sub{ font-size:12px; color:var(--text-muted); } .fan-insight-card{ border-radius:var(--cips-radius-lg); padding:16px; margin-bottom:10px; } .fan-insight-card.warn{ background:var(--financial-dim); } .fan-insight-card.alert{ background:rgba(255,214,140,0.18); } .fan-insight-card.good{ background:var(--habit-dim); } .fan-insight-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; } .fan-insight-tag{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; } .fan-insight-card.warn .fan-insight-tag{ color:var(--financial-text); } .fan-insight-card.alert .fan-insight-tag{ color:var(--warning-text); } .fan-insight-card.good .fan-insight-tag{ color:var(--habit-text); } .fan-insight-arrow{ color:var(--text-muted); font-size:14px; } .fan-insight-title{ font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:6px; } .fan-insight-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.55; } .fan-month-item{ display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid var(--hairline); cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); } .fan-month-item:last-child{ border-bottom:none; } .fan-month-item.active{ color:var(--financial-text); } .fan-month-item:active{ opacity:.7; } /* ---- Distribusi pengeluaran: bar ranking #1/#2/#3.. berwarna gradasi habit ---- */ .fan-dist-bar{ border-radius:18px; padding:16px 18px; margin-bottom:10px; cursor:default; } .fan-dist-rank{ font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:600; opacity:.82; margin-bottom:10px; } .fan-dist-amount{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; letter-spacing:-.3px; margin-bottom:4px; } .fan-dist-label{ font-size:13px; font-weight:600; opacity:.92; } .fan-dist-empty{ text-align:center; font-size:12.5px; color:var(--text-muted); padding:22px 0; } /* ---- Donut kategori ---- */ .fan-donut-wrap{ position:relative; width:190px; height:190px; margin:6px auto 20px; } .fan-donut-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); } .fan-donut-bg{ fill:none; stroke:var(--hairline); stroke-width:20; } .fan-donut-seg{ fill:none; stroke-width:20; transition:stroke-dasharray .5s ease; } .fan-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .fan-donut-total{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; } .fan-donut-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; } /* ---- Semua kategori: search + list expandable ---- */ .fan-catlist-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .fan-catlist-title{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); flex-shrink:0; } .fan-catlist-search{ display:flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:8px 13px; flex:1; max-width:150px; transition: border-color .15s ease, box-shadow .15s ease; } /* Fix (QA Final Production Audit, accessibility): input di dalam wrapper ini pakai outline:none tanpa pengganti apa pun -- fokus keyboard jadi tidak kelihatan sama sekali. Disamakan dengan pola .tx-search yang sudah benar. */ .fan-catlist-search:focus-within{ border-color:rgba(150,255,190,0.45); box-shadow: 0 0 0 3px rgba(150,255,190,0.14); } .fan-catlist-search span{ font-size:12px; color:var(--text-muted); flex-shrink:0; } .fan-catlist-search input{ background:none; border:none; outline:none; color:var(--text-primary); font-size:12.5px; font-family:inherit; width:100%; min-width:0; } .fan-catlist-search input::placeholder{ color:var(--text-muted); } .fan-catrow{ padding:12px 0 4px; border-bottom:1px solid var(--hairline); } .fan-catrow:last-of-type{ border-bottom:none; } .fan-catrow-top{ display:flex; align-items:center; gap:10px; } .fan-catrow-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; } .fan-catrow-label{ flex:1; min-width:0; font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fan-catrow-pct{ font-size:12px; color:var(--text-muted); flex-shrink:0; } .fan-catrow-amt{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; color:var(--text-primary); flex-shrink:0; } .fan-catrow-bar-track{ height:4px; border-radius:2px; background:var(--hairline); margin:9px 0 8px; overflow:hidden; } .fan-catrow-bar-fill{ height:100%; border-radius:2px; } .fan-catrow-toggle{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); cursor:pointer; padding:2px 0 10px; user-select:none; } .fan-catrow-toggle .chev{ display:inline-block; transition:transform .2s ease; font-size:11px; } .fan-catrow-toggle.open .chev{ transform:rotate(180deg); } .fan-catrow-sub{ display:none; padding:2px 0 10px 19px; } .fan-catrow-sub.open{ display:block; } .fan-catrow-sub-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:12px; color:var(--text-muted); border-bottom:1px dashed var(--hairline); } .fan-catrow-sub-item:last-child{ border-bottom:none; } .fan-catrow-sub-item b{ color:var(--text-primary); font-weight:600; } .fan-catlist-empty{ text-align:center; font-size:12.5px; color:var(--text-muted); padding:18px 0; } /* ---- Apa yang berubah? ---- */ .fan-change-box{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; } .fan-change-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .fan-change-label{ font-size:12.5px; color:var(--text-muted); } .fan-change-value{ font-family:'Space Grotesk', sans-serif; font-size:21px; font-weight:700; color:var(--text-primary); margin-bottom:4px; } .fan-change-sub{ font-size:11.5px; color:var(--text-muted); } .fan-change-section-title{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin:16px 0 10px; } .fan-change-section-title.up{ color:var(--financial-text); } .fan-change-section-title.down{ color:var(--habit-text); } .fan-change-catrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); } .fan-change-catrow:last-child{ border-bottom:none; } .fan-change-catrow-left{ display:flex; align-items:center; gap:9px; min-width:0; } .fan-change-catrow-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; } .fan-change-catrow-name{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fan-change-catrow-diff{ font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:600; flex-shrink:0; } .fan-change-catrow-diff.up{ color:var(--financial-text); } .fan-change-catrow-diff.down{ color:var(--habit-text); } .fan-change-empty{ font-size:12.5px; color:var(--text-muted); padding:2px 0 4px; } /* ---- Kapan kamu sering boros?: chip statistik + kalender heatmap pengeluaran harian ---- */ .fan-stat-chip-row{ display:flex; gap:10px; margin:14px 0 18px; } .fan-stat-chip{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 14px; } .fan-stat-chip-label{ font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; } .fan-stat-chip-value{ font-family:'Space Grotesk', sans-serif; font-size:16.5px; font-weight:700; color:var(--text-primary); } .fan-stat-chip-value.accent{ color:var(--habit-text); } .fan-stat-chip.clickable{ cursor:pointer; transition:transform .15s var(--ease-spring); } .fan-stat-chip.clickable:active{ transform:scale(.97); } .fan-cal-wrap{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 10px; } .fan-cal-weekday-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:10px; } .fan-cal-weekday{ text-align:center; font-size:9.5px; font-weight:700; letter-spacing:.4px; color:var(--text-muted); text-transform:uppercase; } .fan-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .fan-cal-cell{ aspect-ratio:1; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--text-primary); background:var(--surface-1); } .fan-cal-cell.empty{ visibility:hidden; } .fan-cal-lvl1{ background:rgba(255,170,120,0.28); } .fan-cal-lvl2{ background:rgba(255,170,120,0.48); } .fan-cal-lvl3{ background:rgba(255,150,100,0.68); color:#3A1F0E; } .fan-cal-lvl4{ background:rgba(255,110,60,0.85); color:var(--cips-white); } .fan-cal-lvl5{ background:#FF5A36; color:var(--cips-white); } .fan-cal-legend{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; font-size:10.5px; color:var(--text-muted); } .fan-cal-legend-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; } /* ---- Pola harian: hari kerja vs akhir pekan + streak no-spend & hari aktif ---- */ .fan-pattern-row{ display:flex; gap:18px; margin-bottom:20px; } .fan-pattern-col{ flex:1; min-width:0; } .fan-pattern-label-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; gap:6px; } .fan-pattern-label{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; color:var(--text-primary); } .fan-pattern-range{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; } .fan-pattern-value{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:9px; } .fan-pattern-bar-track{ height:5px; border-radius:3px; background:var(--hairline); overflow:hidden; } .fan-pattern-bar-fill{ height:100%; border-radius:3px; transition:width .4s ease; } .fan-pattern-stat-row{ display:flex; gap:18px; padding-top:16px; border-top:1px solid var(--hairline); } .fan-pattern-stat{ flex:1; min-width:0; } .fan-pattern-stat-label{ font-size:12.5px; color:var(--text-muted); margin-bottom:7px; } .fan-pattern-stat-value{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); } .fan-pattern-stat-value.accent{ color:var(--habit-text); } .fan-pattern-stat-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; } /* ---- Pengeluaran/Pemasukan tertinggi: kartu ranking harian ---- */ .fan-toplist-box{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px; margin-bottom:12px; } .fan-toplist-box:last-child{ margin-bottom:0; } .fan-toplist-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .fan-toplist-title{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); } .fan-toplist-badge{ font-size:11.5px; font-weight:700; } .fan-toplist-badge.down{ color:var(--financial-text); } .fan-toplist-badge.up{ color:var(--habit-text); } .fan-toplist-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline); } .fan-toplist-row:first-child{ padding-top:0; } .fan-toplist-row:last-child{ border-bottom:none; padding-bottom:0; } .fan-toplist-rank{ width:26px; height:26px; border-radius:50%; background:var(--surface-1); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-muted); flex-shrink:0; } .fan-toplist-date{ flex:1; min-width:0; } .fan-toplist-daynum{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); } .fan-toplist-dayname{ font-size:11.5px; color:var(--text-muted); margin-top:1px; } .fan-toplist-amt{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; flex-shrink:0; } .fan-toplist-amt.down{ color:var(--financial-text); } .fan-toplist-amt.up{ color:var(--habit-text); } .fan-toplist-empty{ font-size:12.5px; color:var(--text-muted); text-align:center; padding:8px 0 2px; } /* ---- Cashflow per akun: dikelompokkan per tipe akun (Bank/E-Wallet/Cash/dll) ---- */ .fan-cfacc-groupname{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); margin:18px 0 10px; } .fan-cfacc-groupname:first-child{ margin-top:2px; } .fan-cfacc-card{ display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; } .fan-cfacc-card:last-child{ margin-bottom:0; } .fan-cfacc-avatar{ width:42px; height:42px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center; font-size:16.5px; flex-shrink:0; font-family:'Space Grotesk', sans-serif; font-weight:700; } .fan-cfacc-main{ flex:1; min-width:0; } .fan-cfacc-name{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fan-cfacc-type{ font-size:10.5px; color:var(--text-muted); letter-spacing:.5px; margin-top:3px; } .fan-cfacc-right{ text-align:right; flex-shrink:0; } .fan-cfacc-cf-label{ font-size:10.5px; color:var(--text-muted); } .fan-cfacc-cf-value{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; margin:3px 0 7px; white-space:nowrap; } .fan-cfacc-cf-value.up{ color:var(--habit-text); } .fan-cfacc-cf-value.down{ color:var(--financial-text); } .fan-cfacc-pills{ display:flex; gap:5px; justify-content:flex-end; } .fan-cfacc-pill{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:var(--cips-radius-md); white-space:nowrap; } .fan-cfacc-pill.up{ color:var(--habit-text); background:var(--habit-dim); } .fan-cfacc-pill.down{ color:var(--financial-text); background:var(--financial-dim); } .fan-cfacc-empty{ text-align:center; font-size:12.5px; color:var(--text-muted); padding:18px 0; } /* ---- Quick action row: Pemasukan / Pengeluaran / menu cepat (di bawah Total Saldo) ---- */ .fdash-quick-row{ display:flex; align-items:center; gap:10px; margin:-2px 0 12px; } .fdash-quick-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 10px; cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; color:var(--text-primary); } .fdash-quick-btn:active{ transform:scale(.97); } .fdash-quick-icon{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; line-height:1; flex-shrink:0; } .fdash-quick-icon-income{ background:var(--habit-dim); color:var(--habit-text); } .fdash-quick-icon-expense{ background:var(--financial-dim); color:var(--financial-text); } /* Fix OODA-Finance-1: .fdash-quick-fab & seluruh .quick-menu-* (sheet "Menu Finance") dihapus -- FAB pemicunya sudah dicabut dari index.html karena 100% duplikat dengan tab Kelola/Lainnya, jadi CSS-nya jadi dead code. */ @media (max-width:420px){ .txf-row-2{ grid-template-columns:1fr; } .fdash-quick-btn{ min-width:0; } } /* ---- Halaman Transaksi (riwayat gabungan Pemasukan + Pengeluaran) ---- */ .tx-hero{ padding:4px 0 16px; display:flex; flex-direction:column; gap:14px; } .tx-hero-top{ display:flex; align-items:center; gap:10px; } .tx-hero-brand{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; } .tx-hero-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0; background: linear-gradient(145deg, var(--cips-financial-tint), var(--financial) 55%, var(--cips-financial-shade)); display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow: 0 8px 18px -6px rgba(255,170,120,0.55), inset 0 1px 0 var(--cips-overlay-white-35); } .tx-hero-text{ min-width:0; } .tx-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:21px; font-weight:600; color:var(--text-primary); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tx-hero-sub{ font-size:12px; color:var(--text-muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tx-add-btn{ height:46px; padding:0 16px; border-radius:var(--cips-radius-lg); border:1px solid rgba(150,255,190,0.35); background:var(--habit-dim); color:var(--habit-text); font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; flex-shrink:0; white-space:nowrap; box-shadow: 0 6px 16px -10px rgba(150,255,190,0.4); transition: transform .15s var(--ease-spring), box-shadow .15s ease; } .tx-add-btn:active{ transform:scale(0.96); box-shadow: 0 0 0 4px rgba(150,255,190,0.14); } .tx-add-btn-full{ width:100%; } .tx-search{ display:flex; align-items:center; gap:10px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 14px; margin:6px 0 14px; box-shadow: 0 8px 20px -16px var(--cips-overlay-black-45); transition: border-color .15s ease, box-shadow .15s ease; } .tx-search:focus-within{ border-color:rgba(255,170,120,0.45); box-shadow: 0 0 0 3px rgba(255,170,120,0.14); } .tx-search input{ flex:1; border:none; background:none; outline:none; color:var(--text-primary); font-size:13.5px; font-family:inherit; min-width:0; } .tx-search input::placeholder{ color:var(--text-muted); } .tx-search-ico{ color:var(--text-muted); font-size:14px; flex-shrink:0; } .tx-filter-row-wrap{ margin-bottom:6px; } .tx-filter-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0; } .tx-filter-chip{ display:flex; align-items:center; gap:6px; white-space:nowrap; padding:9px 13px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-1); color:var(--text-primary); font-size:12px; font-weight:600; font-family:'Space Grotesk', sans-serif; cursor:pointer; flex-shrink:0; transition: transform .15s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .2s ease; } .tx-filter-chip:active{ transform:scale(0.94); } .tx-filter-chip.active{ background:var(--habit-dim); border-color:rgba(150,255,190,0.4); color:var(--habit-text); box-shadow: 0 0 0 3px rgba(150,255,190,0.10); } .tx-filter-chip .car{ font-size:9px; opacity:.65; } .tx-day-group{ margin-bottom:16px; } .tx-day-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; } .tx-day-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.2px; color:var(--text-muted); text-transform:uppercase; } .tx-day-total{ font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:var(--cips-radius-md); } .tx-day-total.pos{ background:var(--habit-dim); color:var(--habit-text); } .tx-day-total.neg{ background:var(--financial-dim); color:var(--financial-text); } .tx-day-total.zero{ background:var(--surface-2); color:var(--text-muted); } .tx-row{ position:relative; overflow:hidden; border-radius:var(--cips-radius-lg); margin-bottom:10px; } .tx-row-delete-action{ position:absolute; top:0; right:0; bottom:0; width:72px; display:flex; align-items:center; justify-content:center; background:#e5484d; color:var(--cips-white); font-size:19px; cursor:pointer; border-radius:0 var(--cips-radius-lg) var(--cips-radius-lg) 0; } .tx-row-content{ display:flex; align-items:center; gap:12px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px; position:relative; z-index:1; touch-action:pan-y; box-shadow: 0 8px 20px -16px var(--cips-overlay-black-50); transition: transform .18s var(--ease-spring), box-shadow .15s ease, border-color .15s ease, background-color .25s ease; } .tx-row-content::before{ content:''; position:absolute; top:0; left:12px; right:12px; height:1px; background: linear-gradient(90deg, transparent, var(--cips-overlay-white-12), transparent); pointer-events:none; } .tx-row-content:active{ transform:scale(0.985); box-shadow: 0 3px 10px -8px var(--cips-overlay-black-45); } .tx-row-content.tx-row-swiped{ transform:translateX(-72px); } .tx-row-content.tx-row-dragging{ transition:none; } @media (prefers-reduced-motion: reduce){ .tx-row-content{ transition:none; } } .tx-row-ico{ width:44px; height:44px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; box-shadow: inset 0 1px 0 var(--cips-overlay-white-04); } .tx-row-ico-income{ background:var(--habit-dim); } .tx-row-ico-expense{ background:var(--financial-dim); } .tx-row-ico-saving{ background:var(--kesehatan-dim); } .tx-row-ico-transfer{ background:var(--surface-2); } .tx-row-main{ flex:1; min-width:0; cursor:pointer; } .tx-row-title{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tx-row-sub{ display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; } .tx-row-tag{ font-size:10px; font-weight:600; color:var(--text-muted); background:var(--surface-2); padding:3px 8px; border-radius:var(--cips-radius-md); white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; } .tx-row-meta{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; } .tx-row-amt{ text-align:right; flex-shrink:0; cursor:pointer; } .tx-row-amt-value{ font-family:'JetBrains Mono', monospace; font-size:13.5px; font-weight:700; } .tx-row-kebab{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:16px; cursor:pointer; flex-shrink:0; margin-left:2px; transition: transform .15s var(--ease-spring), background .2s ease; } .tx-row-kebab:active{ background:var(--surface-2); transform:scale(0.88); } .tx-sheet-options{ display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; } .tx-sheet-opt.active{ background:var(--habit-dim); color:var(--habit-text); box-shadow: 0 0 0 3px rgba(150,255,190,0.10); } .tx-sheet-opt-check{ color:var(--habit-text); font-size:14px; } .tx-menu-opt{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--cips-radius-lg); background:var(--surface-2); font-size:14px; font-weight:600; color:var(--text-primary); cursor:pointer; margin-bottom:8px; box-shadow: 0 6px 14px -12px var(--cips-overlay-black-50); transition: transform .15s var(--ease-spring), box-shadow .2s ease; } .tx-menu-opt:active{ transform:scale(0.98); box-shadow: 0 0 0 4px var(--cips-overlay-white-05); } .tx-menu-opt.danger{ color:var(--financial-text); } /* ---- Sheet "Transaksi baru" (tombol + Tambah Transaksi di halaman Transaksi) ---- */ .txf-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .txf-type-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 10px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; cursor:pointer; box-shadow: 0 8px 18px -14px var(--cips-overlay-black-50); transition: transform .15s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .2s ease; } .txf-type-btn:active{ transform:scale(0.96); } .txf-type-btn .txf-type-ico{ font-size:20px; line-height:1; } .txf-type-btn.active{ border-color:var(--financial); background:var(--surface-3, var(--surface-2)); box-shadow: 0 0 0 3px rgba(255,170,120,0.16), 0 8px 18px -12px rgba(255,170,120,0.35); } .txf-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; } .txf-field-label{ font-size:13px; color:var(--text-secondary, var(--text-primary)); margin-bottom:6px; display:block; } .txf-field-block{ margin-bottom:14px; } .txf-field-block .field-input{ width:100%; text-align:left; box-sizing:border-box; } .txf-amount-input{ font-size:20px; padding:12px 14px; } .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:14px; } .section-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--habit-text); margin: 4px 2px 10px; } /* ---- Religion dashboard: header "Ibadah Hub" ---- */ .ibadah-header{ display:flex; align-items:center; gap:10px; padding-top:2px; margin-bottom:18px; } .ibadah-header-brand{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; } .ibadah-header-logo{ width:40px; height:40px; border-radius:var(--cips-radius-md); flex-shrink:0; background: conic-gradient(from 45deg, var(--ibadah), var(--habit), var(--ibadah)); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--cips-on-accent-cool); box-shadow: 0 6px 16px -6px rgba(255,214,140,0.55); position:relative; } .ibadah-header-logo::after{ content:""; position:absolute; inset:-5px; border-radius:15px; background: radial-gradient(circle, rgba(255,214,140,0.3), transparent 72%); z-index:-1; } .ibadah-header-title{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14.5px; line-height:1.2; color:var(--text-primary); } .ibadah-header-tagline{ font-size:11px; color:var(--ibadah-text); letter-spacing:0.2px; margin-top:1px; } /* .ibadah-bell dihapus (audit UX): dulu ikon lonceng + dot notifikasi permanen di sini, padahal tujuannya cuma buka log riwayat statis ("Status shalat 30 hari terakhir") -- sama sekali bukan notifikasi, dan dot-nya tidak pernah terikat logic apapun (selalu nyala). Diganti ikon jam (🕐) di index.html, konsisten dengan tombol Riwayat Meal & Gym yang sudah pakai ikon jam untuk fitur yang identik. */ /* ---- Religion dashboard: kartu Sholat Berikutnya (mengikuti mockup Ibadah Hub) ---- */ .religion-next-card{ position:relative; overflow:hidden; background: linear-gradient(160deg, rgba(255,214,140,0.12) 0%, var(--surface-1) 60%); border: 1px solid rgba(255,214,140,0.3); border-radius: 26px; padding: 22px; margin-bottom: 16px; box-shadow: 0 20px 44px -24px rgba(255,214,140,0.35), 0 6px 18px -12px var(--cips-overlay-black-40), inset 0 1px 0 var(--cips-overlay-white-05); transition: background-color .25s ease, border-color .25s ease;} .religion-next-card::after{ content:''; position:absolute; top:0; left:16px; right:16px; height:1px; background: linear-gradient(90deg, transparent, var(--cips-overlay-white-18), transparent); pointer-events:none; z-index:1; } .religion-next-card::before{ content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(150,255,190,0.20), transparent 70%); } .religion-next-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:1; } .religion-next-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px; color:var(--habit-text); text-transform:uppercase; margin-bottom:6px; } .religion-next-name{ font-family:'Space Grotesk', sans-serif; font-size:23px; font-weight:700; color:var(--text-primary); letter-spacing:-0.3px; } .religion-next-time{ font-family:'JetBrains Mono', monospace; font-size:32px; font-weight:700; color:var(--ibadah-text); letter-spacing:-0.5px; margin-top:2px; } .religion-next-ring{ width:76px; height:76px; flex-shrink:0; } .religion-next-ring svg{ width:76px; height:76px; } .religion-next-countdown{ font-size:13.5px; color:var(--text-muted); margin-top:16px; position:relative; z-index:1; } .religion-next-countdown b{ color:var(--habit-text); font-family:'JetBrains Mono', monospace; font-weight:600; } .religion-next-date{ font-size:12px; color:var(--text-muted); margin-top:4px; position:relative; z-index:1; opacity:0.85; } .religion-next-date-hijri{ font-size:11px; color:var(--ibadah-text); margin-top:2px; position:relative; z-index:1; opacity:0.85; } .religion-arch-deco{ position:absolute; top:0; right:0; pointer-events:none; } .religion-next-location{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,214,140,0.18); position:relative; z-index:1; } .religion-next-location-text{ font-size:12px; color:var(--text-muted); line-height:1.4; flex:1; min-width:0; } .religion-next-location-text b{ color:var(--text-primary); } .religion-check-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; padding:12px 16px; border-radius:var(--cips-radius-lg); border:1px solid rgba(255,214,140,0.4); background:var(--ibadah); color:var(--cips-on-accent-warm); font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition: transform .15s var(--ease-spring), box-shadow .15s ease; box-shadow: 0 10px 22px -14px rgba(255,214,140,.5); position:relative; z-index:1; } .religion-check-btn:active{ transform:scale(0.97); box-shadow: 0 0 0 4px rgba(255,214,140,0.14); } .religion-check-btn:disabled{ background:var(--surface-2); color:var(--text-muted); border-color:var(--cips-overlay-white-08); box-shadow:none; cursor:not-allowed; opacity:0.6; } .religion-check-btn:disabled:active{ transform:none; box-shadow:none; } /* ---- Religion dashboard: kartu "Spiritual Dashboard" (di bawah kartu Sholat Berikutnya) -- gaya dasarnya sengaja disamakan dengan .religion-next-card/.hero-ibadah (background gradasi ibadah-dim, border rgba(255,214,140,..), radius 24-26px) supaya menyatu visual dengan kartu di atasnya, bukan komponen asing. ---- */ .spiritual-dashboard-card{ position:relative; overflow:hidden; background: linear-gradient(160deg, rgba(255,214,140,0.08) 0%, var(--surface-2) 70%); border: 1px solid var(--hairline); border-radius: 22px; padding: 20px; margin-bottom: 16px; box-shadow: 0 14px 32px -22px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-04); } .spiritual-dashboard-title{ font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:700; color:var(--text-primary); letter-spacing:-0.2px; } .spiritual-dashboard-sub{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-top:6px; } .spiritual-dashboard-divider{ height:1px; background:var(--hairline); margin:16px 0 6px; } .spiritual-dashboard-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; } .spiritual-dashboard-row + .spiritual-dashboard-row{ border-top:1px solid var(--cips-overlay-white-04); } .spiritual-dashboard-label{ font-size:13.5px; color:var(--text-muted); } .spiritual-dashboard-value{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); } .dzikir-plus-btn{ width:38px; height:38px; border-radius:var(--cips-radius-md); flex-shrink:0; cursor:pointer; background:var(--ibadah); color:var(--cips-on-accent-cool); border:none; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; transition: transform .15s var(--ease-spring), box-shadow .15s ease; box-shadow: 0 8px 18px -8px rgba(255,214,140,.6); } .dzikir-plus-btn:active{ transform:scale(0.9); box-shadow: 0 3px 10px -6px rgba(255,214,140,.5); } .prayer-row{ display:flex; align-items:center; gap:12px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:11px 14px; margin-bottom:8px; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; box-shadow: 0 6px 16px -12px var(--cips-overlay-black-40); } .prayer-row.current{ border-color: rgba(255,214,140,0.45); background: var(--ibadah-dim); box-shadow: 0 8px 20px -12px rgba(255,214,140,0.35), 0 6px 16px -12px var(--cips-overlay-black-35); } .prayer-row-icon{ width:36px; height:36px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--habit-dim); color:var(--habit-text); flex-shrink:0; } .prayer-row.current .prayer-row-icon{ background: rgba(255,214,140,0.20); color:var(--ibadah-text); } .prayer-row-name{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); } .prayer-row-time{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted); margin-left:auto; margin-right:4px; } .prayer-row.current .prayer-row-time{ color:var(--ibadah-text); font-weight:600; } .mini-progress-card{ display:flex; align-items:center; gap:14px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition: transform .15s var(--ease-spring), box-shadow .15s ease, background-color .25s ease, border-color .25s ease; box-shadow: 0 8px 20px -14px var(--cips-overlay-black-45); } .mini-progress-card:active{ transform:scale(0.98); box-shadow: 0 3px 10px -8px var(--cips-overlay-black-40); } .mini-progress-icon{ width:44px; height:44px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; background:var(--ibadah-dim); color:var(--ibadah-text); } .mini-progress-body{ flex:1; min-width:0; } .mini-progress-label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; } .mini-progress-value-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .mini-progress-value{ font-family:'Space Grotesk', sans-serif; font-size:15.5px; font-weight:700; color:var(--text-primary); } .mini-progress-pct{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:var(--ibadah-text); flex-shrink:0; } .mini-progress-bar-track{ height:6px; border-radius:3px; background:rgba(130,140,160,0.16); margin-top:8px; overflow:hidden; } .mini-progress-bar-fill{ height:100%; border-radius:3px; background:var(--ibadah); transition: width .4s ease; } .mini-progress-hint{ font-size:11.5px; color:var(--text-muted); margin-top:6px; } .mini-progress-chevron{ color:var(--text-muted); font-size:16px; flex-shrink:0; } /* Kartu "Ibadah Hari Ini" gabungan (simplifikasi dashboard Religion) -- dulu Doa/Dzikir/Tilawah/Amal adalah 4 .mini-progress-card terpisah yang bersaing perhatian di layar; sekarang jadi 1 kartu, 4 baris ringkas. Semua id yang dipakai render*() (doaTodayTitle, religionDzikirValue, dst) tetap sama persis -- cuma bungkusnya yang berubah, jadi fungsinya tidak berkurang sedikit pun. */ .ibadah-today-card{ background: linear-gradient(160deg, rgba(255,214,140,0.05) 0%, var(--surface-1) 45%, var(--surface-2) 140%); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:6px 16px 4px; margin-bottom:14px; box-shadow: 0 8px 20px -14px var(--cips-overlay-black-45); } .ibadah-today-card-title{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); padding:12px 0 8px; } .ibadah-today-row{ display:flex; align-items:center; gap:12px; padding:10px 0; cursor:pointer; } .ibadah-today-row:active{ opacity:0.7; } .ibadah-today-divider{ height:1px; background:var(--hairline); } .ibadah-today-row-icon{ width:36px; height:36px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; background:var(--ibadah-dim); color:var(--ibadah-text); } .ibadah-today-row-body{ flex:1; min-width:0; } .ibadah-today-row-label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; } .ibadah-today-row-label-line{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .ibadah-today-row-value{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); } .ibadah-today-row-pct{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600; color:var(--ibadah-text); flex-shrink:0; } .ibadah-today-row-hint{ font-size:11px; color:var(--text-muted); margin-top:3px; } .ibadah-today-mini-bar-track{ height:5px; border-radius:3px; background:rgba(130,140,160,0.16); margin-top:6px; overflow:hidden; } .ibadah-today-mini-bar-fill{ height:100%; border-radius:3px; background:var(--ibadah); transition: width .4s ease; } .ibadah-today-row-chevron{ color:var(--text-muted); font-size:16px; flex-shrink:0; } .ibadah-today-row-arabic{ font-family:'Amiri', serif; font-size:13px; color:var(--text-muted); margin-top:3px; direction:rtl; } .subheader{ display:flex; align-items:center; justify-content:space-between; padding:16px 2px 18px; position:relative; } .subheader-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; } .subheader-spacer{ width:38px; } .cat-card{ background: var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; display:flex; align-items:center; gap:14px; margin-bottom:12px; cursor:pointer; transition: transform .15s var(--ease-spring), box-shadow .15s ease, background-color .25s ease, border-color .25s ease; box-shadow: 0 8px 20px -14px var(--cips-overlay-black-45); } .cat-card:active{ transform:scale(0.98); box-shadow: 0 3px 10px -8px var(--cips-overlay-black-40); } .cat-icon{ width:46px; height:46px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; } .cat-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:2px; } .cat-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.4; } .cat-chevron{ margin-left:auto; color:var(--text-muted); font-size:15px; } .stat-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; transition: background-color .25s ease, border-color .25s ease;} .stat-name{ font-size:13px; color:var(--text-muted); } .stat-value{ font-family:'JetBrains Mono', monospace; font-size:14.5px; font-weight:600; color:var(--text-primary); } .progress-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:16px; box-shadow: 0 10px 24px -18px var(--cips-overlay-black-50); } .progress-block.clickable{ cursor:pointer; } .progress-block-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .progress-block-header .progress-block-title{ margin-bottom:0; } .progress-block-chevron{ font-size:16px; color:var(--text-muted); transition:transform .3s var(--ease-spring); flex-shrink:0; } .progress-block-chevron.open{ transform:rotate(90deg); } .progress-block-title{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; } .progress-row{ margin-bottom:12px; } .progress-row:last-child{ margin-bottom:0; } .progress-row-top{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; } .progress-row-top span:first-child{ color:var(--text-primary); font-weight:600; } .progress-row-top span:last-child{ font-family:'JetBrains Mono', monospace; color:var(--text-muted); } .progress-bar{ height:8px; border-radius:5px; background:rgba(130,140,160,0.16); overflow:hidden; } .progress-fill{ height:100%; border-radius:5px; transition: width .4s ease; } .list-item{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; box-shadow: 0 6px 16px -12px var(--cips-overlay-black-45); transition: transform .15s var(--ease-spring), box-shadow .15s ease, background-color .25s ease, border-color .25s ease; } .list-item-row{ display:flex; align-items:center; gap:12px; } .list-item input[type="checkbox"]:not(.switch input){ width:20px; height:20px; accent-color: var(--ibadah); flex-shrink:0; cursor:pointer; } .item-info{ flex:1; min-width:0; } .item-name{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); } .habit-priority-star{ display:inline-block; cursor:pointer; margin-right:6px; font-size:15px; color:var(--warning); line-height:1; vertical-align:-2px; } .habit-priority-star:focus-visible{ outline:2px solid var(--warning); outline-offset:2px; border-radius:3px; } .item-name.done{ text-decoration: line-through; opacity:0.55; } .item-time{ font-size:12px; color:var(--text-muted); margin-top:2px; font-family:'JetBrains Mono', monospace; } .section-caption{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin: 18px 2px 10px; } .section-caption:first-child{ margin-top:0; } .switch{ position:relative; display:inline-block; width:36px; height:21px; flex-shrink:0; } .switch input{ opacity:0; width:0; height:0; } .slider{ position:absolute; cursor:pointer; inset:0; background:var(--hairline); transition:.2s; border-radius:22px; } .slider:before{ content:""; position:absolute; height:15px; width:15px; left:3px; bottom:3px; background:var(--cips-white); transition:.2s; border-radius:50%; } .switch input:checked + .slider{ background:var(--ibadah); } .switch input:checked + .slider:before{ transform:translateX(15px); } .settings-hero{ display:flex; align-items:center; gap:12px; padding:16px; margin:2px 0 18px; background: linear-gradient(155deg, rgba(195,166,255,0.12) 0%, var(--surface-1) 65%); border: 1px solid rgba(195,166,255,0.28); border-radius: 22px; box-shadow: 0 18px 38px -24px rgba(195,166,255,0.4), inset 0 1px 0 var(--cips-overlay-white-04); transition: background-color .25s ease, border-color .25s ease;} .settings-header-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0; background: linear-gradient(145deg, #E3D4FF, var(--settings) 55%, #7A54D6); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px -6px rgba(195,166,255,0.6), inset 0 1px 0 var(--cips-overlay-white-35); position:relative; } .settings-header-icon::after{ content:""; position:absolute; inset:-5px; border-radius:16px; background: radial-gradient(circle, rgba(195,166,255,0.35), transparent 72%); z-index:-1; } .settings-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; } .settings-hero-tagline{ font-size:12px; color:var(--text-muted); margin-top:4px; } .settings-block{ background: linear-gradient(160deg, rgba(195,166,255,0.05) 0%, var(--surface-1) 40%, var(--surface-2) 130%); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:14px; box-shadow: 0 14px 30px -20px rgba(195,166,255,0.22), inset 0 1px 0 var(--cips-overlay-white-03); transition: background-color .25s ease, border-color .25s ease;} .settings-label{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; } .toggle-group{ display:flex; gap:8px; } .toggle-btn{ flex:1; padding:10px; text-align:center; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; font-family:'Space Grotesk', sans-serif; transition: transform .15s var(--ease-spring), background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .toggle-btn:active{ transform:scale(0.96); } .toggle-btn.active{ background:var(--settings-dim); border-color:var(--settings); color:var(--settings-text); box-shadow: 0 0 0 1px rgba(195,166,255,.15), 0 6px 16px -8px rgba(195,166,255,.4); } /* Tab Sholat Wajib/Sunnah gabungan (simplifikasi modul Religion) -- reuse .toggle-btn tapi diwarnai --ibadah, bukan --settings default. */ .prayer-tab-row{ display:flex; gap:8px; margin-bottom:14px; } .prayer-tab-btn{ flex:1; padding:10px; text-align:center; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; font-family:'Space Grotesk', sans-serif; transition: transform .15s var(--ease-spring), background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .prayer-tab-btn:active{ transform:scale(0.96); } .prayer-tab-btn.active{ background:var(--ibadah-dim); border-color:var(--ibadah); color:var(--ibadah-text); box-shadow: 0 0 0 1px rgba(255,214,140,.15), 0 6px 16px -8px rgba(255,214,140,.4); } .settings-desc{ font-size:12.5px; color:var(--text-muted); margin-top:10px; line-height:1.5; } .empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 30px 16px 26px; } .empty-state-icon{ width:52px; height:52px; border-radius:var(--cips-radius-lg); margin-bottom:14px; background:var(--surface-2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow: 0 10px 22px -14px var(--cips-overlay-black-50), inset 0 1px 0 var(--cips-overlay-white-04); } .empty-state-text{ font-size:12.5px; color:var(--text-muted); line-height:1.55; max-width:230px; } /* ---- PWA: banner "instal ke layar utama" ---- */ .install-banner{ position:absolute; left:14px; right:14px; bottom:14px; z-index:40; background:var(--surface-1); border:1px solid rgba(150,255,190,0.32); border-radius:var(--cips-radius-lg); padding:14px 14px 14px 16px; display:flex; align-items:center; gap:12px; box-shadow: 0 16px 32px -12px var(--cips-overlay-black-50); transform:translateY(14px) scale(0.98); opacity:0; pointer-events:none; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; } .install-banner.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; } .install-banner-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 10px -4px var(--cips-overlay-black-40); } .install-banner-body{ flex:1; min-width:0; } .install-banner-title{ font-size:13px; font-weight:600; color:var(--text-primary); } .install-banner-sub{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; } .install-banner-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; } .install-banner-btn{ background:var(--habit); color:var(--cips-on-accent-cool); font-weight:600; font-size:12px; border:none; border-radius:var(--cips-radius-md); padding:9px 12px; cursor:pointer; white-space:nowrap; } .install-banner-close{ background:none; border:none; color:var(--text-muted); font-size:15px; cursor:pointer; width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .install-steps{ margin-top:12px; } .install-step{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline); } .install-step:last-child{ border-bottom:none; } .install-step-num{ width:26px; height:26px; border-radius:50%; background:var(--habit-dim); color:var(--habit-text); font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .install-step-text{ font-size:13px; color:var(--text-primary); line-height:1.4; } .install-status-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--habit-text); background:var(--habit-dim); border-radius:var(--cips-radius-sm); padding:4px 9px; margin-top:8px; } .field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .field-row:last-child{ margin-bottom:0; } /* Khusus form modul Finance (Akun, Budget, Tagihan, dst di sheet #financeModuleFields): label diletakkan di atas, input/select memanjang penuh ke kanan di bawahnya. Tidak memengaruhi .field-row di tempat lain (habit, health, dsb) karena discope ke selector ini saja. */ #financeModuleFields .field-row{ flex-direction:column; align-items:stretch; gap:6px; } #financeModuleFields .field-row label{ flex:none; } #financeModuleFields .field-row .field-input{ width:100% !important; text-align:left; } /* Fase 7: Compounding Engine -- form statis (bukan lewat sistem module generik), tapi pakai gaya field yang sama persis (full-width stacked) supaya konsisten dengan form modul Finance lainnya. */ #compoundingFields .field-row{ flex-direction:column; align-items:stretch; gap:6px; } #compoundingFields .field-row label{ flex:none; } #compoundingFields .field-row .field-input{ width:100% !important; text-align:left; box-sizing:border-box; } .field-required-star{ color:var(--danger-text); font-size:11px; vertical-align:top; margin-left:3px; } .field-help-text{ font-size:11.5px; color:var(--text-muted); margin-top:-3px; line-height:1.4; } .field-row label{ font-size:13px; color:var(--text-primary); flex:1; } .field-input{ width:120px; text-align:right; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:8px 10px; font-family:'JetBrains Mono', monospace; font-size:16px; transition: border-color .15s ease, box-shadow .15s ease; } .field-input:focus{ outline:none; border-color:var(--ibadah); box-shadow: 0 0 0 3px rgba(255,214,140,0.16); } /* Batch 2 (standarisasi Finance) fix polish: input type="date" (dipakai field Tanggal Beli Investasi) sebelumnya cuma kewarisan background/warna teks dari .field-input di atas -- itu cukup untuk KOTAK inputnya, TAPI ikon kalender bawaan browser (::-webkit-calendar-picker-indicator) dan popup kalender native TIDAK ikut warna itu; browser render ikon gelap default (didesain untuk latar terang), jadi nyaris tak kelihatan di atas --surface-2 gelap. `color-scheme` memberi tahu browser tema latar widget native ini supaya ikon & popup kalender ikut kontras yang benar, otomatis menyesuaikan tema gelap/terang app lewat html[data-theme] di bawah. Font angka dikembalikan ke default (bukan JetBrains Mono) karena beberapa browser merender teks placeholder "dd/mm/yyyy" bawaan input date tidak rapi di font monospace. */ input[type="date"].field-input{ color-scheme: dark; font-family: inherit; text-align:left; } html[data-theme="light"] input[type="date"].field-input{ color-scheme: light; } /* ==== Bank/E-Wallet Picker (Pilih Bank / Pilih E-Wallet di form Tambah Akun) ==== */ .logo-picker-trigger{ width:100%; display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:8px 10px; font-family:'Space Grotesk', sans-serif; font-size:14px; text-align:left; cursor:pointer; transition: border-color .15s ease; } .logo-picker-trigger:disabled{ opacity:0.45; cursor:default; } .logo-picker-trigger.placeholder .logo-picker-trigger-label{ color:var(--text-muted); } .logo-picker-trigger-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .logo-picker-trigger-caret{ color:var(--text-muted); font-size:11px; flex-shrink:0; } /* Selector digabung (.day-sheet.logo-picker-sheet, bukan cuma .logo-picker-sheet) supaya spesifisitasnya LEBIH TINGGI dari aturan generik .day-sheet{ z-index:31 } di bawah — sebelumnya z-index:161 di sini kalah oleh .day-sheet karena aturan generik itu letaknya belakangan di stylesheet (spesifisitas sama = urutan yg menang), jadi sheet ini kepakai z-index:31 juga dan ketutup layar onboarding. */ .day-sheet.logo-picker-sheet{ z-index:161; height:min(78dvh, 680px); max-height:78dvh; display:flex; flex-direction:column; overflow:hidden; } .day-sheet-backdrop.logo-picker-backdrop{ z-index:160; } .logo-picker-search-wrap{ flex:0 0 auto; padding:4px 0 10px; position:relative; background:var(--surface-1); z-index:2; } .logo-picker-search{ width:100%; box-sizing:border-box; min-height:44px; padding:11px 14px; border:1px solid var(--hairline); border-radius:var(--cips-radius-md); background:var(--surface-2); color:var(--text-primary); font:500 14px/1.2 Inter,sans-serif; outline:none; } .logo-picker-search:focus{ border-color:rgba(150,255,190,.55); box-shadow:0 0 0 2px rgba(150,255,190,.10); } .logo-picker-list{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px; margin-top:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding:2px 2px 18px; } .logo-picker-item{ flex:0 0 auto; min-height:44px; box-sizing:border-box; } .logo-picker-empty{ padding:24px 12px; text-align:center; color:var(--text-muted); font-size:13px; } .logo-picker-item{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--cips-radius-lg); cursor:pointer; transition: background .12s ease; border:1px solid transparent; } .logo-picker-item:active{ transform:scale(0.98); } .logo-picker-item.selected{ background:var(--surface-2); border-color:var(--hairline); } .logo-picker-item-name{ flex:1; min-width:0; font-size:14px; color:var(--text-primary); font-weight:600; } .logo-picker-item-check{ color:var(--habit-text); font-size:15px; flex-shrink:0; } .backup-textarea{ width:100%; height:160px; resize:none; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:10px 12px; font-family:'JetBrains Mono', monospace; font-size:11px; line-height:1.5; margin-bottom:10px; } .settings-block.clickable{ cursor:pointer; } .cat-edit-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .cat-label-input{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:8px 10px; font-size:13px; font-family:'Inter', sans-serif; } .cat-del-btn{ width:30px; height:30px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-muted); font-size:13px; cursor:pointer; flex-shrink:0; } .cat-del-btn:active{ transform:scale(0.92); } .add-cat-btn{ width:100%; padding:10px; border-radius:var(--cips-radius-md); border:1px dashed var(--hairline); background:transparent; color:var(--financial-text); font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer; margin-top:2px; } .add-cat-btn:active{ transform:scale(0.98); } .entry-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; } .entry-edit-btn, .entry-delete-btn{ padding:10px 12px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:transparent; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; transition: transform .15s ease; flex-shrink:0; } .entry-edit-btn{ color:var(--kesehatan-text); border-color:rgba(130,205,255,0.35); } .entry-delete-btn{ color:#FF6B6B; border-color:rgba(255,107,107,0.4); } .entry-edit-btn:active, .entry-delete-btn:active{ transform:scale(0.94); } .entry-status{ flex:1; text-align:center; font-size:12px; color:var(--habit-text); font-family:'JetBrains Mono', monospace; opacity:0; transition:opacity .2s ease; white-space:nowrap; } .entry-status.show{ opacity:1; } /* ==== Finance: Akun Finansial (ditambahkan lewat Menu Cepat) ==== */ .fin-acc-chips{ display:flex; flex-wrap:wrap; gap:8px; } .fin-acc-chip.active{ background:var(--habit); color:var(--cips-on-accent-cool); border-color:var(--habit); box-shadow: 0 6px 16px -8px rgba(150,255,190,0.5); } .fin-acc-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; cursor:pointer; position:relative; overflow:hidden; box-shadow: 0 10px 24px -18px rgba(255,170,120,0.28), 0 6px 16px -14px var(--cips-overlay-black-50); transition: transform .15s var(--ease-spring), box-shadow .15s ease, border-color .15s ease; } .fin-acc-card::before{ content:''; position:absolute; top:0; left:14px; right:14px; height:1px; background: linear-gradient(90deg, transparent, var(--cips-overlay-white-12), transparent); pointer-events:none; } .fin-acc-card:active{ transform:scale(0.98); box-shadow: 0 3px 10px -8px var(--cips-overlay-black-45); } .fin-acc-main{ flex:1; min-width:0; } .fin-acc-name{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); } .fin-acc-type{ font-size:10.5px; color:var(--text-muted); letter-spacing:0.5px; margin-top:3px; } .fin-acc-right{ text-align:right; flex-shrink:0; } .fin-acc-saldo-label{ font-size:10.5px; color:var(--text-muted); } .fin-acc-saldo-value{ font-family:'JetBrains Mono', monospace; font-size:13.5px; font-weight:700; color:var(--text-primary); margin-top:4px; } .fin-acc-kebab{ color:var(--text-muted); font-size:17px; padding:2px 4px; flex-shrink:0; } /* ==== Finance: Kalender (ditambahkan lewat Menu Cepat) ==== */ .fin-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--text-muted); margin-bottom:6px; } .fin-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .fin-cal-day{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:var(--cips-radius-md); font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-primary); cursor:pointer; background:var(--surface-2); transition: transform .15s var(--ease-spring), background .2s ease, box-shadow .2s ease; } .fin-cal-day:active{ transform:scale(0.88); } .fin-cal-day.empty{ visibility:hidden; cursor:default; } .fin-cal-day.selected{ background:var(--habit-dim); color:var(--habit-text); font-weight:700; box-shadow: 0 0 0 3px rgba(150,255,190,0.12); } .fin-cal-day.today{ border:1px solid var(--habit); } .fin-cal-dot{ position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--financial); } .fin-mod-progress{ margin-top:10px; } /* ==== Religion module ==== */ .cat-card.soon{ opacity:0.55; } /* ---- Doa (dua collection) ---- */ .doa-search-wrap{ position:relative; margin-bottom:12px; } .doa-search-wrap .health-input{ padding-left:38px; } .doa-search-ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; opacity:0.55; pointer-events:none; } .doa-chip-row-wrap{ position:relative; margin-bottom:14px; } .doa-chip-row-wrap::after{ content:''; position:absolute; top:0; right:0; bottom:2px; width:26px; background:linear-gradient(90deg, transparent, var(--bg)); pointer-events:none; } .doa-chip-row{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:1px 1px 4px; scrollbar-width:none; } .doa-chip-row::-webkit-scrollbar{ display:none; } .doa-chip{ flex-shrink:0; font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-pill-radius); padding:8px 14px; cursor:pointer; transition: all .15s ease; white-space:nowrap; display:flex; align-items:center; gap:5px; } .doa-chip.active{ background:var(--ibadah); border-color:var(--ibadah); color:var(--cips-on-accent-warm); } .doa-card{ display:flex; align-items:center; gap:13px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 15px; margin-bottom:10px; cursor:pointer; transition: transform .15s var(--ease-spring), box-shadow .15s ease; box-shadow: 0 8px 18px -14px var(--cips-overlay-black-45); } .doa-card:active{ transform:scale(0.98); } .doa-card-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:var(--ibadah-dim); color:var(--ibadah-text); } .doa-card-body{ flex:1; min-width:0; } .doa-card-title{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); } .doa-card-cat{ font-size:11.5px; color:var(--text-muted); margin-top:2px; } .doa-card-star{ font-size:17px; flex-shrink:0; color:var(--hairline); transition: transform .2s var(--ease-spring), color .2s ease; } .doa-card-star.fav{ color:var(--ibadah-text); text-shadow: 0 0 8px rgba(255,214,140,.5); } .doa-empty{ text-align:center; padding:40px 16px; color:var(--text-muted); font-size:13px; } .doa-empty-ic{ font-size:34px; margin-bottom:10px; opacity:0.6; } .doa-detail-hero{ background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.3); border-radius:22px; padding:20px; margin-bottom:16px; position:relative; } .doa-detail-cat{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ibadah-text); margin-bottom:6px; } .doa-detail-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; padding-right:40px; } .doa-detail-fav-btn{ position:absolute; top:18px; right:16px; width:38px; height:38px; border-radius:50%; background:var(--surface-1); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--hairline); cursor:pointer; transition: all .2s var(--ease-spring); } .doa-detail-fav-btn.fav{ color:var(--ibadah-text); border-color:var(--ibadah); box-shadow: 0 0 10px 1px rgba(255,214,140,.35); } .doa-arabic{ font-family:'Amiri', serif; font-size:26px; line-height:2.1; text-align:right; direction:rtl; color:var(--text-primary); margin-top:16px; } .doa-latin{ font-family:'Inter', sans-serif; font-size:13.5px; font-style:italic; color:var(--ibadah-text); line-height:1.6; margin-top:14px; } .doa-translation-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:14px; } .doa-translation-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; } .doa-translation-text{ font-size:14px; line-height:1.65; color:var(--text-primary); } .doa-source{ font-size:11.5px; color:var(--text-muted); margin-top:10px; } .doa-detail-actions{ display:flex; gap:10px; margin-top:4px; margin-bottom:16px; } .doa-action-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; border-radius:var(--cips-radius-lg); background:var(--surface-1); border:1px solid var(--hairline); color:var(--text-primary); font-size:13px; font-weight:600; font-family:'Inter', sans-serif; cursor:pointer; transition: transform .15s var(--ease-spring); } .doa-action-btn:active{ transform:scale(0.96); } .doa-today-card{ background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.3); } .doa-today-arabic{ font-family:'Amiri', serif; font-size:17px; text-align:right; direction:rtl; color:var(--text-primary); margin-top:8px; line-height:1.8; } /* ---- Qur'an Reader (Fase 1) ---- */ .quran-cta-card{ display:flex; align-items:center; gap:14px; background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.32); border-radius:var(--cips-radius-lg); padding:16px 17px; margin-bottom:8px; cursor:pointer; transition: transform .15s var(--ease-spring), background-color .25s ease, border-color .25s ease; box-shadow: 0 10px 22px -16px var(--cips-overlay-black-50); } .quran-cta-card:active{ transform:scale(0.98); } .quran-cta-ic{ width:46px; height:46px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; background:var(--ibadah); color:var(--cips-on-accent-warm); box-shadow: 0 0 14px 1px rgba(255,214,140,.4); } .quran-cta-body{ flex:1; min-width:0; } .quran-cta-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; color:var(--text-primary); } .quran-cta-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; } .quran-cta-arrow{ font-size:18px; color:var(--ibadah-text); flex-shrink:0; } /* Fix OODA-3: link kecil "Pilih surah lain" -- selalu ada supaya browsing 114 surah tetap 1 tap, walau CTA utama di atasnya sekarang bisa langsung loncat ke reader (skip daftar surah) kalau ada bookmark bacaan terakhir. */ .quran-cta-alt-link{ font-size:12px; font-weight:600; color:var(--text-muted); text-align:right; padding:2px 4px 16px; cursor:pointer; } .quran-cta-alt-link:active{ opacity:.7; } .surah-search-wrap{ position:relative; margin-bottom:12px; } .surah-search-wrap .health-input{ padding-left:38px; } .surah-continue-card{ display:flex; align-items:center; gap:13px; background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.3); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:16px; cursor:pointer; } .surah-continue-label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ibadah-text); } .surah-continue-name{ font-family:'Space Grotesk', sans-serif; font-size:15.5px; font-weight:700; color:var(--text-primary); margin-top:3px; } .surah-continue-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; } .surah-card{ display:flex; align-items:center; gap:13px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:13px 15px; margin-bottom:9px; cursor:pointer; transition: transform .15s var(--ease-spring); box-shadow: 0 8px 18px -14px var(--cips-overlay-black-45); } .surah-card:active{ transform:scale(0.98); } .surah-number-badge{ width:38px; height:38px; border-radius:var(--cips-radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ibadah-dim); color:var(--ibadah-text); font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700; } .surah-card-body{ flex:1; min-width:0; } .surah-card-title-row{ display:flex; align-items:baseline; gap:8px; } .surah-card-latin{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); } .surah-card-arabic{ font-family:'Amiri', serif; font-size:16px; color:var(--ibadah-text); margin-left:auto; } .surah-card-sub{ font-size:11.5px; color:var(--text-muted); margin-top:3px; } .surah-card-badge{ font-size:10px; padding:2px 7px; border-radius:var(--cips-pill-radius); background:var(--surface-2); color:var(--text-muted); margin-left:6px; } .reader-surah-header{ background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.3); border-radius:22px; padding:22px 18px; margin-bottom:16px; text-align:center; } .reader-surah-latin{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); } .reader-surah-arabic{ font-family:'Amiri', serif; font-size:28px; color:var(--ibadah-text); margin-top:4px; } .reader-surah-meta{ font-size:12px; color:var(--text-muted); margin-top:8px; } .reader-bismillah{ font-family:'Amiri', serif; font-size:24px; color:var(--text-primary); margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,214,140,0.25); } .reader-toolbar{ display:flex; gap:10px; margin-bottom:14px; } .reader-toolbar-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; border-radius:var(--cips-radius-lg); background:var(--surface-1); border:1px solid var(--hairline); color:var(--text-primary); font-size:12.5px; font-weight:600; font-family:'Inter', sans-serif; cursor:pointer; } .reader-toolbar-btn.active{ background:var(--ibadah); border-color:var(--ibadah); color:var(--cips-on-accent-warm); } .ayah-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 16px; margin-bottom:12px; transition: border-color .2s ease, box-shadow .2s ease; } .ayah-card.playing{ border-color:var(--ibadah); box-shadow: 0 0 0 1px var(--ibadah), 0 10px 22px -16px rgba(255,214,140,.5); } .ayah-card.ayah-read{ border-color:var(--habit); } .ayah-card.ayah-today-target{ border-color:var(--ibadah); box-shadow: 0 0 0 1px var(--ibadah); } .quran-today-banner{ background:var(--ibadah-dim); color:var(--ibadah-text); border-radius:var(--cips-radius-lg); padding:12px 14px; font-size:12.5px; font-weight:600; line-height:1.5; margin:0 0 14px; } .ayah-top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .ayah-number-badge{ width:30px; height:30px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; background:var(--ibadah-dim); color:var(--ibadah-text); font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700; } .ayah-actions{ display:flex; gap:8px; } .ayah-action-btn{ width:32px; height:32px; border-radius:50%; background:var(--surface-2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-muted); cursor:pointer; transition: all .2s var(--ease-spring); } .ayah-action-btn.active{ background:var(--ibadah); border-color:var(--ibadah); color:var(--cips-on-accent-warm); } .ayah-action-btn.read-active{ background:var(--habit); border-color:var(--habit); color:#0A2015; } .ayah-arabic{ font-family:'Amiri', serif; font-size:25px; line-height:2.15; text-align:right; direction:rtl; color:var(--text-primary); } .ayah-translation{ font-size:13.5px; line-height:1.65; color:var(--text-muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline); } .quran-loading{ text-align:center; padding:50px 16px; color:var(--text-muted); font-size:13px; } .quran-loading-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--ibadah); margin:0 auto 14px; animation: quranSpin .8s linear infinite; } @keyframes quranSpin{ to{ transform: rotate(360deg); } } .quran-mini-player{ position:sticky; bottom:8px; display:flex; align-items:center; gap:12px; background:var(--surface-1); border:1px solid rgba(255,214,140,0.35); border-radius:var(--cips-radius-lg); padding:10px 14px; margin-top:4px; margin-bottom:10px; box-shadow: 0 12px 26px -14px var(--cips-overlay-black-55); z-index:5; } .quran-mini-player-ic{ width:34px; height:34px; border-radius:50%; background:var(--ibadah); color:var(--cips-on-accent-warm); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; cursor:pointer; } .quran-mini-player-body{ flex:1; min-width:0; } .quran-mini-player-title{ font-size:12.5px; font-weight:600; color:var(--text-primary); } .quran-mini-player-sub{ font-size:11px; color:var(--text-muted); margin-top:1px; } .quran-mini-player-close{ font-size:16px; color:var(--text-muted); cursor:pointer; padding:4px; } /* ---- Amal & Akhlak ---- */ .amal-hero{ background: linear-gradient(155deg, var(--habit-dim) 0%, var(--surface-1) 65%); border:1px solid rgba(150,255,190,0.3); border-radius:22px; padding:20px; margin-bottom:16px; display:flex; align-items:center; gap:16px; } .amal-hero-ring{ flex-shrink:0; width:76px; height:76px; } .amal-hero-body{ flex:1; min-width:0; } .amal-hero-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; } .amal-hero-value{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); } .amal-hero-hint{ font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.4; } .amal-cat-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:14px; } .amal-cat-title{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--habit-text); margin-bottom:12px; display:flex; align-items:center; gap:6px; } .amal-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px dashed var(--hairline); } .amal-item:last-child{ border-bottom:none; padding-bottom:0; } .amal-item:first-child{ padding-top:0; } .amal-item-icon{ font-size:19px; flex-shrink:0; margin-top:1px; } .amal-item-body{ flex:1; min-width:0; } .amal-item-title{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); } .amal-item-title.done{ text-decoration: line-through; opacity:0.55; } .amal-item-desc{ font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; } .amal-item-del{ font-size:16px; color:var(--text-muted); flex-shrink:0; cursor:pointer; padding:2px 4px; } .amal-add-row{ display:flex; gap:8px; margin-top:2px; } .amal-add-row .health-input{ flex:1; } .amal-add-btn{ flex-shrink:0; width:44px; height:44px; border-radius:var(--cips-radius-md); background:var(--habit); color:var(--cips-on-accent-cool); font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; } .amal-history-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--hairline); font-size:12.5px; } .amal-history-row:last-child{ border-bottom:none; } .amal-history-date{ color:var(--text-primary); font-weight:600; } .amal-history-frac{ font-family:'JetBrains Mono', monospace; color:var(--habit-text); } /* ---- Meal & Gym ---- */ .macro-mini-grid{ display:flex; gap:8px; margin-top:12px; } .macro-mini{ flex:1; background:var(--kesehatan-dim); border-radius:var(--cips-radius-md); padding:10px 6px; text-align:center; } .macro-mini span{ display:block; font-size:10.5px; color:var(--text-muted); margin-bottom:4px; } .macro-mini b{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--kesehatan-text); } .health-input{ width:100%; padding:11px 14px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Inter', sans-serif; font-size:14px; transition: border-color .15s ease, box-shadow .15s ease; } .health-input:focus{ outline:none; border-color:var(--habit); box-shadow: 0 0 0 3px rgba(150,255,190,0.14); } .toggle-row{ display:flex; gap:8px; flex-wrap:wrap; } .toggle-row .toggle-btn{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; } /* Toggle kategori Finance (Cash/Bank/E-Wallet/Lainnya) di onboarding & Business settings: 4 opsi berdesakan di satu baris, "E-Wallet" adalah label terpanjang — perkecil font & padding horizontal supaya presisi pas di dalam kotaknya, tidak overflow/wrap ke baris kedua. */ #onbFinanceCategoryRow.toggle-row .toggle-btn, #bizFinanceCategoryRow.toggle-row .toggle-btn{ font-size:11.5px; padding:10px 3px; white-space:nowrap; letter-spacing:-0.1px; } .health-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); margin-bottom:14px; box-shadow: 0 10px 24px -18px var(--cips-overlay-black-50); } .health-table{ border-collapse:collapse; width:100%; min-width:300px; font-size:11.5px; } .health-table.tracking{ min-width:540px; } .health-table th, .health-table td{ border-bottom:1px solid var(--hairline); border-right:1px solid var(--hairline); padding:8px 9px; text-align:center; white-space:nowrap; color:var(--text-primary); } .health-table th{ background:var(--surface-2); font-weight:600; font-size:11px; } .health-table tr:last-child td{ border-bottom:none; } .health-table td:last-child, .health-table th:last-child{ border-right:none; } .week-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .week-cell{ background:var(--surface-2); border-radius:var(--cips-radius-md); padding:7px 2px; text-align:center; } .week-day{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px; color:var(--kesehatan-text); } .week-label{ font-size:8px; color:var(--text-muted); margin-top:3px; line-height:1.2; } .health-note{ display:flex; gap:8px; align-items:flex-start; background:var(--kesehatan-dim); border:1px solid rgba(130,205,255,0.35); border-radius:var(--cips-radius-lg); padding:12px 14px; font-size:12.5px; color:var(--text-primary); margin-bottom:14px; } .soon-badge{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-sm); padding:3px 7px; flex-shrink:0; margin-left:6px; } .khilafiyah-note{ display:flex; gap:8px; align-items:flex-start; background:var(--ibadah-dim); border:1px solid rgba(255,214,140,0.35); border-radius:var(--cips-radius-lg); padding:12px 14px; margin:10px 0 16px; font-size:12.5px; line-height:1.5; color:var(--text-primary); } .khilafiyah-note .ic{ flex-shrink:0; } .prayer-check{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--hairline); background:var(--surface-2); color:transparent; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; cursor:pointer; transition: transform .2s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; } .prayer-check:active{ transform:scale(0.85); } .prayer-check.done{ background:var(--ibadah); border-color:var(--ibadah); color:var(--cips-on-accent-warm); box-shadow: 0 0 10px 1px rgba(255,214,140,.45); } .prayer-time-badge{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--ibadah-text); margin-top:2px; } .prayer-desc-text{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; } .dhikr-item{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; box-shadow: 0 8px 20px -16px var(--cips-overlay-black-45); cursor:pointer; transition: transform .15s var(--ease-spring); } .dhikr-item:active{ transform:scale(0.98); } .dhikr-item.done{ border-color:rgba(150,255,190,0.4); } .dhikr-item-top{ display:flex; align-items:flex-start; gap:12px; } .dhikr-name{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); transition: opacity .2s ease; } .dhikr-name.done{ opacity:0.75; } .dhikr-count{ font-size:11.5px; color:var(--ibadah-text); margin-top:1px; font-family:'JetBrains Mono', monospace; } .dhikr-arabic{ direction:rtl; text-align:right; font-size:22px; line-height:1.9; color:var(--text-primary); margin-top:10px; } .dhikr-latin{ font-size:12px; font-style:italic; color:var(--text-muted); margin-top:6px; line-height:1.5; } .dhikr-meaning{ font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.5; } .dhikr-item-progress-track{ height:6px; border-radius:3px; background:rgba(130,140,160,0.16); margin-top:12px; overflow:hidden; } .dhikr-item-progress-fill{ height:100%; border-radius:3px; background:var(--ibadah); transition: width .3s ease; } .dhikr-item-progress-fill.done{ background:var(--habit); } /* ---- Tasbih Digital (Fase 2) ---- */ .dhikr-counter-card{ background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.3); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:22px; text-align:center; } .dhikr-counter-arabic{ font-family:'Amiri', serif; font-size:26px; color:var(--text-primary); direction:rtl; } .dhikr-counter-latin{ font-size:13px; font-style:italic; color:var(--ibadah-text); margin-top:8px; } .dhikr-counter-meaning{ font-size:12.5px; color:var(--text-muted); margin-top:4px; } .dhikr-tap-zone{ position:relative; width:188px; height:188px; margin:0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition: transform .1s var(--ease-spring); } .dhikr-tap-zone:active{ transform:scale(0.96); } .dhikr-tap-zone svg{ position:absolute; top:0; left:0; } .dhikr-tap-center{ position:relative; z-index:1; text-align:center; } .dhikr-tap-count{ font-family:'JetBrains Mono', monospace; font-size:46px; font-weight:700; color:var(--text-primary); line-height:1; } .dhikr-tap-target{ font-size:13px; color:var(--text-muted); margin-top:4px; font-family:'JetBrains Mono', monospace; } .dhikr-tap-zone.done .dhikr-tap-count{ color:var(--habit-text); } .dhikr-tap-hint{ text-align:center; font-size:12.5px; color:var(--text-muted); margin-top:16px; padding:0 20px; } .dhikr-counter-actions{ display:flex; gap:10px; margin-top:20px; } .dhikr-counter-action-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:13px; border-radius:var(--cips-radius-lg); background:var(--surface-1); border:1px solid var(--hairline); color:var(--text-primary); font-size:13px; font-weight:600; font-family:'Inter', sans-serif; cursor:pointer; transition: transform .15s var(--ease-spring); } .dhikr-counter-action-btn:active{ transform:scale(0.96); } .dhikr-hero{ display:flex; align-items:center; gap:16px; background: linear-gradient(155deg, var(--ibadah-dim) 0%, var(--surface-1) 65%); border:1px solid rgba(255,214,140,0.28); border-radius:22px; padding:18px; margin-bottom:18px; } .dhikr-hero-body{ flex:1; min-width:0; } .dhikr-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; color:var(--text-primary); } .dhikr-hero-sub{ font-size:12px; color:var(--text-muted); margin-top:3px; } .quran-stepper{ display:flex; align-items:center; gap:12px; justify-content:center; } .quran-stepper-btn{ width:44px; height:44px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-size:20px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:transform .15s var(--ease-spring), background .2s ease, box-shadow .2s ease; box-shadow: 0 6px 14px -10px var(--cips-overlay-black-50); } .quran-stepper-btn:active{ transform:scale(0.9); background:var(--ibadah-dim); box-shadow: 0 0 0 4px rgba(255,214,140,0.14); } .quran-stepper-val{ font-family:'JetBrains Mono', monospace; font-size:22px; font-weight:600; color:var(--text-primary); min-width:64px; text-align:center; } .quran-quick-row{ display:flex; gap:8px; margin-top:12px; } .quran-quick-btn{ flex:1; padding:9px 6px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-size:12.5px; font-family:'Inter', sans-serif; text-align:center; cursor:pointer; transition:transform .15s var(--ease-spring), background .2s ease; } .quran-quick-btn:active{ transform:scale(0.94); background:var(--ibadah-dim); } .quran-plan-card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--cips-radius-lg);padding:clamp(16px,4vw,22px);margin:0 0 14px;box-shadow:0 12px 28px -24px var(--cips-overlay-black-55);overflow:hidden;} .quran-engine-card{ margin-top:14px; } .quran-plan-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--ibadah-text);text-transform:uppercase;margin-bottom:5px;} .quran-plan-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(17px,4.8vw,22px);font-weight:750;color:var(--text-primary);line-height:1.2;} .quran-plan-title-editable{display:flex;align-items:center;flex-wrap:wrap;gap:7px 6px;} .quran-plan-days-input{width:56px;flex-shrink:0;padding:4px 5px;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:750;color:var(--ibadah-text);background:var(--surface-2);border:1px solid var(--hairline);border-radius:7px;-moz-appearance:textfield;} .quran-plan-days-input::-webkit-outer-spin-button,.quran-plan-days-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .quran-plan-days-input:focus{outline:none;border-color:var(--ibadah);box-shadow:0 0 0 3px rgba(255,214,140,.16);} .quran-plan-days-input::placeholder{color:var(--text-muted);font-weight:600;} .quran-plan-days-save-btn{flex-shrink:0;margin-left:auto;padding:5px 12px;font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;line-height:1;border-radius:var(--cips-pill-radius);border:1px solid var(--ibadah);background:var(--ibadah-dim);color:var(--ibadah-text);cursor:pointer;transition:transform .15s var(--ease-spring),background .2s ease,box-shadow .2s ease;} .quran-plan-days-save-btn:active{transform:scale(0.92);} .quran-plan-days-save-btn:hover{background:var(--ibadah);color:var(--cips-on-accent-warm-dark);} /* Status simpan: is-saved = padam/abu (tidak ada perubahan), is-dirty = kuning + berdenyut (ada perubahan belum disimpan) */ .quran-plan-days-save-btn.is-saved{border-color:var(--hairline);background:var(--surface-2);color:var(--text-muted);box-shadow:none;animation:none;} .quran-plan-days-save-btn.is-saved:hover{background:var(--surface-2);color:var(--text-muted);} .quran-plan-days-save-btn.is-dirty{border-color:var(--ibadah);background:var(--ibadah);color:var(--cips-on-accent-warm-dark);box-shadow:0 0 0 3px rgba(255,214,140,.20);animation:quranSaveDirtyPulse 1.6s ease-in-out infinite;} @keyframes quranSaveDirtyPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,214,140,.20);}50%{box-shadow:0 0 0 6px rgba(255,214,140,.05);}} /* Status simpan generik dipakai bareng .save-btn di seluruh form (log berat/ukuran/tidur/suplemen, tambah habit/aturan, quick log/tx, pengeluaran, password wallet, dst): is-saved = padam/abu (belum ada yang perlu disimpan / field wajib belum lengkap), is-dirty = menyala + berdenyut (siap disimpan). Warna & animasi disamakan dgn tombol Simpan Target Khatam di atas. */ .save-btn.is-saved{opacity:.55;box-shadow:none;animation:none;} .save-btn.is-dirty{box-shadow:0 0 0 3px rgba(255,214,140,.20);animation:quranSaveDirtyPulse 1.6s ease-in-out infinite;} /* Opsi B (permintaan user): untuk tombol Simpan di form yang SUDAH auto-save tiap field diedit (Profil Tubuh), status "dirty vs saved" biner tidak jujur -- datanya toh selalu sudah tersimpan. Sebagai gantinya, tombol berkedip oren sesaat PERSIS SAAT auto-save benar-benar terjadi, lalu balik abu-abu transparan -- merepresentasikan kejadian nyata ("baru saja tersimpan"), bukan status yang dipaksakan. Lihat pulseJustSaved() di app-04-health-gym.js.*/ .save-btn.just-saved{box-shadow:0 0 0 3px rgba(255,214,140,.35);opacity:1;transition:box-shadow .25s ease, opacity .25s ease;} .quran-plan-meta{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.5;} .quran-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;} .quran-plan-grid>div{min-width:0;padding:10px 11px;border:1px solid var(--hairline);background:var(--surface-2);border-radius:var(--cips-radius-md);} .quran-plan-grid span{display:block;font-size:10.5px;color:var(--text-muted);margin-bottom:4px;} .quran-plan-grid strong{display:block;font-size:13px;color:var(--text-primary);font-family:'Space Grotesk',sans-serif;overflow-wrap:anywhere;} .quran-plan-today{margin-top:12px;padding:13px;border-radius:var(--cips-radius-md);background:var(--ibadah-dim);border:1px solid rgba(255,214,140,.28);} .quran-plan-today.done{background:rgba(150,255,190,.08);border-color:rgba(150,255,190,.22);} .quran-plan-today-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);} .quran-plan-today-head b{color:var(--ibadah-text);font-size:10px;letter-spacing:0;text-transform:none;} .quran-plan-range{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);margin-top:7px;line-height:1.45;} .quran-plan-range-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;} .quran-plan-empty,.quran-plan-complete{display:flex;flex-direction:column;gap:5px;} .quran-plan-empty strong,.quran-plan-complete strong{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--text-primary);} .quran-plan-empty span,.quran-plan-complete span{font-size:12px;color:var(--text-muted);line-height:1.5;} .quran-hour-slots-card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--cips-radius-lg);padding:clamp(14px,3.6vw,20px);margin:0 0 14px;box-shadow:0 12px 28px -24px var(--cips-overlay-black-55);} .quran-hour-slots-card:empty{display:none;padding:0;margin:0;border:none;box-shadow:none;} .quran-hour-card-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:750;color:var(--text-primary);} .quran-hour-card-sub{font-size:11.5px;color:var(--text-muted);margin-top:4px;line-height:1.5;} .quran-hour-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px;} .quran-hour-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--hairline);background:var(--surface-2);border-radius:var(--cips-radius-md);flex-wrap:wrap;} .quran-hour-row-label{flex-shrink:0;width:58px;font-size:11px;font-weight:700;color:var(--text-muted);} .quran-hour-row-input{flex-shrink:0;width:96px;padding:5px 6px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--hairline);border-radius:7px;} .quran-hour-row-input:focus{outline:none;border-color:var(--ibadah);box-shadow:0 0 0 3px rgba(255,214,140,.16);} .quran-hour-row-meta{flex:1 1 auto;min-width:120px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;} .quran-hour-row-empty{font-size:11px;color:var(--text-muted);} .quran-hour-row-target{font-size:12px;font-weight:700;color:var(--text-primary);} .quran-hour-row-status{font-size:10.5px;color:var(--text-muted);} .quran-hour-row-status.done{color:var(--ibadah-text);} .quran-hour-card-actions{display:flex;gap:8px;margin-top:14px;} .quran-hour-card-actions .quran-plan-days-save-btn{margin-left:0;flex:1;text-align:center;padding:9px 12px;font-size:12.5px;} .quran-hour-reset-btn{flex:1;padding:9px 12px;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;line-height:1;border-radius:var(--cips-pill-radius);border:1px solid var(--hairline);background:var(--surface-2);color:var(--text-muted);cursor:pointer;transition:transform .15s var(--ease-spring),background .2s ease;} .quran-hour-reset-btn:active{transform:scale(0.92);} .quran-hour-reset-btn:hover{background:var(--surface-1);color:var(--text-primary);} @media (max-width:380px){ .quran-hour-row{flex-direction:column;align-items:stretch;} .quran-hour-row-meta{align-items:flex-start;text-align:left;} } .quran-log-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hairline); font-size:12.5px; } .quran-log-row:last-child{ border-bottom:none; } .water-widget{ display:flex; align-items:center; justify-content:space-between; } .water-drops{ display:flex; gap:4px; flex-wrap:wrap; max-width:150px; } .water-drop{ width:16px; height:16px; font-size:14px; line-height:16px; opacity:0.25; } .water-drop.filled{ opacity:1; } .location-btn{ font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:var(--cips-radius-md); border:1px solid rgba(255,214,140,0.4); background:var(--ibadah-dim); color:var(--ibadah-text); cursor:pointer; flex-shrink:0; transition: transform .15s var(--ease-spring), box-shadow .15s ease; } .location-btn:active{ transform:scale(0.94); box-shadow: 0 0 0 4px rgba(255,214,140,0.14); } .wallet-card{ cursor:pointer; } .wallet-card:active{ transform:scale(0.98); } .eye-toggle-btn{ width:38px; height:38px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-md); cursor:pointer; font-size:15px; color:var(--text-primary); display:flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; } .eye-toggle-btn:active{ transform:scale(0.92); } .run-btn{ width:100%; padding:14px; border:none; border-radius:var(--cips-radius-lg); cursor:pointer; background: var(--financial); color:var(--cips-on-accent-warm-dark); font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; letter-spacing:0.2px; transition: transform .15s var(--ease-spring), box-shadow .15s ease, filter .15s ease; box-shadow: 0 10px 24px -10px rgba(255,170,120,0.5), inset 0 1px 0 rgba(255,255,255,.25); } .run-btn:active{ transform:scale(0.97); filter:brightness(0.96); box-shadow: 0 4px 14px -8px rgba(255,170,120,0.4), inset 0 1px 0 rgba(255,255,255,.2); } .save-btn{ margin-top:16px; transition: background .2s ease, color .2s ease, transform .15s var(--ease-spring), box-shadow .2s ease; } .save-btn:active{ transform:scale(0.97); } .save-btn.saved{ background: var(--habit); color:var(--cips-on-accent-cool); box-shadow: 0 0 0 4px rgba(150,255,190,0.18), 0 10px 24px -10px rgba(150,255,190,0.55); animation: badgePulse 1.2s ease-out; } .summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .summary-item-label{ font-size:12px; color:var(--text-muted); margin-bottom:4px; } .summary-item-value{ font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:600; color:var(--text-primary); } .chart-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-top:14px; margin-bottom:16px; } .bar-chart{ display:flex; align-items:flex-end; gap:3px; height:80px; } .bar-chart div{ flex:1; background: var(--financial); border-radius:3px 3px 0 0; opacity:0.85; min-height:2px; } .detail-line{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px solid var(--hairline); } .detail-line:last-child{ border-bottom:none; } .detail-line:last-child{ border-bottom:none; } .detail-line span:first-child{ color:var(--text-muted); } .detail-line span:last-child{ font-family:'JetBrains Mono', monospace; color:var(--text-primary); font-weight:600; } .day-sheet-backdrop{ position:absolute; inset:0; background:rgba(4,5,8,0.6); z-index:30; opacity:0; pointer-events:none; transition:opacity .2s ease; will-change:opacity; contain:strict; } .day-sheet-backdrop.open{ opacity:1; pointer-events:auto; } .day-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:31; background:var(--surface-1); border:1px solid var(--hairline); border-bottom:none; border-radius:28px 28px 0 0; padding:14px 22px calc(26px + env(safe-area-inset-bottom)); width:100%; max-width:100%; max-height:min(72%, calc(100% - 28px)); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; transform:translate3d(0,100%,0); /* Fix Audit F-11 (a11y): sebelumnya cuma transform, jadi sheet yang "tertutup" tetap visible=visible -- bisa kena Tab keyboard & terbaca screen reader walau sudah didorong keluar layar. visibility:hidden ditambah delay .25s PAS SAMA dengan durasi transisi transform, supaya animasi slide-down saat menutup tetap kelihatan (baru disembunyikan dari a11y tree SETELAH animasi selesai) -- transisi transform yang sudah ada sama sekali tidak diubah. */ visibility:hidden; transition:transform .25s ease-out, background-color .25s ease, border-color .25s ease, visibility 0s linear .25s; box-shadow: 0 -8px 24px -6px var(--cips-overlay-black-40); will-change:transform; contain:layout paint style; backface-visibility:hidden; } .day-sheet.open{ transform:translate3d(0,0,0); visibility:visible; transition:transform .25s ease-out, background-color .25s ease, border-color .25s ease, visibility 0s linear 0s; } .day-sheet-handle{ width:36px; height:4px; background:var(--hairline); border-radius:2px; margin:0 auto 16px; } .day-sheet-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .day-sheet-title{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); } /* Fix OODA-1 (sub-langkah 2): quickTxSheet, habitTxChooserSheet, dan txAddChooserSheet tadinya kelihatan seperti 2-3 form transaksi yang beda tanpa penjelasan, padahal ini memang dua tingkat yang disengaja -- "Cepat" (2-3 field, cuma Pemasukan/Pengeluaran) vs "Lengkap" (4 tipe termasuk Transfer & Tabungan, field tanggal+jam terpisah). Badge kecil ini bikin perbedaan level itu EKSPLISIT di header, bukan cuma kebetulan beda field saja -- supaya user paham dua form ini sengaja, bukan duplikat yang bingung. */ .day-sheet-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tx-tier-badge{ font-family:'Space Grotesk', sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:var(--cips-pill-radius); white-space:nowrap; color:var(--habit-text); background:var(--habit-dim); border:1px solid rgba(150,255,190,.3); } .tx-tier-badge-full{ color:var(--financial-text); background:var(--financial-dim); border:1px solid rgba(255,170,120,.35); } .day-sheet-nav{ display:flex; gap:8px; margin-top:16px; } .day-sheet-nav button{ flex:1; padding:11px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer; } .day-sheet-nav button:disabled{ opacity:0.35; cursor:default; } /* v74: seluruh blok .upg-* (styling sheet "Upgrade ke Premium") DIHAPUS -- markup-nya sudah tidak ada lagi di index.html sejak paywall in-app dicabut. */ /* ---- Boot overlay: splash skeleton saat app pertama kali dibuka ---- */ #bootOverlay{ position:absolute; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background: radial-gradient(circle at 50% 42%, rgba(150,255,190,0.08) 0%, transparent 55%), var(--bg); opacity:1; transition: opacity .35s ease; } .phone.ready #bootOverlay{ opacity:0; pointer-events:none; } #onboardingOverlay{ position:absolute; inset:0; z-index:150; display:none; flex-direction:column; background:var(--bg); padding: calc(20px + env(safe-area-inset-top)) 22px calc(16px + env(safe-area-inset-bottom)); } /* Wash gradient bertema per-modul, di-crossfade lewat JS (setOnbThemeBg() di app-03-navigation-onboarding.js) -- BUKAN transisi CSS var langsung, karena background-image/gradient tidak animatable native oleh CSS transition meski nilai variabelnya berubah (browser cuma "potong langsung" ke gradient baru). Solusinya: 2 layer ditumpuk full-bleed, JS pasang gradient baru di layer yang lagi tersembunyi lalu toggle opacity-nya -- opacity ADALAH properti yang animatable, jadi hasilnya cross-fade ~420ms yang mulus di semua browser. z-index:-2 supaya selalu di bawah orb dekoratif (.onb-bg-decor, z-index:-1) & konten. */ .onb-theme-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .onb-theme-bg-layer{ position:absolute; inset:0; opacity:0; transition:opacity .42s ease; will-change:opacity; } .onb-theme-bg-layer.onb-theme-bg-visible{ opacity:1; } /* Layer dekoratif penuh di belakang wizard onboarding (4 orb blur warna pilar habit/ibadah/kesehatan/financial) supaya layar nggak kelihatan kosong-polos, terutama di langkah yang field-nya dikit kayak "kenalan dulu". z-index:-1 supaya selalu di belakang konten & tetap di atas background solid overlay. Fix flicker (laporan pengguna, 2026-08-13): 4 orb ini sebelumnya punya `animation: onbGlowBreathe 6s ease-in-out infinite` (opacity .75<->1 + scale 1<->1.12, berdelay beda-beda) yang berjalan TERUS-MENERUS selama wizard terbuka, di SEMUA layar onboarding (bukan cuma satu step). Di layar gelap/OLED ini kebaca sebagai "kedipan" berulang, persis laporan pengguna ("di bagian semua onboarding ada kedipan layar"). Orb dekoratif ini murni ambiance, tidak menyampaikan informasi apa pun, jadi dibikin statis (posisi/warna/blur tidak berubah) -- root cause kedipannya hilang total tanpa mengurangi nuansa visualnya. */ .onb-bg-decor{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .onb-bg-decor::before, .onb-bg-decor::after{ content:''; position:absolute; border-radius:50%; filter:blur(46px); } .onb-bg-decor::before{ width:260px; height:260px; top:-90px; left:-70px; background:radial-gradient(circle, var(--habit-dim) 0%, transparent 72%); } .onb-bg-decor::after{ width:220px; height:220px; bottom:-60px; right:-60px; background:radial-gradient(circle, rgba(255,170,120,0.22) 0%, transparent 72%); } .onb-bg-decor-mid{ position:absolute; top:38%; right:-40px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, rgba(255,214,140,0.16) 0%, transparent 72%); filter:blur(40px); } .onb-bg-decor-mid2{ position:absolute; top:58%; left:-50px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, rgba(130,205,255,0.16) 0%, transparent 72%); filter:blur(40px); } /* Dipasang oleh openOnbLogoPicker()/closeLogoPickerSheet() (app-03) selama picker Bank/E-Wallet onboarding terbuka -- lihat catatan root-cause di sana. */ .onb-decor-paused .onb-bg-decor::before, .onb-decor-paused .onb-bg-decor::after, .onb-decor-paused .onb-bg-decor-mid, .onb-decor-paused .onb-bg-decor-mid2{ animation-play-state:paused; } .onb-vibe-quote{ display:flex; align-items:flex-start; gap:9px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:11px 13px; margin-top:4px; margin-bottom:14px; font-size:12px; line-height:1.55; color:var(--text-muted); } .onb-vibe-quote-icon{ flex-shrink:0; font-size:14px; line-height:1.55; } .onb-skip-btn{ position:absolute; top: calc(20px + env(safe-area-inset-top)); right:22px; z-index:5; background:none; border:none; padding:6px 4px; font-size:13.5px; font-weight:600; color:var(--text-muted); } .onb-skip-btn:active{ opacity:0.6; } /* Model wizard: satu kategori (langkah) tampil per layar, dengan progress bar + tombol Kembali/Lanjut di bawah. Tiap langkah masih bisa di-scroll sendiri kalau kepanjangan di layar kecil. Scrollbar disembunyikan (scroll tetap jalan, cuma garis di kanan tidak tampil) supaya tampilannya bersih di semua browser/engine. */ .onb-progress{ flex-shrink:0; margin:0 0 16px; padding-right:56px; } .onb-progress-label{ font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:8px; } .onb-progress-track{ height:4px; border-radius:2px; background:var(--hairline); overflow:hidden; } .onb-progress-fill{ height:100%; border-radius:2px; background:var(--onb-accent, var(--habit)); width:25%; transition:width .3s ease, background .4s ease; } .onb-steps{ position:relative; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 6px; scrollbar-width:none; -ms-overflow-style:none; } .onb-steps::-webkit-scrollbar{ display:none; width:0; height:0; } /* Perbaikan tampilan Step 0 (Login/Daftar): kontennya pendek (ikon+judul+2 field+tombol), jadi kalau dibiarkan seperti step 1-4 (mulai dari atas), ada ruang kosong besar di bawah -- persis yang terlihat di screenshot. Class ini di-toggle lewat JS KHUSUS saat Step 0 aktif (lihat updateOnbNavUI() di app-03-navigation-onboarding.js) -- step 1-4 TIDAK terpengaruh sama sekali, tetap rata atas & scroll seperti semula (kontennya lebih panjang, rata tengah justru bikin aneh kalau field-nya banyak). overflow-y:auto tetap aktif sebagai jaring pengaman di layar sangat kecil. */ /* Fix (ditemukan dari rekaman video): justify-content:center di parent flex container punya kelemahan CSS yang sudah dikenal luas -- kalau konten meluber (persis yang terjadi saat keyboard on-screen muncul & mengecilkan ruang tersisa), bagian yang meluber di ATAS bisa jadi TIDAK BISA DI-SCROLL untuk dicapai (browser "mengunci" posisi center-nya). Ini yang bikin tombol Masuk & link Daftar hilang ketutup keyboard tanpa bisa dijangkau di rekaman. Diganti ke margin:auto pada elemen step aktifnya sendiri (bukan justify-content di parent) -- tetap center kalau ruang cukup, tapi begitu konten lebih tinggi dari ruang tersedia, otomatis jadi scroll biasa yang selalu bisa dijangkau penuh, tidak pernah "terjebak". */ .onb-steps.onb-steps-center{ display:flex; flex-direction:column; } .onb-steps.onb-steps-center .onb-step.onb-step-active{ margin:auto 0; } .onb-step{ display:none; } .onb-step.onb-step-active{ display:block; animation: onbStepIn .28s ease; } @keyframes onbStepIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:translateX(0); } } /* Dipasang sesaat oleh showOnboardingIfNeeded() (app-03) khusus di reveal PERTAMA onboarding setelah boot -- lihat catatan root-cause di sana. */ .onb-first-reveal .onb-step.onb-step-active{ animation:none; } .onb-section{ margin-bottom:20px; } .onb-section:last-of-type{ margin-bottom:6px; } .onb-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; } .onb-section-icon{ width:44px; height:44px; border-radius:var(--cips-radius-lg); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:19px; } .onb-section-icon.c-identity{ background:var(--settings-dim); color:var(--settings-text); } .onb-section-icon.c-auth{ background:var(--settings-dim); color:var(--settings-text); } .onb-section-icon.c-habit{ background:var(--habit-dim); color:var(--habit-text); } .onb-section-icon.c-gym{ background:var(--kesehatan-dim); color:var(--kesehatan-text); } .onb-section-icon.c-financial{ background:var(--financial-dim); color:var(--financial-text); } .onb-section-icon.c-religion{ background:var(--ibadah-dim); color:var(--ibadah-text); } .onb-section-icon.c-goal{ background:var(--settings-dim); color:var(--settings-text); } /* Tema per-modul onboarding (segmented, gaya "Muscle Monster"): tiap kelompok pertanyaan (Identitas/Habit/Gym/Finance/Ibadah/Goal) punya warna aksen sendiri, dipasang lewat atribut data-onb-theme (di-set dari JS di showOnbStep()). Dipakai buat progress bar & glow dekoratif supaya transisi antar modul terasa, bukan satu warna statis dari awal-akhir. */ #onboardingOverlay{ --onb-accent:var(--habit); --onb-accent-dim:var(--habit-dim); transition:background .5s ease; } #onboardingOverlay[data-onb-theme="identity"]{ --onb-accent:var(--settings); --onb-accent-dim:var(--settings-dim); } #onboardingOverlay[data-onb-theme="habit"]{ --onb-accent:var(--habit); --onb-accent-dim:var(--habit-dim); } #onboardingOverlay[data-onb-theme="kesehatan"]{ --onb-accent:var(--kesehatan); --onb-accent-dim:var(--kesehatan-dim); } #onboardingOverlay[data-onb-theme="financial"]{ --onb-accent:var(--financial); --onb-accent-dim:var(--financial-dim); } #onboardingOverlay[data-onb-theme="ibadah"]{ --onb-accent:var(--ibadah); --onb-accent-dim:var(--ibadah-dim); } #onboardingOverlay[data-onb-theme="goal"]{ --onb-accent:var(--settings); --onb-accent-dim:var(--settings-dim); } /* Kartu pilihan besar full-width, dipakai di layar single-question (gender, tujuan fitness, level aktivitas, jawaban Habit) supaya terasa seperti quiz ketuk-kartu ala Muscle Monster, bukan dropdown/select kecil. */ .onb-card-col{ display:flex; flex-direction:column; gap:10px; } .onb-card-col .toggle-btn{ width:100%; text-align:left; padding:14px 16px; font-size:14.5px; } .onb-card-col .toggle-btn.active{ border-color:var(--onb-accent); background:var(--onb-accent-dim); box-shadow:0 0 0 1px var(--onb-accent) inset; } .onb-card-sub{ display:block; font-size:11.5px; opacity:.65; margin-top:2px; font-weight:400; } /* Chip hari kerja (langkah 15, baru): 7 hari dalam grid rapat, beda dari .onb-card-col (full-width stacked) supaya tidak makan tinggi layar. */ .onb-days-row{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; } .onb-days-row .toggle-btn{ padding:9px 2px; font-size:11px; text-align:center; border-radius:11px; } /* Kartu "Semuanya Sekaligus" (Goal Focus, langkah 13): sengaja dibedakan dari 3 kartu pilihan tunggal di atasnya (garis putus-putus, bukan solid) supaya kelihatan sebagai opsi "gabungan semua", bukan kategori sejajar yang setara -- feedback audit mockup onboarding v3. */ .onb-goal-all-btn{ border-style:dashed !important; opacity:.9; } .onb-goal-all-btn.active{ opacity:1; } /* Checklist awal (quick-win Step 5) — sengaja fixed & lepas dari alur render() view supaya tidak ikut hilang saat user pindah halaman. */ .onb-checklist-card{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:60; background:var(--card-bg,#fff); border-radius:16px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,.18); max-width:420px; margin:0 auto; } .onb-checklist-title{ font-weight:700; margin-bottom:8px; } .onb-checklist-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; } .onb-checklist-list label{ display:flex; align-items:center; gap:8px; font-size:14px; } .onb-checklist-dismiss{ background:none; border:none; color:var(--muted-text,#888); font-size:13px; padding:0; text-decoration:underline; } .onb-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); margin-bottom:2px; } .onb-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-bottom:12px; } /* #authForgotLink/#authSwitchLink sebelumnya tidak punya color sama sekali, jadi terpaksa memakai warna default browser (#0000EE) di atas bg nyaris hitam -- cuma ~2.2:1, gagal jauh dari WCAG AA 4.5:1 (temuan Lighthouse formal, 2026-08-14). --kesehatan dipakai krn sudah ada di token warna, bukan warna baru, dan tetap konvensi biru=link. Hasil ~12:1 */ #authForgotLink, #authSwitchLink{ color:var(--kesehatan); } .onb-field{ margin-bottom:10px; } .onb-field-row{ display:flex; gap:10px; } .onb-field-row .onb-field-half{ flex:1; min-width:0; } .onb-field-label{ font-size:13px; color:var(--text-primary); margin:0 0 5px; font-weight:500; } .onb-required{ color:var(--danger-text); font-weight:700; margin-left:2px; font-size:13px; } .onb-field-error{ border-color:var(--danger) !important; animation: onbShake .35s ease; } .toggle-row.onb-field-error{ outline:1.5px solid var(--danger); outline-offset:5px; border-radius:var(--cips-radius-lg); animation: onbShake .35s ease; } @keyframes onbShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } } .onb-loc-block{ margin-top:10px; padding:12px 14px; border-radius:var(--cips-radius-lg); background:var(--ibadah-dim); border:1px solid rgba(255,214,140,0.35); } .onb-loc-block .settings-desc{ margin:0 0 10px; color:var(--text-primary); } .onb-nav{ display:flex; gap:10px; margin-top:10px; flex-shrink:0; } .onb-nav .run-btn{ flex:1; } .onb-back-btn{ flex-shrink:0; visibility:hidden; pointer-events:none; background:none; border:1.5px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:0 20px; font-size:14px; font-weight:600; color:var(--text-primary); } .onb-back-btn.onb-back-visible{ visibility:visible; pointer-events:auto; } .onb-back-btn:active{ opacity:0.6; } /* ===== v271: poles visual onboarding sesuai mockup v3 (Revisi Ronde 2) ===== Semua kelas di bawah ini SENGAJA cuma menambah (bukan mengganti) style .toggle-btn / .onb-field yang sudah ada -- data-action, id field, dan logic simpan di app-03-navigation-onboarding.js tidak diubah sama sekali oleh perubahan visual ini, hanya markup pembungkus & CSS. */ .onb-mini-chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; } .onb-mini-chip{ font-size:10.5px; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--hairline); padding:5px 10px; border-radius:999px; } /* Hero-style step (Nama) -- konten dipusatkan vertikal+horizontal dengan ikon besar, dipakai supaya layar tidak terasa "kosong" di tengah tanpa menambah narasi baru (lihat audit poles v272). */ .onb-hero-section{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:calc(var(--app-vh, 100dvh) * 0.08); position:relative; } .onb-hero-icon{ width:76px; height:76px; border-radius:24px; display:grid; place-items:center; font-size:34px; margin-bottom:18px; background:var(--onb-accent-dim, var(--habit-dim)); box-shadow:0 16px 34px -16px var(--onb-accent, var(--habit)); } .onb-hero-title{ font-size:23px; margin-bottom:8px; } .onb-hero-desc{ font-size:13.5px; margin-bottom:22px; } .onb-hero-field{ width:100%; max-width:320px; margin-bottom:0; } .onb-hero-input{ height:52px; text-align:center; font-size:16px; font-weight:600; } /* v273 poles: Nama terasa "sepi" -- tambah glow dekoratif besar di belakang ikon (murni CSS, tidak nambah elemen/narasi baru) supaya layar terasa dirancang, bukan kosong. */ .onb-hero-section::before{ content:""; position:absolute; top:calc(var(--app-vh, 100dvh) * 0.06); left:50%; transform:translateX(-50%); width:230px; height:230px; border-radius:50%; z-index:-1; background:radial-gradient(circle, var(--onb-accent-dim, var(--habit-dim)) 0%, transparent 70%); opacity:.9; pointer-events:none; } .onb-section:has(.onb-hero-section){ position:relative; } .onb-hero-icon{ position:relative; animation:onbHeroFloat 3.2s ease-in-out infinite; } @keyframes onbHeroFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } } /* v273: kelas generik buat step yang kontennya sedikit -- vertikal-center supaya tidak numpuk di atas & kosong di bawah (Usia/Finance/Goal Focus/ Hari Kerja). Dipasang selektif per-step (bukan global) supaya step yang memang isinya banyak (mis. Auth) tidak ikut kena & jadi terlalu renggang. */ .onb-section-center{ display:flex; flex-direction:column; justify-content:center; min-height:calc(var(--app-vh, 100dvh) * 0.62); } /* Gender atas-bawah (bukan sejajar) -- biar layar tidak kosong di bawah 2 kartu pendek. Ukuran kartu dinaikkan supaya masing-masing tetap terasa substansial, bukan cuma dilebarkan horizontal. */ /* Gender atas-bawah, TANPA pertanyaan/narasi (poles v274) -- ilustrasi besar dalam badge lingkaran netral (surface-2) yang TIDAK ikut berubah warna saat kartu aktif. Fix bug "warna background ikut masuk ke gambar": SEBELUMNYA ilustrasi SVG (fill semi-transparan, opacity .5-.85) duduk LANGSUNG di atas background kartu yang berubah solid (--onb-accent-dim) saat aktif -- warna itu "menembus" celah-celah semi-transparan SVG, kelihatan seperti noda warna di belakang gambar. Sekarang ilustrasi selalu duduk di atas badge lingkaran netral yang TIDAK terpengaruh state aktif/tidak, jadi tampilannya konsisten bersih di kedua kondisi. Aspect ratio SVG (120:150) dijaga presisi (bukan dipaksa kotak 1:1) supaya tidak gepeng/melar. */ .onb-gender-col{ display:flex; flex-direction:column; gap:14px; align-items:center; width:100%; } .onb-gender-col .toggle-btn{ position:relative; width:100%; max-width:280px; height:172px; border-radius:22px; border:1.5px solid var(--hairline); background:var(--surface-1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:15px; font-weight:700; } .onb-gender-illus-wrap{ width:104px; height:104px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .onb-gender-col .onb-gender-illus{ width:62px; height:77.5px; opacity:.8; } .onb-gender-col .onb-gender-illus svg{ width:100%; height:100%; display:block; } .onb-gender-col .toggle-btn.active{ border-color:var(--onb-accent); box-shadow:0 0 0 1.5px var(--onb-accent) inset, 0 14px 30px -18px var(--onb-accent); } .onb-gender-col .toggle-btn.active .onb-gender-illus-wrap{ background:var(--onb-accent-dim); } .onb-gender-col .toggle-btn.active .onb-gender-illus{ opacity:1; color:var(--onb-accent, var(--habit)); } .onb-gender-col .toggle-btn.active::after{ content:"✓"; position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; background:var(--onb-accent); color:#06130b; font-size:12px; font-weight:700; display:grid; place-items:center; } /* Usia: ruler diperbesar & lebih menonjol di tengah layar. */ .onb-ruler-picker-lg{ margin-top:calc(var(--app-vh, 100dvh) * 0.09); } .onb-ruler-picker-lg .onb-ruler{ width:100%; height:70px; margin:8px 0; } .onb-ruler-bigval-lg .num{ font-size:68px; } .onb-ruler-bigval-lg .unit{ font-size:16px; } /* Berat: ilustrasi TIDAK ikut membesar tinggi -- torso saja yang melebar (scaleX, lihat buildOnbRuler mode 'weight'), wrapper luar dikunci fixed supaya user tidak lihat badan jadi "meninggi" pas berat digeser. */ /* Berat/Tinggi (step 4): beri jarak dari judul section-head supaya tidak mepet (item 5 audit) -- label "Berat Badan" adalah elemen pertama setelah section-head di step ini. */ /* v275 (item 1 audit lanjutan): jarak weight/height dari judul & antar keduanya masih dianggap terlalu mepet -- dinaikkan lagi + margin-top sekarang datang dari HTML langsung (34px/44px, lihat index.html step 4) supaya lebih eksplisit & gampang di-tuning lagi kalau perlu. Aturan margin-top generik lama di bawah ini DIHAPUS supaya tidak dobel/konflik sama margin-top inline yang baru. */ .onb-ruler-picker-weight{ margin-top:8px; } .onb-ruler-picker-weight .onb-ruler-illus-wrap{ height:74px; } /* Tinggi: wrapper diperbesar lagi (96px->128px) & skala maksimum ilustrasi dikecilkan (lihat buildOnbRuler mode 'height' di app-03) supaya di nilai TB maksimum (250cm) badan yang memanjang ke atas tetap muat di dalam ruang yang disediakan, tidak bentrok ke section Berat Badan di atasnya. */ .onb-ruler-illus-wrap-height{ height:128px; align-items:flex-end; margin-top:6px; } /* Goal Focus: grid 2x2 kartu besar mengisi layar. */ .onb-goal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin-top:8px; } .onb-goal-grid .onb-goal-card{ height:118px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:13px; font-weight:700; text-align:center; padding:10px; } .onb-goal-grid .onb-goal-card .ico{ font-size:32px; } .onb-goal-grid .onb-goal-card-all{ grid-column:1 / -1; height:84px; flex-direction:row; } .onb-goal-grid .onb-goal-card-all .ico{ font-size:26px; } /* Hari & Jam Kerja: kartu ringkasan di bawah biar layar tidak kosong, sekaligus jadi konfirmasi visual instan dari pilihan di atas. */ .onb-summary-card{ margin-top:16px; border:1px solid var(--hairline); background:var(--surface-1); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; } .onb-summary-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; } .onb-summary-row .k{ color:var(--text-muted); } .onb-summary-row .v{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--onb-accent, var(--habit)); } /* Data Finance (step 5, poles v274): input nominal jadi "big number" field bergaya sama seperti ruler (font besar, prefix "Rp" senada), dan kategori dompet jadi grid kartu 2x2 dgn ikon besar -- bukan cuma toggle-row teks datar. */ .onb-amount-field{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--surface-1); border:1.5px solid var(--hairline); border-radius:18px; padding:14px 18px; margin:6px 0 4px; } .onb-amount-prefix{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; color:var(--onb-accent, var(--financial)); } .onb-amount-field input{ flex:1; min-width:0; border:none; background:transparent; outline:none; font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--text-primary); } .onb-amount-field input::placeholder{ color:var(--text-muted); opacity:.5; } .onb-amount-field:focus-within{ border-color:var(--onb-accent, var(--financial)); box-shadow:0 0 0 1px var(--onb-accent, var(--financial)) inset; } /* Fix v275 (item 3, bug nyata): ada aturan global `input:focus-visible` (styles.css, dekat komentar "CIPS a11y focus ring") yang kasih outline hijau 2px ke SEMUA input yang belum punya style fokus sendiri secara eksplisit -- termasuk field nominal di step Finance ini, yang bentrok sama tema oranye/financial-nya dan kelihatan seperti kotak hijau random nempel pas user ngetik. Wrapper-nya sudah punya style fokus sendiri (:focus-within di atas), jadi outline generik itu dimatikan khusus di sini -- BUKAN diubah/dihapus secara global (supaya field lain yang memang belum py fokus custom tetap dapat aksesibilitasnya). */ .onb-amount-field input:focus-visible{ outline:none; } .onb-hero-input:focus-visible{ outline:none; } .onb-fincat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; } .onb-fincat-grid .onb-fincat-card{ height:80px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:700; } .onb-fincat-grid .onb-fincat-card .ico{ font-size:22px; } /* v274: .onb-gender-row (versi lama sejajar kiri-kanan) sudah tidak dipakai lagi di markup -- diganti .onb-gender-col (atas-bawah, lihat definisi lengkap di atas dekat .onb-summary-row). Blok lama dihapus total (bukan cuma dibiarkan mati) supaya tidak ada 2 definisi gender card yang membingungkan kalau ada perubahan lagi nanti. */ .onb-motivate-card{ margin-top:10px; font-size:11.5px; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--hairline); border-radius:12px; padding:10px 12px; line-height:1.5; display:flex; gap:8px; align-items:flex-start; } /* Ruler geser (usia/berat/tinggi) -- lihat buildOnbRuler() di app-03. */ .onb-ruler-picker{ display:flex; flex-direction:column; align-items:center; margin:6px 0 10px; } .onb-ruler-illus-wrap{ height:88px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:4px; } .onb-ruler-illus-wrap svg{ height:100%; width:46px; overflow:visible; } .onb-ruler-bigval{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; } .onb-ruler-bigval .num{ font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--onb-accent, var(--habit)); user-select:none; } .onb-ruler-bigval .unit{ font-size:12px; color:var(--text-muted); font-weight:600; } .onb-drag-hint{ font-size:9.5px; color:var(--text-muted); text-align:center; margin-bottom:4px; } .onb-ruler{ position:relative; width:100%; height:54px; margin:2px 0; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; } .onb-ruler:active{ cursor:grabbing; } .onb-ruler-track{ position:absolute; left:0; right:0; top:18px; height:32px; overflow:hidden; } .onb-ruler-ticks{ position:absolute; top:0; left:50%; display:flex; align-items:flex-end; height:32px; will-change:transform; } .onb-tick{ flex:0 0 auto; width:10px; display:flex; justify-content:center; } .onb-tick i{ display:block; width:1.5px; background:var(--hairline); border-radius:1px; } .onb-tick.major i{ height:18px; background:var(--text-muted); opacity:.6; } .onb-tick.minor i{ height:10px; } .onb-ruler-center-line{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:2.5px; height:32px; border-radius:2px; background:var(--onb-accent, var(--habit)); box-shadow:0 0 8px var(--onb-accent, var(--habit)); } .onb-ruler-labels{ position:absolute; top:36px; left:50%; display:flex; will-change:transform; } .onb-rlabel{ flex:0 0 auto; width:60px; text-align:center; font-size:9.5px; color:var(--text-muted); } .onb-illus-torso{ transform-box:fill-box; transform-origin:center; transition:transform .12s ease; } /* Belief card (Ibadah) -- 2 kolom sejajar sama besar. */ .onb-belief-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .onb-belief-row .toggle-btn{ height:96px; border-radius:16px; border:1.5px solid var(--hairline); background:var(--surface-1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 6px; text-align:center; } .onb-belief-row .toggle-btn .onb-belief-ico{ font-size:22px; } .onb-belief-row .toggle-btn .onb-belief-lbl{ font-weight:700; font-size:12.5px; } .onb-belief-row .toggle-btn .onb-belief-sub{ font-size:9.5px; color:var(--text-muted); line-height:1.3; } .onb-belief-row .toggle-btn.active{ border-color:var(--onb-accent); background:var(--onb-accent-dim); box-shadow:0 0 0 1px var(--onb-accent) inset; } /* Mode jadwal kerja (fitur baru v271) */ .onb-mode-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; } .onb-mode-chip{ height:46px; border-radius:12px; border:1px solid var(--hairline); background:var(--surface-1); font-size:10.5px; font-weight:600; color:var(--text-muted); display:flex; align-items:center; justify-content:center; text-align:center; padding:2px 4px; line-height:1.2; cursor:pointer; } .onb-mode-chip.active{ border-color:var(--onb-accent); background:var(--onb-accent-dim); color:var(--text-primary); box-shadow:0 0 0 1px var(--onb-accent) inset; } .onb-flex-note{ border:1px solid var(--hairline); background:var(--surface-1); border-radius:14px; padding:13px 12px; font-size:11.5px; color:var(--text-muted); line-height:1.6; } .onb-location-result{ margin-top:10px; font-size:12.5px; font-weight:600; color:var(--onb-accent,var(--ibadah)); background:var(--onb-accent-dim,var(--ibadah-dim)); border:1px solid var(--onb-accent,var(--ibadah)); border-radius:12px; padding:10px 12px; } /* Day-grid (Hari Kerja, step 15) -- grid 4-kolom sudah ada (.onb-days-row), ini cuma nambah badge centang kecil pas aktif, sama seperti mockup. */ .onb-days-row .toggle-btn{ position:relative; } .onb-days-row .toggle-btn.active::after{ content:"✓"; position:absolute; top:3px; right:4px; width:13px; height:13px; border-radius:50%; background:var(--onb-accent, var(--habit)); color:#06130b; font-size:8px; font-weight:700; display:grid; place-items:center; line-height:1; } .boot-logo{ width:72px; height:72px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 28px -10px var(--cips-overlay-black-50); animation: bootPulse 1.3s ease-in-out infinite; overflow:hidden; } .boot-logo img{ width:100%; height:100%; object-fit:cover; display:block; } .boot-label{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:.02em; } @keyframes bootPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(0.92); opacity:0.7; } } /* ---- Skeleton loading generik: dipakai saat menunggu data async (mis. jadwal shalat dari API) ---- */ .skeleton-list{ display:flex; flex-direction:column; gap:10px; margin:4px 0 14px; } .skeleton-row{ display:flex; justify-content:space-between; align-items:center; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-md); padding:14px 16px; } .skeleton-pill{ height:13px; border-radius:7px; background:linear-gradient(90deg, var(--surface-2) 25%, var(--hairline) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:skeletonShimmer 1.4s ease infinite; } .skeleton-pill.w-40{ width:40%; } .skeleton-pill.w-20{ width:20%; } @keyframes skeletonShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } } .dock-wrap{ position:relative; display:none; } .dock-wrap::before{ content:''; position:absolute; left:8%; right:8%; bottom:2px; height:34px; background: radial-gradient(ellipse at center, var(--cips-overlay-black-35) 0%, transparent 72%); filter: blur(6px); pointer-events:none; z-index:0; } .dock{ position:relative; isolation:isolate; overflow:hidden; background: linear-gradient(180deg, rgba(32,36,47,.86) 0%, rgba(24,27,36,.92) 100%); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--cips-overlay-white-08); border-radius: 26px; padding: 9px 10px; display:flex; justify-content:space-between; gap:2px; align-items:center; box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 var(--cips-overlay-white-06); } [data-theme="light"] .dock{ background: linear-gradient(180deg, rgba(255,253,249,.86) 0%, rgba(241,236,224,.92) 100%); border-color: rgba(20,20,20,.07); box-shadow: 0 14px 30px rgba(80,60,20,.14), 0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5); } .dock-indicator{ position:absolute; top:7px; left:0; width:48px; height:48px; border-radius:15px; background: var(--habit-dim); z-index:0; pointer-events:none; transform: translateX(6px); transition: transform .38s cubic-bezier(.22,.85,.32,1.28), background .25s ease, width .25s ease; opacity:0; } .dock-indicator.on{ opacity:1; } .dock-icon{ position:relative; z-index:1; width:48px; height:48px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; transition: color .2s ease, transform .15s var(--ease-spring); flex-shrink:0; } .dock-icon svg{ width:21px; height:21px; transition: transform .25s var(--ease-spring); } .dock-icon:active{ transform:scale(0.86); } .dock-icon.active, .dock-icon.active-religion, .dock-icon.active-health, .dock-icon.active-finance{ transform:translateY(-1px); } .dock-icon.active svg, .dock-icon.active-religion svg, .dock-icon.active-health svg, .dock-icon.active-finance svg{ transform:scale(1.08); filter: drop-shadow(0 0 7px currentColor); } .dock-icon.active{ color: var(--habit-text); } .dock-icon.active-religion{ color: var(--ibadah-text); } .dock-icon.active-health{ color: var(--kesehatan-text); } .dock-icon.active-finance{ color: var(--financial-text); } .dock-icon-dot{ position:absolute; bottom:5px; left:50%; width:4px; height:4px; border-radius:50%; background: currentColor; opacity:0; transform:translateX(-50%) scale(0); transition: all .25s var(--ease-spring); } .dock-icon.active .dock-icon-dot, .dock-icon.active-religion .dock-icon-dot, .dock-icon.active-health .dock-icon-dot, .dock-icon.active-finance .dock-icon-dot{ opacity:1; transform:translateX(-50%) scale(1); } .dock-icon.add{ background: var(--habit); color:var(--cips-on-accent-cool); font-weight:700; } /* Audit lanjutan (kebersihan CSS): rule "html,body{margin:0!important;...} .app,.screen{margin-top:0!important;transform:none;}" yang dulu ada di sini DIHAPUS setelah ditelusuri -- 100% mati/redundan, bukan fix aktif untuk apa pun: margin:0 sudah dijamin oleh *{margin:0} di baris ~75, body sudah position:fixed;inset:0 (baris ~80-81) yang sudah menetapkan top/left/right/ bottom ke 0, dan class ".app" TIDAK PERNAH dipakai satu kali pun di index.html (0 kecocokan). Kalau di masa depan ada bug spesifik (mis. body bergeser saat keyboard virtual muncul/hilang di iOS PWA), perbaikannya sebaiknya ditulis ulang dengan komentar yang jelas tentang device/skenario apa yang dibenahi -- bukan rule !important tanpa penjelasan seperti ini. */ /* ============================================================ CIPS — Dashboard First-Visit Guided Tour Native spotlight overlay; intentionally isolated from app UI. ============================================================ */ #cipsDashboardTour{ position:fixed; inset:0; z-index:99990; display:none; pointer-events:none; font-family:'Inter',sans-serif; } #cipsDashboardTour.is-open{ display:block; pointer-events:auto; } #cipsDashboardTour .cips-tour-backdrop{ position:absolute; inset:0; background:transparent; opacity:0; transition:opacity .28s ease; } #cipsDashboardTour .cips-tour-spotlight{ position:fixed; z-index:2; box-sizing:border-box; pointer-events:none; background:transparent; border:1.5px solid rgba(150,255,190,.78); /* The oversized shadow creates the real dark overlay while the target rectangle itself stays transparent/bright. This is the spotlight cut-out. */ box-shadow: 0 0 0 9999px rgba(0,0,0,.72), 0 0 0 3px rgba(150,255,190,.08), 0 0 20px rgba(150,255,190,.28), inset 0 0 18px rgba(150,255,190,.06); opacity:0; transition: left .34s cubic-bezier(.22,1,.36,1), top .34s cubic-bezier(.22,1,.36,1), width .34s cubic-bezier(.22,1,.36,1), height .34s cubic-bezier(.22,1,.36,1), opacity .22s ease; } #cipsDashboardTour .cips-tour-card{ position:fixed; z-index:3; box-sizing:border-box; padding:17px 17px 15px; border:1px solid rgba(150,255,190,.28); border-radius:var(--cips-radius-lg); background: linear-gradient(155deg,rgba(31,35,48,.98),rgba(19,22,31,.98)); box-shadow: 0 22px 55px rgba(0,0,0,.48), 0 0 0 1px var(--cips-overlay-white-035) inset, 0 0 28px rgba(150,255,190,.09); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; transform:translateY(8px); transition: left .34s cubic-bezier(.22,1,.36,1), top .34s cubic-bezier(.22,1,.36,1), opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1); color:var(--text-primary,#f4f6fb); } #cipsDashboardTour.is-visible .cips-tour-backdrop{ opacity:1; } #cipsDashboardTour.is-visible .cips-tour-spotlight{ opacity:1; } #cipsDashboardTour.is-visible .cips-tour-card{ opacity:1; transform:translateY(0); } #cipsDashboardTour.is-closing .cips-tour-backdrop, #cipsDashboardTour.is-closing .cips-tour-spotlight, #cipsDashboardTour.is-closing .cips-tour-card{ opacity:0; } .cips-tour-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .cips-tour-icon{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(150,255,190,.09); border:1px solid rgba(150,255,190,.16); font-size:21px; box-shadow:0 0 18px rgba(150,255,190,.08); } .cips-tour-progress{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.8px; color:var(--text-muted,#9ba3b5); } .cips-tour-title{ margin:0; font-family:'Space Grotesk',sans-serif; font-size:18px; line-height:1.2; font-weight:700; letter-spacing:-.25px; } .cips-tour-description{ margin:8px 0 16px; color:var(--text-muted,#a9b0c0); font-size:12.5px; line-height:1.58; } .cips-tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .cips-tour-skip, .cips-tour-next{ appearance:none; -webkit-appearance:none; border:0; font-family:'Inter',sans-serif; cursor:pointer; min-height:38px; border-radius:12px; font-weight:700; transition:transform .14s ease,filter .14s ease,box-shadow .14s ease; } .cips-tour-skip{ padding:0 8px; background:transparent; color:var(--text-muted,#9ba3b5); font-size:10.5px; } .cips-tour-next{ padding:0 15px; background:linear-gradient(135deg,rgba(150,255,190,.96),rgba(115,230,163,.96)); color:#0b1510; font-size:11.5px; box-shadow:0 8px 20px rgba(100,220,150,.17); } .cips-tour-skip:active, .cips-tour-next:active{ transform:scale(.96); } .cips-tour-skip:focus-visible, .cips-tour-next:focus-visible{ outline:2px solid rgba(150,255,190,.95); outline-offset:2px; } @media (max-width:420px){ #cipsDashboardTour .cips-tour-card{ border-radius:18px; padding:15px 15px 13px; } .cips-tour-title{ font-size:17px; } .cips-tour-description{ font-size:12px; line-height:1.55; } .cips-tour-next{ padding:0 13px; } } @media (prefers-reduced-motion:reduce){ #cipsDashboardTour .cips-tour-backdrop, #cipsDashboardTour .cips-tour-spotlight, #cipsDashboardTour .cips-tour-card{ transition:none!important; } /* Wash tema onboarding tetap ganti warna (informasinya tetap perlu sampai), cuma cross-fade-nya dimatikan supaya tidak ada gerakan berlarut buat user yang minta reduced motion -- langsung tampil di gradient barunya. */ .onb-theme-bg-layer{ transition:none!important; } } /* ==== Utility spacing (Audit Fase 2 — CSS Cleanup) ==== Menggantikan 114 inline style="" berulang di index.html. Sengaja HANYA mencakup margin & text-align — dua properti ini diverifikasi TIDAK PERNAH dimanipulasi lewat el.style.X di runtime JS manapun (yang dimanipulasi live cuma display/width/color/background/height/fontSize/transform/dll), jadi memindahkannya ke class dijamin 0% mengubah tampilan atau perilaku app. */ .mt-0{ margin-top:0; } .mt-6{ margin-top:6px; } .mt-8{ margin-top:8px; } .mt-10{ margin-top:10px; } .mt-12{ margin-top:12px; } .mt-14{ margin-top:14px; } .mb-0{ margin-bottom:0; } .mb-2{ margin:0 0 2px; } .mb-4{ margin:0 0 4px; } .mb-6{ margin-bottom:6px; } .mb-8{ margin-bottom:8px; } .mb-10{ margin-bottom:10px; } .mb-12{ margin-bottom:12px; } .mb-14{ margin-bottom:14px; } .m-0{ margin:0; } .text-left{ text-align:left; } /* Fix (QA Final Production Audit, accessibility): fallback global untuk elemen interaktif yang BELUM punya styling :focus khusus di manapun di file ini -- supaya navigasi keyboard (Tab) tidak pernah kehilangan indikator fokus di elemen yang belum sempat diaudit satu-satu. Sengaja pakai :focus-visible (bukan :focus polos) supaya cuma nongol untuk navigasi keyboard/programmatic, TIDAK untuk klik mouse/tap biasa -- tidak mengubah tampilan sehari-hari sama sekali. Specificity-nya rendah (selector tag polos) sehingga aturan :focus/:focus-visible yang sudah ada di atas (class spesifik seperti .qlf-input:focus, .tx-search:focus-within, dst) tetap menang dan tidak berubah perilakunya. */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid rgba(150,255,190,.9); outline-offset:2px; } /* CIPS v77 — mobile viewport alignment hardening. The previous layout mixed fixed body sizing, 100vw phone sizing and animated onboarding transforms. On some Android Chrome viewport states this produced a persistent horizontal offset. */ html, body { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } @media (max-width: 600px){ body { left:0; right:0; padding:0 !important; margin:0 !important; } .phone { position:relative; left:0; right:0; margin:0; width:100% !important; max-width:100% !important; min-width:0; transform:none !important; } #onboardingOverlay { left:0 !important; right:0 !important; width:100% !important; max-width:100% !important; transform:none !important; } .onb-steps { width:100%; max-width:100%; min-width:0; } .onb-step, .onb-step.onb-step-active { max-width:100%; min-width:0; } } /* ============================================================ CIPS v78 — MOBILE VIEWPORT ALIGNMENT FIX Root cause: body had 16px horizontal padding while .phone used viewport units (100vw/100dvw). The flex centering could therefore produce a visible horizontal offset on Android Chrome. ============================================================ */ @media (max-width: 600px){ html, body{ width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; left:0 !important; right:0 !important; overflow:hidden !important; } body{ display:block !important; position:fixed !important; inset:0 !important; } .phone{ position:absolute !important; inset:0 !important; left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:100% !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; transform:none !important; overflow:hidden !important; } #onboardingOverlay{ position:absolute !important; inset:0 !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; box-sizing:border-box !important; overflow:hidden !important; } .onb-steps{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } .onb-step, .onb-section, .onb-field, .onb-section-head{ max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } } /* ============================================================ CIPS v80 — ONBOARDING BANK/E-WALLET PICKER + IME HARDENING Android Chrome can retain an adjusted containing block after the numeric keyboard closes. The global logo picker is therefore fixed to the visual viewport on mobile instead of relying on .phone's absolute containing block. ============================================================ */ @media (max-width:600px){ .day-sheet-backdrop.logo-picker-backdrop{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; z-index:160 !important; } .day-sheet.logo-picker-sheet{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100vw !important; max-width:100vw !important; max-height:76vh !important; max-height:76dvh !important; margin:0 !important; z-index:161 !important; transform:translate3d(0,100%,0) !important; } .day-sheet.logo-picker-sheet.open{ transform:translate3d(0,0,0) !important; } .logo-picker-list{ min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } } /* ========================================================================== CIPS v81 — FINANCE UI PRECISION / RESPONSIVE HARDENING Scope: Finance views only. No business logic changes. Goals: - eliminate overflow / misalignment - normalize cards, buttons, chips, filters and forms - make Finance controls stable on narrow Android viewports - prevent long labels / amounts from pushing siblings off-screen ========================================================================== */ /* CIPS v85 — Finance visual stability hardening. This layer intentionally removes transform-based route animation from Finance on Android: nested scroll containers + transform layers are a known source of transient blank/shifted frames when a bottom sheet closes and a route changes. */ .view[data-view^="finance"]{ width:100%; min-width:0; max-width:none; flex:0 0 auto; overflow-x:hidden; overflow-anchor:none; position:relative; top:auto; left:auto; right:auto; bottom:auto; } .view[data-view^="finance"].anim-forward, .view[data-view^="finance"].anim-back{ animation:none !important; transform:none !important; opacity:1 !important; } /* Meal & Gym: sama seperti Finance di atas -- .mg-tabs pakai position:sticky, tapi transform dari animasi masuk/keluar .view (viewInForward/viewInBack) membuat .view ini jadi containing block baru, yang bikin sticky-nya gagal "menempel" saat discroll (dilaporkan user: "tidak ikut bergeser ke atas"). */ .view[data-view="meal-gym"].anim-forward, .view[data-view="meal-gym"].anim-back{ animation:none !important; transform:none !important; opacity:1 !important; } /* Religion: tab horizontal "Hari Ini/Qur'an/Dzikir & Doa/Lainnya" di home -- struktur SAMA PERSIS dengan .mg-tabs/.mg-tab (termasuk fix sticky di atas), cuma warna ikut tema Ibadah (emas) bukan tema Kesehatan (biru). */ .view[data-view="religion"].anim-forward, .view[data-view="religion"].anim-back{ animation:none !important; transform:none !important; opacity:1 !important; } .religion-tabs{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px 0 9px;background:var(--surface-1);border-radius:var(--cips-radius-lg);border-bottom:1px solid var(--hairline);margin-bottom:14px} .religion-tab{position:relative;min-height:42px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text-muted);font:700 12px/1 inherit;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease} .religion-tab:active{transform:scale(.98)} .religion-tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--ibadah-dim) 70%,var(--surface-2)),var(--surface-2));border-color:color-mix(in srgb,var(--ibadah) 22%,var(--hairline));color:var(--text-primary);box-shadow:0 7px 18px var(--cips-overlay-black-08)} .religion-tab.active:after{content:"";position:absolute;left:28%;right:28%;bottom:4px;height:2px;border-radius:var(--cips-pill-radius);background:var(--ibadah);box-shadow:0 0 10px color-mix(in srgb,var(--ibadah) 70%,transparent)} .religion-tab-panel{display:none;} .religion-tab-panel.active{display:block;} .religion-preview-cta{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:12px; padding:12px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-weight:700; font-size:13px; cursor:pointer; } .religion-preview-empty{ padding:18px 0; text-align:center; color:var(--text-muted); font-size:12.5px; } @media (max-width:360px){.religion-tab{font-size:10px}} /* Finance: tab horizontal "Ringkasan/Transaksi/Kelola/Lainnya" di home -- pola sama persis (lihat catatan panjang di .religion-tabs di atas), warna tema Financial. .view[data-view^="finance"] SUDAH punya fix transform/animasi (lihat blok jauh di atas), jadi sticky di sini otomatis aman tanpa fix tambahan. */ .finance-tabs-wrap{position:sticky;top:0;z-index:6;background:var(--surface-1);border-radius:var(--cips-radius-lg);border-bottom:1px solid var(--hairline);margin-bottom:14px} .finance-tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 14px 9px} .finance-tab{position:relative;min-height:42px;padding:0 6px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text-muted);font:700 12px/1 inherit;text-align:center;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease} .finance-tab:active{transform:scale(.98)} .finance-tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--financial-dim) 70%,var(--surface-2)),var(--surface-2));border-color:color-mix(in srgb,var(--financial) 22%,var(--hairline));color:var(--text-primary);box-shadow:0 7px 18px var(--cips-overlay-black-08)} .finance-tab.active:after{content:"";position:absolute;left:28%;right:28%;bottom:4px;height:2px;border-radius:var(--cips-pill-radius);background:var(--financial);box-shadow:0 0 10px color-mix(in srgb,var(--financial) 70%,transparent)} .finance-tab-panel{display:none;} .finance-tab-panel.active{display:block;} /* ---- Religion: dhikr-counter & dua-detail sebagai bottom-sheet ---- Sengaja HANYA styling — showView()/render()/goBack()/navStack JS sama sekali tidak disentuh (keduanya masih "view" biasa secara logic, cuma tampilannya diubah). Alasan: render() punya banyak fix Android-spesifik (scroll/viewport) yang riskan diubah tanpa bisa dites di browser sungguhan -- lihat komentar panjang di dalam render(). Konversi ke sheet SUNGGUHAN (nempel di atas view sebelumnya yang tetap terlihat) butuh 2 view aktif bersamaan sekaligus, yang berarti mengubah arsitektur "satu .view aktif" -- di luar scope aman untuk sekarang. Ini pendekatan low-risk yang tetap memberi rasa "ringan, bukan halaman penuh" lewat animasi slide-up + kartu membulat di bawah. */ .view[data-view="religion-dhikr-counter"].active, .view[data-view="religion-dua-detail"].active{ position:fixed; left:0; right:0; bottom:0; top:auto; max-height:86vh; margin:0 auto; max-width:520px; background:var(--surface-1, #14151c); border-radius:22px 22px 0 0; box-shadow:0 -12px 32px var(--cips-overlay-black-35); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px)); z-index:120; } .view[data-view="religion-dhikr-counter"].active::before, .view[data-view="religion-dua-detail"].active::before{ content:""; position:fixed; inset:0; background:rgba(4,5,10,.55); z-index:-1; } .view[data-view="religion-dhikr-counter"].anim-forward, .view[data-view="religion-dua-detail"].anim-forward{ animation:religionSheetIn .28s cubic-bezier(.22,.61,.36,1) both; } .view[data-view="religion-dhikr-counter"].anim-back, .view[data-view="religion-dua-detail"].anim-back{ animation:religionSheetIn .2s ease-out both; } @keyframes religionSheetIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } } .view[data-view="religion-dhikr-counter"] .subheader, .view[data-view="religion-dua-detail"] .subheader{ margin:-4px -4px 12px; padding-bottom:8px; border-bottom:1px solid var(--cips-overlay-white-06); } .view[data-view^="finance"] .field-input, .view[data-view^="finance"] input, .view[data-view^="finance"] select, .view[data-view^="finance"] textarea, .view[data-view^="finance"] button{ max-width:100%; } .view[data-view^="finance"] .field-error{ border-color:var(--danger) !important; box-shadow:0 0 0 3px rgba(255,91,91,.12) !important; } .finance-render-error{ margin:16px 0; padding:18px; border:1px solid rgba(255,91,91,.28); border-radius:18px; background:rgba(255,91,91,.06); text-align:center; } .finance-render-error-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);} .finance-render-error-text{font-size:12px;color:var(--text-muted);line-height:1.5;margin:6px 0 14px;} /* Finance page geometry */ .view[data-view^="finance"]{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; overflow-x:clip; } .view[data-view^="finance"] *, .view[data-view^="finance"] *::before, .view[data-view^="finance"] *::after{ box-sizing:border-box; } .view[data-view^="finance"] img, .view[data-view^="finance"] svg{ max-width:100%; } /* Headers: stable left / center / right alignment */ .view[data-view^="finance"] .subheader, .view[data-view^="finance"] .fan-header-row, .view[data-view^="finance"] .tx-hero-top{ width:100%; min-width:0; } .view[data-view^="finance"] .subheader-title, .view[data-view^="finance"] .fan-title, .view[data-view^="finance"] .tx-hero-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; } .view[data-view^="finance"] .subheader-pill-btn, .view[data-view^="finance"] .fan-export-btn, .view[data-view^="finance"] .tx-add-btn{ max-width:100%; flex:0 0 auto; } /* Finance dashboard cards */ .view[data-view="finance"] .fdash-card{ width:100%; max-width:100%; min-width:0; overflow:hidden; } .view[data-view="finance"] .fdash-balance-value{ min-width:0; max-width:calc(100% - 48px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .view[data-view="finance"] .fdash-quick-row{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .view[data-view="finance"] .fdash-quick-btn{ width:100%; min-width:0; min-height:46px; padding:10px 12px; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; } .view[data-view="finance"] .fdash-quick-btn > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; } /* Analytics */ .view[data-view="finance-analytics"] .fan-filter-row{ width:100%; min-width:0; display:flex; flex-wrap:wrap; padding:1px 1px 5px; } .view[data-view="finance-analytics"] .fan-filter-chip{ flex:0 0 auto; } .view[data-view="finance-analytics"] .fan-card{ width:100%; min-width:0; overflow:hidden; } .view[data-view="finance-analytics"] .fan-card > *{ min-width:0; } /* Transactions */ .view[data-view="finance-transactions"] .tx-hero-top{ align-items:center; } .view[data-view="finance-transactions"] .tx-search{ width:100%; min-width:0; } .view[data-view="finance-transactions"] .tx-filter-row{ max-width:100%; padding-bottom:5px; } .view[data-view="finance-transactions"] .tx-row-content{ min-width:0; } .view[data-view="finance-transactions"] .tx-row-main{ min-width:0; overflow:hidden; } .view[data-view="finance-transactions"] .tx-row-title, .view[data-view="finance-transactions"] .tx-row-sub{ min-width:0; } .view[data-view="finance-transactions"] .tx-row-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .view[data-view="finance-transactions"] .tx-row-amt-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Financial accounts */ .view[data-view="finance-accounts"] .fin-acc-chips{ width:100%; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:2px 1px 6px; } .view[data-view="finance-accounts"] .fin-acc-chip{ flex:0 0 auto; min-height:36px; display:inline-flex; align-items:center; justify-content:center; padding:8px 13px; border-radius:var(--cips-pill-radius); border:1px solid var(--hairline); background:var(--surface-1); color:var(--text-muted); font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:600; line-height:1.15; white-space:nowrap; cursor:pointer; } .view[data-view="finance-accounts"] .fin-acc-card{ width:100%; min-width:0; overflow:hidden; } .view[data-view="finance-accounts"] .fin-acc-main{ min-width:0; overflow:hidden; } .view[data-view="finance-accounts"] .fin-acc-name, .view[data-view="finance-accounts"] .fin-acc-type{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .view[data-view="finance-accounts"] .fin-acc-right{ min-width:0; max-width:43%; } .view[data-view="finance-accounts"] .fin-acc-saldo-value{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Calendar */ .view[data-view="finance-calendar"] .progress-block{ width:100%; min-width:0; overflow:hidden; } .view[data-view="finance-calendar"] .progress-block-header{ gap:8px; } .view[data-view="finance-calendar"] .progress-block-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .view[data-view="finance-calendar"] .fin-cal-grid{ width:100%; min-width:0; gap:5px; } .view[data-view="finance-calendar"] .fin-cal-day{ width:100%; min-width:0; aspect-ratio:1; } .view[data-view="finance-calendar"] .fin-cal-day{ font-size:clamp(10px,3.2vw,12.5px); } /* Generic Finance module pages */ .view[data-view="finance-module"] #financeModuleList{ width:100%; min-width:0; } .view[data-view="finance-module"] #financeModuleList > *{ min-width:0; max-width:100%; } .view[data-view="finance-module"] .cat-card{ width:100%; min-width:0; } .view[data-view="finance-module"] .cat-card > div:nth-child(2){ min-width:0; overflow:hidden; } .view[data-view="finance-module"] .cat-title, .view[data-view="finance-module"] .cat-desc{ overflow-wrap:anywhere; } /* Finance forms: consistent field rhythm */ #financeModuleFields{ width:100%; min-width:0; } #financeModuleFields .field-row{ width:100%; min-width:0; margin-bottom:14px; } #financeModuleFields .field-row:last-child{margin-bottom:0;} #financeModuleFields .field-row label{ width:100%; line-height:1.35; overflow-wrap:anywhere; } #financeModuleFields .field-row .field-input{ min-width:0; min-height:44px; width:100% !important; max-width:100%; border-radius:var(--cips-radius-md); } #financeModuleFields .toggle-row{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #financeModuleFields .toggle-row .toggle-btn{ min-width:0; min-height:42px; padding:9px 8px; line-height:1.2; white-space:normal; overflow-wrap:anywhere; } #financeModuleSheet .save-btn, #financeModuleSheet .entry-delete-btn{ width:100%; min-height:46px; } #financeModuleSheet .day-sheet-header{ min-width:0; } #financeModuleSheet .day-sheet-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Prevent long currency strings and generated content from expanding cards */ .view[data-view^="finance"] .stat-card, .view[data-view^="finance"] .progress-block, .view[data-view^="finance"] .cat-card, .view[data-view^="finance"] .settings-block{ max-width:100%; min-width:0; } .view[data-view^="finance"] .stat-value{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Narrow Android viewport */ @media (max-width:430px){ .view[data-view="finance"] .fdash-card{ padding:15px; border-radius:18px; } .view[data-view="finance"] .fdash-balance-value{ font-size:24px; } .view[data-view="finance"] .fdash-greet{ font-size:19px; } .view[data-view="finance"] .fdash-sub{ font-size:11.5px; } .view[data-view="finance-analytics"] .fan-header-row{ align-items:center; } .view[data-view="finance-analytics"] .fan-title{ font-size:21px; } .view[data-view="finance-analytics"] .fan-export-btn{ padding:8px 10px; font-size:11px; } .view[data-view="finance-transactions"] .tx-hero-title{ font-size:20px; } .view[data-view="finance-transactions"] .tx-add-btn{ padding:0 11px; font-size:11.5px; } .view[data-view="finance-accounts"] .fin-acc-card{ padding:13px 12px; gap:9px; } .view[data-view="finance-accounts"] .fin-acc-right{ max-width:40%; } .view[data-view="finance-accounts"] .fin-acc-saldo-value{ font-size:12px; } .view[data-view="finance-calendar"] .fin-cal-grid{ gap:3px; } .view[data-view="finance-calendar"] .fin-cal-day{ border-radius:var(--cips-radius-sm); } #financeModuleFields .toggle-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Extra narrow devices */ @media (max-width:360px){ .view[data-view="finance"] .fdash-card{ padding:13px; } .view[data-view="finance"] .fdash-quick-row{ gap:7px; } .view[data-view="finance"] .fdash-quick-btn{ padding-inline:8px; font-size:12px; } .view[data-view="finance"] .fdash-balance-value{ font-size:22px; } .view[data-view="finance-accounts"] .fin-acc-right{ max-width:38%; } #financeModuleFields .toggle-row{ gap:6px; } #financeModuleFields .toggle-row .toggle-btn{ padding-inline:5px; font-size:11.5px; } } /* Keyboard / dynamic viewport: do not let Finance sheets overflow horizontally */ #financeModuleSheet, #financeModuleBackdrop{ max-width:100vw; } body.finance-module-open{ overflow-x:hidden; } /* ================================================================ CIPS v82 — Finance Interaction/Layout Integrity Hardening Root-cause fixes for UI breakage triggered by Finance actions. ================================================================ */ /* Global Finance containment: no generated Finance content may expand the app shell. */ .view[data-view^="finance"] { min-width: 0; max-width: 100%; overflow-x: clip; } /* v84: Finance DOM updates are frequent. Disable scroll anchoring on the module itself so Android Chrome cannot move the viewport when a chart/list is replaced after a button action. */ .view[data-view^="finance"] { overflow-anchor: none; } .view[data-view^="finance"] input, .view[data-view^="finance"] select, .view[data-view^="finance"] textarea { max-width:100%; min-width:0; } .view[data-view^="finance"] *, #financeModuleSheet *, #txAddChooserSheet *, #txFilterSheet *, #txRowMenuSheet *, #logoPickerSheet * { box-sizing: border-box; } /* CRITICAL: the previous v81 rule assigned BOTH label and input width:100% while .field-row is a horizontal flex row. That created 200%+ rows and pushed Finance forms off-screen. Finance forms are intentionally vertical. */ #financeModuleFields .field-row { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 7px; width: 100%; min-width: 0; margin: 0 0 14px; } #financeModuleFields .field-row:last-child { margin-bottom: 0; } #financeModuleFields .field-row > label { display: block; width: 100%; min-width: 0; flex: none; line-height: 1.35; } #financeModuleFields .field-row > .field-input, #financeModuleFields .field-row > select.field-input, #financeModuleFields .field-row > input.field-input, #financeModuleFields .field-row > .logo-picker-trigger { width: 100% !important; max-width: 100%; min-width: 0; flex: none; } #financeModuleFields .field-row > .field-help-text { width: 100%; min-width: 0; } #financeModuleFields .toggle-row { width: 100%; min-width: 0; } /* Finance sheet itself must never inherit a width larger than the phone shell. */ #financeModuleBackdrop, #financeModuleSheet, #logoPickerBackdrop, #logoPickerSheet, #txAddChooserBackdrop, #txAddChooserSheet, #txFilterBackdrop, #txFilterSheet, #txRowMenuBackdrop, #txRowMenuSheet { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* Long account/category labels cannot force a flex/grid parent wider. */ .view[data-view^="finance"] .subheader, .view[data-view^="finance"] .subheader > *, .view[data-view^="finance"] .stat-card > *, .view[data-view^="finance"] .progress-block-header > *, .view[data-view^="finance"] .cat-card > *, .view[data-view^="finance"] .fdash-balance-top > *, .view[data-view^="finance"] .tx-hero-top > * { min-width: 0; } .view[data-view^="finance"] .cat-card > div:nth-child(2), .view[data-view^="finance"] .stat-card > div:first-child { overflow: hidden; } /* Transaction rows: amount/menu remain fixed while text gets the remaining width. */ .view[data-view="finance-transactions"] .tx-row-content { display: flex; align-items: center; width: 100%; min-width: 0; max-width: 100%; } .view[data-view="finance-transactions"] .tx-row-main { flex: 1 1 auto; width: 0; min-width: 0; } .view[data-view="finance-transactions"] .tx-row-amt { /* v228 fix: sebelumnya max-width pakai % dari lebar row (42%/38%/34% di 3 tempat beda-beda, sering konflik) -- angka nominal (Rp jutaan) jadi ke-ellipsis walau judul transaksinya pendek & masih ada ruang. Sekarang satu aturan px tetap yang cukup buat nominal sampai ratusan juta, sisa ruang otomatis mengalir ke tx-row-main (judul) yang memang sudah di-ellipsis duluan -- prioritas: nominal SELALU utuh, judul yang dikorbankan kalau ruang mepet (nominal lebih krusial di app finance). */ flex: 0 1 auto; min-width: 0; max-width: 152px; } .view[data-view="finance-transactions"] .tx-row-kebab { flex: 0 0 26px; } /* Account cards: three columns must fit without forcing horizontal overflow. */ .view[data-view="finance-accounts"] .fin-acc-card { width: 100%; min-width: 0; max-width: 100%; } .view[data-view="finance-accounts"] .fin-acc-main { flex: 1 1 auto; width: 0; min-width: 0; } .view[data-view="finance-accounts"] .fin-acc-right { flex: 0 1 38%; min-width: 0; max-width: 38%; } .view[data-view="finance-accounts"] .fin-acc-kebab { flex: 0 0 26px; } /* Dashboard actions: never allow a long label to enlarge a button. */ .view[data-view="finance"] .fdash-quick-row, .view[data-view="finance"] .fdash-quick-btn, .view[data-view="finance"] .fdash-balance-top, .view[data-view="finance"] .fdash-balance-actions { min-width: 0; max-width: 100%; } .view[data-view="finance"] .fdash-quick-btn { overflow: hidden; text-overflow: ellipsis; } /* Avoid layout jumps caused by native select/number controls on Android. */ #financeModuleFields select.field-input, #financeModuleFields input.field-input, #financeModuleFields .logo-picker-trigger { min-height: 44px; line-height: 1.25; } /* Sheet content must scroll internally; opening/closing it must not widen the shell. */ .day-sheet { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .day-sheet > * { min-width: 0; max-width: 100%; } @media (max-width: 360px) { #financeModuleFields .field-row { gap: 6px; } .view[data-view="finance-accounts"] .fin-acc-right { max-width: 36%; } .view[data-view="finance-transactions"] .tx-row-amt { max-width: 130px; } } /* CIPS v88 — Finance Android route-jump hardening. Route views must participate in normal document flow; only the app-level #screen is scrollable. This prevents child routes/buttons from becoming a competing scroll/focus target on narrow Android browsers. */ .view[data-view^="finance"] { contain: layout style; isolation: isolate; scroll-margin-top: 0; scroll-margin-bottom: 0; } .view[data-view^="finance"] button, .view[data-view^="finance"] [role="button"] { -webkit-tap-highlight-color: transparent; } /* ============================================================ CIPS v89 — FINANCE ANDROID VIEWPORT INTERACTION HARDENING Root cause targeted: - forced blur during route render - forced screen.scrollTop writes during Finance navigation/mutation - transform/compositor route transitions These three operations can race Android Chrome's visual viewport/IME adjustment and make the entire Finance UI appear to jump, shift, flash black, or lose its previous layout. ============================================================ */ @media (max-width: 600px){ .view[data-view^="finance"], .view[data-view^="finance"].active, .view[data-view^="finance"].anim-forward, .view[data-view^="finance"].anim-back{ animation:none !important; transform:none !important; translate:none !important; opacity:1 !important; will-change:auto !important; } .view[data-view^="finance"]{ contain:layout style; overflow-x:clip !important; } .view[data-view^="finance"] .day-sheet, .view[data-view^="finance"] .sheet, .view[data-view^="finance"] .modal{ transform:none; } } /* CIPS v90 — Finance navigation stability. No transform/animation/focus-driven viewport movement during Finance interaction. */ @media (max-width:600px){ .view[data-view^="finance"], .view[data-view^="finance"] *{ -webkit-tap-highlight-color: transparent; } .view[data-view^="finance"] .day-sheet{ will-change:auto !important; } #screen{ scroll-behavior:auto !important; } } /* v93 interaction stability */ #screen, .cips-screen { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } .phone, .cips-sandbox { overscroll-behavior: none; } html { scrollbar-gutter: stable; } /* ============================================================ CIPS v146 — Muslim / Lifestyle UX ============================================================ */ .muslim-module{padding-bottom:28px;} .muslim-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;} .muslim-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.8px;color:var(--ibadah-text);margin-bottom:3px;} .muslim-heading{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:600;letter-spacing:-.3px;color:var(--text-primary);} .muslim-summary{min-width:48px;height:40px;padding:0 11px;border:1px solid var(--hairline);border-radius:var(--cips-pill-radius);background:var(--surface-1);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted);} .muslim-tabs{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;margin-bottom:18px;} .muslim-tab{min-height:42px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text-muted);font:600 12px 'Inter',sans-serif;cursor:pointer;touch-action:manipulation;} .muslim-tab.active{background:var(--surface-1);border-color:var(--hairline);color:var(--text-primary);box-shadow:0 5px 16px rgba(0,0,0,.14);} .muslim-content{min-height:260px;} .muslim-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;} .muslim-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;color:var(--text-primary);} .muslim-subtitle{margin-top:3px;font-size:12px;color:var(--text-muted);line-height:1.45;} .muslim-section-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin:18px 2px 8px;} .muslim-list{display:flex;flex-direction:column;gap:7px;} .muslim-check-row{display:flex;align-items:center;gap:11px;min-height:62px;padding:10px 10px 10px 12px;background:var(--surface-1);border:1px solid var(--hairline);border-radius:16px;} .muslim-check{flex:0 0 25px;width:25px;height:25px;padding:0;border:1.5px solid var(--hairline);border-radius:50%;background:var(--surface-2);color:var(--bg);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;} .muslim-check.done{background:var(--ibadah);border-color:var(--ibadah);color:#111;} .muslim-check-body{min-width:0;flex:1;} .muslim-check-title{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.3;} .muslim-check-title.done{text-decoration:line-through;opacity:.58;} .muslim-check-desc{font-size:11.5px;color:var(--text-muted);margin-top:3px;line-height:1.35;} .muslim-habit-toggle{flex:0 0 auto;min-width:48px;height:30px;padding:0 9px;border:1px solid var(--hairline);border-radius:var(--cips-pill-radius);background:var(--surface-2);color:var(--text-muted);font:700 10px 'Inter',sans-serif;cursor:pointer;} .muslim-habit-toggle.on{background:var(--ibadah-dim);border-color:rgba(255,214,140,.42);color:var(--ibadah-text);} .muslim-note{font-size:11.5px;line-height:1.45;color:var(--text-muted);padding:10px 2px 0;} .muslim-inline-actions{display:flex;justify-content:flex-end;margin-top:10px;} .muslim-secondary-btn{min-height:40px;padding:0 14px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-2);color:var(--text-primary);font:600 12px 'Inter',sans-serif;cursor:pointer;} .muslim-info-card{margin-top:9px;border:1px solid var(--hairline);background:var(--surface-1);border-radius:18px;overflow:hidden;} .muslim-card-head{width:100%;display:flex;align-items:center;gap:11px;padding:14px;border:0;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer;} .muslim-card-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ibadah-dim);font-size:18px;flex:0 0 38px;} .muslim-card-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;} .muslim-card-copy b{font-size:14px;} .muslim-card-copy small{font-size:11.5px;color:var(--text-muted);} .muslim-card-chevron{font-size:18px;color:var(--text-muted);} .muslim-card-body{padding:0 14px 14px;border-top:1px solid var(--hairline);} .muslim-form-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;} .muslim-field-label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);} .muslim-input{display:block;width:100%;height:42px;margin-top:5px;padding:0 11px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-2);color:var(--text-primary);font:500 13px 'Inter',sans-serif;outline:none;} .muslim-input:focus{border-color:var(--ibadah);} .muslim-zakat-result{display:flex;flex-direction:column;gap:3px;padding:12px;margin-top:11px;border-radius:var(--cips-radius-md);background:var(--ibadah-dim);border:1px solid rgba(255,214,140,.25);} .muslim-zakat-result span{font-size:11px;color:var(--text-muted);} .muslim-zakat-result strong{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--text-primary);} .muslim-zakat-result small{font-size:11px;color:var(--text-muted);} .muslim-progress-head{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--text-muted);} .muslim-progress-head strong{color:var(--text-primary);} .muslim-progress{height:7px;border-radius:var(--cips-pill-radius);background:var(--surface-2);overflow:hidden;margin-top:7px;} .muslim-progress span{display:block;height:100%;background:var(--ibadah);border-radius:inherit;} .muslim-mini-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;} .muslim-mini-row{display:flex;align-items:center;gap:9px;width:100%;padding:8px 0;border:0;background:transparent;color:var(--text-primary);text-align:left;font-size:12px;cursor:pointer;} .muslim-mini-row .muslim-check{flex-basis:22px;width:22px;height:22px;font-size:11px;} .muslim-mini-row .done{text-decoration:line-through;opacity:.58;} /* Day-of-week chip row, dipakai jadwal Puasa Sunnah & Sedekah di tab "Lainnya" Religion (renderReligionLainnyaTab() di app-07-religion.js). Dibuat kompak (bukan pakai .toggle-btn default yang lebih besar/berpadding tebal) supaya 7 chip (Min-Sab) muat rapi dalam satu baris di layar HP sempit. */ .lainnya-day-row{ display:flex; gap:6px; margin:8px 0 2px; } .lainnya-day-chip{ flex:1; text-align:center; padding:8px 0; border-radius:var(--cips-radius-sm); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-muted); font-size:11.5px; font-weight:700; cursor:pointer; font-family:'Space Grotesk', sans-serif; transition: background .15s ease, border-color .15s ease, color .15s ease; } .lainnya-day-chip:active{ transform:scale(0.94); } .lainnya-day-chip.active{ background:var(--ibadah-dim); border-color:var(--ibadah); color:var(--ibadah-text); } /* Ringkasan tanggal keberangkatan Haji & Umrah (renderReligionLainnyaTab()) -- input type="date" aslinya TETAP tampil & fungsional (buka kalender native saat diketuk, paling reliable lintas browser/OS), baris ini cuma tambahan di bawahnya yang otomatis muncul & terformat rapi (nama hari, tanggal, bulan, tahun) begitu tanggalnya sudah dipilih. */ .lainnya-date-display{ margin-top:8px; padding:10px 12px; border-radius:12px; background:var(--ibadah-dim); border:1px solid rgba(255,214,140,0.3); font-size:12.5px; font-weight:700; color:var(--ibadah-text); } /* Tombol "Simpan" eksplisit di kartu Puasa/Sedekah/Zakat/Haji (aksen hijau habit, beda dari .muslim-secondary-btn netral, supaya kelihatan jelas sebagai aksi "konfirmasi tersimpan" -- lihat confirmLainnyaCardSaved()). */ .muslim-save-btn{ background:var(--habit-dim); border-color:rgba(150,255,190,.35); color:var(--habit-text); } .muslim-habit-card{margin:0 0 12px;border:1px solid rgba(255,214,140,.35);background:linear-gradient(160deg,var(--ibadah-dim),var(--surface-1));border-radius:18px;overflow:hidden;} .muslim-habit-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hairline);} .muslim-habit-head>div{display:flex;flex-direction:column;gap:2px;} .muslim-habit-head b{font-size:14px;color:var(--text-primary);} .muslim-habit-head span{font-size:11px;color:var(--text-muted);} .muslim-habit-list{display:flex;flex-direction:column;} .muslim-habit-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.045);} .muslim-habit-row:last-child{border-bottom:0;} .muslim-habit-copy{min-width:0;flex:1;} .muslim-habit-copy b{font-size:12.5px;color:var(--text-primary);font-weight:600;} .muslim-managed-hidden{display:none !important;} @media (min-width:601px){.muslim-form-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:380px){.muslim-tab{font-size:11px;padding:0 2px;}.muslim-check-row{padding-left:9px;padding-right:8px;}.muslim-habit-toggle{min-width:43px;padding:0 7px;}} /* CIPS v146 Part 2 — Meal & Gym UX shell. Presentation-only layer; existing health/gym classes remain intact for legacy views and data-action contracts. */ .mg-hero{position:relative;display:flex;gap:14px;align-items:center;padding:18px 2px 16px;overflow:hidden} .mg-hero:after{content:"";position:absolute;right:-36px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--meal-lime-dim),transparent 68%);pointer-events:none;opacity:.85} .mg-hero-orbit{position:relative;width:52px;height:52px;flex:0 0 52px;border:1px solid color-mix(in srgb,var(--meal-lime) 38%,transparent);border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--meal-lime-dim) 55%,var(--surface-1)));box-shadow:0 10px 30px rgba(0,0,0,.12),inset 0 0 0 1px var(--cips-overlay-white-04)} .mg-hero-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--meal-lime);top:7px;right:8px;box-shadow:0 0 14px color-mix(in srgb,var(--meal-lime) 75%,transparent)} .mg-hero-orbit b{font-size:12px;letter-spacing:.08em;color:var(--meal-lime-text)} .mg-hero-copy{position:relative;z-index:1;min-width:0}.mg-eyebrow{margin:0 0 4px;font-size:10px;letter-spacing:.16em;font-weight:850;color:var(--meal-lime-text)} .mg-title{margin:0;font-size:28px;line-height:1.02;letter-spacing:-.035em}.mg-subtitle{margin:7px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5;max-width:460px} .mg-tabs{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px 0 9px;background:var(--surface-1);border-radius:var(--cips-radius-lg);border-bottom:1px solid var(--hairline)} .mg-tab{position:relative;min-height:42px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text-muted);font:700 12px/1 inherit;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}.mg-tab:active{transform:scale(.98)} .mg-tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--meal-lime-dim) 70%,var(--surface-2)),var(--surface-2));border-color:color-mix(in srgb,var(--meal-lime) 22%,var(--hairline));color:var(--text-primary);box-shadow:0 7px 18px var(--cips-overlay-black-08)}.mg-tab.active:after{content:"";position:absolute;left:28%;right:28%;bottom:4px;height:2px;border-radius:var(--cips-pill-radius);background:var(--meal-lime);box-shadow:0 0 10px color-mix(in srgb,var(--meal-lime) 70%,transparent)}#mgTabWorkout.active{background:linear-gradient(180deg,color-mix(in srgb,var(--gym-violet-dim) 70%,var(--surface-2)),var(--surface-2));border-color:color-mix(in srgb,var(--gym-violet) 22%,var(--hairline))}#mgTabWorkout.active:after{background:var(--gym-violet);box-shadow:0 0 10px color-mix(in srgb,var(--gym-violet) 70%,transparent)} .mg-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:18px 2px 10px}.mg-section-head-tight{padding-top:22px}.mg-section-kicker{font-size:9px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:var(--meal-lime-text);margin-bottom:4px}.mg-section-head h2{margin:0;font-size:21px;letter-spacing:-.025em}.mg-date-chip{font:700 10px/1 'JetBrains Mono',monospace;color:var(--text-muted);border:1px solid var(--hairline);border-radius:var(--cips-pill-radius);padding:7px 9px;background:var(--surface-2)}.mg-ghost-link{border:0;background:none;color:var(--meal-lime-text);font:750 11px/1 inherit;padding:6px 0;cursor:pointer} .mg-card,.mg-feature-card,.mg-nutrition-card,.mg-context-card,.mg-progress-hero{position:relative;border:1px solid var(--hairline);border-radius:var(--cips-radius-lg);box-shadow:0 12px 34px rgba(0,0,0,.07);padding:15px;margin:10px 0;overflow:hidden}.mg-card,.mg-context-card{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-1) 96%,var(--meal-lime-dim)),var(--surface-1))}.mg-feature-card,.mg-progress-hero{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-1) 96%,var(--gym-violet-dim)),var(--surface-1))}.mg-nutrition-card{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-1) 96%,var(--meal-lime-dim)),var(--surface-1))}.mg-card:before,.mg-nutrition-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--cips-overlay-white-035),transparent 35%);pointer-events:none}.mg-card-topline{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}.mg-card-title{font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0}.mg-muted{color:var(--text-muted);font-size:11px;line-height:1.45}.mg-mt-10{margin-top:10px} .mg-feature-card{padding:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--gym-violet-dim) 58%,var(--surface-1)),var(--surface-1) 70%);border-color:color-mix(in srgb,var(--gym-violet) 20%,var(--hairline))}.mg-feature-glow{position:absolute;right:-50px;top:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gym-violet) 16%,transparent),transparent 68%);pointer-events:none}.mg-feature-top{position:relative;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.mg-status-dot{width:6px;height:6px;border-radius:50%;background:var(--gym-violet);box-shadow:0 0 10px color-mix(in srgb,var(--gym-violet) 70%,transparent)}.mg-feature-meta{margin-left:auto;font:600 9px/1 'JetBrains Mono',monospace;color:var(--text-muted);text-transform:none;letter-spacing:0}.mg-feature-title{position:relative;margin-top:14px;font-size:25px;font-weight:850;letter-spacing:-.035em;line-height:1.05}.mg-feature-sub{position:relative;margin-top:7px;color:var(--text-muted);font-size:11px}.mg-feature-action{position:relative;margin-top:17px}.mg-primary{width:100%;min-height:50px;border:1px solid color-mix(in srgb,var(--gym-violet) 55%,transparent);border-radius:15px;background:linear-gradient(180deg,color-mix(in srgb,var(--gym-violet) 96%,white),var(--gym-violet));color:#F6EEFF;font-weight:850;font-size:13px;cursor:pointer;touch-action:manipulation;box-shadow:0 8px 20px color-mix(in srgb,var(--gym-violet) 18%,transparent)}.mg-nutrition-card .mg-primary,.mg-food-log-card .mg-primary{border-color:color-mix(in srgb,var(--meal-lime) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--meal-lime) 96%,white),var(--meal-lime));color:#14170A;box-shadow:0 8px 20px color-mix(in srgb,var(--meal-lime) 18%,transparent)}.mg-primary{text-align:center}.mg-primary .mg-btn-arrow{float:right;font-size:16px}.mg-secondary{min-height:44px;border:1px solid var(--hairline);border-radius:var(--cips-radius-md);background:var(--surface-2);color:var(--text-primary);font-weight:750;padding:0 13px;cursor:pointer;touch-action:manipulation}.mg-full{width:100%;margin-top:12px}.mg-feature-footer{position:relative;display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);font-size:10px;color:var(--text-muted)}.mg-feature-footer strong{color:var(--text-primary)} .mg-nutrition-card{padding:16px}.mg-nutrition-top{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mg-metric-label{display:block;color:var(--text-muted);font-size:10px;margin-bottom:5px}.mg-nutrition-top strong{font-size:21px;letter-spacing:-.03em}.mg-nutrition-top strong small{font-size:10px;font-weight:600;color:var(--text-muted)}.mg-progress{height:6px;border-radius:var(--cips-pill-radius);background:var(--surface-2);overflow:hidden;margin-top:14px}.mg-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--meal-lime),var(--habit));box-shadow:0 0 12px color-mix(in srgb,var(--meal-lime) 35%,transparent)}.mg-remaining{margin-top:8px;font-size:10px;color:var(--text-muted)}.mg-meal-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:13px}.mg-meal-mini{display:flex;align-items:center;gap:6px;min-width:0;padding:9px 8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--hairline);font-size:10px}.mg-meal-mini span{font-weight:900;color:var(--text-muted)}.mg-meal-mini b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mg-meal-mini.done{border-color:color-mix(in srgb,var(--habit) 30%,var(--hairline));background:color-mix(in srgb,var(--habit-dim) 55%,var(--surface-2))}.mg-meal-mini.done span{color:var(--habit-text)} .mg-context-card{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;background:color-mix(in srgb,var(--surface-2) 86%,var(--meal-lime-dim));}.mg-context-icon{width:30px;height:30px;flex:0 0 30px;border-radius:var(--cips-radius-sm);display:grid;place-items:center;background:var(--meal-lime-dim);color:var(--meal-lime-text);font-weight:900}.mg-context-card b{font-size:12px}.mg-context-card p{margin:3px 0;color:var(--text-primary);font-size:11px;font-weight:750}.mg-context-card span{font-size:10px;color:var(--text-muted);line-height:1.4} .mg-exercise-card{padding-bottom:7px}.mg-exercise-row{display:flex;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hairline)}.mg-exercise-row:last-child{border-bottom:0}.mg-exercise-index{font:700 10px/1 'JetBrains Mono',monospace;color:var(--gym-violet-text);width:24px}.mg-exercise-row b{display:block;font-size:12px}.mg-exercise-row small{display:block;margin-top:3px;color:var(--text-muted);font-size:10px}.mg-data-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:11px}.mg-data-row:last-of-type{border-bottom:0}.mg-data-row b{font-size:11px;text-align:right}.mg-data-row small{display:block;color:var(--text-muted);font-size:9px;margin-top:3px}.mg-check{font-weight:900;color:var(--text-muted)}.mg-check.done{color:var(--habit-text)}.mg-mini-action{min-width:42px;min-height:32px;border:1px solid var(--hairline);border-radius:var(--cips-radius-sm);background:var(--surface-2);font-size:10px;font-weight:800;color:var(--text-primary)}.mg-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mg-action-grid .mg-secondary:last-child{grid-column:1/-1}.mg-recovery-note,.mg-empty-inline{padding:12px 0;color:var(--text-muted);font-size:11px}.mg-progress-hero{display:flex;align-items:center;justify-content:space-between;min-height:120px;background:linear-gradient(145deg,color-mix(in srgb,var(--gym-violet-dim) 50%,var(--surface-1)),var(--surface-1))}.mg-progress-hero span{display:block;color:var(--text-muted);font-size:10px}.mg-progress-hero strong{display:block;font-size:38px;letter-spacing:-.05em;margin-top:4px}.mg-progress-hero strong small{font-size:12px;color:var(--text-muted)}.mg-progress-ring{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gym-violet) var(--p),var(--surface-2) 0);position:relative}.mg-progress-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface-1)}.mg-progress-ring span{position:relative;z-index:1;color:var(--text-primary);font:800 13px/1 'JetBrains Mono',monospace}.mg-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mg-stat-grid-3{grid-template-columns:repeat(3,1fr)}.mg-stat{padding:12px;border-radius:var(--cips-radius-md);background:var(--surface-2);border:1px solid var(--hairline)}.mg-stat span{display:block;color:var(--text-muted);font-size:9px}.mg-stat b{display:block;font-size:17px;margin-top:5px;letter-spacing:-.02em}.mg-action-grid{margin-top:2px} .mg-detail-hero{padding:12px 2px 16px}.mg-detail-kicker{font-size:9px;letter-spacing:.16em;font-weight:850;color:var(--meal-lime-text)}.mg-detail-title{font-size:26px;font-weight:850;letter-spacing:-.035em;margin-top:4px}.mg-detail-subtitle{font-size:11px;line-height:1.5;color:var(--text-muted);margin-top:7px;max-width:560px}.mg-live-pill{padding:5px 7px;border-radius:var(--cips-pill-radius);background:var(--meal-lime-dim);color:var(--meal-lime-text);font:800 8px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.mg-tdee-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:12px}.mg-tdee-stat{padding:12px;border-radius:var(--cips-radius-md);background:var(--surface-2);border:1px solid var(--hairline)}.mg-tdee-stat span{display:block;color:var(--text-muted);font-size:9px}.mg-tdee-stat strong{display:block;margin-top:5px;font-size:16px;letter-spacing:-.03em}.mg-tdee-primary{border-color:color-mix(in srgb,var(--meal-lime) 32%,var(--hairline));background:color-mix(in srgb,var(--meal-lime-dim) 60%,var(--surface-2))}.mg-target-note{font-size:10px;color:var(--text-muted);margin-top:10px}.mg-tdee-bars{margin-top:13px}.mg-macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.mg-macro{padding:12px;border-radius:var(--cips-radius-md);background:var(--surface-2);border:1px solid var(--hairline)}.mg-macro span{display:block;font-size:9px;color:var(--text-muted)}.mg-macro strong{display:block;margin-top:5px;font-size:15px}.mg-empty-state{text-align:center;padding:26px 18px;margin:10px 0;border:1px dashed var(--hairline);border-radius:18px;background:var(--surface-2)}.mg-empty-icon{width:36px;height:36px;margin:0 auto 9px;border-radius:12px;display:grid;place-items:center;background:var(--gym-violet-dim);color:var(--gym-violet-text);font-size:18px}#gymResultEmptyNote .mg-empty-icon{background:var(--meal-lime-dim);color:var(--meal-lime-text)}.mg-empty-title{font-size:13px;font-weight:800}.mg-empty-state .mg-muted{margin-top:5px}.mg-food-log-card .mg-primary{margin-top:17px} /* Perombakan modul Gym (audit 2026-08-12): Muscle Groups, Exercise Library, Exercise Detail, Workout Builder, Program Picker -- reuse token/pattern yang sama dengan blok .mg-* di atas (--gym-violet/--surface-*/--hairline/ --cips-radius-*), tidak ada palet warna baru. */ .mg-mt-6{margin-top:6px} .mg-muscle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px} .mg-muscle-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 8px 14px;border-radius:var(--cips-radius-lg);background:linear-gradient(160deg,color-mix(in srgb,var(--surface-1) 96%,var(--gym-violet-dim)),var(--surface-2));border:1px solid var(--hairline);cursor:pointer;touch-action:manipulation;transition:transform .15s var(--ease-premium),border-color .15s,background .15s} .mg-muscle-tile:active{transform:scale(.96);background:var(--gym-violet-dim);border-color:var(--gym-violet)} /* Perbaikan UI (audit 2026-08-12): ikon sebelumnya emoji polos mengambang di atas kartu -- diberi badge lingkaran bertema gym-violet (pola yang sama dengan .mg-empty-icon) supaya kartu terasa lebih "dirancang", bukan sekadar emoji ditaruh begitu saja, dan ikon jadi fokus visual yang jelas. */ .mg-muscle-tile-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--gym-violet-dim);font-size:21px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gym-violet) 25%,transparent)} .mg-muscle-tile-label{font-size:12.5px;font-weight:800;color:var(--text-primary);letter-spacing:-.01em} .mg-muscle-tile-count{font-size:9px;color:var(--text-muted);font-family:'JetBrains Mono',monospace} .mg-exlib-filter-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:10px 0 6px} /* Filter kategori Otot/Alat/Level -- perombakan (laporan pengguna, 2026-08-13). Sebelumnya masing-masing kategori adalah SATU baris chip yang di-scroll ke samping (mg-exlib-scroll-row), jadi opsi di ujung kanan (mis. "Barbell", "Advanced") selalu terpotong setengah sampai user menggeser -- dan filter selalu tampil penuh walau cuma "Semua" yang dipilih. Diganti pola dropdown: tiap kategori sekarang tombol ringkas (mg-exlib-filter-trigger) yang menampilkan pilihan aktif -- diketuk untuk membuka panel (mg-exlib-dropdown) berisi SEMUA opsi kategori itu, dibungkus (flex-wrap) jadi beberapa baris kartu ke samping supaya tidak ada yang terpotong. Pola show/hide-nya (class .open + display:none/flex) mengikuti disclosure yang sudah ada di app ini (lihat .fan-catrow-toggle/ .fan-catrow-sub di app-06-finance-dashboard.js) supaya konsisten & aman dari flicker (bukan animasi max-height/transition baru). */ .mg-exlib-filter-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:11px 14px;border:1px solid var(--hairline);border-radius:var(--cips-radius-lg);background:var(--surface-2);cursor:pointer;user-select:none;touch-action:manipulation} .mg-exlib-filter-trigger:active{background:var(--gym-violet-dim)} .mg-exlib-filter-trigger.open{border-color:var(--gym-violet)} .mg-exlib-filter-trigger-value{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mg-exlib-filter-trigger-icon{flex:0 0 auto;font-size:14px} .mg-exlib-filter-trigger .chev{flex:0 0 auto;font-size:11px;color:var(--text-muted);transition:transform .2s ease} .mg-exlib-filter-trigger.open .chev{transform:rotate(180deg)} .mg-exlib-dropdown{display:none;flex-wrap:wrap;gap:8px;padding:10px 2px 2px} .mg-exlib-dropdown.open{display:flex} .mg-exlib-dropdown .toggle-btn{flex:0 0 auto;white-space:nowrap} .mg-exlib-dropdown .toggle-btn.active{background:var(--gym-violet-dim);border-color:var(--gym-violet);color:var(--gym-violet-text);box-shadow:none} .mg-exlib-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--hairline)} .mg-exlib-row:last-child{border-bottom:0} .mg-exlib-row-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer} .mg-exlib-row-icon{font-size:20px;flex:0 0 auto} .mg-exlib-row-text{min-width:0;flex:1} .mg-exlib-row-text b{display:block;font-size:12.5px} .mg-exlib-row-text small{display:block;color:var(--text-muted);font-size:10px;margin-top:2px} .mg-exlib-row-arrow{color:var(--text-muted);font-size:16px;flex:0 0 auto} /* Fix (laporan pengguna, 2026-08-13): tombol ini sebelumnya 32x32 -- selector global `button,[role="button"]{min-height:max(44px, ...)}` di cips-responsive-system.css (dimuat SETELAH styles.css, jadi menang di cascade) memaksa tingginya naik ke 44px tapi TIDAK menyentuh lebarnya (cuma min-height, bukan min-width), jadi kotaknya jadi 32px lebar x 44px tinggi -- lingkaran border-radius:50% di atas kotak non-persegi itu yang membuatnya kelihatan lonjong/oval di aplikasi nyata, bukan bulat utuh. Diperbaiki dengan menyamakan width & height (plus min-width/min-height eksplisit) ke 44px -- sekalian menaikkan target sentuh dari 32px ke ukuran minimum 44px yang sudah jadi standar aksesibilitas di seluruh app ini (bukan malah "melawan" aturan globalnya). */ .mg-exlib-add-btn{flex:0 0 auto;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--gym-violet);background:var(--gym-violet-dim);color:var(--gym-violet-text);font-size:18px;font-weight:800;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;} /* Perbaikan UI (audit 2026-08-12): blok fallback ini adalah elemen paling atas & paling besar di halaman detail (menggantikan posisi foto/video asli) -- ditambah glow radial halus (pola yang sama dengan .mg-feature-glow di kartu utama Today) supaya terasa seperti bagian "hero" yang disengaja, bukan kotak placeholder kosong yang terasa belum selesai dikerjakan. */ .mg-exdetail-media-fallback{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:38px 16px;border-radius:var(--cips-radius-lg);background:linear-gradient(160deg,color-mix(in srgb,var(--surface-1) 94%,var(--gym-violet-dim)),var(--surface-2));border:1px solid var(--hairline);margin-bottom:10px;overflow:hidden} .mg-exdetail-media-fallback:before{content:"";position:absolute;right:-40px;top:-60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gym-violet) 14%,transparent),transparent 68%);pointer-events:none} .mg-exdetail-media-icon{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--gym-violet-dim);font-size:34px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gym-violet) 25%,transparent)} .mg-exdetail-media-fallback .mg-muted{position:relative;max-width:260px;text-align:center} .mg-exdetail-meta-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .mg-exdetail-list{margin:6px 0 0;padding-left:18px} .mg-exdetail-list li{font-size:11.5px;color:var(--text-primary);margin-bottom:6px;line-height:1.45} .mg-exdetail-step{font-size:11.5px;color:var(--text-primary);margin-bottom:8px;line-height:1.5} .mg-exdetail-step b{color:var(--gym-violet-text)} .mg-program-active{border-color:color-mix(in srgb,var(--gym-violet) 40%,var(--hairline))} .mg-exercise-row[data-action]{cursor:pointer;touch-action:manipulation} .mg-exercise-arrow{margin-left:auto;color:var(--text-muted);font-size:15px;flex:0 0 auto} .mg-progress-bar-wrap{margin:10px 0} /* Chip level kesulitan berwarna semantik -- lihat komentar diffChipClass() di app-04-health-gym.js. Override background/color .woset-chip default (gym-violet), token warnanya sendiri SUDAH ada di :root (tidak ada warna baru ditambahkan). */ .woset-chip.mg-diff-beginner{background:var(--habit-dim);color:var(--habit-text)} .woset-chip.mg-diff-intermediate{background:var(--warning-dim);color:var(--warning-text)} .woset-chip.mg-diff-advanced{background:var(--danger-dim);color:var(--danger-text)} /* Workout Builder -- kartu per-exercise ringkas (grid 4 kolom mini-input), pengganti 4 baris .field-row bertumpuk. Lihat komentar renderWorkoutBuilder(). */ .mg-builder-item{padding:14px 14px 12px} .mg-builder-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px} .mg-builder-item-name{font-size:13px;font-weight:800;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mg-builder-item-actions{display:flex;gap:4px;flex:0 0 auto} .mg-builder-mini-btn{width:30px;height:30px;font-size:12px} .mg-builder-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .mg-builder-field{display:flex;flex-direction:column;gap:4px;min-width:0} .mg-builder-field span{font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);text-align:center} .mg-builder-field input{width:100%;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--cips-radius-sm);padding:7px 2px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-primary)} .mg-builder-field input:focus{outline:none;border-color:var(--gym-violet);box-shadow:0 0 0 3px var(--gym-violet-dim)} /* Link teks ringan pengganti kartu duplikat di tracker chooser -- lihat catatan di index.html #woChooser. */ .mg-empty-inline-link{text-align:center;padding:16px 0 4px} .mg-empty-inline-link .mg-ghost-link{font-size:11px} /* Rest timer -- kartu countdown, lihat komentar updateWoRestTimerUI(). */ .mg-resttimer{align-items:center;gap:11px;padding:12px 14px;border-radius:var(--cips-radius-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--gym-violet-dim) 65%,var(--surface-1)),var(--surface-1));border:1px solid color-mix(in srgb,var(--gym-violet) 30%,var(--hairline));margin-bottom:12px} .mg-resttimer-icon{font-size:19px;flex:0 0 auto} .mg-resttimer-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0} .mg-resttimer-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--gym-violet-text)} .mg-resttimer-value{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:800;color:var(--text-primary);letter-spacing:-.02em} .mg-resttimer-skip{flex:0 0 auto;min-height:34px;padding:0 13px;border-radius:var(--cips-radius-md);border:1px solid var(--hairline);background:var(--surface-2);color:var(--text-primary);font-size:11px;font-weight:750;cursor:pointer;touch-action:manipulation} @media (max-width:520px){.mg-title{font-size:25px}.mg-feature-title{font-size:23px}.mg-stat-grid-3{grid-template-columns:1fr 1fr}.mg-stat-grid-3 .mg-stat:last-child{grid-column:1/-1}.mg-tdee-grid{grid-template-columns:1fr 1fr}.mg-tdee-stat:last-child{grid-column:1/-1}.mg-macro-grid{grid-template-columns:1fr 1fr}.mg-macro:last-child{grid-column:1/-1}.mg-meal-mini-grid{grid-template-columns:1fr}.mg-feature-meta{display:none}.mg-muscle-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:340px){.mg-builder-fields{grid-template-columns:1fr 1fr}} @media (max-width:360px){.mg-tab{font-size:10px}.mg-hero-orbit{width:46px;height:46px;flex-basis:46px}.mg-title{font-size:23px}} /* Audit spacing modul Gym (2026-08-12, feedback pengguna): "kartu/menu mepet ke layar, jarak tidak dijaga, tampilan terasa rusak". Root cause: beberapa elemen mg-* punya padding horizontal SANGAT kecil (2px) dan jarak antar-kartu yang berdempetan (margin 10px, gap 6-8px di grid multi- kolom) -- di layar HP asli (bukan browser desktop lebar) ini terasa sesak, apalagi dengan banyak kartu bertumpuk di satu layar. Patch ini HANYA menaikkan nilai spacing (padding/margin/gap) supaya ada jarak napas yang konsisten -- tidak mengubah warna, layout grid, atau struktur HTML apa pun, jadi aman override di akhir file (menang lewat urutan cascade tanpa perlu !important atau menyentuh definisi asli di atas). */ .mg-hero{padding:20px 4px 18px} .mg-section-head{padding:20px 4px 12px} .mg-section-head-tight{padding-top:24px} .mg-detail-hero{padding:14px 4px 18px} .mg-card,.mg-feature-card,.mg-nutrition-card,.mg-context-card,.mg-progress-hero{margin:14px 0;padding:17px} .mg-nutrition-card{padding:18px} .mg-action-grid{gap:10px} .mg-tdee-grid,.mg-macro-grid{gap:9px} .mg-stat-grid{gap:10px} .mg-nutrition-top{gap:16px} .mg-meal-mini-grid{gap:8px;margin-top:15px} .mg-muscle-grid{gap:10px} .mg-muscle-tile{padding:20px 10px 16px} .mg-builder-fields{gap:8px} .mg-exlib-filter-label{margin:14px 0 7px} .mg-exlib-row{padding:12px 0} .mg-exercise-row{padding:13px 0} .mg-data-row{padding:12px 0} /* Badge "Direkomendasikan untuk pemula" di Program Picker -- lihat renderProgramPicker(). Warna sama dengan chip level "beginner" (hijau --habit) supaya konsisten secara semantik: hijau = aman/direkomendasikan di seluruh app ini. */ .mg-program-recommended{border-color:color-mix(in srgb,var(--habit) 45%,var(--hairline))} .mg-recommended-tag{display:inline-block;margin-bottom:10px;padding:4px 9px;border-radius:var(--cips-pill-radius);background:var(--habit-dim);color:var(--habit-text);font:800 9px/1 inherit;letter-spacing:.04em;text-transform:uppercase} @media (max-width:340px){ .quran-plan-grid{grid-template-columns:1fr;} .quran-plan-card{padding:14px;} } /* V152.1 — restore visible Quran Khatam entry; presentation only */ .quran-khatam-entry{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0 0 12px;padding:14px 16px;border:1px solid var(--border-color,rgba(255,255,255,.10));border-radius:var(--cips-radius-lg,18px);background:var(--surface-1,var(--surface));cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease} .quran-khatam-entry:active{transform:scale(.99)} .quran-khatam-entry-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:var(--cips-radius-md);background:var(--ibadah-dim);font-size:20px} .quran-khatam-entry-body{min-width:0;flex:1} .quran-khatam-entry-title{font-weight:700;font-size:clamp(14px,3.8vw,16px);line-height:1.25} .quran-khatam-entry-sub{margin-top:4px;color:var(--text-muted);font-size:clamp(12px,3.2vw,13px);line-height:1.45} .quran-khatam-entry-arrow{font-size:24px;color:var(--text-muted);flex:0 0 auto} @media (min-width:700px){.quran-khatam-entry{padding:16px 18px}} /* === CIPS v178 Viewport Responsive Dashboard === */ :root{ --dash-gap: clamp(8px, 1.8vw, 12px); --dash-pad: clamp(12px, 3vw, 18px); --hero-pad: clamp(16px, 4vw, 22px); --card-radius: 22px; } html, body{ min-height: 100%; overflow-x: hidden; } .dashboard-screen, .screen.dashboard-screen{ min-height: 100dvh; } .dashboard-content{ padding: var(--dash-pad) !important; gap: var(--dash-gap) !important; } .dashboard-hero, .hero-card, .hero{ padding: var(--hero-pad) !important; margin-bottom: var(--dash-gap) !important; } .hero h1, .hero-title{ font-size: clamp(30px, 6vw, 42px) !important; line-height: 1.05; } .hero p, .hero-subtitle{ font-size: clamp(13px, 3vw, 16px) !important; } .quick-actions{ gap: 8px !important; } .quick-action-card, .quick-card{ min-height: clamp(60px, 9vw, 72px) !important; padding: 12px !important; } .quick-input, .quick-log-input{ height: clamp(42px, 7vw, 48px) !important; } .module-grid{ display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px !important; } .module-card{ min-height: clamp(104px, 20vw, 124px) !important; padding: 12px !important; border-radius: var(--card-radius) !important; } .summary-card{ min-height: clamp(150px, 30vw, 190px) !important; padding: 16px !important; } .summary-ring{ width: clamp(84px, 18vw, 110px) !important; height: clamp(84px, 18vw, 110px) !important; } .trend-card{ min-height: clamp(120px, 22vw, 160px) !important; padding: 16px !important; } @media (max-width: 768px){ .module-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 480px){ .dashboard-content{ padding: 12px !important; gap: 10px !important; } .hero{ padding: 16px !important; } .module-card{ min-height: 110px !important; } .summary-card{ min-height: 165px !important; } .trend-card{ min-height: 130px !important; } } @media (max-width: 390px){ .hero h1, .hero-title{ font-size: 32px !important; } .quick-action-card, .quick-card{ min-height: 58px !important; } .module-card{ min-height: 104px !important; } } /* CIPS v179 - viewport lock optimization */ .dashboard-screen,.screen.dashboard-screen{height:100vh;height:100dvh;overflow:hidden;} .dashboard-content{height:100%;display:flex;flex-direction:column;overflow:hidden;padding:12px !important;gap:8px !important;} .dashboard-hero,.hero-card,.hero{padding:14px !important;margin-bottom:8px !important;} .hero h1,.hero-title{font-size:clamp(28px,5.4vw,38px)!important;} .quick-actions{gap:6px!important;} .quick-action-card,.quick-card{min-height:56px!important;padding:10px!important;} .quick-input,.quick-log-input{height:40px!important;} .module-grid{gap:8px!important;} .module-card{min-height:96px!important;padding:10px!important;} .summary-card{min-height:150px!important;padding:14px!important;} .summary-ring{width:84px!important;height:84px!important;} .trend-card{min-height:110px!important;padding:14px!important;} @media (max-width:390px){.dashboard-content{padding:10px!important;gap:8px!important}.module-card{min-height:90px!important}.summary-card{min-height:140px!important}.trend-card{min-height:100px!important}} /* ===== v274: poles tipografi modul Meal & Gym menyamai Religion ===== SEBELUMNYA seluruh heading/label .mg-* tidak set font-family sama sekali (default warisan body 'Inter' polos) -- beda dari hampir semua modul lain di app ini yang pakai 'Space Grotesk' utk judul/angka besar & 'JetBrains Mono' utk eyebrow/label kecil (lihat .religion-next-name/.health-hero-title dkk di atas). Ini murni tambahan font-family + penyesuaian ukuran, TIDAK mengubah satu pun struktur/warna/layout .mg-* yang sudah ada -- ditaruh di akhir file supaya menang di cascade tanpa perlu !important di mana pun. */ /* Judul & sub-judul utama */ .mg-title, .mg-feature-title, .mg-detail-title, .mg-section-head h2{ font-family:'Space Grotesk', sans-serif; letter-spacing:-.02em; } .mg-subtitle, .mg-detail-subtitle{ font-size:13.5px; line-height:1.55; } .mg-feature-sub{ font-size:12.5px; line-height:1.5; } /* Eyebrow / kicker (label kecil huruf besar) -- samakan pola dgn .health-hero-eyebrow: JetBrains Mono, sedikit lebih besar dari 9-10px asli biar tidak terasa mepet/kecil di layar HP. */ .mg-eyebrow, .mg-section-kicker, .mg-detail-kicker, .mg-card-title{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.12em; } /* Angka/nilai besar (kalori, protein, TDEE, macro, stat) -- Space Grotesk sama seperti .health-weight-value/.health-bmi-value di modul Kesehatan lama, supaya angka besar di seluruh app konsisten karakternya. */ .mg-nutrition-top strong, .mg-progress-hero strong, .mg-stat b, .mg-tdee-stat strong, .mg-macro strong, .mg-empty-title{ font-family:'Space Grotesk', sans-serif; } /* Teks pendukung/label kecil -- dinaikkan sedikit (9-11px -> 10.5-12.5px) supaya tidak terasa "mini" dibanding modul lain, tanpa mengganggu layout grid yang sudah dihitung pas (kenaikan kecil, bukan lonjakan). */ .mg-muted, .mg-remaining, .mg-target-note, .mg-recovery-note, .mg-empty-inline, .mg-data-row small, .mg-exercise-row small{ font-size:12px; } .mg-metric-label, .mg-stat span, .mg-tdee-stat span, .mg-macro span, .mg-progress-hero span{ font-size:10.5px; } .mg-exercise-row b, .mg-data-row b{ font-size:13px; } .mg-empty-title{ font-size:14.5px; } @media (max-width:520px){ .mg-title{ font-size:26px; } .mg-feature-title{ font-size:22px; } }