@import "https://fonts.googleapis.com/css2?family=Anek+Tamil:wght@400;500;600;700;800&display=swap";:root{--primary:#0b5fa5;--primary-dark:#073f6e;--primary-deep:#095084;--primary-bright:#1476c7;--gold:#e5a200;--bg:#f5f7fa;--surface:#fff;--border:#dfe5ec;--border-soft:#eef2f7;--border-input:#c9d4e0;--text:#1a1a1a;--text-soft:#45505e;--muted:#5f6b7a;--green:#1e7a4c;--green-bg:#e7f3ec;--amber:#b06a00;--amber-bg:#fbf0de;--amber-note:#7a5518;--amber-note-bg:#fdf6e9;--amber-note-border:#ebd9b4;--danger:#c5221f;--danger-bg:#fbe7e6;--violet:#4b3e8e;--violet-bg:#edeaf6}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Anek Tamil,system-ui,-apple-system,sans-serif}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit;font-size:15px}a{color:var(--primary)}.page{flex-direction:column;min-height:100%;display:flex}.topbar{background:linear-gradient(160deg, var(--primary-bright), var(--primary-dark));color:#fff;padding:14px 18px}.topbar-inner{align-items:center;gap:12px;max-width:880px;margin:0 auto;display:flex}.brand{font-size:19px;font-weight:800;line-height:1.2}.brand small{opacity:.85;font-size:12px;font-weight:500;display:block}.topbar-spacer{flex:1}.topbar-phone{opacity:.9;font-size:12.5px}.container{flex:1;width:100%;max-width:880px;margin:0 auto;padding:18px}.footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);padding:18px;font-size:12.5px}.tabs{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.tab{border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:100px;padding:8px 16px;font-size:14px;font-weight:600}.tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:14px;padding:18px}.card h2{margin:0 0 4px;font-size:18px;font-weight:800}.card .sub{color:var(--muted);margin:0 0 14px;font-size:13.5px}.field{margin-bottom:14px}.label{margin-bottom:6px;font-size:13.5px;font-weight:700;display:block}.input,.select,.textarea{border:1.5px solid var(--border-input);background:var(--surface);width:100%;color:var(--text);border-radius:11px;padding:11px 12px}.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--primary);outline-offset:-1px}.input.bad,.textarea.bad{border-color:var(--danger)}.textarea{resize:vertical;min-height:110px}.hint{color:var(--muted);margin-top:5px;font-size:12.5px}.hint.bad{color:var(--danger)}.phone-row{align-items:stretch;display:flex}.phone-prefix{border:1.5px solid var(--border-input);background:var(--border-soft);color:var(--text-soft);border-right:0;border-radius:11px 0 0 11px;padding:11px 12px;font-weight:600}.phone-row .input{border-radius:0 11px 11px 0}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:100px;padding:7px 14px;font-size:13.5px;font-weight:600}.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.btn{background:linear-gradient(135deg, var(--primary-bright), var(--primary-deep));color:#fff;border:0;border-radius:12px;padding:12px 20px;font-size:15px;font-weight:700}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-block{width:100%}.btn-outline{border:1.5px solid var(--border);color:var(--text);background:0 0}.btn-outline:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.btn-link{color:var(--primary);background:0 0;border:0;padding:4px;font-weight:600}.alert{border-radius:12px;margin-bottom:14px;padding:12px 14px;font-size:13.5px}.alert-error{background:var(--danger-bg);color:#7a1513}.alert-ok{background:var(--green-bg);color:#12563a}.alert-note{background:var(--amber-note-bg);border:1px solid var(--amber-note-border);color:var(--amber-note)}.badge{letter-spacing:.2px;border-radius:100px;padding:3px 11px;font-size:11.5px;font-weight:800;display:inline-block}.badge-registered{background:var(--violet-bg);color:var(--violet)}.badge-assigned{background:var(--amber-bg);color:var(--amber)}.badge-resolved{background:var(--green-bg);color:var(--green)}.badge-escalated{background:var(--danger-bg);color:var(--danger)}.token-card{border:1.5px dashed var(--primary);text-align:center;background:var(--surface);border-radius:16px;padding:16px}.token-label{color:var(--muted);font-size:11.5px;font-weight:700}.token-value{color:var(--primary);letter-spacing:1px;margin:3px 0;font-size:25px;font-weight:800}.griev-row{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;align-items:flex-start;gap:12px;width:100%;margin-bottom:10px;padding:14px;display:flex}.griev-row:hover{border-color:var(--primary)}.griev-row .tok{font-size:14px;font-weight:800}.griev-row .meta{color:var(--muted);margin-top:2px;font-size:12.5px}.timeline{margin:0;padding:0;list-style:none}.timeline li{gap:12px;padding-bottom:16px;display:flex;position:relative}.timeline li:not(:last-child):before{content:"";background:var(--border);width:2px;position:absolute;top:20px;bottom:0;left:8px}.dot{background:var(--border);border:3px solid var(--surface);width:18px;height:18px;box-shadow:0 0 0 1.5px var(--border);border-radius:50%;flex:0 0 18px;margin-top:2px}.dot.citizen{background:var(--violet);box-shadow:0 0 0 1.5px var(--violet)}.dot.officer{background:var(--green);box-shadow:0 0 0 1.5px var(--green)}.dot.system{background:var(--danger);box-shadow:0 0 0 1.5px var(--danger)}.tl-title{font-size:14px;font-weight:700}.tl-when{color:var(--muted);margin-left:6px;font-size:12px;font-weight:500}.tl-note{color:var(--text-soft);white-space:pre-wrap;margin-top:3px;font-size:13.5px}.attach{border:1px solid var(--border);color:var(--text-soft);border-radius:10px;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;font-size:13px;display:flex}.spinner{vertical-align:-3px;border:2.5px solid #ffffff73;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}.spinner.dark{border-color:var(--border);border-top-color:var(--primary)}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg, var(--border-soft), #fff, var(--border-soft));background-size:200% 100%;border-radius:10px;height:62px;margin-bottom:10px;animation:1.2s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.fade-in{animation:.22s both fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}}@media (width<=560px){.container{padding:14px}.card{border-radius:14px;padding:15px}.token-value{font-size:22px}}