:root{--color-background-primary:#fff;--color-background-secondary:#f5f5f7;--color-background-tertiary:#fafafa;--color-text-primary:#0c0c10;--color-text-secondary:#6b7280;--color-border-tertiary:#00000014;--color-border-secondary:#00000029;--border-radius-sm:6px;--border-radius-md:8px;--border-radius-lg:12px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;color:var(--color-text-primary);background:#f0f0f3;font-family:Outfit,sans-serif}button{font-family:Outfit,sans-serif}a{color:inherit;text-decoration:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{max-width:1200px;margin:20px auto;padding:0 16px}.wrap{border-radius:var(--border-radius-lg);border:.5px solid var(--color-border-tertiary);background:#fff;min-height:620px;display:flex;position:relative;overflow:hidden}.side{background:#0c0c10;flex-direction:column;flex-shrink:0;width:220px;padding:0;display:flex}.side-brand{border-bottom:.5px solid #ffffff12;padding:1.4rem 1.2rem 1.2rem}.side-brand .logo{color:#fff;letter-spacing:-1px;font-size:20px;font-weight:900}.side-brand .logo em{color:#e53935;font-style:normal}.side-brand .sub{color:#ffffff40;letter-spacing:2.5px;text-transform:uppercase;margin-top:3px;font-size:9px}.side-section{border-bottom:.5px solid #ffffff0d;padding:.9rem 0 .3rem}.side-section-label{color:#fff3;letter-spacing:2px;text-transform:uppercase;padding:0 1.2rem .5rem;font-size:9px}.nav-item{color:#ffffff73;cursor:pointer;text-align:left;background:0 0;border:none;border-left:2px solid #0000;align-items:center;gap:9px;width:100%;padding:.55rem 1.2rem;font-size:12.5px;font-weight:400;transition:all .18s;display:flex}.nav-item i{opacity:.7;font-size:15px}.nav-item:hover{color:#ffffffd9;background:#ffffff0a}.nav-item.active{color:#fff;background:#e539351a;border-left-color:#e53935;font-weight:500}.nav-item.active i{opacity:1}.side-bottom{border-top:.5px solid #ffffff0f;margin-top:auto;padding:1rem 1.2rem}.admin-link{color:#ffffff4d;cursor:pointer;align-items:center;gap:8px;font-size:12px;transition:color .18s;display:flex}.admin-link:hover{color:#ffffffb3}.main{background:var(--color-background-tertiary);flex-direction:column;flex:1;min-width:0;display:flex;overflow-y:auto}.top-bar{background:var(--color-background-primary);border-bottom:.5px solid var(--color-border-tertiary);justify-content:space-between;align-items:center;padding:.9rem 1.5rem;display:flex}.top-bar h1{color:var(--color-text-primary);letter-spacing:-.5px;font-size:20px;font-weight:700}.top-bar .desc{color:var(--color-text-secondary);font-size:12px;font-weight:400}.top-bar-right{align-items:center;gap:6px;display:flex}.status-dot{background:#22c55e;border-radius:50%;width:7px;height:7px}.status-txt{color:var(--color-text-secondary);font-size:11px}.content{flex:1;padding:1.25rem}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;display:grid}.card{background:var(--color-background-primary);border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);cursor:pointer;transition:transform .2s,border-color .2s;overflow:hidden}.card:hover{border-color:var(--color-border-secondary);transform:translateY(-3px)}.card-stripe{height:3px}.s-red{background:#e53935}.s-amber{background:#f59e0b}.s-blue{background:#3b82f6}.s-emerald{background:#10b981}.s-violet{background:#8b5cf6}.card-inner{padding:1.1rem}.card-head{justify-content:space-between;align-items:flex-start;margin-bottom:.85rem;display:flex}.card-title{color:var(--color-text-primary);letter-spacing:-.3px;font-size:15px;font-weight:700;line-height:1.2}.pill{letter-spacing:1px;text-transform:uppercase;white-space:nowrap;border-radius:20px;padding:3px 8px;font-size:9px;font-weight:600}.pill-red{color:#e53935;background:#e539351a}.pill-amber{color:#b45309;background:#f59e0b1a}.pill-blue{color:#1d4ed8;background:#3b82f61a}.pill-emerald{color:#065f46;background:#10b9811a}.pill-violet{color:#5b21b6;background:#8b5cf61a}.feats{flex-direction:column;gap:4px;margin-bottom:1rem;list-style:none;display:flex}.feats li{color:var(--color-text-secondary);align-items:center;gap:6px;font-size:11.5px;display:flex}.feats li i{font-size:13px}.fi-red{color:#e53935}.fi-amber{color:#f59e0b}.fi-blue{color:#3b82f6}.fi-emerald{color:#10b981}.fi-violet{color:#8b5cf6}.card-foot{border-top:.5px solid var(--color-border-tertiary);justify-content:space-between;align-items:center;padding-top:.85rem;display:flex}.price-tag{color:var(--color-text-primary);letter-spacing:-1px;font-size:24px;font-weight:900}.price-tag span{color:var(--color-text-secondary);font-size:12px;font-weight:400}.buy-btn{cursor:pointer;letter-spacing:.3px;color:#fff;border:none;border-radius:8px;align-items:center;gap:5px;padding:7px 14px;font-size:11.5px;font-weight:600;transition:all .18s;display:flex}.b-red{background:#e53935}.b-red:hover{background:#c62828}.b-amber{background:#f59e0b}.b-amber:hover{background:#d97706}.b-blue{background:#3b82f6}.b-blue:hover{background:#2563eb}.b-emerald{background:#10b981}.b-emerald:hover{background:#059669}.b-violet{background:#8b5cf6}.b-violet:hover{background:#7c3aed}.badge-pop{color:#e53935;letter-spacing:1px;text-transform:uppercase;background:#e5393514;border-radius:20px;align-items:center;gap:4px;margin-bottom:.6rem;padding:3px 9px;font-size:9px;font-weight:600;display:inline-flex}.modal-bg{z-index:50;border-radius:var(--border-radius-lg);background:#00000080;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.modal-bg.open{display:flex}.modal{background:var(--color-background-primary);border-radius:var(--border-radius-lg);border:.5px solid var(--color-border-tertiary);width:420px;max-width:95%;max-height:92%;overflow-y:auto}.modal-hd{border-bottom:.5px solid var(--color-border-tertiary);justify-content:space-between;align-items:flex-start;padding:1.25rem 1.25rem 1rem;display:flex}.modal-hd-left h3{letter-spacing:-.3px;font-size:16px;font-weight:700}.modal-hd-left p{color:var(--color-text-secondary);margin-top:2px;font-size:12px}.close-btn{cursor:pointer;color:var(--color-text-secondary);background:0 0;border:none;padding:0;font-size:18px;line-height:1}.modal-body{padding:1.25rem}.plan-chip{background:var(--color-background-secondary);border-radius:var(--border-radius-md);justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 1rem;display:flex}.plan-chip-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;font-size:10px}.plan-chip-name{font-size:14px;font-weight:600}.plan-chip-price{letter-spacing:-1px;font-size:22px;font-weight:900}.field{margin-bottom:.85rem}.field label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;font-size:10px;font-weight:600;display:block}.field input,.field select,.field textarea{border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);background:var(--color-background-secondary);width:100%;color:var(--color-text-primary);outline:none;padding:10px 12px;font-family:Outfit,sans-serif;font-size:13.5px;transition:border .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#e53935}.field textarea{resize:vertical;min-height:60px}.err-txt{color:#e53935;margin-top:3px;font-size:11px}.confirm-btn{border-radius:var(--border-radius-md);color:#fff;cursor:pointer;letter-spacing:.3px;background:#e53935;border:none;justify-content:center;align-items:center;gap:7px;width:100%;padding:13px;font-size:14px;font-weight:700;transition:all .18s;display:flex}.confirm-btn:hover{background:#c62828}.confirm-btn:disabled{opacity:.7;cursor:not-allowed}.secure-note{text-align:center;color:var(--color-text-secondary);justify-content:center;align-items:center;gap:5px;margin-top:.75rem;font-size:10.5px;display:flex}.success-wrap{text-align:center;padding:2rem 1.25rem}.success-wrap i{color:#10b981;margin-bottom:1rem;font-size:44px;display:block}.success-wrap h3{letter-spacing:-.5px;margin-bottom:.4rem;font-size:18px;font-weight:700}.success-wrap p{color:var(--color-text-secondary);font-size:12.5px;line-height:1.6}.admin-shell{background:#f5f5f7;min-height:100vh;display:flex}.admin-side{color:#fff;background:#0c0c10;flex-direction:column;width:240px;padding:1.5rem 0;display:flex}.admin-side .logo{border-bottom:.5px solid #ffffff12;padding:0 1.5rem 1.5rem;font-size:18px;font-weight:900}.admin-side .logo em{color:#e53935;font-style:normal}.admin-side nav{flex:1;padding:1rem 0}.admin-main{flex:1;padding:2rem;overflow-y:auto}.admin-card{border:.5px solid var(--color-border-tertiary);background:#fff;border-radius:12px;margin-bottom:1.25rem;padding:1.5rem}.admin-h1{letter-spacing:-.5px;margin-bottom:1.25rem;font-size:22px;font-weight:700}.admin-h2{justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:16px;font-weight:700;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-family:Outfit,sans-serif;font-size:12px;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{color:#fff;background:#e53935}.btn-primary:hover{background:#c62828}.btn-secondary{color:#0c0c10;background:#f0f0f3}.btn-secondary:hover{background:#e0e0e3}.btn-ghost{color:var(--color-text-secondary);background:0 0}.btn-ghost:hover{color:var(--color-text-primary)}.btn-danger{color:#b91c1c;background:#fee2e2}.btn-danger:hover{background:#fecaca}.btn-sm{padding:5px 10px;font-size:11px}.table{border-collapse:collapse;width:100%;font-size:13px}.table th{text-align:left;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-tertiary);padding:10px 12px;font-size:11px}.table td{border-bottom:.5px solid var(--color-border-tertiary);vertical-align:middle;padding:12px}.table tr:hover td{background:#fafafa}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.tag{text-transform:uppercase;letter-spacing:.5px;border-radius:12px;padding:3px 8px;font-size:10px;font-weight:600;display:inline-block}.tag-active{color:#166534;background:#dcfce7}.tag-inactive{color:#6b7280;background:#f3f4f6}.tag-pending{color:#92400e;background:#fef3c7}.tag-paid{color:#1e40af;background:#dbeafe}.tag-processing{color:#5b21b6;background:#ede9fe}.tag-activated{color:#047857;background:#d1fae5}.tag-completed{color:#166534;background:#dcfce7}.tag-cancelled{color:#b91c1c;background:#fee2e2}.login-shell{background:#0c0c10;justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.login-card{background:#fff;border-radius:12px;width:380px;max-width:100%;padding:2rem}@media (width<=768px){.app-shell{margin:0;padding:0}.wrap{border:none;border-radius:0;flex-direction:column;min-height:100vh}.side{flex-direction:row;width:100%;padding:0;overflow-x:auto}.side-brand{border-bottom:none;border-right:.5px solid #ffffff12;flex-shrink:0;padding:1rem}.side-section{border-bottom:none;flex-direction:row;padding:0;display:flex}.side-section-label{display:none}.nav-item{white-space:nowrap;border-bottom:2px solid #0000;border-left:none;padding:1rem .9rem}.nav-item.active{border-bottom-color:#e53935;border-left:none}.side-bottom{display:none}.grid{grid-template-columns:1fr}.admin-shell{flex-direction:column}.admin-side{flex-direction:row;width:100%;padding:1rem;overflow-x:auto}.admin-side .logo{border-bottom:none;border-right:.5px solid #ffffff12;padding:0 1rem 0 0}.admin-side nav{flex-direction:row;gap:0;padding:0 0 0 1rem;display:flex}.admin-main{padding:1rem}}