:root { --bg:#fff7fb; --surface:#fff; --surface-low:#f3ecf0; --text:#1d1b1e; --muted:#524248; --line:#d7c1c8; --primary:#6e224a; --primary-soft:#ffd8e6; --success:#059669; --success-soft:#d1fae5; --warning:#d97706; --warning-soft:#fef3c7; --danger:#e11d48; --danger-soft:#ffe4e6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; transition: padding-bottom 0.2s; }
body.has-action-bar { padding-bottom: 74px; }
button,input,textarea { font:inherit; } button { cursor:pointer; }
.top-bar { height:56px; position:sticky; top:0; z-index:10; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:0 12px; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.top-bar h1 { margin:0; text-align:center; font-size:20px; line-height:24px; font-weight:600; }.detail-topbar>div { text-align:center; }.detail-topbar h1 { font-size:16px; }
.icon-button { width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--primary); display:grid; place-items:center; }.icon-button:active { background:var(--surface-low); transform:scale(.95); }
.page { width:min(100%,640px); margin:0 auto; padding:8px 16px; }.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.summary-card,.payment-list,.info-card,.notes-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; }.summary-card { min-height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 5px; text-align:center; }.summary-card span { color:var(--muted); font-size:11px; font-weight:600; }.summary-card strong { margin-top:5px; font-size:27px; line-height:30px; color:var(--warning); }.success { color:var(--success)!important; }.danger { color:var(--danger)!important; }
.search-box { height:44px; display:flex; align-items:center; gap:9px; margin-top:20px; padding:0 12px; background:var(--surface-low); border-radius:8px; color:var(--muted); }.search-box input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); }.filters { display:flex; gap:3px; overflow:auto; margin:16px 0; padding:4px; border-radius:8px; background:var(--surface-low); }.filters button { flex:1; min-width:76px; height:32px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:13px; font-weight:600; }.filters button.active { background:var(--surface); box-shadow:0 1px 3px #0002; color:var(--text); }
.payment-list { overflow:hidden; }.payment-row { width:100%; border:0; border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent); background:transparent; display:flex; justify-content:space-between; gap:10px; padding:16px; text-align:left; color:inherit; }.payment-row:last-child { border-bottom:0; }.payment-row:active { background:var(--surface-low); }.person { min-width:0; display:flex; gap:12px; align-items:center; }.status-icon { width:40px; height:40px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; }.status-icon.pending { color:var(--warning); background:var(--warning-soft); }.status-icon.approved { color:var(--success); background:var(--success-soft); }.status-icon.rejected { color:var(--danger); background:var(--danger-soft); }.person strong { display:block; font-size:16px; font-weight:500; }.reference,.meta,.age { font-size:11px; color:var(--muted); }.reference { margin-left:5px; }.meta { display:block; margin-top:4px; }.amount-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; }.amount { font-size:18px; font-weight:600; }.status { display:inline-block; width:max-content; padding:3px 6px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.03em; }.status.pending { color:var(--warning); background:var(--warning-soft); }.status.approved { color:var(--success); background:var(--success-soft); }.status.rejected { color:var(--danger); background:var(--danger-soft); }.empty-state { padding:36px 18px; text-align:center; color:var(--muted); }
.bottom-nav { position:fixed; z-index:20; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:6px 12px calc(6px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
.bottom-nav a { min-width:80px; border-radius:12px; padding:6px 4px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; font-size:10px; font-weight:600; }.bottom-nav a.active { color:var(--primary); background:color-mix(in srgb,var(--primary-soft) 45%,transparent); }
.section-title { margin:12px 0 4px 12px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }.info-card { overflow:hidden; }.info-row { min-height:36px; padding:8px 12px; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #f0f0f5; font-size:13px; }.info-row:last-child { border-bottom:0; }.info-row span:last-child { color:var(--muted); text-align:right; }.info-row .price { color:var(--primary)!important; font-weight:700; }.reference-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--surface-low); border-radius:5px; padding:3px 6px; }.notes-card { padding:8px; margin-bottom: 4px; }.notes-card textarea { width:100%; height:60px; border:0; outline:0; resize:none; background:transparent; color:var(--text); font-size:13px; }.action-bar { position:fixed; z-index:20; bottom:0; left:0; right:0; display:flex; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg); }.action-bar button { height:44px; border-radius:8px; border:0; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:14px; }.reject-button { flex:1; background:var(--danger-soft); color:#93000a; }.approve-button { flex:2; background:var(--primary); color:#fff; }.action-bar button:disabled { opacity:.55; cursor:not-allowed; }
@media (min-width:641px) { body { background:#e9e7ed; }.top-bar,.bottom-nav,.action-bar { max-width:640px; left:50%; transform:translateX(-50%); }.top-bar { border-radius:0 0 12px 12px; }.bottom-nav,.action-bar { border-radius:12px 12px 0 0; }.page { background:var(--bg); min-height:100vh; } }
.splash-screen { position: fixed; inset: 0; z-index: 9999; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; }
.splash-screen.hidden { opacity: 0; pointer-events: none; }
.spinner { width: 44px; height: 44px; border: 4px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }