.layout-container{height:100vh}.el-aside{background:var(--c-surface-1);border-right:1px solid var(--c-border-1)}.logo{height:60px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--c-border-1);color:var(--c-brand);letter-spacing:.3px}.el-menu-vertical{border-right:none}.header{background:var(--c-surface-1);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--c-border-1);box-shadow:var(--shadow-1)}.header-right{display:flex;align-items:center;gap:var(--space-4)}.recharge-button{padding:8px 14px}.notification-badge{margin-top:4px}.alert-item{padding:var(--space-3);border-bottom:1px solid var(--c-border-1);cursor:pointer;transition:background-color .2s ease,transform .2s ease}.alert-item:hover{background:var(--c-surface-2)}.alert-item:last-child{border-bottom:none}.alert-title{font-weight:700;color:color-mix(in oklch,var(--c-danger) 92%,var(--c-text-1));margin-bottom:var(--space-2)}.alert-desc{font-size:12px;color:var(--c-text-2)}.no-alerts{text-align:center;color:var(--c-text-3);padding:var(--space-6) 0}.user-name{font-size:var(--font-size-md);color:var(--c-text-2)}.el-main{padding:var(--space-5)}.membership-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.membership-plan-card{border:1px solid var(--c-border-1);border-radius:var(--radius-sm);padding:14px;background:var(--c-surface-1)}.membership-plan-name{font-size:var(--font-size-md);font-weight:600;color:var(--c-text-1)}.membership-plan-price{margin-top:8px;font-size:30px;font-weight:700;color:var(--c-brand);line-height:1}.membership-plan-currency{font-size:18px;margin-right:2px}.membership-plan-unit{font-size:var(--font-size-sm);color:var(--c-text-2);margin-left:4px;font-weight:500}.membership-plan-divider{margin:12px 0;border-top:1px solid var(--c-border-1)}.membership-plan-features{list-style:none;margin:0;padding:0;display:grid;gap:10px}.membership-plan-feature-blank{height:16px;border-radius:4px;border:1px dashed var(--c-border-1);background:var(--c-surface-2)}:root{--h-brand: 257;--c-surface-0: oklch(.985 .004 var(--h-brand));--c-surface-1: oklch(.995 .002 var(--h-brand));--c-surface-2: oklch(.975 .006 var(--h-brand));--c-text-1: oklch(.27 .02 var(--h-brand));--c-text-2: oklch(.45 .02 var(--h-brand));--c-text-3: oklch(.62 .02 var(--h-brand));--c-border-1: oklch(.9 .01 var(--h-brand));--c-border-2: oklch(.86 .012 var(--h-brand));--c-brand: oklch(.63 .19 var(--h-brand));--c-brand-2: oklch(.58 .2 calc(var(--h-brand) - 8));--c-brand-soft: oklch(.92 .05 var(--h-brand));--c-danger: oklch(.63 .23 25);--c-warning: oklch(.76 .17 75);--c-success: oklch(.73 .17 150);--radius-xs: 6px;--radius-sm: 8px;--radius-md: 10px;--shadow-1: 0 1px 1px oklch(.2 .02 var(--h-brand) / .04), 0 6px 24px oklch(.2 .02 var(--h-brand) / .06);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--font-size-2xl: 24px;--line-sm: 1.25;--line-md: 1.45;--el-color-primary: var(--c-brand);--el-color-primary-light-3: color-mix(in oklch, var(--c-brand) 70%, white);--el-color-primary-light-5: color-mix(in oklch, var(--c-brand) 55%, white);--el-color-primary-light-7: color-mix(in oklch, var(--c-brand) 35%, white);--el-color-primary-light-8: color-mix(in oklch, var(--c-brand) 25%, white);--el-color-primary-light-9: color-mix(in oklch, var(--c-brand) 14%, white);--el-color-primary-dark-2: color-mix(in oklch, var(--c-brand) 82%, black);--el-color-success: var(--c-success);--el-color-warning: var(--c-warning);--el-color-danger: var(--c-danger);--el-bg-color: var(--c-surface-1);--el-bg-color-page: var(--c-surface-0);--el-border-color: var(--c-border-1);--el-border-color-light: var(--c-border-1);--el-border-color-lighter: var(--c-border-1);--el-border-color-extra-light: var(--c-border-1);--el-text-color-primary: var(--c-text-1);--el-text-color-regular: var(--c-text-2);--el-text-color-secondary: var(--c-text-3);--el-text-color-placeholder: color-mix(in oklch, var(--c-text-3) 75%, white);--el-border-radius-base: var(--radius-xs);--el-border-radius-small: var(--radius-xs);--el-font-size-base: var(--font-size-md)}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";background:var(--c-surface-0);color:var(--c-text-1)}*{box-sizing:border-box}.page-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--c-border-1);background:var(--c-surface-1)}.page-title{margin:0;font-size:var(--font-size-lg);font-weight:650;color:var(--c-text-1);letter-spacing:.2px}.search-section{padding:var(--space-5);border-bottom:1px solid var(--c-border-1);background:var(--c-surface-1)}.table-section{padding:var(--space-5);background:var(--c-surface-1)}.pagination-section{padding:var(--space-4) var(--space-5);display:flex;justify-content:center;border-top:1px solid var(--c-border-1);background:var(--c-surface-1)}.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{background:var(--c-surface-2)!important}.el-card{border-radius:var(--radius-sm);border-color:var(--c-border-1)}:focus-visible{outline:2px solid color-mix(in oklch,var(--c-brand) 70%,white);outline-offset:2px}
