:root{--primary: #9333ea;--primary-strong: #7c3aed;--primary-soft: rgba(147, 51, 234, .12);--accent: #c084fc;--danger: #ef4444;--warning: #f59e0b;--success: #34d399;--html: #e11d48;--css: #2563eb;--js: #ca8a04;--bg: #faf5ff;--surface: rgba(255, 255, 255, .9);--surface-strong: #ffffff;--surface-muted: #f3e8ff;--line: #e9d5ff;--text: #111827;--text-muted: #64748b;--text-soft: #94a3b8;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow-md: 0 14px 35px rgba(15, 23, 42, .1);--shadow-lg: 0 28px 65px rgba(15, 23, 42, .18);--radius-lg: 14px;--radius-md: 10px;--radius-sm: 8px;--speed: .18s ease}body[data-theme=dark]{--primary: #60a5fa;--primary-strong: #3b82f6;--primary-soft: rgba(96, 165, 250, .16);--accent: #2dd4bf;--danger: #fb7185;--warning: #fbbf24;--bg: #0f172a;--surface: rgba(30, 41, 59, .84);--surface-strong: #1e293b;--surface-muted: #162033;--line: #334155;--text: #f8fafc;--text-muted: #cbd5e1;--text-soft: #94a3b8;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);--shadow-md: 0 16px 42px rgba(0, 0, 0, .32);--shadow-lg: 0 30px 80px rgba(0, 0, 0, .48)}body{color:var(--text);background:linear-gradient(180deg,#faf5ff,#f3e8ff)}.app-shell{min-height:100vh}.main-content{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0}.login-wrapper{width:100%;min-height:100vh;display:flex}.login-card{width:100%;max-width:520px;display:flex;align-items:center;justify-content:center;padding:48px 24px;background:#fff}.login-card-content{width:100%;max-width:440px;padding:56px 48px;background:#fff;border-radius:24px;box-shadow:0 25px 50px -12px #9333ea26}.logged-card{width:100%;padding:48px 40px;background:#fff;border-radius:20px;box-shadow:0 8px 32px #9333ea26;text-align:center}.card-header{text-align:center;margin-bottom:32px}.card-header .avatar-wrapper{width:56px;height:56px;margin:0 auto 16px}.card-header .avatar-circle{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,#9333ea,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #9333ea4d}.card-header .avatar-circle svg{width:28px;height:28px}.card-header h2{margin:0 0 6px;font-size:22px;font-weight:700;color:#1f2937}.card-header p{margin:0;color:#9ca3af;font-size:14px}.login-form{display:flex;flex-direction:column;gap:16px}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;color:#9ca3af;pointer-events:none}.input-icon svg{width:16px;height:16px}.input-group input{width:100%;height:44px;padding:0 12px 0 44px;border:1px solid #e5e7eb;border-radius:10px;font-size:14px;color:#1f2937;background:#f9fafb;outline:none;transition:all .2s ease}.input-group input::placeholder{color:#9ca3af}.input-group input:focus{border-color:#9333ea;background:#fff;box-shadow:0 0 0 3px #9333ea1a}.password-toggle{position:absolute;right:10px;width:28px;height:28px;border:none;background:transparent;color:#9ca3af;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.password-toggle:hover{background:#0000000d}.password-toggle svg{width:16px;height:16px}.remember{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.remember input{width:14px;height:14px;accent-color:#22c55e;cursor:pointer}.remember span{color:#6b7280;font-size:13px}.login-btn{height:44px;border:none;border-radius:10px;background:linear-gradient(135deg,#9333ea,#7c3aed);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #9333ea4d}.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #9333ea66}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid #f3f4f6}.forgot-link{color:#6b7280;font-size:13px;text-decoration:none;transition:color .2s ease}.forgot-link:hover{color:#22c55e}.register-link{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px solid #22c55e;border-radius:999px;color:#22c55e;font-size:13px;font-weight:500;text-decoration:none;transition:all .2s ease}.register-link:hover{background:#f0fdf4}.logout-btn{width:100%;height:44px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#6b7280;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.logout-btn:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2}.editor-wrapper{width:100%;min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:50;padding:16px 24px;background:#ffffffd9;border-bottom:1px solid #e5e7eb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}.topbar-title h1{margin:0;font-size:20px;font-weight:700;color:#1f2937}.topbar-title p{margin:4px 0 0;color:#9ca3af;font-size:13px}.topbar-actions{display:flex;align-items:center;gap:10px}.workspace{flex:1;padding:24px;display:grid;gap:20px}.panel{border:1px solid #e5e7eb;border-radius:14px;background:#ffffffe6;box-shadow:0 4px 20px #0000000d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.editor-card{min-height:380px;display:flex;flex-direction:column;overflow:hidden;position:relative}.editor-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--editor-color),transparent)}.editor-card[data-type=html]{--editor-color: #e11d48}.editor-card[data-type=css]{--editor-color: #2563eb}.editor-card[data-type=js]{--editor-color: #ca8a04}.editor-card.is-expanded{position:fixed;top:22px;right:22px;bottom:22px;left:22px;z-index:200;min-height:auto;box-shadow:0 20px 60px #00000026}body.editor-expanded{overflow:hidden}.editor-header,.preview-header,.control-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid #e5e7eb;background:#f9fafb}.editor-title{display:flex;align-items:center;gap:10px;min-width:0;color:#1f2937;font-weight:700}.editor-badge{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:#fff;background:var(--editor-color);font-size:12px;font-weight:700;box-shadow:0 4px 12px color-mix(in srgb,var(--editor-color) 20%,transparent)}.editor-card[data-type=js] .editor-badge{color:#1f2937}.editor-actions,.preview-actions,.device-switcher,.button-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.code-wrap{position:relative;min-height:0;flex:1;background:#fff}.line-numbers{position:absolute;inset:0 auto 0 0;width:56px;padding:18px 10px;overflow:hidden;color:#9ca3af;background:#f9fafb;border-right:1px solid #e5e7eb;font:13px/1.65 JetBrains Mono,Cascadia Code,Consolas,monospace;text-align:right;-webkit-user-select:none;user-select:none;pointer-events:none}.code-input{width:100%;height:100%;min-height:300px;resize:none;border:0;outline:0;padding:18px 18px 18px 72px;color:#1f2937;background:transparent;caret-color:#22c55e;font:14px/1.65 JetBrains Mono,Cascadia Code,Consolas,monospace;-moz-tab-size:2;tab-size:2;white-space:pre}.code-input::placeholder{color:#9ca3af}.code-input:focus-visible{outline:3px solid rgba(147,51,234,.15);outline-offset:2px}.control-panel{align-items:stretch;border-bottom:0;border-radius:14px}.status-pill{display:inline-flex;align-items:center;gap:10px;padding:0 14px;min-height:42px;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;background:#f9fafb;font-size:13px;font-weight:600}.status-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px #9333ea26}.preview-panel{overflow:hidden}.preview-title{min-width:0}.preview-title h2{margin:0;font-size:16px;font-weight:700;color:#1f2937}.preview-title p{margin:4px 0 0;color:#9ca3af;font-size:13px}.device-btn{height:34px;padding:0 12px;border:1px solid #e5e7eb;color:#6b7280;background:#fff;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s ease}.device-btn[aria-pressed=true]{color:#22c55e;border-color:#9333ea;background:#f0fdf4}.preview-stage{min-height:500px;padding:18px;display:flex;align-items:stretch;justify-content:center;background:linear-gradient(45deg,#f3f4f6 25%,transparent 25%),linear-gradient(-45deg,#f3f4f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f3f4f6 75%),linear-gradient(-45deg,transparent 75%,#f3f4f6 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.preview-shell{width:100%;max-width:var(--preview-width, 100%);min-height:100%;overflow:hidden;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 2px 8px #0000000d;transition:max-width .2s ease}.preview-frame{display:block;width:100%;min-height:500px;height:100%;border:0;background:#fff}.toast{position:fixed;top:24px;right:24px;z-index:300;padding:12px 20px;border-radius:10px;color:#fff;font-size:14px;font-weight:500;opacity:0;transform:translateY(-10px);transition:all .3s ease}.toast.show{opacity:1;transform:translateY(0)}.toast.success{background:linear-gradient(135deg,#9333ea,#7c3aed)}.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626)}@media (max-width: 1200px){.editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-card[data-type=js]{grid-column:1 / -1}}@media (max-width: 820px){.main-content{padding:24px}.login-card,.logged-card{padding:32px 24px}.workspace{padding:16px}.topbar{padding:14px 16px}.topbar-inner,.control-panel,.preview-header{align-items:flex-start;flex-direction:column}.topbar-actions,.button-row,.status-pill{width:100%}.editor-grid{grid-template-columns:1fr}.editor-card[data-type=js]{grid-column:auto}.editor-card{min-height:320px}.code-input{min-height:240px;font-size:13px}.preview-stage,.preview-frame{min-height:420px}}@media (max-width: 900px){.login-wrapper{flex-direction:column}.login-card{width:100%;max-width:100%;padding:24px}.login-card-content{padding:40px 28px}}@media (max-width: 540px){.login-card,.logged-card{padding:24px 16px}.login-card-content{padding:32px 20px}.card-footer{flex-direction:column;gap:10px;align-items:flex-start}.editor-header{align-items:flex-start;flex-direction:column}.editor-actions{width:100%}}.login-footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:20px;color:#9ca3af;font-size:13px;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.5) 100%)}.login-footer a{color:#9333ea;text-decoration:none}.login-footer a:hover{text-decoration:underline}