:root { color-scheme: dark; --bg: #121212; --card: #1e1e1e; --input-bg: #262626; --text: #e8e8e8; --muted: #9a9a9a; --border: #333333; --primary: #3b82f6; --primary-dark: #2563eb; --danger: #f87171; --success: #4ade80; --kehendak: #fbbf24; --keperluan: #60a5fa; --simpanan: #4ade80; --radius: 12px; --success-bg: #143d24; --success-fg: #86efac; --danger-bg: #4c1d1d; --danger-fg: #fca5a5; --info-bg: #1c3654; --info-fg: #93c5fd; --warning-bg: #4a3208; --warning-fg: #fde68a; } /* Light theme override - same token set, different values. Dark (above) stays the unconditional default; light only applies when explicitly selected via the toggle (data-theme="light" on ), never through a prefers-color-scheme media query, so the app's own toggle is always the single source of truth. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f5f7; --card: #ffffff; --input-bg: #ffffff; --text: #1c1e21; --muted: #6b7280; --border: #dde1e6; --primary: #2563eb; --primary-dark: #1d4ed8; --danger: #dc2626; --success: #16a34a; --kehendak: #b45309; --keperluan: #1d4ed8; --simpanan: #15803d; --success-bg: #e7f7ec; --success-fg: #157347; --danger-bg: #fdecec; --danger-fg: #b42318; --info-bg: #eaf2ff; --info-fg: #1d4ed8; --warning-bg: #fef6e7; --warning-fg: #92610a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Calibri, Candara, 'Segoe UI', Optima, Arial, sans-serif; font-size: 12px; line-height: 1.4; } body { padding-bottom: env(safe-area-inset-bottom); } /* Theme-switch smoothing: color/background transitions only - no layout properties, so switching themes never causes a layout shift. */ body, .card, .btn, input, select, textarea, .tx-row { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .excel-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 3px; border-radius: 6px; cursor: pointer; line-height: 1; flex-shrink: 0; } .excel-btn:hover { background: var(--card); } .excel-btn svg { display: block; } .live-clock { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .clock-sep { color: var(--border); } .container { max-width: 980px; margin: 0 auto; padding: 16px 16px 32px; } /* Single-row enterprise-style header: brand identity (icon + name) pinned left, secondary metadata (clock, theme) pinned right - never a centered page-heading treatment. */ .app-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .header-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; } .brand-logo { display: block; width: 33px; height: 28px; flex-shrink: 0; } .header-meta { display: flex; align-items: center; gap: 14px; min-width: 0; } .brand-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; background-image: linear-gradient(100deg, #60a5fa, #a78bfa, #34d399, #60a5fa); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brandGradientWave 3.5s ease-in-out infinite; } @keyframes brandGradientWave { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .brand-title { animation: none; } } /* Visually secondary, next to the (primary) live clock - smaller, no pill background, muted by default, only gaining emphasis on hover/focus. */ .theme-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; border-radius: 6px; padding: 4px 6px; font-size: 11px; font-family: inherit; color: var(--muted); cursor: pointer; line-height: 1; flex-shrink: 0; } .theme-toggle:hover { background: var(--card); color: var(--text); } .theme-toggle-icon { font-size: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius); padding: 12px 18px; font-size: 12px; font-family: inherit; font-weight: 600; cursor: pointer; min-height: 44px; touch-action: manipulation; /* .btn is applied to real