:root{--z-background: 0;--z-content: 10;--z-controls: 20;--z-navigation: 30;--z-overlay: 40;--z-modal: 50;--z-dropdown: 60}.layout-background{z-index:var(--z-background)}.layout-content{z-index:var(--z-content)}.layout-controls{z-index:var(--z-controls)}.layout-navigation{z-index:var(--z-navigation)}.layout-overlay{z-index:var(--z-overlay)}.layout-modal{z-index:var(--z-modal)}.layout-dropdown{z-index:var(--z-dropdown)}:root{--header-height: 8rem;--controls-height: 7rem;--tab-height: 4rem;--content-padding: 1rem;--content-gap: .5rem;--content-height: calc(100vh - var(--header-height) - var(--controls-height) - var(--tab-height));--mobile-header-height: 6rem;--mobile-controls-height: 7rem;--mobile-tab-height: 4rem;--mobile-content-padding: .75rem}@media (max-width: 768px){:root{--header-height: var(--mobile-header-height);--controls-height: var(--mobile-controls-height);--tab-height: var(--mobile-tab-height);--content-padding: var(--mobile-content-padding);--content-height: calc(100vh - var(--mobile-header-height) - var(--mobile-controls-height) - var(--mobile-tab-height))}}@media (min-width: 768px){:root{--tab-height: 5rem;--controls-height: 8rem}}@media (min-width: 1024px){:root{--header-height: 10rem;--content-padding: 2rem;--content-height: calc(100vh - var(--header-height) - var(--controls-height) - var(--tab-height))}}.header-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0;position:relative}.user-badge{display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:700;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;transition:all .2s ease}.user-badge.clickable{cursor:pointer}.user-badge.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.user-badge.clickable.active{box-shadow:0 4px 8px #00000026}.dropdown-arrow{font-size:.6rem;margin-left:.25rem;transition:transform .2s ease}.settings-icon-btn{padding:.5rem;border-radius:.375rem;color:#4b5563;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.settings-icon-btn:hover{background:#3b82f633;border-color:#3b82f680;color:#2563eb;transform:translateY(-1px) scale(1.05);box-shadow:0 4px 6px #3b82f633}.user-menu-dropdown{position:absolute;top:100%;right:0;z-index:50;margin-top:.5rem;min-width:300px;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 10px 15px #0000001a;overflow:hidden}.user-info-section{padding:.5rem 0}.user-menu-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #f3f4f6;font-size:.875rem}.user-menu-item:last-child{border-bottom:none}.user-menu-label{font-weight:600;color:#374151;min-width:80px}.user-menu-value{color:#6b7280;text-align:right;max-width:180px;word-break:break-all}.subscription-section{border-top:2px solid #f3f4f6;background:#fafafa}.section-header{padding:.75rem 1rem .5rem;font-weight:700;font-size:.75rem;color:#4b5563;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb;border-bottom:1px solid #e5e7eb}.plan-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}.badge-demo{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.badge-standard{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.badge-premium{background:#ede9fe;color:#7c3aed;border:1px solid #c4b5fd}.badge-special{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;border:none}.badge-default{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.user-menu-item.error{background-color:#fef2f2;border-left:3px solid #dc2626}.error-state{padding:1rem}.error-message{font-size:.875rem;color:#dc2626;text-align:center}.retry-button{padding:.5rem 1rem;font-size:.875rem;background:#3b82f6;color:#fff;border:none;border-radius:.375rem;cursor:pointer;transition:background .2s}.retry-button:hover{background:#2563eb}.loading-state{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem}.spinner{width:1.5rem;height:1.5rem;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.user-menu-actions{border-top:2px solid #f3f4f6;padding:.5rem}.logout-button{width:100%;padding:.75rem 1rem;font-size:.875rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border:none;border-radius:.375rem;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:linear-gradient(135deg,#b91c1c,#991b1b);transform:translateY(-1px)}.demo-usage-indicator{display:flex;align-items:center;gap:.25rem;padding:.375rem .5rem;border-radius:.375rem;cursor:pointer;color:#fff;font-size:.75rem;font-weight:500;transition:opacity .2s}.demo-usage-indicator:hover{opacity:.9}.demo-usage-indicator.warning{background:#eab308}.demo-usage-indicator.critical{background:#ef4444}.auth-buttons{display:flex;align-items:center;gap:.25rem}.login-menu-btn{width:100%;padding:.75rem 1rem;margin-top:.5rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;font-weight:600;font-size:.875rem;cursor:pointer;border-radius:.375rem;transition:all .2s ease}.login-menu-btn:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px)}.fade-enter-active[data-v-2fd81a1f],.fade-leave-active[data-v-2fd81a1f]{transition:opacity .2s ease}.fade-enter-from[data-v-2fd81a1f],.fade-leave-to[data-v-2fd81a1f]{opacity:0}[data-v-e183e058]:root{--vh: 1vh}.app-container[data-v-e183e058]{height:calc(100vh - 6rem);height:100dvh;height:calc(var(--vh) * 100);overflow:hidden}