:root { --tvk-font-en:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --tvk-font-ta:'Noto Sans Tamil','Latha',system-ui,sans-serif;  --tvk-text-xs:.75rem; --tvk-text-sm:.875rem; --tvk-text-md:.9375rem; --tvk-text-base:1rem; --tvk-text-lg:1.125rem; --tvk-text-xl:1.25rem; --tvk-text-2xl:1.5rem;  --tvk-line-tight:1.2; --tvk-line-normal:1.5;  --brand-red:#D32F2F; --brand-gold:#F9A825; --brand-red-hover:#B71C1C; --brand-gold-hover:#F57F17;  --ink:#111827; --muted:#6B7280; --bg:#FAFAFA; --card:#FFFFFF; --border:#E5E7EB; --gray-50:#FAFAFA; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB;  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.08);  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;  --transition:.25s ease; --nav-height:60px; --tabs-height:52px; --top-nav-height: 90px; --bottom-nav-height: 90px; --toolbar-height: auto; } html,body {height:100%;margin:0;padding:0;} body {font-family:var(--tvk-font-ta),var(--tvk-font-en);font-size:var(--tvk-text-base);line-height:var(--tvk-line-normal);background:#f5f7fb;color:var(--ink);width:100%;display:flex;flex-direction:column;} .ta-text {font-family:var(--tvk-font-ta),var(--tvk-font-en);}  h1,.h1 {font-size:var(--tvk-text-2xl);font-weight:600;line-height:var(--tvk-line-tight);margin-bottom:.75rem;} h2,.h2 {font-size:var(--tvk-text-xl);font-weight:600;line-height:var(--tvk-line-tight);margin-bottom:.5rem;} h3,.h3 {font-size:var(--tvk-text-lg);font-weight:500;line-height:var(--tvk-line-tight);margin-bottom:.5rem;} .tvk-label {font-size:var(--tvk-text-sm);font-weight:500;} .tvk-muted {font-size:var(--tvk-text-sm);color:var(--muted);}  .tvk-card {border-radius:.75rem;border:1px solid var(--gray-200);background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.04);} .tvk-card-header {padding:.9rem 1.25rem;border-bottom:1px solid var(--gray-200);} .tvk-card-body {padding:1.25rem;}  #tvk-spa-content {width:100%;min-height:100dvh;display:flex;flex-direction:column;} .page {width:100%;max-width:480px;margin:0 auto;padding:0 1px;} .wrap {width:100%;flex:1;display:flex;flex-direction:column;align-items:stretch;padding-bottom:24px;}  .hero {position:relative;width:100%;max-width:480px;aspect-ratio:3/2;overflow:hidden;background:#eee;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);box-shadow:var(--shadow);} .hero img {width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;animation:fadeIn .6s ease;} .hero::after {content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15) 20%,rgba(0,0,0,.45) 100%);} .badge {position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(211,47,47,.85),rgba(249,168,37,.85));color:#fff;padding:8px 12px;border-radius:999px;font-weight:600;font-size:12px;box-shadow:var(--shadow);backdrop-filter:blur(6px);} .badge .dot {width:8px;height:8px;border-radius:999px;background:#fff;} .hero:hover .badge {transform:translateY(-2px);} @keyframes fadeIn {from{opacity:.2;scale:1.05;}to{opacity:1;scale:1;}}  .card-panel {width:100%;max-width:480px;margin-top:2px;background:var(--card);border-radius:calc(var(--radius) + 6px);padding:18px;box-shadow:var(--shadow);} .card-title {font-size:1.25rem;font-weight:700;color:var(--ink);margin:0 0 6px;} .card-subtitle {font-size:var(--tvk-text-md);color:var(--muted);margin:0 0 14px;line-height:1.4;}  .form-row {display:flex;gap:5px;align-items:center;} .country {flex:0 0 96px;} .country select {width:100%;height:43px;border:1px solid var(--muted);border-radius:12px;padding:0 10px;font-weight:600;background:#fff;outline:none;} .input {flex:1;} .input input {width:100%;height:43px;border:1px solid var(--muted);border-radius:12px;padding:0 14px;font-size:16px;outline:none;transition:border .2s;} .input input:focus {border-color:var(--brand-red);} .helper {font-size:var(--tvk-text-sm);color:var(--muted);margin-top:8px;}  .actions {margin-top:14px;display:grid;gap:10px;} .btn {height:42px;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .05s ease;} .btn.primary {background:linear-gradient(135deg,var(--brand-red),var(--brand-gold));color:#fff;} .btn.ghost {background:#fff;border:1px solid var(--gray-200);} .btn:active {transform:translateY(1px);}  .otp-group {display:flex;gap:10px;justify-content:center;margin-top:12px;} .otp-input {width:42px;height:48px;text-align:center;font-size:20px;border:1px solid var(--gray-200);border-radius:12px;outline:none;transition:border .2s;} .otp-input:focus {border-color:var(--brand-red);} .tos a {color:var(--brand-red);text-decoration:none;}  .foot {margin:var(--space-2) 0 var(--space-5);text-align:center;color:var(--muted);font-size:var(--tvk-text-sm);line-height:1.4;}  #toast {position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(17,24,39,.92);color:#fff;padding:12px 18px;border-radius:14px;font-size:var(--tvk-text-sm);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:9999;max-width:calc(100% - 40px);text-align:center;} #toast.show {opacity:1;transform:translateX(-50%) translateY(-4px);}  .blowrapper {text-align:right;display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:10px;} .blo-line {font-size:15px;line-height:1.1;color:#fff;display:flex;justify-content:flex-end;align-items:center;gap:2px;} .blo-line .lbl {font-weight:600;opacity:0.95;} .blo-line .val {font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}  .bottom-nav-wrapper {display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0;width:100%;padding:0;background-color:#fff;z-index:999;} .bottom-nav {display:flex;justify-content:space-around;align-items:center;width:100%;padding:2px 0!important;border-top:1px solid #666!important;box-sizing:border-box;} .bottom-nav a {flex:1;text-align:center;padding:2px 0!important;} .bottom-nav .nav-link {color:black!important;font-size:14px;text-align:center;line-height:0.9;} .bottom-nav .nav-link i {font-size:24px;display:block;margin-bottom:-4px!important;line-height:1;} .bottom-nav .nav-link.active {color:red!important;} .bottom-nav .nav-link:hover {color:#000;}  #offcanvasSidebar {width:300px;} .sidebar-header {display:flex;align-items:center;padding:15px;border-bottom:1px solid #ddd;justify-content:start;} .sidebar-header img {width:50px;height:50px;border-radius:50%;margin-right:10px;} .sidebar-header h5 {margin-bottom:0;} .sidebar-list {list-style:none;padding-left:0;} .sidebar-list li {padding:10px 15px;border-bottom:1px solid #ddd;} .sidebar-list li a {text-decoration:none;color:black;display:flex;align-items:center;} .sidebar-list li a i {margin-right:10px;} .sidebar-list li a .chevron-right {margin-left:auto;} .sidebar-list li a:hover {background-color:#f8f9fa;} .contact-section {padding:15px;font-size:14px;} .contact-section p {margin-bottom:5px;} .contact-section b {display:block;margin-top:10px;}  #loadingOverlay {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.8);z-index:9999;display:flex;justify-content:center;align-items:center;}  @media (min-width:768px) {#tvk-spa-content{max-width:480px;margin:0 auto;}} @media (min-width:768px) {.navbar-center-wrapper{max-width:480px;margin:0 auto;}.bottom-nav-wrapper{max-width:480px;margin:0 auto;}} @media (max-width:480px) {.blowrapper{width:170px;padding:5px 6px;}.blo-line{font-size:14px;}.blo-line .val{max-width:100px;}}  .tvk-tabs-wrapper {position:sticky;top:65px;z-index:1030;background:#fff;border-top:1px;border-bottom:1px solid #dee2e6;} .tvk-tabs {display:flex;gap:8px;padding:2px 12px;overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;} .tvk-tabs .nav-link {flex:0 0 auto;display:inline-flex;align-items:center;padding:8px 10px;border-radius:8px;white-space:nowrap;} .tvk-tabs .nav-link.active {background:#0d6efd;color:#fff;box-shadow:0 2px 6px rgba(13,110,253,.12);} .tvk-tabs::-webkit-scrollbar {display:none;}  .tvk-search-wrapper {position:sticky;top:calc(var(--nav-height) + 48px);z-index:1029;background:#fff;padding:.2rem;border-bottom:1px solid #eee;display:flex;gap:.5rem;align-items:center;} .tvk-search-wrapper .input-group {flex:1 1 auto;max-width:calc(100% - 56px);} .tvk-search-wrapper .dropdown {flex:0 0 auto;}  .dropdown-menu {background:#f8f9fa!important;border:1px solid #dee2e6;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);} .dropdown-item {border-bottom:1px solid #e9ecef;} .dropdown-item:last-child {border-bottom:none;} .dropdown-item:hover {background:#e2e6ea;border-radius:8px;} .dropdown .dropdown-menu {z-index:2000!important;}  .navbar-center-wrapper,.navbar {overflow:visible;z-index:1055;} .offcanvas {z-index:3000!important;}  .voter-card {position:relative;margin:8px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);overflow:hidden;transition:transform .1s ease,box-shadow .2s ease;box-sizing:border-box;max-width:calc(100% - 16px);} .voter-card:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);} .voter-accent {position:absolute;top:0;left:0;width:5px;height:100%;border-radius:5px 0 0 5px;} .voter-card.member .voter-accent {background:linear-gradient(180deg,#4ade80,#16a34a);} .voter-card.voter .voter-accent {background:linear-gradient(180deg,#fca5a5,#ef4444);} .voter-body {padding:6px 7px 5px 10px;display:flex;align-items:center;gap:12px;}  .voter-photo {flex:0 0 80px;width:80px;height:90px;position:relative;overflow:visible;} .voter-img {width:100%;height:100%;object-fit:cover;border-radius:10px;border:2px solid #ddd;display:block;} .mobile-diagonal-badge {position:absolute;top:6px;left:-22px;background:#D32F2F;color:#fff;font-size:10px;font-weight:600;padding:2px 25px;transform:rotate(-45deg);z-index:20;line-height:12px;pointer-events:none;border-radius:2px;} .sir-diagonal-badge {position:absolute;bottom:6px;right:-10px;background:#2E7D32;color:#fff;font-size:10px;font-weight:600;padding:2px 8px;transform:rotate(-90deg);transform-origin:center;z-index:20;line-height:12px;pointer-events:none;border-radius:2px;}  .voter-info {flex:1 1 auto;min-width:0;line-height:1.1;} .voter-header {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;} .voter-name {font-weight:600;font-size:15px;color:#111;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .voter-card .badge-pill {font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;text-transform:uppercase;flex:0 0 auto;white-space:nowrap;} .voter-card.member .badge-pill {background:#16a34a;color:#fff;height:19px;line-height:19px;display:inline-block;padding:0 10px;border-radius:12px;} .voter-card.voter .badge-pill {background:#dc2626;color:#fff;height:19px;line-height:19px;display:inline-block;padding:0 10px;border-radius:12px;}  .voter-subtext {display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#6b7280;margin-bottom:4px;} .voter-subtext .left {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .voter-subtext .right {font-weight:600;background:linear-gradient(135deg,#f97316,#ea580c);padding:2px 8px;border-radius:8px;font-size:12px;color:#fff;} .voter-meta {font-size:12.5px;color:#6b7280;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px;}  .door-badge {display:inline-flex;align-items:center;height:19px;line-height:19px;gap:4px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border-radius:999px;padding:2px 8px;font-weight:600;font-size:11.5px;box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.05);} .door-badge i {font-size:13px;color:#000!important;}  .street-badge {font-weight:600;background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;padding:2px 8px;border-radius:8px;font-size:12px;white-space:nowrap;}  .badge-dropdown { position: absolute; min-width: 160px; background: #fff9e6; border: 1px solid #ddd; box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius: 6px; z-index: 99999; padding: 6px 0; font-size: 14px; } .badge-dropdown .dropdown-item { display: block; padding: 8px 12px; font-weight: 700; color: #333; cursor: pointer; } .badge-dropdown .dropdown-item:hover { background: #f5f5f5; }  .voter-sheet.offcanvas-bottom{height:auto;max-height:92vh;border-top-left-radius:16px;border-top-right-radius:16px} .voter-sheet .offcanvas-body{padding:0} @media(max-width:991px){.voter-sheet.offcanvas-bottom{width:100vw;left:0;right:0;border-radius:16px 16px 0 0}} #voterSheetContent .voter-detail{padding:12px 16px;display:flex;gap:12px;align-items:flex-start} #voterSheetContent .voter-avatar{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#f3f4f6} #voterSheetContent .voter-info h5{margin:0;font-size:16px;font-weight:700} #voterSheetContent .voter-info .muted{color:#6b7280;font-size:13px;margin-top:6px} #voterSheetContent .voter-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap} .voter-action-btn{border-radius:12px;padding:8px 12px;font-weight:600}  #voterSheetTitle { font-size: 16px; font-weight: 700; color: #111827; } .voter-sheet-header { width: 100%; padding: 10px 14px; border-top-left-radius: 16px; border-top-right-radius: 16px; background: linear-gradient(135deg, #FFC107, #D32F2F); color: #fff; text-align: center; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); } .voter-sheet-header h6 { font-size: 15.5px; font-weight: 700; margin: 4px 0; color: #fff; } .voter-sheet-header .btn-close { position: absolute; right: 12px; top: 5px; filter: brightness(0) invert(1); opacity: 0.9; width: 26px; height: 26px; } .voter-sheet-header .btn-close:active { transform: scale(0.90); } @media (max-width: 480px) { .voter-sheet-header { padding: 10px 12px; } .voter-sheet-header h6 { font-size: 15px; } .voter-sheet-header .btn-close { right: 10px; top: 10px; width: 24px; height: 24px; } } #otpInputs .otp-box { width: 42px; height: 42px; font-size: 18px; padding: .25rem; } @media (max-width:420px) { #otpInputs .otp-box { width: 36px; height: 36px; font-size: 16px; } } .otp-input-lg { height: 45px; font-size: 14px; } .otp-btn-lg { height: 45px; white-space: nowrap; font-size: 14px; } .otp-box { width: 45px; height: 45px; font-size: 20px; text-align: center; border: 1px solid #ccc; border-radius: 6px; } .flex-gap { gap: .5rem !important; } .card-minimal { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .card-header-minimal { background: linear-gradient(90deg, #e5e5e5 0%, #bfbfbf 100%); font-weight: 600; font-size: 1.00rem; display: flex; justify-content: space-between; align-items: center; } .card-minimal.dropdown-open { overflow: visible !important; } .header-title { flex: 1; text-align: center; } .dropdown-toggle.no-caret::after { display: none; } .form-select { min-height: 44px; } .form-select { border-radius: 10px; } .select-row { gap: .75rem; margin-bottom: .6rem; } .tvk-map-spa { height: calc(100vh - var(--top-nav-height) - var(--bottom-nav-height)); display: flex; flex-direction: column; margin: 0; padding: 0; min-height: 300px; }  .tvk-map-inner { flex: 1 1 auto; position: relative; min-height: 200px;  }  .tvk-map-toolbar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: #fff; box-shadow: 0 -1px 6px rgba(0,0,0,0.08); font-size: 14px; } .toolbar-row { display: flex; align-items: center; gap: 10px; }  .toolbar-row--address { justify-content: space-between; } .address-left { flex: 0 0 auto; white-space: nowrap; margin-right: 12px; } .address-right { flex: 1 1 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; font-size: 13px; } .tvk-toast { position: fixed; right: 16px; bottom: calc(var(--bottom-nav-height) + 16px);  background: rgba(0,0,0,0.8); color: #fff; padding: 10px 14px; border-radius: 6px; z-index: 9999; } .voter-accent.event-past { background-color: #dc3545;  } .voter-accent.event-ongoing { background-color: #fd7e14;  } .voter-accent.event-future { background-color: #198754;  }  .event-date-tile { width: 64px; height: 64px; border-radius: 12px; border: 1px solid #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; line-height: 1.1; } .event-month { font-size: 0.75rem; text-transform: uppercase; } .event-day { font-size: 1.4rem; }