:root{--color-bg: #f6f7f8;--color-surface: #ffffff;--color-border: #e0e0e0;--color-text: #1d2429;--color-text-muted: #4f5b63;--color-primary: #a1b2af;--color-secondary: #3c5e57;--color-primary-soft: #ccd5d3;--color-primary-faint: #f3f5f5;--color-border-strong: #c9d1d4;--color-error: #f65726;--color-success: #2e7d32}[data-theme=dark]{--color-bg: #0f1316;--color-surface: #12171b;--color-border: rgba(230, 234, 240, .12);--color-text: #e6eaf0;--color-text-muted: #9aa4ae;--color-primary: #9bb7b2;--color-secondary: #5ea395;--color-primary-soft: rgba(155, 183, 178, .28);--color-primary-faint: rgba(155, 183, 178, .14);--color-border-strong: rgba(230, 234, 240, .18);--color-error: #ff8a64;--color-success: #43a047}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:Asap,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:var(--color-bg);color:var(--color-text);min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-secondary);text-decoration:none}a:hover{text-decoration:underline}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background-color:var(--color-bg)}.login-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:48px 40px;max-width:400px;width:100%;box-shadow:0 4px 24px #00000014}.login-logo{display:block;max-height:64px;max-width:200px;margin:0 auto 24px;object-fit:contain}.login-title{font-size:24px;font-weight:600;color:var(--color-text);text-align:center;margin:0 0 8px}.login-subtitle{font-size:14px;color:var(--color-text-muted);text-align:center;margin:0 0 24px}.login-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:14px;font-weight:500;color:var(--color-text)}.form-group input{padding:12px 14px;font-size:16px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-surface);color:var(--color-text);transition:border-color .2s,box-shadow .2s}.form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.error-message{background-color:#f657261a;border:1px solid var(--color-error);color:var(--color-error);padding:12px;border-radius:8px;font-size:14px}.login-button{padding:14px 20px;font-size:16px;font-weight:600;color:#fff;background-color:var(--color-secondary);border:none;border-radius:8px;cursor:pointer;transition:background-color .2s,transform .1s;margin-top:8px}.login-button:hover:not(:disabled){background-color:var(--color-primary)}.login-button:active:not(:disabled){transform:scale(.98)}.login-button:disabled{opacity:.6;cursor:not-allowed}.mfa-secret{background-color:var(--color-primary-faint);border:1px solid var(--color-border);border-radius:8px;padding:12px;text-align:center;margin-bottom:8px}.mfa-secret code{font-family:monospace;font-size:12px;word-break:break-all;color:var(--color-text)}.portal-container{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-bg)}.portal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background-color:var(--color-surface);border-bottom:1px solid var(--color-border)}.portal-header-left{display:flex;align-items:center;gap:16px}.portal-logo{height:40px;max-width:160px;object-fit:contain}.portal-title{font-size:20px;font-weight:600;color:var(--color-text);margin:0}.logout-button{padding:8px 16px;font-size:14px;font-weight:500;color:var(--color-text);background-color:transparent;border:1px solid var(--color-border);border-radius:8px;cursor:pointer;transition:background-color .2s,border-color .2s}.logout-button:hover{background-color:var(--color-primary-faint);border-color:var(--color-primary)}.portal-main{flex:1;padding:32px 24px;max-width:1200px;margin:0 auto;width:100%}.portal-loading{text-align:center;padding:48px;color:var(--color-text-muted);font-size:16px}.portal-error{background-color:#f657261a;border:1px solid var(--color-error);color:var(--color-error);padding:16px;border-radius:8px;text-align:center}.portal-empty{text-align:center;padding:64px 24px}.portal-empty h2{font-size:24px;font-weight:600;color:var(--color-text);margin:0 0 8px}.portal-empty p{font-size:16px;color:var(--color-text-muted);margin:0}.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.app-card{--app-card-padding: 20px;--app-card-gap: 16px;--app-card-direction: row;--app-card-align: center;--app-icon-size: 56px;--app-icon-radius: 14px;--app-icon-font-size: 22px;--app-name-font-size: 16px;display:flex;flex-direction:var(--app-card-direction);align-items:var(--app-card-align);gap:var(--app-card-gap);padding:var(--app-card-padding);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;text-decoration:none;transition:border-color .2s,box-shadow .2s}.apps-grid-variant-large .app-card{--app-card-padding: 22px;--app-icon-size: 80px;--app-icon-radius: 18px;--app-icon-font-size: 28px;--app-name-font-size: 18px}.apps-grid-variant-stacked .app-card{--app-card-direction: column;--app-card-align: center;--app-card-gap: 12px;--app-card-padding: 22px;--app-icon-size: 96px;--app-icon-radius: 22px;--app-icon-font-size: 34px;--app-name-font-size: 18px}.app-card:hover{border-color:var(--color-primary);box-shadow:0 4px 16px #00000014}.app-card-disabled{opacity:.6;pointer-events:none}.app-icon{width:var(--app-icon-size);height:var(--app-icon-size);display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-soft);color:var(--color-secondary);font-size:var(--app-icon-font-size);font-weight:600;border-radius:var(--app-icon-radius);flex-shrink:0}.app-icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit}.app-info{flex:1;min-width:0}.apps-grid-variant-stacked .app-info{text-align:center}.app-name{font-size:var(--app-name-font-size);font-weight:600;color:var(--color-text);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apps-grid-variant-stacked .app-name{overflow:visible;text-overflow:initial;white-space:normal}.app-status{display:inline-block;font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;text-transform:uppercase}.app-status-active,.app-status-ready{background-color:#2e7d321a;color:var(--color-success)}.app-status-pending,.app-status-deploying{background-color:#f0b42926;color:#b8860b}.app-status-error,.app-status-failed{background-color:#f657261a;color:var(--color-error)}