.app{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden;position:relative}.page-loading{display:flex;align-items:center;justify-content:center;flex:1;font-size:1.1rem;color:var(--text-muted)}.app-header{background:var(--bg-nav);padding:0;box-shadow:0 1px 0 var(--border);z-index:100;border-bottom:1px solid var(--nav-border)}.header-row{display:flex;justify-content:space-between;align-items:center;padding:8px 30px}.header-row:last-child{border-bottom:none}.problem-row{background:transparent}.app-title-link{text-decoration:none;display:flex;align-items:center;gap:10px}.app-logo{width:36px;height:36px;border-radius:3px}.app-title{margin:0;font-size:24px;font-weight:700;color:var(--text-heading);letter-spacing:1px}.problem-title-header{font-size:20px;color:var(--text-heading);margin:0;font-weight:600;letter-spacing:.5px}.problem-info-inline{display:flex;align-items:center;gap:20px}.problem-meta{display:flex;gap:10px;align-items:center}.difficulty-tag{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.difficulty-tag.difficulty-easy{background-color:#4caf5033;color:#4caf50;border:1px solid #4caf50}.difficulty-tag.difficulty-medium{background-color:#ff980033;color:#ff9800;border:1px solid #ff9800}.difficulty-tag.difficulty-hard{background-color:#f4433633;color:#f44336;border:1px solid #f44336}.category-tag{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;background-color:#007acc33;color:#007acc;border:1px solid #007acc}.action-buttons{display:flex;gap:12px}.action-btn{padding:6px 16px;background:none;color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:400;cursor:pointer;transition:border-color .2s,color .2s}.action-btn:hover{border-color:var(--border-hover);color:var(--text-heading)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000}.modal-content{background-color:var(--bg-surface-active);border-radius:12px;border:1px solid var(--border);width:85%;max-width:1400px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #2d2d44;background:#2d2d44}.modal-header h3{margin:0;font-size:22px;color:var(--text-heading)}.modal-close{background:none;border:none;color:var(--text-muted);font-size:32px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s;line-height:1}.modal-close:hover{color:var(--text-heading)}.modal-body{padding:25px;color:var(--text-secondary);font-size:15px;line-height:1.6;overflow-y:auto}.modal-body p{margin:0;color:var(--text-muted)}.app-nav{display:flex;gap:4px;align-items:center}.app-nav a{color:var(--nav-text);text-decoration:none;font-size:13px;font-weight:500;padding:7px 14px;border-radius:8px;transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;letter-spacing:.01em}.app-nav a:hover{color:var(--nav-text-hover);background:var(--accent-subtle)}.app-nav a:after{content:"";position:absolute;bottom:2px;left:50%;width:0;height:2px;background:linear-gradient(90deg,#8b5cf6,#c084fc);border-radius:1px;transform:translate(-50%);transition:width .25s cubic-bezier(.16,1,.3,1)}.app-nav a:hover:after{width:60%}.app-nav a.active,.app-nav a[aria-current=page]{color:var(--accent-text);background:var(--accent-subtle)}.app-nav a.active:after,.app-nav a[aria-current=page]:after{width:60%}.profile-icon-btn{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;transition:transform .2s}.profile-icon-btn:hover{transform:scale(1.05)}.premium-badge{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #f59e0b4d;animation:premium-glow 2s ease-in-out infinite alternate}.premium-badge svg{fill:#fff}.premium-badge .days-warning{background:#fff3;padding:2px 6px;border-radius:10px;font-size:10px;margin-left:3px}@keyframes premium-glow{0%{box-shadow:0 2px 8px #f59e0b4d}to{box-shadow:0 2px 15px #f59e0b80}}.profile-header-btn{background:none;border:none;cursor:pointer;padding:6px 12px;display:flex;align-items:center;gap:8px;transition:all .2s;border-radius:20px}.profile-header-btn:hover{background:#007acc1a}.profile-username{color:var(--text-heading);font-size:14px;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-icon-img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #007acc}.profile-icon-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;border:2px solid #007acc}.app-nav .nav-login{padding:7px 18px;border:1px solid var(--border-hover);border-radius:8px;color:var(--accent-text);background:var(--accent-subtle);cursor:pointer;font-size:13px;font-weight:600;transition:all .25s cubic-bezier(.16,1,.3,1);margin-left:8px}.app-nav .nav-login:hover{background:var(--accent-glow);border-color:var(--accent);color:var(--text-heading);transform:translateY(-1px);box-shadow:var(--shadow-md)}.app-nav .profile-icon{display:flex;align-items:center;justify-content:center;padding:6px;color:var(--text-muted);transition:all .25s cubic-bezier(.16,1,.3,1);border-radius:10px;text-decoration:none;cursor:pointer;pointer-events:auto}.app-nav .profile-icon:hover{color:var(--accent-text);background:var(--accent-subtle);transform:scale(1.05)}.app-nav .premium-badge{display:inline-flex;align-items:center;padding:5px 14px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 0 15px #f9731633,inset 0 1px #ffffff26;transition:all .25s cubic-bezier(.16,1,.3,1)}.app-nav .premium-badge:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 0 25px #f973164d,inset 0 1px #ffffff26}.app-nav .nav-logout{padding:7px 18px;border:1px solid rgba(239,68,68,.25);border-radius:8px;color:#f87171;background:#ef44440f;cursor:pointer;font-size:13px;font-weight:500;transition:all .25s cubic-bezier(.16,1,.3,1);margin-left:4px}.app-nav .nav-logout:hover{background:#ef44441f;border-color:#ef444466;color:#fca5a5;transform:translateY(-1px)}.submissions-modal{max-width:800px}.submissions-list{display:flex;flex-direction:column;gap:15px;max-height:60vh;overflow-y:auto}.submission-card{background-color:#252525;border:1px solid #3c3c3c;border-radius:8px;padding:15px;transition:all .2s}.submission-card:hover{border-color:#007acc;box-shadow:0 2px 8px #007acc33}.submission-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.submission-number{font-weight:700;color:#007acc;font-size:16px;min-width:40px}.submission-title{font-weight:600;color:#fff;flex:1;font-size:15px}.language-badge{padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;background-color:#3c3c3c;color:#ddd}.submission-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}.submission-date{color:#999}.status-badge{padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.status-badge.submitted{background-color:#22c55e33;color:#22c55e;border:1px solid #22c55e}.submission-stats{display:flex;gap:15px;font-size:12px;color:#aaa;padding-top:10px;border-top:1px solid #3c3c3c}.no-data{text-align:center;color:#999;padding:40px 20px;font-size:15px}.loading-text{text-align:center;color:#007acc;padding:40px 20px;font-size:15px}@keyframes shine{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.app-content{display:flex;flex:1;overflow:hidden}.resize-handle{width:4px;background-color:#333;cursor:col-resize;flex-shrink:0;transition:background-color .2s;position:relative}.resize-handle:hover{background-color:#007acc}.resize-handle:before{content:"";position:absolute;top:0;left:-2px;right:-2px;bottom:0;cursor:col-resize}:root{--bg-page: #faf9ff;--bg-page-gradient: #faf9ff;--bg-page-solid: #faf9ff;--bg-surface: rgba(255, 255, 255, .85);--bg-surface-hover: rgba(255, 255, 255, .95);--bg-surface-active: #ffffff;--bg-surface-solid: #ffffff;--bg-header: #ede9fe;--bg-nav: #ddd6fe;--bg-input: rgba(255, 255, 255, .8);--bg-input-focus: #ffffff;--bg-overlay: rgba(255, 255, 255, .6);--bg-code: rgba(124, 58, 237, .03);--bg-card-solid: #e4dff9a9;--text-heading: #1e293b;--text-body: #1e293b;--text-secondary: #475569;--text-muted: #64748b;--text-inverse: #ffffff;--accent: #7c3aed;--accent-hover: #6d28d9;--accent-subtle: rgba(124, 58, 237, .08);--accent-glow: rgba(124, 58, 237, .12);--accent-text: #7c3aed;--accent-secondary: #8b5cf6;--accent-tertiary: #a78bfa;--accent-gradient: linear-gradient(135deg, #7c3aed, #6366f1);--btn-outline: var(--accent);--btn-outline-text: var(--accent);--btn-outline-hover: var(--accent);--border: rgba(124, 58, 237, .1);--border-hover: rgba(124, 58, 237, .2);--border-focus: #7c3aed;--border-subtle: rgba(124, 58, 237, .06);--shadow-sm: 0 1px 4px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(124, 58, 237, .06);--shadow-lg: 0 8px 32px rgba(124, 58, 237, .08);--shadow-glow: 0 4px 20px rgba(124, 58, 237, .15);--scrollbar-thumb: rgba(124, 58, 237, .2);--scrollbar-track: transparent;--orb-opacity: .15;--orb-1: radial-gradient(circle, #c4b5fd 0%, transparent 70%);--orb-2: radial-gradient(circle, #93c5fd 0%, transparent 70%);--orb-3: radial-gradient(circle, #fbcfe8 0%, transparent 70%);--grid-line: rgba(124, 58, 237, .04);--noise-opacity: .015;--spotlight: radial-gradient(circle, rgba(124, 58, 237, .04) 0%, transparent 60%);--bp-line: rgba(124, 58, 237, .12);--bp-line-v: rgba(124, 58, 237, .08);--bp-class-fill: rgba(124, 58, 237, .03);--bp-class-stroke: rgba(124, 58, 237, .12);--bp-divider: rgba(124, 58, 237, .08);--bp-text: rgba(124, 58, 237, .15);--bp-text-dim: rgba(124, 58, 237, .08);--bp-iface-fill: rgba(99, 102, 241, .03);--bp-iface-stroke: rgba(99, 102, 241, .14);--bp-diamond-fill: rgba(16, 185, 129, .04);--bp-diamond-stroke: rgba(16, 185, 129, .14);--bp-arrow-line: rgba(124, 58, 237, .12);--bp-arrow-head: rgba(124, 58, 237, .2);--bp-pulse-1: #8b5cf6;--bp-pulse-2: #6366f1;--bp-pulse-3: #a78bfa;--bp-pulse-4: #c084fc;--bp-comp-diamond: rgba(124, 58, 237, .18);--color-easy: #16a34a;--color-easy-bg: rgba(22, 163, 74, .08);--color-easy-border: rgba(22, 163, 74, .2);--color-medium: #d97706;--color-medium-bg: rgba(217, 119, 6, .08);--color-medium-border: rgba(217, 119, 6, .2);--color-hard: #dc2626;--color-hard-bg: rgba(220, 38, 38, .08);--color-hard-border: rgba(220, 38, 38, .2);--badge-premium-bg: rgba(251, 191, 36, .1);--badge-premium-border: rgba(251, 191, 36, .25);--badge-premium-text: #b45309;--btn-primary-bg: #ede9fe;--btn-primary-text: #1e293b;--btn-primary-shadow: 0 4px 20px rgba(0, 0, 0, .08);--btn-primary-hover-bg: #ddd6fe;--btn-primary-hover-shadow: 0 8px 30px rgba(0, 0, 0, .12);--btn-primary-border: rgba(124, 58, 237, .15);--btn-primary-border-hover: rgba(124, 58, 237, .3);--btn-secondary-bg: rgba(124, 58, 237, .06);--btn-secondary-border: rgba(124, 58, 237, .15);--btn-secondary-text: #7c3aed;--tag-bg: rgba(124, 58, 237, .06);--tag-border: rgba(124, 58, 237, .15);--tag-text: #7c3aed;--tag-dot: #8b5cf6;--step-card-accent: #8b5cf6;--nav-bg: rgba(230, 225, 245, .95);--nav-border: rgba(124, 58, 237, .08);--nav-text: #334155;--nav-text-hover: #7c3aed;--nav-backdrop: blur(20px)}[data-theme=mono]{--bg-page: #1a1a1a;--bg-page-gradient: #1a1a1a;--bg-page-solid: #1a1a1a;--bg-surface: rgba(32, 32, 36, .95);--bg-surface-hover: rgba(38, 38, 42, .95);--bg-surface-active: rgba(42, 42, 47, .95);--bg-surface-solid: #202024;--bg-header: #27272a;--bg-nav: #1c1c1f;--bg-input: rgba(32, 32, 36, .95);--bg-input-focus: rgba(38, 38, 42, .95);--bg-overlay: rgba(24, 24, 27, .6);--bg-code: rgba(255, 255, 255, .03);--bg-card-solid: rgba(26, 26, 30, .95);--text-heading: #fafafa;--text-body: #d4d4d8;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-inverse: #18181b;--accent: #a1a1aa;--accent-hover: #d4d4d8;--accent-subtle: rgba(255, 255, 255, .06);--accent-glow: rgba(255, 255, 255, .08);--accent-text: #d4d4d8;--accent-secondary: #a1a1aa;--accent-tertiary: #71717a;--accent-gradient: linear-gradient(135deg, #fafafa, #d4d4d8);--btn-outline: var(--border-hover);--btn-outline-text: #fff;--btn-outline-hover: #52525b;--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .16);--border-focus: rgba(255, 255, 255, .24);--border-subtle: rgba(255, 255, 255, .05);--shadow-sm: 0 1px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .4);--shadow-glow: 0 4px 20px rgba(0, 0, 0, .3);--scrollbar-thumb: rgba(161, 161, 170, .2);--scrollbar-track: transparent;--orb-opacity: .1;--orb-1: radial-gradient(circle, #525252 0%, transparent 70%);--orb-2: radial-gradient(circle, #404040 0%, transparent 70%);--orb-3: radial-gradient(circle, #6b7280 0%, transparent 70%);--grid-line: rgba(255, 255, 255, .02);--noise-opacity: .04;--spotlight: radial-gradient(circle, rgba(255, 255, 255, .03) 0%, transparent 60%);--bp-line: rgba(161, 161, 170, .15);--bp-line-v: rgba(161, 161, 170, .1);--bp-class-fill: rgba(161, 161, 170, .03);--bp-class-stroke: rgba(161, 161, 170, .15);--bp-divider: rgba(161, 161, 170, .1);--bp-text: rgba(161, 161, 170, .2);--bp-text-dim: rgba(161, 161, 170, .1);--bp-iface-fill: rgba(161, 161, 170, .02);--bp-iface-stroke: rgba(161, 161, 170, .16);--bp-diamond-fill: rgba(161, 161, 170, .03);--bp-diamond-stroke: rgba(161, 161, 170, .15);--bp-arrow-line: rgba(161, 161, 170, .14);--bp-arrow-head: rgba(161, 161, 170, .22);--bp-pulse-1: #a1a1aa;--bp-pulse-2: #71717a;--bp-pulse-3: #d4d4d8;--bp-pulse-4: #a1a1aa;--bp-comp-diamond: rgba(161, 161, 170, .22);--color-easy: #4ade80;--color-easy-bg: rgba(74, 222, 128, .08);--color-easy-border: rgba(74, 222, 128, .2);--color-medium: #fbbf24;--color-medium-bg: rgba(251, 191, 36, .08);--color-medium-border: rgba(251, 191, 36, .2);--color-hard: #ef4444;--color-hard-bg: rgba(239, 68, 68, .08);--color-hard-border: rgba(239, 68, 68, .2);--badge-premium-bg: rgba(250, 204, 21, .08);--badge-premium-border: rgba(250, 204, 21, .18);--badge-premium-text: #facc15;--btn-primary-bg: #27272a;--btn-primary-text: #fafafa;--btn-primary-shadow: 0 4px 20px rgba(0, 0, 0, .3);--btn-primary-hover-bg: #3f3f46;--btn-primary-hover-shadow: 0 8px 28px rgba(0, 0, 0, .4);--btn-primary-border: rgba(255, 255, 255, .08);--btn-primary-border-hover: rgba(255, 255, 255, .15);--btn-secondary-bg: rgba(255, 255, 255, .06);--btn-secondary-border: rgba(255, 255, 255, .1);--btn-secondary-text: #a1a1aa;--tag-bg: rgba(255, 255, 255, .04);--tag-border: rgba(255, 255, 255, .08);--tag-text: #a1a1aa;--tag-dot: #71717a;--step-card-accent: #71717a;--nav-bg: rgba(14, 14, 16, .95);--nav-border: rgba(255, 255, 255, .05);--nav-text: #d4d4d8;--nav-text-hover: #fafafa;--nav-backdrop: blur(20px)}.themed-icon{filter:brightness(0)}[data-theme=mono] .themed-icon{filter:brightness(0) invert(1)}.gradient-text{background:linear-gradient(100deg,#ef4444,#f97316,#f59e0b,#eab308,#22c55e,#10b981,#14b8a6,#06b6d4,#3b82f6,#6366f1,#8b5cf6,#a855f7,#d946ef,#ec4899,#ef4444);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmerGradient 6s linear infinite;filter:drop-shadow(0 0 18px rgba(139,92,246,.3))}@keyframes shimmerGradient{0%{background-position:0% center}to{background-position:300% center}}.canvas-header-btn:hover:not(:disabled),.requirements-btn:hover:not(:disabled){background-color:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.05)}.canvas-header-btn:hover:not(:disabled) img,.requirements-btn:hover:not(:disabled) img{filter:brightness(0) invert(1)}.canvas-header-btn:hover:not(:disabled) img[alt=sparkle],.requirements-btn:hover:not(:disabled) img[alt=sparkle]{filter:brightness(.84) saturate(2) sepia(.1)}[data-theme=mono] .canvas-header-btn:hover:not(:disabled),[data-theme=mono] .requirements-btn:hover:not(:disabled){background-color:#52525b;border-color:#52525b}*{margin:0;padding:0;box-sizing:border-box}img[alt=sparkle]{filter:brightness(.84) saturate(2) sepia(.1)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}