:root {
  --coral: #D85A30;
  --teal: #1D9E75;
  --bg: #FFFFFF;
  --surface: #F5F0E8;
  --text: #2C2C2A;
  --text2: #5F5E5A;
  --text3: #888780;
  --border: #E6E0D4;
  --amber-bg: #FCF1D9;
  --amber-fg: #7A4F0B;
  --teal-bg: #E1F5EE;
  --teal-fg: #085041;
  --advance-bg: #E6F1FB; --advance-fg: #0C447C;
  --balance-bg: #EEEDFE; --balance-fg: #3C3489;
  --full-bg: #E1F5EE; --full-fg: #085041;
  --refund-bg: #FBEAF0; --refund-fg: #72243E;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1A19; --surface: #232220; --text: #F0EDE4; --text2: #B0ADA3; --text3: #7A7870; --border: #33312D;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--coral); text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; width: 100%; }
textarea { min-height: 80px; resize: vertical; }

.header { position: sticky; top: 0; z-index: 10; background: var(--bg); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.header h1 { margin: 0; font-size: 18px; flex: 1; }
.header .sub { color: var(--text2); font-size: 13px; }
.back { font-size: 22px; color: var(--coral); padding: 4px 6px; }

.container { padding: 16px; max-width: 720px; margin: 0 auto; }

.search-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 5; }
.search-bar input { flex: 1; }

.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.row:active { background: var(--surface); }
.row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 600; }
.row .meta { color: var(--text2); font-size: 13px; }
.row .chev { color: var(--text3); font-size: 22px; }

.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-advance { background: var(--advance-bg); color: var(--advance-fg); }
.badge-balance { background: var(--balance-bg); color: var(--balance-fg); }
.badge-full    { background: var(--full-bg);    color: var(--full-fg);    }
.badge-refund  { background: var(--refund-bg);  color: var(--refund-fg);  }
.badge-open    { background: var(--amber-bg);   color: var(--amber-fg);   }
.badge-closed, .badge-applied { background: var(--teal-bg); color: var(--teal-fg); }
.badge-archived{ background: var(--surface);    color: var(--text2);      }

.card { background: var(--surface); border-radius: 12px; padding: 14px; margin: 10px 0; }
.card .title { font-weight: 600; margin-bottom: 4px; }
.card .sub { color: var(--text2); font-size: 13px; }
.card .foot { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 30px; box-shadow: 0 4px 12px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; z-index: 20; }

.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 4; }
.tabs button { flex: 1; padding: 12px; font-weight: 500; color: var(--text2); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--coral); border-bottom-color: var(--coral); }

.filter-chips { display: flex; gap: 8px; padding: 12px 16px; }
.filter-chips button { padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--text2); font-size: 13px; }
.filter-chips button.active { background: var(--coral); color: #fff; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.chips button { padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--text2); font-size: 14px; border: 1px solid var(--border); }
.chips button.active { background: var(--coral); color: #fff; border-color: var(--coral); }

form .field { margin-bottom: 14px; }
form label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
form .inline { display: flex; gap: 8px; align-items: center; }
form .inline input { flex: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.btn-primary { background: var(--coral); color: #fff; width: 100%; }
.btn-teal { background: var(--teal); color: #fff; width: 100%; }
.btn-secondary { background: var(--surface); color: var(--text); width: 100%; border: 1px solid var(--border); }
.btn-ghost { color: var(--coral); }
.btn-danger { background: var(--danger); color: #fff; }

.mic { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.mic.recording { background: var(--coral); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(216,90,48,.6);} 70%{ box-shadow: 0 0 0 12px rgba(216,90,48,0);} 100%{ box-shadow:0 0 0 0 rgba(216,90,48,0);} }

.photo-row { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
.photo-row img { height: 120px; border-radius: 8px; }

.empty { text-align: center; color: var(--text3); padding: 40px 20px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #2C2C2A; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 100; opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }

.login-wrap { max-width: 360px; margin: 15vh auto; padding: 24px; text-align: center; }
.login-wrap h1 { color: var(--coral); font-size: 28px; margin-bottom: 4px; }
.login-wrap .tag { color: var(--text2); margin-bottom: 24px; }

/* PIN inputs */
.pin-row { display: flex; gap: 12px; justify-content: center; margin: 18px 0 10px; }
.pin-box {
  width: 56px; height: 64px; text-align: center; font-size: 28px; font-weight: 600;
  padding: 0; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
  -webkit-text-security: disc; letter-spacing: 0;
}
.pin-box:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(216,90,48,.18); }
.pin-hint { color: var(--text2); font-size: 13px; text-align: center; min-height: 20px; }
.pin-hint.err { color: var(--danger); }
.pin-row.shake { animation: shake .35s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Settings */
.section { background: var(--surface); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }
.section-p { color: var(--text2); font-size: 14px; margin: 0 0 12px; }
.change-pin-form { margin-top: 14px; }
.change-pin-form .pin-row { margin: 8px 0; gap: 8px; }
.change-pin-form .pin-box { width: 48px; height: 56px; font-size: 24px; }

.install-block { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-top: 8px; }
.install-block summary { cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 10px; list-style: none; }
.install-block summary::-webkit-details-marker { display: none; }
.install-block[open] summary { margin-bottom: 8px; }
.install-block ol { margin: 6px 0 4px 20px; padding: 0; font-size: 14px; color: var(--text2); line-height: 1.6; }
.plat-ic { width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-size: contain; }
.ic-apple { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235F5E5A'><path d='M16.365 1.43c0 1.14-.468 2.23-1.217 3.02-.83.88-2.178 1.57-3.33 1.48-.143-1.12.412-2.28 1.146-3.01.82-.82 2.23-1.44 3.4-1.49zm3.35 16.94c-.36.84-.53 1.21-1 1.95-.66 1.04-1.6 2.33-2.77 2.34-1.04.01-1.31-.68-2.73-.67-1.41.01-1.71.67-2.76.66-1.17-.01-2.05-1.18-2.71-2.22C6.62 16.4 6.2 13.6 7.03 11.78c.6-1.29 1.56-2.11 2.67-2.12 1.07-.01 1.83.68 2.76.68.92 0 1.49-.67 2.75-.67 1.02 0 2.09.56 2.86 1.53-2.51 1.38-2.1 5.02.65 6.17z'/></svg>"); }
.ic-android { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235F5E5A'><path d='M17.523 15.34a1.096 1.096 0 110-2.193 1.096 1.096 0 010 2.193zm-11.046 0a1.096 1.096 0 110-2.193 1.096 1.096 0 010 2.193zm11.44-6.015l1.95-3.37a.405.405 0 10-.702-.405l-1.97 3.41A12.05 12.05 0 0012 7.77c-1.84 0-3.57.41-5.1 1.19L4.93 5.55a.405.405 0 10-.7.405l1.95 3.37C2.78 10.96.66 13.62.5 16.77h23c-.16-3.15-2.28-5.81-5.58-7.445z'/></svg>"); }