:root{--bg:#e8edf3;--card:#eef2f7;--pill:#edf1f6;--ink:#33414f;--mut:#8a97a5}
*{box-sizing:border-box}
body{margin:0;background:#101418;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);display:flex;justify-content:center;min-height:100vh}
.phone{width:min(430px,100%);background:var(--bg);min-height:100vh;padding:14px 14px 28px;border-radius:14px}
.searchbar{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:inset 4px 4px 10px #d3dae2,inset -4px -4px 10px #fff}
.searchbar .ico{color:var(--mut);display:flex}
.searchbar input{flex:1;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.toolbar{display:flex;gap:8px;margin:12px 2px}
.toolbar input[type=date]{flex:1;border:0;border-radius:10px;padding:10px 12px;background:var(--pill);box-shadow:inset 3px 3px 8px #d3dae2,inset -3px -3px 8px #fff;color:var(--ink)}
.toolbar button{border:0;border-radius:10px;padding:10px 16px;background:#dfe7ef;color:#2f3d4b;font-weight:700;cursor:pointer;box-shadow:4px 4px 10px #c9d2dc,-4px -4px 10px #fff}
.meta{font-size:13px;color:var(--mut);margin:6px 4px 10px}
.list{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border-radius:16px;padding:12px;box-shadow:6px 6px 14px #cfd7e0,-6px -6px 14px #fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:7px 0}
.cell{background:var(--pill);border-radius:12px;padding:11px 12px;font-size:13px;font-weight:600;box-shadow:inset 3px 3px 8px #d5dce4,inset -3px -3px 8px #fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.label{color:#3c4a59}
.cell.val{color:#465667;font-weight:500}
.empty{background:var(--card);border-radius:14px;padding:18px;text-align:center;color:var(--mut);box-shadow:inset 3px 3px 8px #d3dae2,inset -3px -3px 8px #fff}