/* ===== Currents — calculator-forward, system-adaptive ===== */ :root { /* Light theme (default) */ --bg: #f2f2f7; --surface: #ffffff; --surface-2: #e9e9ee; --row-bg: #ffffff; --row-active-bg: #ffffff; --text: #1c1c1e; --text-dim: #8a8a8e; --text-faint: #aeaeb2; --accent: #0a84ff; --accent-soft: rgba(10, 132, 255, 0.12); --line: rgba(60, 60, 67, 0.12); /* Keypad */ --key-num-bg: #ffffff; --key-num-text: #1c1c1e; --key-fn-bg: #d7d7dc; --key-fn-text: #1c1c1e; --key-op-bg: #ff9f0a; --key-op-text: #ffffff; --key-active: var(--accent); --warn: #ff453a; --tier2: #ff9f0a; --radius: 16px; --radius-sm: 10px; --gap: 8px; --row-h: clamp(54px, 10vh, 84px); --key-h: clamp(46px, 7.6vh, 68px); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --row-bg: #1c1c1e; --row-active-bg: #2c2c2e; --text: #ffffff; --text-dim: #98989f; --text-faint: #636366; --accent: #0a84ff; --accent-soft: rgba(10, 132, 255, 0.22); --line: rgba(84, 84, 88, 0.4); --key-num-bg: #333336; --key-num-text: #ffffff; --key-fn-bg: #5b5b5f; --key-fn-text: #ffffff; --key-op-bg: #ff9f0a; --key-op-text: #ffffff; --warn: #ff453a; --tier2: #ffb340; } } /* Manual theme override (set data-theme on ) */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; } .app { display: flex; flex-direction: column; height: 100dvh; max-width: 520px; margin: 0 auto; padding: calc(var(--safe-top) + var(--gap)) var(--gap) calc(var(--safe-bottom) + var(--gap)); gap: var(--gap); } /* ===== Date bar ===== */ .datebar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 4px 6px; flex: 0 0 auto; } .datebar__mode { flex: 1 1 auto; min-width: 0; } .datebar__settings { flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 20px; cursor: pointer; transition: background .15s, transform .1s; } .datebar__settings:active { transform: scale(0.92); } /* date toggle pill */ .mode-toggle { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; } .mode-toggle button { border: none; background: transparent; color: var(--text-dim); font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .mode-toggle button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.12); } .mode-detail { display: block; font-size: 12px; color: var(--text-dim); margin-top: 3px; padding-left: 6px; } .mode-detail.is-historical { color: var(--accent); font-weight: 600; } /* As-of controls: select + calendar button on one tidy row */ .asof-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .asof-select { font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface-2); border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; max-width: 100%; } .date-pick { font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; } /* make the whole native date field act like a button (no manual-type emphasis) */ .date-pick::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; } .asof-resolved { font-size: 12px; color: var(--accent); margin-top: 4px; padding-left: 2px; } .asof-resolved b { font-weight: 700; } /* ===== Currency rows ===== */ .rows { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; min-height: 0; justify-content: center; /* keep the stack balanced; avoids a big empty gap on tall screens */ } .row { position: relative; background: var(--row-bg); border-radius: var(--radius); padding: 10px 16px; min-height: var(--row-h); scroll-margin: 8px 0; display: flex; flex-direction: column; justify-content: center; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, background .15s; } .row.is-active { border-color: var(--accent); background: var(--row-active-bg); } .row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .row__code { font-size: 15px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.3px; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .row.is-active .row__code { color: var(--accent); } .row__amount { font-family: var(--font-num); font-size: clamp(26px, 7vw, 40px); font-weight: 500; text-align: right; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.1; } .row__amount.is-placeholder { color: var(--text-faint); } .row__caption { font-size: 12px; color: var(--text-faint); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row__caption.is-error { color: var(--warn); } .row__caption .tier2-badge { color: var(--tier2); font-weight: 700; } .row__remove { position: absolute; top: 6px; right: 8px; border: none; background: transparent; color: var(--text-faint); font-size: 14px; cursor: pointer; display: none; } .row__copy { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -4px -8px -4px 2px; /* tighten layout without shrinking the hit area */ padding: 0; border: none; background: transparent; color: var(--text-faint); border-radius: var(--radius-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .12s, background .12s, transform .08s; } .row__copy:hover { color: var(--accent); background: var(--accent-soft); } .row__copy:active { transform: scale(0.9); } .row.is-active .row__copy { color: var(--text-dim); } .toast { position: fixed; left: 50%; top: 38%; /* float over the rows, clear of the keypad */ transform: translate(-50%, -50%) scale(0.96); max-width: 88vw; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 100; transition: opacity .18s ease, transform .18s ease; } .toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .tier-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--accent); } .tier-dot.tier2 { background: var(--tier2); } /* ===== Keypad ===== */ .keypad { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .key { height: var(--key-h); border: none; border-radius: var(--radius-sm); font-family: var(--font-num); font-size: clamp(20px, 5.5vw, 28px); font-weight: 500; cursor: pointer; background: var(--key-num-bg); color: var(--key-num-text); transition: filter .1s, transform .06s; display: flex; align-items: center; justify-content: center; } .key:active { filter: brightness(0.88); transform: scale(0.97); } .key--fn { background: var(--key-fn-bg); color: var(--key-fn-text); font-weight: 600; } .key--op { background: var(--key-op-bg); color: var(--key-op-text); font-weight: 600; } .key--op.is-armed { filter: brightness(1.15); outline: 2px solid var(--key-op-text); outline-offset: -3px; } .key--zero { grid-column: span 1; } /* ===== Settings sheet ===== */ .sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; animation: fade .2s ease; } .sheet[hidden] { display: none; } .sheet__panel { background: var(--bg); width: 100%; max-width: 520px; max-height: 85dvh; border-radius: 20px 20px 0 0; padding: 20px 16px calc(var(--safe-bottom) + 20px); overflow-y: auto; animation: slideup .25s cubic-bezier(.2,.7,.3,1); } .sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .sheet__head h2 { font-size: 20px; } .sheet__close { border: none; background: var(--surface-2); color: var(--text); width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; } .settings-group { margin-bottom: 22px; } .settings-group > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 8px; } .cur-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; } .cur-item__name { flex: 1 1 auto; min-width: 0; } .cur-item__name b { font-size: 15px; } .cur-item__name span { display:block; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cur-item__btn { border: none; background: var(--surface-2); color: var(--text); width: 30px; height: 30px; border-radius: 8px; font-size: 16px; cursor: pointer; } .cur-item__btn:disabled { opacity: .3; cursor: default; } .cur-item__btn.remove { color: var(--warn); } .cur-item.is-base .cur-item__name b::after { content: "BASE"; font-size: 10px; background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; font-weight: 700; } .add-search { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); margin-bottom: 8px; } .add-list { max-height: 240px; overflow-y: auto; } .add-list .cur-item { cursor: pointer; } .tier-label { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; } .tier-label.t1 { background: var(--accent-soft); color: var(--accent); } .tier-label.t2 { background: rgba(255,159,10,0.15); color: var(--tier2); } .tier-label.t0 { background: rgba(255,69,58,0.15); color: var(--warn); } /* rate-source picker */ .src-item.is-on { outline: 2px solid var(--accent); outline-offset: -2px; } .src-check { color: var(--accent); font-weight: 700; font-size: 18px; width: 20px; text-align: center; } .src-item.is-disabled { opacity: .5; cursor: default; } .seg { display: flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { flex: 1; border: none; background: transparent; color: var(--text-dim); font: inherit; font-weight: 600; font-size: 14px; padding: 8px; border-radius: 8px; cursor: pointer; } .seg button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); } /* ===== Badges / states ===== */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); } .badge.is-stale { background: rgba(255,159,10,0.15); color: var(--tier2); } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; color: transparent !important; } .empty-prompt { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 15px; } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes fade { from { opacity: 0; } } @keyframes slideup { from { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }