/* ---------- tokens (palette diambil dari mantrariset.com) ---------- */ :root { --canvas: #eef3fc; --surface: #ffffff; --ink: #0f172a; --muted: #475569; --line: rgba(15, 23, 42, 0.1); --primary: #2563eb; --primary-soft: #eff6ff; --secondary: #0d9488; --accent: #60a5fa; --accent-soft: #dbeafe; --income: #0d9488; --income-soft: #ccfbf1; --expense: #dc2626; --expense-soft: #fee2e2; --warning: #d97706; --warning-soft: #fef3c7; --future: #7c3aed; --future-soft: #ede9fe; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 22px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.09); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.11); --shadow-lg: 0 10px 34px rgba(15, 23, 42, 0.16); --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* dark mode — ikut preferensi sistem HP/browser secara otomatis, KECUALI user udah milih manual lewat toggle di Profil (data-theme di nge-override apa pun preferensi sistemnya, ke arah manapun). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #0b1220; --surface: #141b2d; --ink: #e8edf7; --muted: #93a0b8; --line: rgba(255, 255, 255, 0.09); --primary: #4f83f1; --primary-soft: rgba(37, 99, 235, 0.2); --secondary: #14b8a6; --accent: #60a5fa; --accent-soft: rgba(96, 165, 250, 0.18); --income: #2dd4bf; --income-soft: rgba(45, 212, 191, 0.16); --expense: #f87171; --expense-soft: rgba(248, 113, 113, 0.16); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.16); --future: #a78bfa; --future-soft: rgba(167, 139, 250, 0.18); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --canvas: #0b1220; --surface: #141b2d; --ink: #e8edf7; --muted: #93a0b8; --line: rgba(255, 255, 255, 0.09); --primary: #4f83f1; --primary-soft: rgba(37, 99, 235, 0.2); --secondary: #14b8a6; --accent: #60a5fa; --accent-soft: rgba(96, 165, 250, 0.18); --income: #2dd4bf; --income-soft: rgba(45, 212, 191, 0.16); --expense: #f87171; --expense-soft: rgba(248, 113, 113, 0.16); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.16); --future: #a78bfa; --future-soft: rgba(167, 139, 250, 0.18); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font); font-weight: 800; } p { margin: 0; } button { font-family: var(--font); color: inherit; cursor: pointer; } input { font-family: var(--font); } .hidden { display: none !important; } .link-btn { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 0.92rem; padding: 0; } .link-btn:hover { text-decoration: underline; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius-md); padding: 13px 20px; font-weight: 700; font-size: 0.98rem; width: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover { opacity: 0.92; } .btn-ghost { background: none; border: none; color: var(--primary); font-weight: 700; font-size: 0.88rem; width: auto; padding: 4px 6px; } /* ================= AUTH PAGE (homepage / login) ================= */ .auth-body { background: var(--canvas); } .auth-page { min-height: 100vh; display: flex; flex-direction: column; } .auth-side { display: none; } .auth-mobile-brand { display: flex; align-items: center; gap: 10px; padding: 28px 24px 6px; } .logo-mark { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: block; } .brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; } .auth-main { flex: 1; display: flex; } .auth-main-inner { flex: 1; display: flex; flex-direction: column; padding: 8px 20px 28px; max-width: 460px; margin: 0 auto; width: 100%; } .auth-card { background: var(--surface); border-radius: var(--radius-lg); padding: 26px 22px; box-shadow: var(--shadow-md); margin-top: 10px; } .auth-card h2 { font-size: 1.4rem; } .auth-card .sub { color: var(--muted); font-size: 0.92rem; margin-top: 6px; margin-bottom: 20px; } .invite-banner { background: var(--income-soft); color: var(--income); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px; } .invite-banner strong { letter-spacing: 0.06em; } .auth-error { color: var(--expense); font-size: 0.85rem; min-height: 0; margin-bottom: 0; } .auth-error:not(:empty) { margin-bottom: 12px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--canvas); color: var(--ink); font-size: 0.98rem; outline: none; transition: border-color 0.15s ease; } .field textarea { font-family: var(--font); resize: vertical; min-height: 72px; } .field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); } .mask-preview { font-size: 0.76rem; color: var(--primary); font-weight: 700; margin: 6px 0 0; } /* field dengan ikon di kiri — dipakai modal Catat Transaksi cepat */ .tx-quick-field { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .tx-quick-field-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; margin-top: 2px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; } .tx-quick-field-icon svg { width: 19px; height: 19px; } .tx-quick-field-body { flex: 1; min-width: 0; margin-bottom: 0; } .pw-wrap { position: relative; } .pw-wrap input { padding-right: 44px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); padding: 8px; display: flex; } .field-row { display: flex; justify-content: flex-end; margin-bottom: 18px; } .house-mode-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .house-mode-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--canvas); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 10px; color: var(--muted); font-size: 0.84rem; font-weight: 600; } .house-mode-opt svg { color: var(--muted); } .house-mode-opt.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .house-mode-opt.is-active svg { color: var(--primary); } .auth-info { display: flex; gap: 8px; align-items: flex-start; background: var(--primary-soft); color: var(--ink); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.78rem; line-height: 1.4; margin-bottom: 16px; } .auth-info svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; } .auth-switch { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--muted); } .sent-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--income-soft); color: var(--income); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } #pane-forgot-sent .sub { margin-bottom: 22px; } #pane-forgot-sent strong { color: var(--ink); } .auth-foot { text-align: center; color: var(--muted); font-size: 0.75rem; margin-top: 22px; } /* tawaran beli template — versi mobile (versi desktop ada di .auth-side-cta, di panel biru kiri; ini kebalikannya, cuma kelihatan kalau .auth-side lagi disembunyikan) */ .auth-mobile-cta { margin-top: 22px; background: var(--primary-soft); border: 1px solid var(--accent-soft); border-radius: var(--radius-lg); padding: 16px 18px; } .auth-mobile-cta p { font-size: 0.85rem; color: var(--ink); line-height: 1.5; margin: 0 0 12px; } .auth-mobile-cta-link { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 10px 18px; border-radius: 999px; text-decoration: none; } /* preview card only shown on desktop side panel */ .auth-preview-card { display: none; } .auth-side-cta { display: none; } /* -------- desktop split layout -------- */ @media (min-width: 900px) { .auth-page { flex-direction: row; } .auth-side { display: flex; width: 46%; max-width: 560px; background: linear-gradient(160deg, var(--primary) 0%, #1d4ed8 100%); color: #fff; padding: 56px 48px; } .auth-side-inner { display: flex; flex-direction: column; max-width: 400px; margin: auto 0; } .auth-side .logo-mark { background: #fff; padding: 5px; border-radius: 12px; box-sizing: border-box; } .auth-side .brand-name { font-size: 1.3rem; margin-top: 14px; } .auth-tagline { font-size: 2.2rem; line-height: 1.15; margin-top: 26px; letter-spacing: -0.01em; } .auth-side-sub { color: rgba(255,255,255,0.82); font-size: 1rem; line-height: 1.5; margin-top: 16px; } .auth-preview-card { display: block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); padding: 20px; margin-top: 32px; backdrop-filter: blur(6px); } .apc-row { display: flex; justify-content: space-between; align-items: center; } .apc-label { font-size: 0.8rem; color: rgba(255,255,255,0.75); } .apc-eye { background: none; border: none; color: rgba(255,255,255,0.75); } .apc-amount { font-size: 1.9rem; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; } .apc-stats { display: flex; gap: 24px; margin-top: 16px; } .apc-stats div { display: flex; flex-direction: column; gap: 2px; } .apc-stats span { font-size: 0.72rem; color: rgba(255,255,255,0.7); } .apc-stats strong { font-size: 0.92rem; font-weight: 700; } .auth-side-cta { display: block; margin-top: 34px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); padding: 18px 20px; } .auth-side-cta p { font-size: 0.85rem; color: rgba(255,255,255,0.88); line-height: 1.5; margin: 0 0 14px; } .auth-side-cta-link { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--primary); font-weight: 700; font-size: 0.85rem; padding: 10px 18px; border-radius: 999px; text-decoration: none; } .auth-mobile-brand { display: none; } .auth-mobile-cta { display: none; } .auth-main { align-items: center; justify-content: center; padding: 40px; } .auth-main-inner { padding: 0; } .auth-card { padding: 40px 38px; } } /* ================= APP SHELL (dashboard) ================= */ .app-body { background: var(--canvas); } .app-shell { min-height: 100vh; display: flex; flex-direction: column; } /* top bar (mobile) */ .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 4px; } .topbar-title { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.3rem; font-weight: 800; color: var(--ink); background: none; border: none; padding: 0; margin: 0; } .app-topbar .bell-btn { flex-shrink: 0; } .avatar-chip { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; overflow: hidden; } .avatar-chip img, .wallet-avatar img, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--ink); padding: 6px; } .bell-btn svg { width: 22px; height: 22px; flex-shrink: 0; } .bell-dot { position: absolute; top: 2px; right: 2px; background: var(--expense); color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: 50%; min-width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; padding: 0 2px; } .app-main { flex: 1; padding: 6px 18px 100px; max-width: 640px; width: 100%; margin: 0 auto; } .view { display: none; } .view.is-active { display: block; } .desktop-topbar { display: none; } body.is-subpage .bottom-nav, body.is-subpage .app-topbar { display: none !important; } /* modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(30, 58, 82, 0.42); display: flex; align-items: flex-end; justify-content: center; z-index: 50; } .modal-backdrop.hidden { display: none; } .modal-sheet { background: var(--surface); border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); } .modal-sheet h3 { font-size: 1.1rem; margin-bottom: 4px; } .modal-sheet .sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; } .modal-actions { display: flex; gap: 10px; margin-top: 6px; } /* Dulu aturan ini cuma berlaku di dalam .modal-actions, jadi .btn-secondary yang dipakai DI LUAR modal (mis. tombol "Kembali" di tur berpemandu) tidak kebagian warna sama sekali dan jatuh ke abu-abu bawaan browser — kelihatan sebagai pil putih menyala di dark mode. Sekarang global. */ .btn-secondary { background: var(--canvas); color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--muted); } /* ---------- tur berpemandu (setelah daftar / Profil > Tutorial) ---------- */ /* Sorotannya dibuat dari box-shadow raksasa di .tour-hole: kotak kecil di posisi elemen target, dengan bayangan gelap seluas layar di sekelilingnya. Efeknya seperti "lubang" tanpa perlu mask SVG atau clip-path. */ .tour { position: fixed; inset: 0; z-index: 95; } .tour.hidden { display: none; } .tour-hole { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(4, 10, 20, 0.74); transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease; } .tour-bubble { position: fixed; width: min(340px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px; transition: top 0.28s ease, left 0.28s ease; } .tour-bubble-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .tour-eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; color: var(--primary); text-transform: uppercase; } .tour-title { font-size: 1.02rem; margin-bottom: 5px; } .tour-desc { color: var(--muted); font-size: 0.84rem; line-height: 1.55; } .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } .tour-dots { display: flex; gap: 4px; flex: 1; min-width: 0; } .tour-dots span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); max-width: 22px; } .tour-dots span.is-active { background: var(--primary); } .tour-actions { display: flex; gap: 7px; flex-shrink: 0; } .tour-actions .btn { width: auto; padding: 8px 14px; font-size: 0.82rem; } @media (prefers-reduced-motion: reduce) { .tour-hole, .tour-bubble { transition: none; } } .toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 30px; font-size: 0.85rem; box-shadow: var(--shadow-md); z-index: 60; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; text-align: center; max-width: 88vw; } .toast.is-visible { opacity: 1; } /* Overlay sinkronisasi ke spreadsheet — z-index paling tinggi (di atas modal dan toast) karena selama proses ini pengguna memang tidak boleh menyentuh apa-apa dulu. */ .sync-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(8, 15, 26, 0.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; } .sync-overlay-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 26px 22px; width: 100%; max-width: 360px; text-align: center; } .sync-overlay-card h3 { font-size: 1rem; margin-bottom: 6px; } .sync-overlay-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 16px; word-break: break-word; } .sync-overlay-bar { height: 7px; border-radius: 20px; background: var(--canvas); overflow: hidden; } .sync-overlay-bar-fill { height: 100%; border-radius: 20px; background: var(--primary); transition: width 0.25s ease; } .sync-overlay-count { font-size: 0.8rem; font-weight: 700; color: var(--primary); margin-top: 8px; font-variant-numeric: tabular-nums; } .sync-overlay-warn { display: flex; gap: 8px; text-align: left; margin-top: 18px; padding: 10px 12px; background: var(--expense-soft); color: var(--expense); border-radius: var(--radius-md); font-size: 0.76rem; line-height: 1.5; } .sync-overlay-warn svg { flex-shrink: 0; margin-top: 2px; } .sync-spinner { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: sync-spin 0.8s linear infinite; } @keyframes sync-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sync-spinner { animation-duration: 2.4s; } .sync-overlay-bar-fill { transition: none; } } /* notifications */ .notif-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .notif-panel-head h3 { font-size: 1.1rem; } .notif-list { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; margin: 0 -6px; } .notif-item { display: flex; gap: 12px; padding: 12px 6px; width: 100%; background: none; border: none; border-radius: var(--radius-sm); text-align: left; } .notif-item.is-unread { background: var(--primary-soft); } .notif-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notif-body { flex: 1; min-width: 0; } .notif-body strong { display: block; font-size: 0.88rem; font-weight: 700; } .notif-body p { font-size: 0.8rem; color: var(--muted); margin-top: 2px; } .notif-time { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 5px; } .notif-empty { padding: 34px 10px; text-align: center; color: var(--muted); font-size: 0.85rem; } .panel-body { max-height: 62vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px; } .settings-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .settings-row:last-child { border-bottom: none; } .settings-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; } .settings-row strong { display: block; font-size: 0.9rem; } .settings-row span.desc { font-size: 0.8rem; color: var(--muted); } .faq-item { padding: 14px 0; border-bottom: 1px solid var(--line); } .faq-item:last-child { border-bottom: none; } .faq-item strong { display: block; font-size: 0.9rem; margin-bottom: 4px; } .faq-item p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; } /* sub-page (Tentang AppPedia) */ .subpage-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; } .subpage-head h3 { font-size: 1.2rem; } .back-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .about-search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: 12px 16px; color: var(--muted); } .about-search input { flex: 1; border: none; background: none; outline: none; font-size: 0.92rem; color: var(--ink); font-family: var(--font); } .faq-accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; padding: 14px 16px; text-align: left; font-weight: 700; font-size: 0.88rem; color: var(--ink); } .faq-question svg { flex-shrink: 0; transition: transform 0.15s ease; color: var(--muted); } .faq-accordion-item.is-open .faq-question svg { transform: rotate(180deg); } .faq-answer { display: none; padding: 0 16px 16px; font-size: 0.82rem; color: var(--muted); line-height: 1.55; } .faq-accordion-item.is-open .faq-answer { display: block; } .invite-code-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--primary-soft); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; } .invite-code-box span.label { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 600; margin-bottom: 3px; } .invite-code-box strong { font-size: 1.3rem; letter-spacing: 0.12em; color: var(--primary); font-family: var(--font); } .invite-code-box .btn { width: auto; padding: 9px 18px; font-size: 0.84rem; flex-shrink: 0; } .invite-link-box { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.82rem; color: var(--primary); font-family: var(--font-mono, monospace); word-break: break-all; margin-bottom: 4px; } .contact-row { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 10px; color: var(--ink); font-size: 0.86rem; font-weight: 600; text-align: left; } @media (min-width: 960px) { .modal-backdrop { align-items: center; } .modal-sheet { border-radius: var(--radius-lg); } .toast { bottom: 30px; } } .greet { font-size: 1.5rem; margin: 10px 0 16px; } /* sync banner (spreadsheet connection status) */ .install-banner { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap; } .install-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); padding: 6px; flex-shrink: 0; } .install-body { flex: 1; min-width: 200px; } .install-body strong { display: block; font-size: 0.9rem; margin-bottom: 2px; } .install-body p { font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin: 0; } .install-actions { display: flex; gap: 8px; flex-shrink: 0; } .install-actions .btn-ghost, .install-actions .btn-primary { padding: 9px 16px; font-size: 0.82rem; width: auto; } .sync-banner { display: flex; align-items: center; gap: 8px; background: var(--income-soft); color: var(--income); border-radius: 30px; padding: 8px 14px; font-size: 0.8rem; font-weight: 600; margin-bottom: 16px; width: fit-content; } .sync-banner.is-error { background: var(--expense-soft); color: var(--expense); } .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .sync-percent { font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-left: 8px; } /* rincian sinkron (Total + per sub-kategori) — dipakai Pendapatan, Kebutuhan, Keinginan, Masa Depan */ .detail-total-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 2px; padding: 14px 16px; background: var(--primary-soft); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 0.9rem; } .detail-total-row strong { color: var(--primary); font-size: 1.05rem; } .detail-total-row.is-income { background: var(--income-soft); } .detail-total-row.is-income strong { color: var(--income); } .detail-total-plan { font-size: 0.76rem; font-weight: 600; color: var(--muted); } .detail-source-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } .detail-source-row:last-child { border-bottom: none; } .detail-source-name { font-weight: 600; font-size: 0.88rem; flex: 1; min-width: 0; } .detail-source-row .member-remove-btn { margin-left: 10px; } .detail-source-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .detail-plan { font-size: 0.72rem; color: var(--muted); } .detail-actual { font-size: 0.86rem; font-weight: 700; color: var(--ink); } .detail-actual.is-income { color: var(--income); } /* Ringkasan (Dashboard) */ .ringkasan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); margin-top: 16px; } .ringkasan-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; } .ringkasan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ringkasan-tile { display: flex; align-items: flex-start; gap: 10px; text-align: left; min-width: 0; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; } .ringkasan-tile-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ringkasan-tile-icon.is-income { background: var(--income-soft); color: var(--income); } .ringkasan-tile-icon.is-needs { background: var(--primary-soft); color: var(--primary); } .ringkasan-tile-icon.is-wants { background: var(--warning-soft); color: var(--warning); } .ringkasan-tile-icon.is-future { background: var(--future-soft); color: var(--future); } .ringkasan-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ringkasan-tile-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; } .ringkasan-tile-amount { font-size: 0.92rem; margin-top: 2px; word-break: break-word; overflow-wrap: break-word; } .ringkasan-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 0.7rem; font-weight: 700; margin-top: 4px; padding: 2px 6px; border-radius: 20px; width: fit-content; } .ringkasan-trend.is-up { background: var(--income-soft); color: var(--income); } .ringkasan-trend.is-down { background: var(--expense-soft); color: var(--expense); } /* Menu Cepat (Dashboard) */ .menu-cepat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); margin-top: 14px; } .menu-cepat-label { font-size: 0.84rem; font-weight: 800; margin-bottom: 12px; } /* Selalu 2 baris, mengalir per kolom, digeser ke kanan/kiri kalau tidak muat. grid-auto-flow: column bikin item 1&2 jadi kolom pertama, 3&4 kolom kedua, dst — urutan itemnya di app.js sudah disusun mengikuti pola ini. */ .menu-cepat-grid { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); gap: 16px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; } .menu-cepat-grid::-webkit-scrollbar { height: 4px; } .menu-cepat-grid::-webkit-scrollbar-track { background: transparent; } .menu-cepat-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .menu-cepat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; color: var(--ink); font-size: 0.68rem; font-weight: 600; text-align: center; scroll-snap-align: start; } .menu-cepat-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; } /* Cashflow (Dashboard) */ .cashflow-card { padding: 16px 14px; } .cashflow-legend { display: flex; gap: 16px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; } .cashflow-period { margin-left: auto; font-size: 0.74rem; color: var(--muted); font-weight: 700; } .cashflow-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); font-weight: 600; } .cashflow-dot { width: 8px; height: 8px; border-radius: 50%; } .cashflow-dot.is-income { background: var(--income); } .cashflow-dot.is-expense { background: var(--expense); } .cashflow-svg { width: 100%; height: 110px; display: block; } /* Satu per HARI (28-31 buah) — dibagi rata pakai flex:1 supaya tiap label duduk persis di bawah titiknya di grafik. Hanya sebagian hari yang diisi teks (lihat showLabel di app.js), sisanya span kosong sebagai jarak. */ .cashflow-days { display: flex; margin-top: 4px; font-size: 0.68rem; color: var(--muted); } .cashflow-days span { flex: 1; text-align: center; min-width: 0; } .cashflow-days span:first-child { text-align: left; } .cashflow-days span:last-child { text-align: right; } /* Penanda "angka mungkin belum lengkap" di daftar Budget */ .budget-stale { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-md); font-size: 0.76rem; line-height: 1.5; font-weight: 600; } .budget-stale svg { flex-shrink: 0; margin-top: 2px; } /* Saldo & Rekening (kartu Dashboard + panel) */ .saldo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 16px; box-shadow: var(--shadow-sm); margin-top: 14px; width: 100%; text-align: left; display: block; } .saldo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .saldo-label { font-size: 0.72rem; font-weight: 800; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; } .saldo-eye { background: none; border: none; color: var(--muted); padding: 2px; flex-shrink: 0; } .saldo-amount { font-size: 1.9rem; font-weight: 800; margin: 6px 0 2px; letter-spacing: -0.02em; word-break: break-word; } .saldo-akun { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .saldo-akun-chip { font-size: 0.72rem; font-weight: 600; color: var(--muted); background: var(--canvas); border-radius: 20px; padding: 4px 10px; } .saldo-akun-chip strong { color: var(--ink); font-weight: 700; } .saldo-runway { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--income-soft); color: var(--income); border-radius: var(--radius-md); font-size: 0.78rem; line-height: 1.5; font-weight: 600; } .saldo-runway.is-tight { background: var(--expense-soft); color: var(--expense); } .saldo-runway.is-muted { background: var(--canvas); color: var(--muted); } .saldo-runway svg { flex-shrink: 0; margin-top: 1px; } .saldo-stale { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-top: 9px; } .akun-row { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); } .akun-row:last-of-type { border-bottom: none; } .akun-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); } .akun-icon.is-cash { background: var(--income-soft); color: var(--income); } .akun-icon.is-ewallet { background: var(--future-soft); color: var(--future); } .akun-info { flex: 1; min-width: 0; } .akun-name { font-size: 0.88rem; font-weight: 700; display: block; word-break: break-word; } .akun-sub { font-size: 0.73rem; color: var(--muted); } .akun-balance { font-weight: 700; font-size: 0.9rem; white-space: nowrap; text-align: right; } .akun-check { flex-shrink: 0; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); border-radius: 20px; padding: 5px 10px; font-size: 0.7rem; font-weight: 700; } .akun-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 2px; border-top: 1.5px solid var(--line); margin-top: 4px; font-weight: 800; } .recon-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 0.85rem; border-bottom: 1px solid var(--line); } .recon-line:last-of-type { border-bottom: none; } .recon-gap { margin-top: 12px; padding: 11px 13px; border-radius: var(--radius-md); font-size: 0.78rem; line-height: 1.55; font-weight: 600; background: var(--expense-soft); color: var(--expense); display: flex; gap: 8px; } .recon-gap.is-ok { background: var(--income-soft); color: var(--income); } .recon-gap svg { flex-shrink: 0; margin-top: 2px; } /* Tagihan & Langganan (Rencana + kartu mendesak di Dashboard) */ .bill-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); } .bill-row:last-child { border-bottom: none; } .bill-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .bill-dot.is-late { background: var(--expense); } .bill-dot.is-soon { background: var(--warning); } .bill-dot.is-later { background: var(--muted); } .bill-dot.is-paid { background: var(--income); } .bill-info { flex: 1; min-width: 0; } .bill-name { font-size: 0.88rem; font-weight: 700; display: block; word-break: break-word; } .bill-when { font-size: 0.74rem; color: var(--muted); } .bill-when.is-late { color: var(--expense); font-weight: 700; } .bill-when.is-soon { color: var(--warning); font-weight: 700; } .bill-amount { font-weight: 700; font-size: 0.88rem; white-space: nowrap; } .bill-pay { flex-shrink: 0; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); border-radius: 20px; padding: 5px 11px; font-size: 0.72rem; font-weight: 700; } .bill-pay.is-done { background: var(--income-soft); color: var(--income); border-color: transparent; } /* ---------- area sentuh minimum ---------- Standar sentuh di HP adalah 44px. Beberapa tombol di Pundi memang SENGAJA kecil secara visual (chip "Lunas", tautan "Detail"/"Lihat semua", ikon hapus) — jadi yang diperbesar cuma KOTAK SENTUHNYA lewat ::after yang meluber ke atas-bawah. Ukuran tampilannya dan tata letaknya tidak berubah sama sekali, karena elemennya absolute dan tidak ikut alur. Yang paling penting di sini "Lunas": tombol itu mencatat transaksi DAN mengirimnya ke spreadsheet, tapi dulu kotak sentuhnya cuma 27px. */ .btn-ghost, .bill-pay, .akun-check, .budget-goal-row-delete, .bill-edit, .cc-pills button, .task-scope-toggle button, .filter-pills button, .task-add-btn { position: relative; } .btn-ghost::after, .bill-pay::after, .akun-check::after, .budget-goal-row-delete::after, .bill-edit::after, .cc-pills button::after, .task-scope-toggle button::after, .filter-pills button::after, .task-add-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; } /* Tombol ikon yang sempit (±23px) perlu dilebarkan juga, bukan cuma ditinggikan. Dilebarkan dari tengah supaya tidak menabrak tetangganya. */ .budget-goal-row-delete::after, .bill-edit::after { left: 50%; right: auto; width: 40px; transform: translate(-50%, -50%); } .bill-row.is-paid .bill-name, .bill-row.is-paid .bill-amount { color: var(--muted); text-decoration: line-through; } .bill-edit { flex-shrink: 0; background: none; border: none; color: var(--muted); padding: 4px; } .bill-summary { padding: 12px 0 4px; } .bill-summary-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; } .bill-summary-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; } .bill-summary-value { font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .bill-group-label { font-size: 0.7rem; font-weight: 800; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin: 14px 0 2px; } /* Budget & Goals (Rencana) */ .budget-goal-list { padding: 4px 14px; } .budget-goal-row { padding: 14px 0; border-bottom: 1px solid var(--line); } .budget-goal-row:last-child { border-bottom: none; } .budget-goal-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .budget-goal-row-title { font-size: 0.88rem; font-weight: 700; } .budget-goal-row-tag { font-size: 0.7rem; font-weight: 600; color: var(--muted); background: var(--canvas); border-radius: 20px; padding: 1px 8px; margin-left: 4px; } .budget-goal-row-delete { background: none; border: none; color: var(--muted); padding: 4px; flex-shrink: 0; } .budget-goal-bar { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; } .budget-goal-bar-fill { height: 100%; border-radius: 4px; transition: width 0.2s ease; } .budget-goal-bar-fill.is-ok { background: var(--income); } .budget-goal-bar-fill.is-warning { background: var(--warning); } .budget-goal-bar-fill.is-over { background: var(--expense); } .budget-goal-bar-fill.is-goal { background: var(--primary); } .budget-goal-row-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 0.82rem; font-weight: 700; } /* Baris total di bawah daftar sub kategori (kartu Kebutuhan/Keinginan/Masa Depan di halaman Transaksi) — garis atas lebih tegas, tanpa bar. */ .budget-goal-row.is-total { border-top: 1.5px solid var(--line); border-bottom: none; padding-top: 12px; } .budget-goal-row.is-total .budget-goal-row-foot { margin-top: 0; font-size: 0.88rem; } .budget-goal-row-foot-muted { color: var(--muted); font-weight: 500; } .budget-goal-pct { font-size: 0.78rem; font-weight: 700; color: var(--income); } .budget-goal-pct.is-warning { color: var(--warning); } .budget-goal-pct.is-over { color: var(--expense); } .budget-goal-pct.is-goal { color: var(--primary); } /* section (wallets, private, savings, activity) */ .section { margin-top: 26px; } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .section-head-actions { display: flex; align-items: center; gap: 8px; } .section-head h5 { font-size: 0.95rem; } .section-hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; } .wallet-card { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px 14px; box-shadow: var(--shadow-sm); text-align: left; } .wallet-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; overflow: hidden; } .wallet-info { flex: 1; min-width: 0; } .wallet-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .wallet-tags strong { font-size: 0.9rem; } .tag { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); } .tag.you { background: var(--income-soft); color: var(--income); } .wallet-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; } .wallet-balance { font-weight: 700; font-size: 0.92rem; white-space: nowrap; } .member-remove-btn { background: none; border: none; color: var(--expense); font-weight: 700; font-size: 0.8rem; padding: 6px 4px; flex-shrink: 0; white-space: nowrap; } .member-remove-btn:hover { text-decoration: underline; } .member-count-line { font-size: 0.78rem; color: var(--muted); margin: -4px 0 12px; } .member-limit-note { font-size: 0.82rem; color: var(--muted); font-weight: 600; } .empty-card { width: 100%; background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--radius-md); padding: 22px 16px; text-align: center; color: var(--muted); } .empty-card .empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--canvas); color: var(--muted); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .empty-card strong { display: block; color: var(--ink); font-size: 0.9rem; margin-bottom: 3px; } .empty-card span { font-size: 0.8rem; } .tx-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; background: none; border: none; text-align: left; border-bottom: 1px solid var(--line); } .tx-row:last-child { border-bottom: none; } .tx-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tx-icon.income { background: var(--income-soft); color: var(--income); } .tx-icon.expense { background: var(--expense-soft); color: var(--expense); } .tx-info { flex: 1; min-width: 0; } .tx-info div:first-child { font-weight: 600; font-size: 0.9rem; } .tx-info div:last-child { font-size: 0.76rem; color: var(--muted); margin-top: 1px; } .tx-amount { font-weight: 700; font-size: 0.9rem; white-space: nowrap; } .tx-amount.income { color: var(--income); } .tx-amount.expense { color: var(--expense); } .list-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 4px 14px; box-shadow: var(--shadow-sm); } /* .budget-goal-list bawa padding sendiri buat dipakai sebagai kartu berdiri sendiri di Dashboard — pas dia ditaruh DI DALAM .list-card (kartu sub kategori di halaman Transaksi), paddingnya jadi dobel. */ .list-card > .budget-goal-list { padding: 0; } /* tugas */ .task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .task-add-btn { width: auto; padding: 10px 22px; } .task-scope-toggle { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; } .task-scope-toggle button { background: none; border: none; border-radius: 999px; padding: 9px 14px; font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; } .task-scope-toggle button.is-active { background: var(--primary-soft); color: var(--primary); } .task-scope-toggle button { flex: 1; } .task-scope-hint { font-size: 0.8rem; color: var(--muted); margin: 12px 2px 12px; } /* ---------- kartu obrolan ---------- Satu warna menguasai seluruh layar: --cc di-set dari kategori aktif (lihat applyCcTheme di app.js), lalu pil, kartu, dan tombol semuanya mengambil dari situ. Sebelumnya pil selalu ungu, kartunya warna kategori, dan tombolnya biru — tiga warna yang tidak saling nyambung. */ .cc-wrap { --cc: #e11d48; --cc-deep: #9f1239; --cc-light: #fb7185; } /* Baris kategori: digeser biasa, tepinya diberi bayangan supaya jelas masih ada lagi di kanan/kiri — menggantikan scrollbar + panah buatan sendiri yang dulu dibangun manual. */ .cc-pills-wrap { position: relative; margin-top: 10px; } .cc-pills-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; pointer-events: none; border-radius: 0 999px 999px 0; background: linear-gradient(to right, transparent, var(--canvas)); } .cc-pills { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; } .cc-pills::-webkit-scrollbar { display: none; } .cc-pills button { flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: all 0.18s ease; } .cc-pills button .cc-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.45; flex-shrink: 0; } .cc-pills button.is-active { background: var(--cc); border-color: var(--cc); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--cc) 40%, transparent); } .cc-pills button.is-active .cc-pill-dot { opacity: 1; background: #fff; } /* Panggung kartu. Dua lapis semu di belakang bikin kesan setumpuk kartu yang sedang diambil satu — sebelumnya cuma satu persegi datar. */ .cc-stage { display: flex; flex-direction: column; align-items: center; margin-top: 22px; gap: 18px; } .cc-card-wrap { position: relative; width: 100%; max-width: 306px; perspective: 1500px; } .cc-card-wrap::before, .cc-card-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); transform-origin: 50% 100%; } .cc-card-wrap::before { transform: rotate(-4deg) translateY(6px) scale(0.97); opacity: 0.55; } .cc-card-wrap::after { transform: rotate(3deg) translateY(3px) scale(0.985); opacity: 0.8; } .cc-card { /* z-index WAJIB: ::after milik .cc-card-wrap dirender SETELAH isinya, jadi tanpa ini lapisan "tumpukan kartu" menutupi muka kartu utama dan warnanya kelihatan pucat tertimbun putih. */ position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4.1; transform-style: preserve-3d; transition: transform 0.62s cubic-bezier(0.4, 0.15, 0.2, 1); cursor: pointer; } .cc-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; padding: 20px 22px; } /* --- muka depan: warna kategori, ajakan membuka --- */ .cc-card-front { background: linear-gradient(158deg, var(--cc-deep), var(--cc) 52%, var(--cc-light)); color: #fff; box-shadow: 0 18px 40px color-mix(in srgb, var(--cc) 34%, transparent); align-items: center; justify-content: center; text-align: center; } /* Tekstur: satu sapuan cahaya lembut, bukan titik-titik acak yang dulu terbaca sebagai noise. */ .cc-card-front::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.28), transparent 62%), repeating-linear-gradient(122deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px); } .cc-front-top { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.82); } .cc-front-mark { position: relative; font-size: 3rem; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.22)); } .cc-front-invite { position: relative; font-size: 0.95rem; font-weight: 700; line-height: 1.45; max-width: 200px; } .cc-front-sub { position: relative; font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.78); margin-top: 8px; } .cc-front-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.7); } /* --- muka belakang: pertanyaannya, dibuat besar dan terbaca --- */ .cc-card-back { transform: rotateY(180deg); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--cc) 26%, var(--line)); box-shadow: 0 18px 40px rgba(0,0,0,0.16); justify-content: center; } .cc-back-top { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; align-items: center; gap: 7px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc); } .cc-back-top .cc-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc); } .cc-quote-mark { position: absolute; top: 46px; left: 20px; font-size: 3.4rem; line-height: 1; color: var(--cc); opacity: 0.16; font-weight: 800; } .cc-question { position: relative; font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.55; text-wrap: balance; } .cc-back-foot { position: absolute; bottom: 20px; left: 22px; right: 22px; font-size: 0.7rem; color: var(--muted); font-weight: 600; } /* --- aksi --- */ .cc-actions { width: 100%; max-width: 306px; display: flex; gap: 9px; } .cc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 999px; padding: 13px 16px; font-size: 0.86rem; font-weight: 700; transition: transform 0.15s ease, opacity 0.15s ease; } .cc-btn:active { transform: scale(0.97); } .cc-btn-primary { background: var(--cc); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--cc) 34%, transparent); } .cc-btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .cc-hint { text-align: center; font-size: 0.78rem; color: var(--muted); margin: 2px 6px 0; } /* --- riwayat --- */ .cc-history-day { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; } .cc-history-day:first-child { margin-top: 4px; } .cc-history-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 15px 14px 18px; box-shadow: var(--shadow-sm); margin-bottom: 9px; overflow: hidden; } /* Pita tipis di kiri, warnanya ikut kategori — bikin riwayat bisa dipindai sekilas tanpa harus baca labelnya satu-satu. */ .cc-history-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc-item, var(--muted)); } .cc-history-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .cc-history-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-item, var(--muted)); } .cc-history-item p { font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.5; } .cc-history-time { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-left: auto; } @media (prefers-reduced-motion: reduce) { .cc-card { transition: none; } } .task-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .task-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--muted); } .task-badge-tersedia { background: var(--warning-soft); color: var(--warning); } .task-badge-berjalan { background: var(--primary-soft); color: var(--primary); } .task-badge-selesai { background: var(--income-soft); color: var(--income); } .task-card-body { background: none; border: none; text-align: left; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; } .task-card-title { font-size: 1rem; font-weight: 700; color: var(--ink); } .task-card-title.is-done { text-decoration: line-through; color: var(--muted); } .task-card-sub { font-size: 0.82rem; color: var(--muted); } .task-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .task-action-btn { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 0.82rem; padding: 9px 16px; border-radius: 999px; } .task-action-btn.is-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .task-detail-hero { background: linear-gradient(160deg, var(--primary) 0%, #1d4ed8 100%); color: #fff; border-radius: var(--radius-lg); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; } .task-detail-hero .task-badge { background: rgba(255,255,255,0.2); color: #fff; width: fit-content; } .task-detail-hero h2 { font-size: 1.4rem; } .task-info-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .task-info-row:last-child { border-bottom: none; } .task-info-row > span:first-child { font-size: 0.85rem; color: var(--muted); } .task-detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .task-detail-actions .task-action-btn { width: 100%; padding: 13px; font-size: 0.92rem; } /* pilihan pill di modal (dipakai field "Untuk siapa?") */ .pill-choice-group { display: flex; flex-wrap: wrap; gap: 8px; } .pill-choice { border: 1.5px solid var(--line); background: var(--canvas); color: var(--ink); font-weight: 700; font-size: 0.86rem; padding: 10px 16px; border-radius: 999px; } .pill-choice.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } /* bottom nav (mobile) */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); z-index: 20; } .bottom-nav button { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 0.66rem; font-weight: 600; padding: 6px 2px; border-radius: 10px; } .bottom-nav button.is-active { color: var(--primary); } .bottom-nav svg { width: 22px; height: 22px; } /* tombol + di tengah bottom nav — sengaja lebih besar & terangkat dari ikon-ikon di kiri-kanannya (Catatan/Tugas di kiri, Rapor/Profil di kanan) */ .bottom-nav-fab { align-self: start; justify-self: center; width: 52px; height: 52px; border-radius: 50%; margin-top: -22px; background: linear-gradient(155deg, #1d4ed8, #2563eb 60%, #60a5fa); border: 3px solid var(--surface); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.38), var(--shadow-md); } .bottom-nav-fab svg { width: 24px; height: 24px; } .bottom-nav-fab:active { transform: scale(0.94); } /* generic page header used in Tugas/Kalender/Rapor/Profil */ .page-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 16px; } .page-head h3 { font-size: 1.25rem; } /* Tugas */ .filter-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; } .filter-pills button { flex-shrink: 0; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.82rem; font-weight: 600; } .filter-pills button.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } /* Kalender */ .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-nav-btn { background: var(--surface); border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; } .cal-dow { font-size: 0.7rem; color: var(--muted); font-weight: 700; padding-bottom: 6px; } .cal-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 0.85rem; background: var(--surface); border: 1px solid transparent; } .cal-day.is-today { border-color: var(--primary); font-weight: 800; color: var(--primary); } .cal-day.is-muted { opacity: 0.3; } .cal-day.is-selected { background: var(--primary); color: #fff; } .cal-day-dots { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; } .cal-day-dot { width: 4px; height: 4px; border-radius: 50%; } .cal-day-dot.is-income { background: var(--income); } .cal-day-dot.is-expense { background: var(--expense); } .cal-day-dot.is-event { background: var(--primary); } .cal-day.is-selected .cal-day-dot { background: rgba(255, 255, 255, 0.9); } .cal-events { margin-top: 18px; } /* Rapor */ .rapor-card { background: linear-gradient(165deg, var(--primary) 0%, #1d4ed8 100%); color: #fff; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); } .rapor-brand { display: flex; align-items: center; justify-content: space-between; } .rapor-eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); font-weight: 700; } .rapor-badge { font-size: 0.62rem; font-weight: 800; background: rgba(255,255,255,0.18); padding: 3px 9px; border-radius: 20px; letter-spacing: 0.04em; } .rapor-title { font-size: 1.3rem; margin-top: 6px; } .rapor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; } .rapor-stat { background: rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 12px 14px; } .rapor-stat:last-child { grid-column: 1 / -1; } .rapor-stat span { font-size: 0.72rem; color: rgba(255,255,255,0.75); display: block; margin-bottom: 4px; } .rapor-stat strong { font-size: 1.05rem; } .rapor-actions { display: flex; gap: 10px; margin-top: 22px; } .rapor-actions .btn { background: rgba(255,255,255,0.16); color: #fff; box-shadow: none; } /* Panel Owner — sengaja beda dari palet biru di seluruh app (gelap/slate), biar berasa area terpisah/khusus meski aksesnya lewat login yang sama. */ .admin-hero { background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%); color: #fff; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); } .admin-hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); font-weight: 700; } .admin-hero-title { font-size: 1.3rem; margin-top: 6px; color: #fff; } .admin-hero-sub { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 6px; } .admin-household-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .admin-household-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1e293b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .admin-household-info { flex: 1; min-width: 0; } .admin-household-info strong { font-size: 0.92rem; } .admin-household-info .tag { display: inline-block; margin-left: 8px; font-size: 0.65rem; font-weight: 700; background: var(--income-soft); color: var(--income); padding: 2px 8px; border-radius: 20px; vertical-align: middle; } .admin-household-sub { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 3px; } .admin-household-delete { flex-shrink: 0; background: none; border: none; color: var(--expense); padding: 6px; } .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; } .admin-stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); } /* katalog "Template Lainnya" — dipakai baik di form manajemen Panel Owner maupun di halaman katalog yang dilihat pengguna biasa lewat Profil */ .template-card { display: flex; gap: 12px; padding: 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .template-card-photo { width: 64px; height: 64px; border-radius: 12px; background: var(--canvas); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); } .template-card-photo img { width: 100%; height: 100%; object-fit: cover; } .template-card-body { flex: 1; min-width: 0; } .template-card-body strong { display: block; font-size: 0.92rem; } .template-card-desc { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 3px; line-height: 1.4; } .template-card-price { display: block; font-size: 0.88rem; font-weight: 800; color: var(--primary); margin-top: 6px; } .template-card-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; gap: 8px; } .template-card-buy { background: var(--primary); color: #fff; font-weight: 700; font-size: 0.8rem; padding: 8px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .template-card-delete { background: none; border: none; color: var(--expense); padding: 4px; } .admin-stat-card span { display: block; font-size: 0.7rem; color: var(--muted); margin-bottom: 4px; } .admin-stat-card strong { font-size: 1.1rem; } .admin-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .admin-toolbar input[type="text"] { flex: 1; min-width: 140px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); font-size: 0.88rem; outline: none; } .admin-toolbar input[type="text"]:focus { border-color: var(--primary); } .admin-toolbar select { padding: 10px 34px 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); font-size: 0.85rem; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .tx-month-select-wrap { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 10px; } .tx-month-select-wrap select { flex: 1; padding: 9px 34px 9px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); font-size: 0.85rem; font-weight: 600; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .tx-month-select-wrap select:focus { border-color: var(--primary); } /* select kompak buat header section (mis. filter kategori "Per Kategori") — sama gayanya dengan .tx-month-select-wrap select tapi tidak flex:1, biar pas duduk sebaris sama judul section di .section-head. */ .section-select { /* min-height eksplisit, bukan menebak padding: