:root{--md-sys-color-primary: #6750A4;--md-sys-color-on-primary: #FFFFFF;--md-sys-color-primary-container: #EADDFF;--md-sys-color-on-primary-container: #21005D;--md-sys-color-surface: #FEF7FF;--md-sys-color-surface-variant: #E7E0EC;--md-sys-color-on-surface: #1C1B1F;--md-sys-color-on-surface-variant: #49454F;--md-sys-color-outline: #79747E;--md-sys-color-error: #B3261E;--md-sys-color-success: #386A20;--md-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);--md-elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);font-family:Noto Sans SC,system-ui,sans-serif;color-scheme:light}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);min-height:100vh}.app-bar{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--md-elevation-2)}.app-bar h1{font-size:18px;font-weight:500}.app-bar .spacer{flex:1}.app-bar button{background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--md-sys-color-on-primary);border-radius:16px;padding:4px 12px;cursor:pointer;font-size:13px;font-family:inherit;transition:background .2s}.app-bar button:hover{background:#ffffff26}.main-content{max-width:1200px;margin:0 auto;padding:12px}.group-title{font-size:12px;font-weight:500;color:var(--md-sys-color-primary);letter-spacing:.5px;text-transform:uppercase;margin:12px 0 8px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.card{background:var(--md-sys-color-surface);border-radius:10px;padding:12px 14px;box-shadow:var(--md-elevation-1);border:1px solid var(--md-sys-color-surface-variant);transition:box-shadow .2s}.card:hover{box-shadow:var(--md-elevation-2)}.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.card-title-wrap{display:flex;flex-direction:row;align-items:center;gap:6px}.card-title{font-size:14px;font-weight:500;color:var(--md-sys-color-on-surface)}.card-source{font-size:10px;font-weight:500;color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);padding:1px 6px;border-radius:6px;letter-spacing:.3px}.card-source.vps{color:#1565c0;background:#e3f2fd}.card-status{font-size:11px;padding:1px 8px;border-radius:10px;font-weight:500}.card-status.active{background:#d9ead3;color:var(--md-sys-color-success)}.card-status.inactive{background:#fad2ce;color:var(--md-sys-color-error)}.progress-section{margin-bottom:8px}.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--md-sys-color-on-surface-variant);margin-bottom:4px}.progress-bar{height:6px;border-radius:3px;background:var(--md-sys-color-surface-variant);overflow:hidden}.progress-fill{height:100%;border-radius:3px;background:var(--md-sys-color-primary);transition:width .4s ease}.progress-fill.warn{background:#b45309}.progress-fill.danger{background:var(--md-sys-color-error)}.progress-fill.expiry{background:#7c3aed}.progress-fill.expiry.warn{background:#b45309}.progress-fill.expiry.danger{background:var(--md-sys-color-error)}.progress-sublabel{font-size:10px;color:var(--md-sys-color-on-surface-variant);margin-top:2px}.traffic-details{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.traffic-item{background:var(--md-sys-color-surface-variant);border-radius:6px;padding:5px 8px}.traffic-item-label{font-size:10px;color:var(--md-sys-color-on-surface-variant);margin-bottom:1px}.traffic-item-value{font-size:13px;font-weight:500;color:var(--md-sys-color-on-surface)}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:24px}.login-card{background:var(--md-sys-color-surface);border-radius:28px;padding:40px 48px;box-shadow:var(--md-elevation-2);text-align:center;min-width:320px}.login-card h2{font-size:24px;font-weight:700;color:var(--md-sys-color-primary);margin-bottom:8px}.login-card p{color:var(--md-sys-color-on-surface-variant);font-size:14px;margin-bottom:32px}.btn-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;border-radius:20px;padding:12px 32px;font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;width:100%;transition:opacity .2s}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.5;cursor:default}.login-error{color:var(--md-sys-color-error);font-size:13px;margin-top:12px}.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--md-sys-color-on-surface-variant);font-size:15px}.spinner{width:20px;height:20px;border:3px solid var(--md-sys-color-surface-variant);border-top-color:var(--md-sys-color-primary);border-radius:50%;animation:spin .8s linear infinite;margin-right:10px}@keyframes spin{to{transform:rotate(360deg)}}.updated-at{font-size:11px;color:var(--md-sys-color-on-surface-variant);margin-top:12px;text-align:right}