#app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);min-height:var(--header-height);padding:0 var(--space-xl);background:var(--bg-header);border-bottom:1px solid var(--border-secondary);box-shadow:0 1px 0 rgba(21,101,192,.15),0 2px 8px rgba(0,0,0,.3);z-index:var(--z-header);flex-shrink:0;position:relative}.app-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,var(--brand-blue) 20%,var(--brand-blue-light) 50%,var(--brand-orange) 80%,transparent 100%);opacity:.5}.header-left{display:flex;align-items:center;gap:var(--space-md)}.header-logo{height:30px;width:auto;filter:drop-shadow(0 0 6px rgba(232, 119, 12, .25))}.header-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:#fff;letter-spacing:-.02em}.header-right{display:flex;align-items:center;gap:var(--space-sm)}.user-info{display:flex;align-items:center;gap:var(--space-sm);padding:5px 12px 5px 5px;border-radius:var(--radius-full);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all var(--transition-fast)}.user-info:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}.user-avatar{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2)}.user-email{font-size:var(--font-size-sm);color:rgba(255,255,255,.7);max-width:150px}.app-main{display:flex;flex:1;overflow:hidden;height:calc(100vh - var(--header-height) - var(--footer-height))}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-min-width);max-width:var(--sidebar-max-width);background:var(--bg-primary);border-right:1px solid var(--border-secondary);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;position:relative}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-secondary);flex-shrink:0}.sidebar-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.sidebar-header-actions{display:flex;align-items:center;gap:var(--space-xs)}.sidebar-content{flex:1;overflow-y:auto;padding:var(--space-sm) 0}.resize-handle{position:absolute;top:0;right:-2px;width:4px;height:100%;cursor:col-resize;z-index:5;transition:background var(--transition-fast)}.resize-handle.active,.resize-handle:hover{background:var(--brand-blue)}.editor-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-tertiary);min-width:0}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--border-secondary);flex-shrink:0;min-height:44px}.editor-file-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.editor-actions{display:flex;align-items:center;gap:var(--space-sm)}.editor-content{flex:1;overflow:hidden;position:relative}.editor-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);text-align:center;gap:var(--space-lg)}.editor-placeholder-icon{font-size:64px;opacity:.15}.editor-placeholder-text{font-size:var(--font-size-md);max-width:300px}.app-footer{display:flex;align-items:center;justify-content:space-between;height:var(--footer-height);min-height:var(--footer-height);padding:0 var(--space-lg);background:var(--bg-primary);border-top:1px solid var(--border-secondary);font-size:var(--font-size-xs);color:var(--text-muted);flex-shrink:0}.status-left{display:flex;align-items:center;gap:var(--space-md)}.status-right{display:flex;align-items:center;gap:var(--space-md)}.save-status{display:flex;align-items:center;gap:var(--space-xs);transition:color var(--transition-fast)}.save-status.saving{color:var(--color-warning)}.save-status.saved{color:var(--color-success)}.save-status.error{color:var(--color-error)}.save-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.login-page{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;background:var(--bg-login)}.login-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);padding:var(--space-3xl);background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);backdrop-filter:blur(20px);box-shadow:var(--shadow-lg);max-width:420px;width:100%;text-align:center;animation:fadeInUp .6s ease}.login-logo{height:64px;width:auto}.login-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--text-primary)}.login-subtitle{font-size:var(--font-size-base);color:var(--text-secondary);line-height:var(--line-height-normal)}.login-btn-google{display:inline-flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);background:#fff;color:#333;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.login-btn-google:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.login-btn-google img{width:20px;height:20px}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}