.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:inherit;font-weight:var(--font-medium);text-align:center;text-decoration:none;white-space:nowrap;border:none;border-radius:var(--radius-lg);outline:none;cursor:pointer;user-select:none;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.btn-sm{height:var(--button-height-sm);padding:0 var(--button-padding-x-sm);font-size:var(--type-sm)}.btn-md{height:var(--button-height-md);padding:0 var(--button-padding-x-md);font-size:var(--type-sm)}.btn-lg{height:var(--button-height-lg);padding:0 var(--button-padding-x-lg);font-size:var(--type-md)}.btn-primary{background:var(--primary-500);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){background:var(--primary-600);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active:not(:disabled){background:var(--primary-700);box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-primary:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.btn-secondary{background:var(--secondary-500);color:#fff;box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){background:var(--secondary-600);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary:active:not(:disabled){background:var(--secondary-700);box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-success{background:var(--success-500);color:#fff;box-shadow:var(--shadow-sm)}.btn-success:hover:not(:disabled){background:var(--success-600);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-success:active:not(:disabled){background:var(--success-700);box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-warning{background:var(--warning-500);color:#fff;box-shadow:var(--shadow-sm)}.btn-warning:hover:not(:disabled){background:var(--warning-600);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-warning:active:not(:disabled){background:var(--warning-700);box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-error{background:var(--error-500);color:#fff;box-shadow:var(--shadow-sm)}.btn-error:hover:not(:disabled){background:var(--error-600);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-error:active:not(:disabled){background:var(--error-700);box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-ghost{background:transparent;color:var(--text-primary)}.btn-ghost:hover:not(:disabled){background:var(--bg-hover)}.btn-ghost:active:not(:disabled){background:var(--bg-active)}.btn-outline{background:transparent;color:var(--primary-500);border:2px solid var(--primary-500)}.btn-outline:hover:not(:disabled){background:var(--primary-500);color:#fff}.btn-outline:active:not(:disabled){background:var(--primary-600);color:#fff}.btn-full{width:100%}.btn:disabled,.btn-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-loading{position:relative;color:transparent;pointer-events:none}.btn-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1em;height:1em;color:currentColor}.btn-spinner svg{width:100%;height:100%;animation:spin .8s linear infinite}.btn-icon-left,.btn-icon-right{display:inline-flex;align-items:center;justify-content:center}.btn-icon-left{margin-right:calc(var(--space-1) * -1)}.btn-icon-right{margin-left:calc(var(--space-1) * -1)}.btn-content{display:inline-flex;align-items:center}.btn:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}[data-theme=dark] .btn-ghost{color:var(--text-primary)}[data-theme=dark] .btn-ghost:hover:not(:disabled){background:#ffffff0d}[data-theme=light] .btn-ghost{color:var(--text-primary)}[data-theme=light] .btn-ghost:hover:not(:disabled){background:#0000000d}.card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);transition:all var(--transition-base);overflow:hidden}.card-default{background:var(--bg-surface);border:1px solid var(--border-default)}.card-elevated{background:var(--bg-surface);box-shadow:var(--shadow-lg)}.card-outlined{background:transparent;border:2px solid var(--border-default)}.card-filled{background:var(--bg-elevated)}.card-padding-none{padding:0}.card-padding-sm{padding:var(--card-padding-sm)}.card-padding-md{padding:var(--card-padding-md)}.card-padding-lg{padding:var(--card-padding-lg)}.card-hoverable:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.card-hoverable.card-outlined:hover{border-color:var(--border-strong)}.card-clickable{cursor:pointer;user-select:none}.card-clickable:active{transform:translateY(0);box-shadow:var(--shadow-md)}.card-header{padding:var(--space-6) var(--space-6) var(--space-4)}.card-padding-none .card-header{padding:var(--space-6)}.card-body{flex:1;padding:0 var(--space-6) var(--space-6)}.card-padding-none .card-body{padding:var(--space-6)}.card-footer{padding:var(--space-4) var(--space-6) var(--space-6);border-top:1px solid var(--border-subtle)}.card-padding-none .card-footer{padding:var(--space-6)}.card-title{margin:0;font-size:var(--type-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--text-primary)}.card-description{margin:var(--space-2) 0 0;font-size:var(--type-sm);line-height:var(--leading-relaxed);color:var(--text-secondary)}.card-clickable:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}[data-theme=light] .card-default{background:var(--bg-base);border-color:var(--border-default)}[data-theme=light] .card-elevated{background:var(--bg-base)}[data-theme=light] .card-filled,[data-theme=dark] .card-default,[data-theme=dark] .card-elevated{background:var(--bg-surface)}[data-theme=dark] .card-filled{background:var(--bg-elevated)}@media (max-width: 768px){.card-padding-md{padding:var(--card-padding-sm)}.card-padding-lg{padding:var(--card-padding-md)}.card-header,.card-body,.card-footer{padding-left:var(--space-4);padding-right:var(--space-4)}}.input-wrapper{display:flex;flex-direction:column;gap:var(--space-2)}.input-full-width{width:100%}.input-label{display:block;font-size:var(--type-sm);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:var(--space-1)}.input-required{color:var(--error-500);margin-left:var(--space-1)}.input-container{position:relative;display:flex;align-items:center;gap:var(--space-2);transition:all var(--transition-base)}.input-default{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg)}.input-filled{background:var(--bg-elevated);border:1px solid transparent;border-radius:var(--radius-lg)}.input-outlined{background:transparent;border:2px solid var(--border-default);border-radius:var(--radius-lg)}.input-sm{height:var(--input-height-sm);padding:0 var(--input-padding-x)}.input-md{height:var(--input-height-md);padding:0 var(--input-padding-x)}.input-lg{height:var(--input-height-lg);padding:0 var(--input-padding-x)}.input-field{flex:1;width:100%;height:100%;padding:0;font-family:inherit;font-size:var(--type-sm);font-weight:var(--font-normal);line-height:var(--leading-normal);color:var(--text-primary);background:transparent;border:none;outline:none;transition:all var(--transition-base)}.input-field::placeholder{color:var(--text-tertiary)}.input-field:focus{outline:none}.input-container:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px #8b5cf61a}.input-outlined:focus-within{border-color:var(--border-focus)}.input-container:hover:not(.input-disabled){border-color:var(--border-strong)}.input-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-tertiary);transition:color var(--transition-base)}.input-icon-left{margin-left:0}.input-icon-right{margin-right:0}.input-has-left-icon .input-field{padding-left:0}.input-has-right-icon .input-field{padding-right:0}.input-container:focus-within .input-icon{color:var(--primary-500)}.input-error{border-color:var(--border-error)}.input-error:focus-within{border-color:var(--border-error);box-shadow:0 0 0 3px #ef44441a}.input-error .input-icon{color:var(--error-500)}.input-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.input-helper-text{margin:0;font-size:var(--type-xs);line-height:var(--leading-normal);color:var(--text-secondary)}.input-error-text{margin:0;font-size:var(--type-xs);line-height:var(--leading-normal);color:var(--error-500);display:flex;align-items:center;gap:var(--space-1)}.input-field:-webkit-autofill,.input-field:-webkit-autofill:hover,.input-field:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-primary);-webkit-box-shadow:0 0 0px 1000px var(--bg-surface) inset;transition:background-color 5000s ease-in-out 0s}[data-theme=light] .input-default{background:var(--bg-base);border-color:var(--border-default)}[data-theme=light] .input-filled{background:var(--bg-surface)}[data-theme=light] .input-field:-webkit-autofill,[data-theme=light] .input-field:-webkit-autofill:hover,[data-theme=light] .input-field:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px var(--bg-base) inset}[data-theme=dark] .input-default{background:var(--bg-surface)}[data-theme=dark] .input-filled{background:var(--bg-elevated)}@media (max-width: 768px){.input-lg{height:var(--input-height-md)}}.input-field:focus-visible{outline:none}.input-container:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}:root{--type-xs: .8rem;--type-sm: 1rem;--type-md: 1.25rem;--type-lg: 1.563rem;--type-xl: 1.953rem;--type-2xl: 2.441rem;--type-3xl: 3.052rem;--type-4xl: 3.815rem;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--tracking-tighter: -.05em;--tracking-tight: -.025em;--tracking-normal: 0;--tracking-wide: .025em;--tracking-wider: .05em;--tracking-widest: .1em;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--font-black: 900;--primary-50: #F5F3FF;--primary-100: #EDE9FE;--primary-200: #DDD6FE;--primary-300: #C4B5FD;--primary-400: #A78BFA;--primary-500: #8B5CF6;--primary-600: #7C3AED;--primary-700: #6D28D9;--primary-800: #5B21B6;--primary-900: #4C1D95;--primary-950: #2E1065;--secondary-50: #ECFEFF;--secondary-100: #CFFAFE;--secondary-200: #A5F3FC;--secondary-300: #67E8F9;--secondary-400: #22D3EE;--secondary-500: #06B6D4;--secondary-600: #0891B2;--secondary-700: #0E7490;--secondary-800: #155E75;--secondary-900: #164E63;--secondary-950: #083344;--accent-50: #FDF2F8;--accent-100: #FCE7F3;--accent-200: #FBCFE8;--accent-300: #F9A8D4;--accent-400: #F472B6;--accent-500: #EC4899;--accent-600: #DB2777;--accent-700: #BE185D;--accent-800: #9F1239;--accent-900: #831843;--accent-950: #500724;--success-50: #F0FDF4;--success-100: #DCFCE7;--success-200: #BBF7D0;--success-300: #86EFAC;--success-400: #4ADE80;--success-500: #22C55E;--success-600: #16A34A;--success-700: #15803D;--success-800: #166534;--success-900: #14532D;--success-950: #052E16;--warning-50: #FFFBEB;--warning-100: #FEF3C7;--warning-200: #FDE68A;--warning-300: #FCD34D;--warning-400: #FBBF24;--warning-500: #F59E0B;--warning-600: #D97706;--warning-700: #B45309;--warning-800: #92400E;--warning-900: #78350F;--warning-950: #451A03;--error-50: #FEF2F2;--error-100: #FEE2E2;--error-200: #FECACA;--error-300: #FCA5A5;--error-400: #F87171;--error-500: #EF4444;--error-600: #DC2626;--error-700: #B91C1C;--error-800: #991B1B;--error-900: #7F1D1D;--error-950: #450A0A;--info-50: #EFF6FF;--info-100: #DBEAFE;--info-200: #BFDBFE;--info-300: #93C5FD;--info-400: #60A5FA;--info-500: #3B82F6;--info-600: #2563EB;--info-700: #1D4ED8;--info-800: #1E40AF;--info-900: #1E3A8A;--info-950: #172554;--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-200: #E5E7EB;--gray-300: #D1D5DB;--gray-400: #9CA3AF;--gray-500: #6B7280;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--gray-900: #111827;--gray-950: #030712;--bg-base: #0A0A1A;--bg-surface: #12122A;--bg-elevated: #1A1A3E;--bg-overlay: #1E1E4A;--bg-hover: rgba(255, 255, 255, .05);--bg-active: rgba(255, 255, 255, .1);--text-primary: #FFFFFF;--text-secondary: #B0B0D0;--text-tertiary: #6B6B8D;--text-disabled: #4A4A6A;--text-inverse: #000000;--border-default: rgba(255, 255, 255, .1);--border-subtle: rgba(255, 255, 255, .05);--border-strong: rgba(255, 255, 255, .2);--border-focus: var(--primary-500);--border-error: var(--error-500);--interactive-default: var(--primary-500);--interactive-hover: var(--primary-400);--interactive-active: var(--primary-600);--interactive-disabled: var(--gray-700);--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 1.75rem;--space-8: 2rem;--space-9: 2.25rem;--space-10: 2.5rem;--space-11: 2.75rem;--space-12: 3rem;--space-14: 3.5rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-28: 7rem;--space-32: 8rem;--space-36: 9rem;--space-40: 10rem;--space-44: 11rem;--space-48: 12rem;--space-52: 13rem;--space-56: 14rem;--space-60: 15rem;--space-64: 16rem;--space-72: 18rem;--space-80: 20rem;--space-96: 24rem;--container-xs: 20rem;--container-sm: 24rem;--container-md: 28rem;--container-lg: 32rem;--container-xl: 36rem;--container-2xl: 42rem;--container-3xl: 48rem;--container-4xl: 56rem;--container-5xl: 64rem;--container-6xl: 72rem;--container-7xl: 80rem;--container-full: 100%;--gap-xs: var(--space-2);--gap-sm: var(--space-3);--gap-md: var(--space-4);--gap-lg: var(--space-6);--gap-xl: var(--space-8);--radius-none: 0;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-3xl: 2rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .05);--shadow-glow-sm: 0 0 10px rgba(139, 92, 246, .3);--shadow-glow-md: 0 0 20px rgba(139, 92, 246, .4);--shadow-glow-lg: 0 0 30px rgba(139, 92, 246, .5);--duration-75: 75ms;--duration-100: .1s;--duration-150: .15s;--duration-200: .2s;--duration-300: .3s;--duration-500: .5s;--duration-700: .7s;--duration-1000: 1s;--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--transition-fast: var(--duration-150) var(--ease-out);--transition-base: var(--duration-200) var(--ease-out);--transition-slow: var(--duration-300) var(--ease-out);--transition-bounce: var(--duration-500) var(--ease-bounce);--z-0: 0;--z-10: 10;--z-20: 20;--z-30: 30;--z-40: 40;--z-50: 50;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-notification: 800;--opacity-0: 0;--opacity-5: .05;--opacity-10: .1;--opacity-20: .2;--opacity-30: .3;--opacity-40: .4;--opacity-50: .5;--opacity-60: .6;--opacity-70: .7;--opacity-80: .8;--opacity-90: .9;--opacity-100: 1;--button-height-sm: 2rem;--button-height-md: 2.5rem;--button-height-lg: 3rem;--button-padding-x-sm: var(--space-3);--button-padding-x-md: var(--space-4);--button-padding-x-lg: var(--space-6);--input-height-sm: 2rem;--input-height-md: 2.5rem;--input-height-lg: 3rem;--input-padding-x: var(--space-3);--card-padding-sm: var(--space-4);--card-padding-md: var(--space-6);--card-padding-lg: var(--space-8);--header-height: 4rem;--sidebar-width: 15rem}[data-theme=light]{--bg-base: #FFFFFF;--bg-surface: #F9FAFB;--bg-elevated: #F3F4F6;--bg-overlay: #E5E7EB;--bg-hover: rgba(0, 0, 0, .05);--bg-active: rgba(0, 0, 0, .1);--text-primary: #111827;--text-secondary: #4B5563;--text-tertiary: #6B7280;--text-disabled: #9CA3AF;--text-inverse: #FFFFFF;--border-default: rgba(0, 0, 0, .1);--border-subtle: rgba(0, 0, 0, .05);--border-strong: rgba(0, 0, 0, .2);--border-focus: var(--primary-500);--border-error: var(--error-500);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .03);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .08);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .08);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .08);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .15);--shadow-glow-sm: 0 0 10px rgba(139, 92, 246, .2);--shadow-glow-md: 0 0 20px rgba(139, 92, 246, .3);--shadow-glow-lg: 0 0 30px rgba(139, 92, 246, .4)}@media (prefers-color-scheme: light){[data-theme=auto]{--bg-base: #FFFFFF;--bg-surface: #F9FAFB;--bg-elevated: #F3F4F6;--bg-overlay: #E5E7EB;--bg-hover: rgba(0, 0, 0, .05);--bg-active: rgba(0, 0, 0, .1);--text-primary: #111827;--text-secondary: #4B5563;--text-tertiary: #6B7280;--text-disabled: #9CA3AF;--text-inverse: #FFFFFF;--border-default: rgba(0, 0, 0, .1);--border-subtle: rgba(0, 0, 0, .05);--border-strong: rgba(0, 0, 0, .2)}}@media (prefers-color-scheme: dark){[data-theme=auto]{--bg-base: #0A0A1A;--bg-surface: #12122A;--bg-elevated: #1A1A3E;--bg-overlay: #1E1E4A;--bg-hover: rgba(255, 255, 255, .05);--bg-active: rgba(255, 255, 255, .1);--text-primary: #FFFFFF;--text-secondary: #B0B0D0;--text-tertiary: #6B6B8D;--text-disabled: #4A4A6A;--text-inverse: #000000;--border-default: rgba(255, 255, 255, .1);--border-subtle: rgba(255, 255, 255, .05);--border-strong: rgba(255, 255, 255, .2)}}.text-xs{font-size:var(--type-xs)}.text-sm{font-size:var(--type-sm)}.text-md{font-size:var(--type-md)}.text-lg{font-size:var(--type-lg)}.text-xl{font-size:var(--type-xl)}.text-2xl{font-size:var(--type-2xl)}.text-3xl{font-size:var(--type-3xl)}.text-4xl{font-size:var(--type-4xl)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.font-extrabold{font-weight:var(--font-extrabold)}.font-black{font-weight:var(--font-black)}.leading-none{line-height:var(--leading-none)}.leading-tight{line-height:var(--leading-tight)}.leading-snug{line-height:var(--leading-snug)}.leading-normal{line-height:var(--leading-normal)}.leading-relaxed{line-height:var(--leading-relaxed)}.leading-loose{line-height:var(--leading-loose)}.tracking-tighter{letter-spacing:var(--tracking-tighter)}.tracking-tight{letter-spacing:var(--tracking-tight)}.tracking-normal{letter-spacing:var(--tracking-normal)}.tracking-wide{letter-spacing:var(--tracking-wide)}.tracking-wider{letter-spacing:var(--tracking-wider)}.tracking-widest{letter-spacing:var(--tracking-widest)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-disabled{color:var(--text-disabled)}.text-inverse{color:var(--text-inverse)}.text-success{color:var(--success-500)}.text-warning{color:var(--warning-500)}.text-error{color:var(--error-500)}.text-info{color:var(--info-500)}.bg-base{background-color:var(--bg-base)}.bg-surface{background-color:var(--bg-surface)}.bg-elevated{background-color:var(--bg-elevated)}.bg-overlay{background-color:var(--bg-overlay)}.bg-primary{background-color:var(--primary-500)}.bg-primary-light{background-color:var(--primary-400)}.bg-primary-dark{background-color:var(--primary-600)}.bg-secondary{background-color:var(--secondary-500)}.bg-secondary-light{background-color:var(--secondary-400)}.bg-secondary-dark{background-color:var(--secondary-600)}.bg-success{background-color:var(--success-500)}.bg-warning{background-color:var(--warning-500)}.bg-error{background-color:var(--error-500)}.bg-info{background-color:var(--info-500)}.p-0{padding:var(--space-0)}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.p-10{padding:var(--space-10)}.p-12{padding:var(--space-12)}.p-16{padding:var(--space-16)}.px-0{padding-left:var(--space-0);padding-right:var(--space-0)}.px-1{padding-left:var(--space-1);padding-right:var(--space-1)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-5{padding-left:var(--space-5);padding-right:var(--space-5)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.px-8{padding-left:var(--space-8);padding-right:var(--space-8)}.px-10{padding-left:var(--space-10);padding-right:var(--space-10)}.px-12{padding-left:var(--space-12);padding-right:var(--space-12)}.py-0{padding-top:var(--space-0);padding-bottom:var(--space-0)}.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.py-5{padding-top:var(--space-5);padding-bottom:var(--space-5)}.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}.py-10{padding-top:var(--space-10);padding-bottom:var(--space-10)}.py-12{padding-top:var(--space-12);padding-bottom:var(--space-12)}.m-0{margin:var(--space-0)}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.m-5{margin:var(--space-5)}.m-6{margin:var(--space-6)}.m-8{margin:var(--space-8)}.m-10{margin:var(--space-10)}.m-12{margin:var(--space-12)}.m-16{margin:var(--space-16)}.m-auto{margin:auto}.mx-0{margin-left:var(--space-0);margin-right:var(--space-0)}.mx-1{margin-left:var(--space-1);margin-right:var(--space-1)}.mx-2{margin-left:var(--space-2);margin-right:var(--space-2)}.mx-3{margin-left:var(--space-3);margin-right:var(--space-3)}.mx-4{margin-left:var(--space-4);margin-right:var(--space-4)}.mx-5{margin-left:var(--space-5);margin-right:var(--space-5)}.mx-6{margin-left:var(--space-6);margin-right:var(--space-6)}.mx-8{margin-left:var(--space-8);margin-right:var(--space-8)}.mx-10{margin-left:var(--space-10);margin-right:var(--space-10)}.mx-12{margin-left:var(--space-12);margin-right:var(--space-12)}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:var(--space-0);margin-bottom:var(--space-0)}.my-1{margin-top:var(--space-1);margin-bottom:var(--space-1)}.my-2{margin-top:var(--space-2);margin-bottom:var(--space-2)}.my-3{margin-top:var(--space-3);margin-bottom:var(--space-3)}.my-4{margin-top:var(--space-4);margin-bottom:var(--space-4)}.my-5{margin-top:var(--space-5);margin-bottom:var(--space-5)}.my-6{margin-top:var(--space-6);margin-bottom:var(--space-6)}.my-8{margin-top:var(--space-8);margin-bottom:var(--space-8)}.my-10{margin-top:var(--space-10);margin-bottom:var(--space-10)}.my-12{margin-top:var(--space-12);margin-bottom:var(--space-12)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}.border{border:1px solid var(--border-default)}.border-0{border:none}.border-2{border-width:2px}.border-4{border-width:4px}.rounded-none{border-radius:var(--radius-none)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:var(--radius-full)}.border-default{border-color:var(--border-default)}.border-subtle{border-color:var(--border-subtle)}.border-strong{border-color:var(--border-strong)}.border-focus{border-color:var(--border-focus)}.border-error{border-color:var(--border-error)}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}.shadow-inner{box-shadow:var(--shadow-inner)}.shadow-none{box-shadow:none}.shadow-glow-sm{box-shadow:var(--shadow-glow-sm)}.shadow-glow-md{box-shadow:var(--shadow-glow-md)}.shadow-glow-lg{box-shadow:var(--shadow-glow-lg)}.opacity-0{opacity:var(--opacity-0)}.opacity-5{opacity:var(--opacity-5)}.opacity-10{opacity:var(--opacity-10)}.opacity-20{opacity:var(--opacity-20)}.opacity-30{opacity:var(--opacity-30)}.opacity-40{opacity:var(--opacity-40)}.opacity-50{opacity:var(--opacity-50)}.opacity-60{opacity:var(--opacity-60)}.opacity-70{opacity:var(--opacity-70)}.opacity-80{opacity:var(--opacity-80)}.opacity-90{opacity:var(--opacity-90)}.opacity-100{opacity:var(--opacity-100)}.transition{transition-property:all;transition-duration:var(--duration-150);transition-timing-function:var(--ease-out)}.transition-fast{transition:all var(--transition-fast)}.transition-base{transition:all var(--transition-base)}.transition-slow{transition:all var(--transition-slow)}.transition-bounce{transition:all var(--transition-bounce)}.transition-none{transition:none}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.w-1-2{width:50%}.w-1-3{width:33.333333%}.w-2-3{width:66.666667%}.w-1-4{width:25%}.w-3-4{width:75%}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.max-w-screen-sm{max-width:640px}.max-w-screen-md{max-width:768px}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.cursor-auto{cursor:auto}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-move{cursor:move}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.select-none{user-select:none}.select-text{user-select:text}.select-all{user-select:all}.select-auto{user-select:auto}.z-0{z-index:var(--z-0)}.z-10{z-index:var(--z-10)}.z-20{z-index:var(--z-20)}.z-30{z-index:var(--z-30)}.z-40{z-index:var(--z-40)}.z-50{z-index:var(--z-50)}.z-dropdown{z-index:var(--z-dropdown)}.z-sticky{z-index:var(--z-sticky)}.z-fixed{z-index:var(--z-fixed)}.z-modal{z-index:var(--z-modal)}.z-tooltip{z-index:var(--z-tooltip)}:root{--primary: #6C63FF;--primary-light: #8B85FF;--primary-dark: #5046E5;--secondary: #00D9FF;--secondary-light: #66E8FF;--accent: #FF6B6B;--accent-light: #FF9999;--success: #4CAF50;--success-light: #81C784;--warning: #FFC107;--warning-light: #FFD54F;--error: #F44336;--error-light: #E57373;--bg-dark: #0A0A1A;--bg-primary: #12122A;--bg-secondary: #1A1A3E;--bg-card: #1E1E4A;--bg-hover: #252560;--bg-elevated: #2A2A5E;--text-primary: #FFFFFF;--text-secondary: #B0B0D0;--text-muted: #6B6B8D;--text-disabled: #4A4A6A;--border-color: rgba(255, 255, 255, .1);--border-light: rgba(255, 255, 255, .05);--border-glow: rgba(108, 99, 255, .3);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 20px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(108, 99, 255, .3);--shadow-glow-lg: 0 0 40px rgba(108, 99, 255, .4);--gradient-primary: linear-gradient(135deg, #6C63FF 0%, #5046E5 100%);--gradient-secondary: linear-gradient(135deg, #00D9FF 0%, #0099CC 100%);--gradient-accent: linear-gradient(135deg, #FF6B6B 0%, #E55050 100%);--gradient-card: linear-gradient(180deg, rgba(30, 30, 74, .9) 0%, rgba(26, 26, 62, 1) 100%);--gradient-glow: radial-gradient(ellipse at center, rgba(108, 99, 255, .15) 0%, transparent 70%);--gradient-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--transition-bounce: .4s cubic-bezier(.68, -.55, .265, 1.55);--nav-width: 240px;--header-height: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--font-xs: .75rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 2rem;--font-4xl: 2.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;line-height:1.6;font-feature-settings:"ss01" on,"ss02" on;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre,.code-editor,.cm-editor{font-family:Fira Code,Consolas,Monaco,monospace;font-feature-settings:"liga" on,"calt" on}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow{0%,to{box-shadow:0 0 20px #6c63ff4d}50%{box-shadow:0 0 30px #6c63ff80}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.animate-fadeIn{animation:fadeIn .3s ease-out}.animate-fadeInUp{animation:fadeInUp .4s ease-out}.animate-fadeInScale{animation:fadeInScale .3s ease-out}.animate-slideInRight{animation:slideInRight .4s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.app{display:flex;min-height:100vh}.app-content{flex:1;display:flex;flex-direction:column;margin-left:var(--nav-width);min-height:100vh}.main-navigation{position:fixed;left:0;top:0;width:var(--nav-width);height:100vh;background:var(--bg-primary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:1.5rem 1rem;z-index:100}.nav-brand{display:flex;align-items:center;justify-content:center;padding:.5rem .25rem 1rem;margin-bottom:2rem;text-decoration:none;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.nav-brand:hover{transform:scale(1.02)}.nav-brand:active{transform:scale(.98)}.nav-logo{width:42px;height:42px;object-fit:contain}.nav-logo-banner{width:100%;height:auto;max-height:72px;object-fit:contain}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:1.25rem;font-weight:700;color:var(--primary)}.brand-tagline{font-size:.7rem;color:var(--text-muted)}.nav-items{display:flex;flex-direction:column;gap:.25rem;flex:1}.nav-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.95rem;cursor:pointer;transition:all var(--transition-fast);text-align:left;text-decoration:none}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-glow)}.nav-icon{font-size:1.25rem}.nav-status{padding-top:1rem;border-top:1px solid var(--border-color)}.lang-toggle{margin-top:1rem;display:flex;gap:.5rem}.lang-btn{flex:1;padding:.35rem .5rem;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.8rem}.lang-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.status-indicators{display:flex;flex-direction:column;gap:.5rem}.status-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--error);transition:all var(--transition-normal)}.status-item.connected .status-dot{background:var(--success);box-shadow:0 0 8px #4caf5099}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--bg-primary);border-bottom:1px solid var(--border-color);height:var(--header-height)}.header-left{display:flex;align-items:center;gap:1rem}.logo{height:40px;width:auto}.logo-divider{width:1px;height:28px;background:linear-gradient(180deg,transparent,var(--border-color),transparent)}.header-subtitle{font-size:.9rem;color:var(--text-muted)}.connection-status{display:flex;gap:1.5rem}.main-content{flex:1;padding:2rem;overflow-y:auto}.learning-dashboard{max-width:1400px;margin:0 auto}.admin-review-banner{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,#fbbf2440,#f59e0b1f);border:1px solid rgba(251,191,36,.45);color:var(--text-primary);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;box-shadow:0 10px 24px #00000014;position:sticky;top:12px;z-index:5;backdrop-filter:blur(6px);cursor:pointer;text-align:left;width:100%}.admin-review-banner:hover{box-shadow:0 12px 28px #0000001f}.admin-review-banner:active{transform:translateY(1px)}.admin-review-title{font-weight:700;font-size:.98rem}.admin-review-subtitle{font-size:.88rem;opacity:.8}.admin-review-pill{margin-top:8px;padding:6px 10px;border-radius:999px;background:#fbbf2433;border:1px solid rgba(251,191,36,.45);font-size:.78rem;font-weight:700;color:var(--text-primary);white-space:nowrap;cursor:pointer}.admin-review-pill:hover{background:#fbbf244d}.progress-tracker{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem 2rem;margin-bottom:2rem;border:1px solid var(--border-color)}.user-profile{display:flex;align-items:center;gap:1rem}.avatar{width:64px;height:64px;border-radius:50%;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:2rem;border:3px solid var(--primary)}.user-info{display:flex;flex-direction:column}.user-rank{font-size:1rem;font-weight:600}.user-level{font-size:.85rem;color:var(--text-muted)}.xp-section{padding:0 2rem}.xp-header{display:flex;justify-content:space-between;margin-bottom:.5rem}.xp-label{font-size:.85rem;color:var(--text-muted)}.xp-value{font-size:.85rem;font-weight:600;color:var(--warning)}.xp-bar-container{height:8px;background:var(--bg-dark);border-radius:4px;overflow:hidden}.xp-bar{height:100%;background:linear-gradient(90deg,var(--warning),#FFE082);border-radius:4px;position:relative;transition:width var(--transition-slow)}.xp-bar-glow{position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5));animation:shimmer 2s infinite}@keyframes shimmer{0%,to{opacity:0}50%{opacity:1}}.xp-footer{margin-top:.25rem;font-size:.75rem;color:var(--text-muted)}.stats-grid{display:flex;gap:1rem}.stat-card{background:var(--bg-secondary);border-radius:var(--radius-md);padding:1rem;display:flex;align-items:center;gap:.75rem;min-width:140px}.stat-icon{font-size:1.5rem}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:1.1rem;font-weight:600}.stat-label{font-size:.75rem;color:var(--text-muted)}.stat-card.highlight{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}.stat-progress-ring{width:40px;height:40px}.circular-chart{width:100%;height:100%}.circle-bg{fill:none;stroke:var(--bg-dark);stroke-width:3}.circle{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dasharray var(--transition-slow)}.learning-path{display:none}.learning-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;background:var(--bg-card);padding:.5rem;border-radius:var(--radius-lg)}.tab{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.95rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.tab:hover{background:var(--bg-hover);color:var(--text-primary)}.tab.active{background:var(--primary);color:#fff}.tab-icon{font-size:1.1rem}.learning-content{background:var(--bg-card);border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--border-color)}.section-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.section-description{color:var(--text-secondary);margin-bottom:2rem}.levels-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.level-card{background:var(--gradient-card);border-radius:var(--radius-lg);padding:1.5rem;cursor:pointer;transition:all var(--transition-normal),transform var(--transition-bounce);border:2px solid var(--border-color);position:relative;overflow:hidden;animation:fadeInUp .5s ease forwards;opacity:0;backdrop-filter:blur(10px)}.level-card:before{content:"";position:absolute;inset:0;background:var(--gradient-glow);opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.level-card:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .5s ease;pointer-events:none}.level-card:hover:not(.locked){transform:translateY(-6px) scale(1.02);border-color:var(--primary);box-shadow:var(--shadow-glow-lg),0 20px 40px #0006}.level-card:hover:not(.locked):before{opacity:1}.level-card:hover:not(.locked):after{left:100%}.level-card:active:not(.locked){transform:translateY(-2px) scale(.98)}.level-card.locked{opacity:.5;cursor:not-allowed;filter:grayscale(30%)}.level-card.locked:hover{transform:none}.level-card.completed{border-color:var(--success);background:linear-gradient(135deg,rgba(76,175,80,.1) 0%,var(--bg-secondary) 100%)}.level-card.completed:before{background:radial-gradient(ellipse at center,rgba(76,175,80,.15) 0%,transparent 70%)}.level-card.active{border-color:var(--primary);background:linear-gradient(135deg,rgba(108,99,255,.15) 0%,var(--bg-secondary) 100%);animation:fadeInUp .5s ease forwards,glow 3s ease-in-out infinite}.lock-overlay{position:absolute;inset:0;background:#0a0a1ad9;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);z-index:10;transition:all var(--transition-normal)}.level-card:hover .lock-overlay{background:#0a0a1ae6}.lock-icon{font-size:2rem;filter:drop-shadow(0 0 10px rgba(255,255,255,.2))}.lock-text{font-size:.85rem;color:var(--text-muted);text-align:center;padding:0 1rem}.completed-badge{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#fff;box-shadow:0 4px 12px #6c63ff66;animation:fadeInScale .3s ease}.level-card.completed .completed-badge{background:linear-gradient(135deg,var(--success) 0%,#2E7D32 100%);box-shadow:0 4px 12px #4caf5066}.level-number{position:absolute;top:1rem;left:1rem;width:36px;height:36px;background:var(--bg-dark);border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:var(--text-secondary);transition:all var(--transition-normal)}.level-card:hover:not(.locked) .level-number{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.1)}.level-card.completed .level-number{background:var(--success);border-color:var(--success);color:#fff}.level-icon-wrapper{display:flex;justify-content:center;margin:1rem 0;position:relative}.level-main-icon{font-size:3rem}.pulse-ring{position:absolute;width:80px;height:80px;border:2px solid var(--primary);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.8);opacity:1}to{transform:scale(1.4);opacity:0}}.level-content{text-align:center;margin-bottom:1rem}.level-title{font-size:1.1rem;font-weight:600;margin-bottom:.25rem}.level-subtitle{font-size:.8rem;color:var(--text-muted);display:block;margin-bottom:.5rem}.level-description{font-size:.85rem;color:var(--text-secondary);line-height:1.5}.level-rewards{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.xp-reward{display:flex;align-items:center;gap:.25rem;background:var(--bg-dark);padding:.4rem .75rem;border-radius:20px;font-size:.8rem}.xp-icon{color:var(--warning)}.level-practice-btn{padding:.35rem .75rem;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid rgba(255,255,255,.15);background:#ffffff14;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast)}.level-practice-btn:hover{background:#ffffff2e;transform:translateY(-1px)}.level-status{text-align:center}.level-status .status{font-size:.75rem;padding:.25rem .75rem;border-radius:12px;display:inline-block}.level-status .status.completed{background:#4caf5033;color:var(--success)}.level-status .status.locked{background:#ffffff1a;color:var(--text-muted)}.level-status .status.active{background:#6c63ff33;color:var(--primary-light)}.level-status .status.available{background:#00d9ff33;color:var(--secondary)}.connector{display:none}.code-playground{display:flex;flex-direction:column;gap:1rem}.playground-toolbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.toolbar-left{display:flex;align-items:center;gap:1rem}.file-name{font-size:.9rem;font-weight:500}.template-badge{font-size:.75rem;padding:.25rem .5rem;background:var(--primary);border-radius:4px}.toolbar-right{display:flex;gap:.5rem}.toolbar-btn{padding:.5rem 1rem;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.toolbar-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.toolbar-btn.hint-btn{border-color:var(--warning);color:var(--warning)}.hints-panel{background:linear-gradient(135deg,#ffc1071a,#ffc1070d);border:1px solid rgba(255,193,7,.3);border-radius:var(--radius-md);padding:1rem;display:flex;justify-content:space-between;align-items:center}.hint-content{flex:1}.hint-text{color:var(--warning);font-size:.95rem}.hint-controls{display:flex;align-items:center;gap:1rem}.hint-counter{font-size:.8rem;color:var(--text-muted)}.next-hint-btn{padding:.4rem .8rem;background:var(--warning);border:none;border-radius:var(--radius-sm);color:#000;font-size:.8rem;font-weight:500;cursor:pointer}.mission-panel{background:linear-gradient(135deg,#6c63ff1a,#6c63ff0d);border:1px solid rgba(108,99,255,.3);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem}.mission-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(108,99,255,.2)}.mission-panel-header h4{margin:0;color:var(--primary-light);font-size:1rem;font-weight:600}.mission-panel-header .close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;font-size:1rem;transition:color var(--transition-fast)}.mission-panel-header .close-btn:hover{color:var(--text-primary)}.mission-list{display:flex;flex-direction:column;gap:.75rem}.mission-item{background:#0003;border-radius:var(--radius-sm);padding:.75rem;border-left:3px solid var(--primary)}.mission-item-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.mission-number{font-size:.75rem;color:var(--primary-light);font-weight:600}.mission-title{color:var(--text-primary);font-weight:500;font-size:.9rem}.mission-description{margin:0;color:var(--text-secondary);font-size:.8rem;line-height:1.4}.mission-result{margin-top:1rem;padding:.75rem;border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center}.mission-result.passed{background:linear-gradient(135deg,#4caf5033,#4caf501a);border:1px solid rgba(76,175,80,.4)}.mission-result.failed{background:linear-gradient(135deg,#f443361a,#f443360d);border:1px solid rgba(244,67,54,.3)}.mission-result-score{font-weight:600;color:var(--text-primary)}.mission-result-status{font-size:.9rem}.mission-result.passed .mission-result-status{color:var(--success)}.mission-result.failed .mission-result-status{color:var(--error-light)}.mission-btn.active{background:var(--primary);color:#fff}.simulator-wrapper{margin-top:1rem;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color);background:var(--bg-card)}.editor-container{display:flex;background:var(--bg-dark);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color)}.line-numbers{padding:1rem .75rem;background:#0000004d;border-right:1px solid var(--border-color);user-select:none}.line-numbers pre{font-family:JetBrains Mono,Monaco,Consolas,monospace;font-size:13px;line-height:1.6;color:var(--text-muted);text-align:right}.code-editor-wrapper{flex:1;position:relative}.code-editor{width:100%;min-height:300px;padding:1rem;background:transparent;border:none;font-family:JetBrains Mono,Monaco,Consolas,monospace;font-size:13px;line-height:1.6;color:var(--secondary);resize:none}.code-editor:focus{outline:none}.code-editor::placeholder{color:var(--text-muted)}.autocomplete-dropdown{position:absolute;top:100%;left:0;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);max-height:200px;overflow-y:auto;z-index:100}.autocomplete-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;cursor:pointer;transition:background var(--transition-fast)}.autocomplete-item:hover{background:var(--bg-hover)}.autocomplete-item .completion{font-family:monospace;color:var(--secondary)}.autocomplete-item .description{font-size:.75rem;color:var(--text-muted)}.execution-area{display:flex;justify-content:space-between;align-items:center}.run-button{padding:.875rem 2rem;background:linear-gradient(135deg,var(--success),#45a049);border:none;border-radius:var(--radius-md);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all var(--transition-fast)}.run-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.run-button:disabled{opacity:.5;cursor:not-allowed}.run-button.running{background:var(--primary)}.run-button.stop-button{background:linear-gradient(135deg,#ef4444,#f97316)}.run-button.stop-button.infinite-loop{background:linear-gradient(135deg,#dc2626,#ea580c);animation:pulse-stop 1.5s ease-in-out infinite;box-shadow:0 0 20px #ef444480}@keyframes pulse-stop{0%,to{transform:scale(1);box-shadow:0 0 15px #ef444466}50%{transform:scale(1.02);box-shadow:0 0 25px #ef444499}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.connection-indicators{display:flex;gap:1rem}.indicator{display:flex;align-items:center;gap:.25rem;font-size:.85rem;color:var(--text-muted)}.output-area{background:var(--bg-dark);border-radius:var(--radius-md);border:1px solid var(--border-color);overflow:hidden}.output-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.output-header span{font-weight:500}.clear-output-btn{padding:.25rem .75rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.8rem;cursor:pointer}.clear-output-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.output-content{padding:1rem;min-height:100px;max-height:200px;overflow-y:auto;font-family:monospace;font-size:.85rem}.output-line{padding:.25rem 0}.share-panel{margin-top:1rem;padding:1rem 1.25rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md)}.share-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.share-actions{display:flex;gap:.5rem}.share-summary{background:var(--bg-dark);border-radius:var(--radius-sm);padding:.75rem;font-size:.85rem;color:var(--text-secondary);white-space:pre-wrap}.share-status{margin-top:.5rem;font-size:.85rem;color:var(--success)}.quick-reference{background:var(--bg-secondary);border-radius:var(--radius-md);padding:1rem}.camera-panel{margin-bottom:1rem;padding:1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md)}.camera-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.camera-panel-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}.camera-frame{position:relative;background:var(--bg-dark);border-radius:var(--radius-sm);min-height:160px;overflow:hidden;display:flex;align-items:center;justify-content:center}.camera-frame img{width:100%;height:auto;display:block}.camera-label{position:absolute;bottom:8px;right:8px;font-size:.75rem;padding:.2rem .45rem;background:#0009;color:#fff;border-radius:999px}.camera-placeholder{color:var(--text-muted);font-size:.85rem}.camera-result{margin-top:.5rem;font-size:.85rem;color:var(--text-secondary)}.quick-reference h4{font-size:.9rem;margin-bottom:.75rem;color:var(--text-secondary)}.reference-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}.reference-item{display:flex;flex-direction:column;padding:.5rem;background:var(--bg-dark);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.reference-item:hover{background:var(--bg-hover)}.reference-item code{font-size:.75rem;color:var(--secondary);margin-bottom:.25rem}.reference-item span{font-size:.7rem;color:var(--text-muted)}.simulation-controls{margin:1rem 0;padding:1rem 1.25rem;background:#0f172a99;border:1px solid rgba(148,163,184,.2);border-radius:12px}.simulation-title{font-weight:600;margin-bottom:.75rem}.simulation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem 1rem}.simulation-grid label{display:grid;gap:.4rem;font-size:.9rem;color:#e2e8f0}.simulation-grid input[type=range]{width:100%}.simulation-grid label.toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.tutorial-modal{background:var(--bg-card);border-radius:var(--radius-xl);width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.admin-confirm-modal{max-width:520px}.admin-confirm-modal .modal-body{padding:1.25rem 1.5rem .5rem;color:var(--text-secondary)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color)}.modal-header .header-left{display:flex;align-items:center;gap:.75rem}.level-badge{font-size:1.5rem}.modal-header h2{font-size:1.25rem;font-weight:600}.close-btn{width:36px;height:36px;background:var(--bg-secondary);border:none;border-radius:50%;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tutorial-progress{display:flex;justify-content:center;gap:.5rem;padding:1rem}.progress-dot{width:10px;height:10px;border-radius:50%;background:var(--bg-dark);transition:all var(--transition-fast)}.progress-dot.active{background:var(--primary);transform:scale(1.2)}.progress-dot.completed{background:var(--success)}.modal-content{flex:1;overflow-y:auto;padding:1.5rem}.step-content{display:flex;flex-direction:column;gap:1rem}.step-title{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.step-image{display:flex;justify-content:center;padding:2rem}.image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;height:150px;background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px dashed var(--border-color)}.placeholder-icon{font-size:3rem;margin-bottom:.5rem}.placeholder-text{font-size:.85rem;color:var(--text-muted)}.step-text{font-size:1rem;line-height:1.7;color:var(--text-secondary)}.code-block{background:var(--bg-dark);border-radius:var(--radius-md);overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#0000004d}.code-lang{font-size:.75rem;color:var(--text-muted)}.copy-btn{padding:.25rem .5rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.75rem;cursor:pointer}.copy-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.code-block pre{padding:1rem;overflow-x:auto}.code-block code{font-family:JetBrains Mono,monospace;font-size:.85rem;color:var(--secondary)}.tip-box{display:flex;gap:.75rem;padding:1rem;background:#ffc1071a;border-left:3px solid var(--warning);border-radius:0 var(--radius-md) var(--radius-md) 0}.tip-icon{font-size:1.25rem}.tip-box p{color:var(--warning);font-size:.9rem}.interactive-demo{padding:1.5rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.interactive-demo h4{margin-bottom:1rem}.color-sliders{display:flex;flex-direction:column;gap:.75rem}.slider-group{display:flex;flex-direction:column;gap:.25rem}.slider-group label{font-size:.85rem;color:var(--text-muted)}.slider-group input[type=range]{width:100%;height:8px;-webkit-appearance:none;background:var(--bg-dark);border-radius:4px}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer}.modal-footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-top:1px solid var(--border-color)}.step-counter{font-size:.9rem;color:var(--text-muted)}.footer-buttons{display:flex;gap:.75rem}.primary-btn,.secondary-btn{padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.95rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;color:#fff}.primary-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.secondary-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}.secondary-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.robot-control{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.camera-section,.connection-section,.control-section,.sensor-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem;border:1px solid var(--border-color)}.camera-section{grid-column:1 / 2;grid-row:1 / 3}.camera-header,.connection-header,.control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.camera-header h3,.connection-header h3,.control-header h3{font-size:1rem;font-weight:600}.camera-controls{display:flex;gap:.5rem}.camera-btn,.settings-btn{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.camera-btn:hover,.settings-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.camera-btn.active{background:var(--error);border-color:var(--error);color:#fff}.camera-view{position:relative;background:#000;border-radius:var(--radius-md);aspect-ratio:4/3;overflow:hidden}.camera-feed{width:100%;height:100%;position:relative}.camera-feed img{width:100%;height:100%;object-fit:contain}.detection-overlay{position:absolute;border:2px solid var(--secondary);background:#00d9ff1a;border-radius:4px}.detection-label{position:absolute;top:-24px;left:0;background:var(--secondary);color:#000;font-size:.7rem;font-weight:600;padding:.25rem .5rem;border-radius:4px;white-space:nowrap}.camera-overlay-info{position:absolute;bottom:.5rem;left:.5rem;display:flex;gap:.5rem}.fps,.resolution{background:#000000b3;padding:.25rem .5rem;border-radius:4px;font-size:.7rem;font-family:monospace}.camera-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted)}.camera-placeholder .placeholder-icon{font-size:3rem;margin-bottom:.5rem;opacity:.5}.camera-placeholder p{font-size:.9rem}.status-badge{font-size:.75rem;padding:.25rem .75rem;border-radius:12px}.status-badge.connected{background:#4caf5033;color:var(--success)}.status-badge.disconnected{background:#f4433633;color:var(--error)}.connection-form{display:flex;flex-direction:column;gap:1rem}.input-group label{font-size:.85rem;color:var(--text-muted)}.input-group input{padding:.75rem 1rem;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.95rem}.input-group input:focus{outline:none;border-color:var(--primary)}.input-group input:disabled{opacity:.5}.connect-btn{padding:.875rem;background:linear-gradient(135deg,var(--success),#45a049);border:none;border-radius:var(--radius-md);color:#fff;font-size:.95rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all var(--transition-fast)}.connect-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.connect-btn:disabled{opacity:.5;cursor:not-allowed}.robot-info{display:flex;flex-direction:column;gap:1rem}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.info-item{display:flex;flex-direction:column;gap:.25rem}.info-label{font-size:.75rem;color:var(--text-muted)}.info-value{font-size:.9rem;font-weight:500}.battery-indicator{display:flex;align-items:center;gap:.5rem}.battery-bar{flex:1;height:6px;background:var(--bg-dark);border-radius:3px;overflow:hidden}.battery-fill{height:100%;border-radius:3px;transition:width var(--transition-normal)}.battery-text{font-size:.8rem;font-weight:500}.disconnect-btn{padding:.75rem;background:var(--bg-secondary);border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast)}.disconnect-btn:hover{background:var(--error);color:#fff}.control-hint{font-size:.75rem;color:var(--text-muted)}.control-modes{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.button-controls{display:flex;flex-direction:column;align-items:center;gap:.5rem}.control-btn{width:64px;height:64px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.control-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--primary)}.control-btn.active{background:var(--primary);border-color:var(--primary)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn .arrow{font-size:1.5rem}.control-btn .label{font-size:.65rem;color:var(--text-muted);margin-top:.25rem}.control-btn.stop{background:var(--error);border-color:var(--error)}.control-btn.stop .stop-icon{font-size:1.25rem}.control-row{display:flex;gap:.5rem}.joystick-controls{display:flex;flex-direction:column;align-items:center}.joystick-controls h4{font-size:.85rem;color:var(--text-muted);margin-bottom:.75rem}.joystick-area{width:150px;height:150px;border-radius:50%;background:var(--bg-secondary);border:2px solid var(--border-color);position:relative;cursor:pointer}.joystick-area.disabled{opacity:.4;cursor:not-allowed}.joystick-bg{position:absolute;inset:15px;border-radius:50%;background:var(--bg-dark)}.joystick-directions{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.joystick-directions .dir{position:absolute;font-size:.9rem;color:var(--text-muted);opacity:.5}.joystick-directions .dir.up{top:5px}.joystick-directions .dir.right{right:5px}.joystick-directions .dir.down{bottom:5px}.joystick-directions .dir.left{left:5px}.joystick-handle{position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:0 4px 15px #6c63ff66;cursor:grab;transition:transform .05s ease-out}.joystick-handle:active{cursor:grabbing}.sensor-section{grid-column:2}.sensor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.sensor-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.sensor-icon{font-size:1.5rem}.sensor-label{font-size:.75rem;color:var(--text-muted)}.sensor-value{font-size:.9rem;font-weight:600;display:block;margin-top:.25rem}.challenges-area{display:flex;flex-direction:column;gap:2rem}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.badge-card{display:flex;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);transition:all var(--transition-fast)}.badge-card.unlocked{border-color:var(--success);background:linear-gradient(135deg,var(--bg-secondary),rgba(76,175,80,.1))}.badge-card.locked{opacity:.5}.badge-icon{font-size:2.5rem}.badge-info{display:flex;flex-direction:column;gap:.25rem}.badge-info h4{font-size:1rem;font-weight:600}.badge-info p{font-size:.85rem;color:var(--text-secondary)}.unlock-date{font-size:.75rem;color:var(--success)}.weekly-challenges h3{font-size:1.1rem;margin-bottom:1rem}.challenge-list{display:flex;flex-direction:column;gap:1rem}.challenge-item{display:flex;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.challenge-icon{font-size:2rem}.challenge-info{flex:1}.challenge-info h4{font-size:.95rem;font-weight:600;margin-bottom:.25rem}.challenge-info p{font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.challenge-progress{display:flex;align-items:center;gap:.75rem}.challenge-progress .progress-bar{flex:1;height:6px;background:var(--bg-dark);border-radius:3px;overflow:hidden}.challenge-progress .progress-bar>div{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:3px}.challenge-progress span{font-size:.75rem;color:var(--text-muted);white-space:nowrap}.practice-area{display:flex;flex-direction:column;gap:1.5rem}.practice-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.practice-header h2{display:flex;align-items:center;gap:.5rem;font-size:1.25rem}.template-selector{display:flex;gap:.5rem;flex-wrap:wrap}.template-btn{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.template-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.template-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.no-level-selected{display:flex;align-items:center;justify-content:center;min-height:400px}.empty-state{text-align:center}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.empty-state h3{font-size:1.25rem;margin-bottom:.5rem}.empty-state p{color:var(--text-muted);margin-bottom:1.5rem}.footer{padding:1.5rem 2rem;text-align:center;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.85rem}.footer p{display:flex;align-items:center;justify-content:center;gap:.5rem}.footer-logo{height:24px;opacity:.6}.footer-links{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.9rem}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:var(--primary);text-decoration:underline}.footer-links span{color:var(--text-muted)}.markdown-content{line-height:1.8}.markdown-content h1{font-size:2rem;margin-top:2rem;margin-bottom:1rem;color:var(--text-primary);border-bottom:2px solid var(--border-color);padding-bottom:.5rem}.markdown-content h2{font-size:1.5rem;margin-top:2rem;margin-bottom:.75rem;color:var(--text-primary)}.markdown-content h3{font-size:1.25rem;margin-top:1.5rem;margin-bottom:.5rem;color:var(--text-secondary)}.markdown-content p{margin-bottom:1rem;color:var(--text-secondary)}.markdown-content ul,.markdown-content ol{margin-left:1.5rem;margin-bottom:1rem}.markdown-content li{margin-bottom:.5rem;color:var(--text-secondary)}.markdown-content table{width:100%;border-collapse:collapse;margin:1rem 0}.markdown-content th,.markdown-content td{border:1px solid var(--border-color);padding:.75rem;text-align:left}.markdown-content th{background:var(--bg-secondary);font-weight:600;color:var(--text-primary)}.markdown-content code{background:var(--bg-secondary);padding:.2rem .4rem;border-radius:.25rem;font-family:Courier New,monospace;font-size:.9em}.markdown-content pre{background:var(--bg-secondary);padding:1rem;border-radius:.5rem;overflow-x:auto;margin:1rem 0}.markdown-content pre code{background:none;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}@media (max-width: 1200px){.robot-control{grid-template-columns:1fr}.camera-section{grid-column:1;grid-row:auto}.progress-tracker{grid-template-columns:1fr;gap:1.5rem}.stats-grid{flex-wrap:wrap}}@media (max-width: 900px){:root{--nav-width: 0}.main-navigation{position:fixed;inset:auto 0 0;width:100%;height:auto;flex-direction:row;padding:.5rem 1rem;border-right:none;border-top:1px solid var(--border-color)}.nav-brand,.nav-status{display:none}.nav-items{flex-direction:row;justify-content:space-around;width:100%}.nav-item{flex-direction:column;padding:.5rem;gap:.25rem}.nav-label{font-size:.7rem}.app-content{margin-left:0;margin-bottom:70px}.main-content{padding:1rem}.levels-container,.control-modes{grid-template-columns:1fr}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.animate-fadeIn{animation:fadeIn .3s ease}.animate-slideUp{animation:slideUp .4s ease}.animate-scaleIn{animation:scaleIn .3s ease}.settings-page{max-width:800px;margin:0 auto}.settings-page h2{font-size:1.5rem;margin-bottom:2rem}.settings-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--border-color)}.settings-section h3{font-size:1rem;margin-bottom:1rem;color:var(--text-secondary)}.settings-group{margin-bottom:1rem}.settings-group:last-child{margin-bottom:0}.settings-group label{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem}.settings-group input[type=text],.settings-group select{width:100%;padding:.75rem 1rem;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.95rem}.settings-group input[type=text]:focus,.settings-group select:focus{outline:none;border-color:var(--primary)}.settings-group.toggle-group{display:flex;justify-content:space-between;align-items:center}.settings-group.toggle-group label{margin-bottom:0}.settings-group input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary)}.settings-actions{display:flex;gap:1rem}.danger-btn{padding:.75rem 1.5rem;background:transparent;border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast)}.danger-btn:hover{background:var(--error);color:#fff}.info-list{display:flex;flex-direction:column;gap:.5rem}.info-row{display:flex;justify-content:space-between;font-size:.9rem}.info-row span:first-child{color:var(--text-muted)}.coming-soon{display:flex;align-items:center;justify-content:center;min-height:60vh}.coming-soon-content{text-align:center;padding:3rem}.coming-soon-icon{font-size:5rem;display:block;margin-bottom:1.5rem}.coming-soon h2{font-size:2rem;margin-bottom:.5rem}.coming-soon p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.feature-preview{display:flex;justify-content:center;gap:2rem}.preview-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;background:var(--bg-card);border-radius:var(--radius-lg);min-width:120px}.preview-item span:first-child{font-size:2rem}.preview-item span:last-child{font-size:.9rem;color:var(--text-muted)}.dev-output{position:fixed;bottom:80px;right:1rem;width:400px;max-height:300px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);z-index:200}.dev-output-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.dev-output-header span{font-size:.85rem;font-weight:500}.dev-output-header button{padding:.25rem .5rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.75rem;cursor:pointer}.dev-output-header button:hover{background:var(--bg-hover);color:var(--text-primary)}.dev-output-content{padding:.5rem 1rem;max-height:250px;overflow-y:auto;font-family:monospace;font-size:.75rem;line-height:1.5}.dev-output-content div{padding:.125rem 0;color:var(--text-secondary)}@media (max-width: 900px){.dev-output{width:calc(100% - 2rem);bottom:90px;left:1rem;right:1rem}.feature-preview{flex-direction:column;gap:1rem}.preview-item{flex-direction:row;justify-content:center}}.editor-container{flex:1;min-height:400px;height:400px;position:relative}.fill-height{height:100%;width:100%}.blockly-editor-wrapper{height:400px!important;min-height:400px}.blockly-editor-wrapper .injectionDiv{height:100%!important}.blocklyToolboxCategory .blocklyTreeLabel{color:#fff!important;font-size:14px!important;font-weight:600!important}.blocklyTreeRow:hover{background:#ffffff1a!important}.blocklyTreeSelected{background:#fff3!important}.blocklyDropDownDiv{background-color:#2d2d2d!important;border:1px solid #555!important;border-radius:4px!important;box-shadow:0 4px 12px #0006!important}.blocklyMenuItem{color:#fff!important;padding:8px 16px!important}.blocklyMenuItem:hover,.blocklyMenuItemHighlight{background-color:#3d3d3d!important}.blocklyHtmlInput{background-color:#1a1a1a!important;color:#fff!important;border:2px solid #4a9eff!important;border-radius:4px!important;padding:2px 4px!important;font-size:14px!important;font-weight:600!important}.blocklySelected>.blocklyPath{stroke:#4a9eff!important;stroke-width:3px!important}.blocklyScrollbarHandle{fill:#555!important}.blocklyScrollbarHandle:hover{fill:#777!important}.cm-editor{height:400px!important;background:#1e1e2e!important;border:1px solid #313244!important;border-radius:8px!important}.cm-editor .cm-scroller{font-family:Fira Code,Consolas,Monaco,monospace;font-size:14px;line-height:1.6}.cm-editor .cm-content,.cm-editor .cm-line{color:#cdd6f4!important}.cm-editor .cm-keyword{color:#f38ba8!important;font-weight:600!important}.cm-editor .cm-string{color:#a6e3a1!important}.cm-editor .cm-comment{color:#9399b2!important;font-style:italic!important}.cm-editor .cm-number{color:#fab387!important;font-weight:500!important}.cm-editor .cm-function,.cm-editor .cm-def{color:#89b4fa!important;font-weight:600!important}.cm-editor .cm-variableName{color:#cdd6f4!important}.cm-editor .cm-operator{color:#cba6f7!important;font-weight:600!important}.cm-editor .cm-builtin{color:#94e2d5!important}.cm-editor .cm-property{color:#89dceb!important}.cm-editor .cm-gutters{background:#181825!important;color:#6c7086!important;border-right:1px solid #313244!important}.cm-editor .cm-activeLineGutter{background:#1e1e2e!important;color:#cdd6f4!important}.cm-editor .cm-activeLine{background:#89b4fa1a!important}.cm-editor .cm-cursor{border-left:2px solid #89b4fa!important}.cm-editor .cm-selectionBackground,.cm-editor ::selection{background:#89b4fa4d!important}.cm-tooltip{background:#1e1e2e!important;border:1px solid #45475a!important;border-radius:8px!important;box-shadow:0 4px 20px #00000080!important}.cm-tooltip-autocomplete{background:#1e1e2e!important}.cm-tooltip-autocomplete>ul{font-family:JetBrains Mono,Fira Code,monospace!important;max-height:300px!important}.cm-tooltip-autocomplete>ul>li{padding:6px 12px!important;color:#cdd6f4!important;border-radius:4px!important;margin:2px 4px!important}.cm-tooltip-autocomplete>ul>li:hover{background:#313244!important}.cm-tooltip-autocomplete>ul>li[aria-selected=true],.cm-tooltip-autocomplete>ul>li.cm-completionMatchedText{background:#45475a!important;color:#fff!important}.cm-completionLabel{color:#cdd6f4!important;font-weight:500!important}.cm-completionDetail{color:#6c7086!important;font-size:.85em!important;margin-left:8px!important}.cm-completionInfo{background:#1e1e2e!important;border:1px solid #45475a!important;color:#a6adc8!important;padding:8px 12px!important;border-radius:6px!important;max-width:300px!important}.cm-completionIcon-function:after{color:#89b4fa!important}.cm-completionIcon-keyword:after{color:#cba6f7!important}.cm-completionIcon-class:after{color:#f9e2af!important}.cm-completionIcon-constant:after{color:#fab387!important}.cm-completionIcon-method:after{color:#94e2d5!important}.cm-completionIcon-module:after{color:#a6e3a1!important}.cm-completionMatchedText{color:#89b4fa!important;font-weight:600!important;text-decoration:none!important}.practice-header .header-controls{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.editor-mode-toggle{display:flex;background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:4px;border:1px solid var(--border-color)}.toggle-btn{padding:.5rem 1rem;font-size:.85rem;font-weight:500;border:none;background-color:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:.5rem}.toggle-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.toggle-btn.active{background-color:var(--primary);color:#fff;box-shadow:0 2px 8px #6c63ff4d}.editor-mode-toggle.inline{display:flex;background-color:#1e1e4acc;border-radius:8px;padding:2px;border:1px solid rgba(255,255,255,.1);margin-left:8px}.editor-mode-toggle.inline .toggle-btn{padding:6px 12px;font-size:.8rem}.practice-header.compact{padding:.75rem 1rem;margin-bottom:.5rem}.practice-header.compact h2{font-size:1.1rem;margin:0}.practice-area.practice-only{display:flex;flex-direction:column;gap:.5rem}.practice-area.practice-only .code-playground{flex:1;min-height:70vh}.course-selector{display:flex;gap:1rem;margin-bottom:1.5rem;padding:.5rem;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.course-tab{flex:1;display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:transparent;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.course-tab:hover{background:var(--bg-hover)}.course-tab.active{background:linear-gradient(135deg,#6c63ff26,#6c63ff0d);border-color:var(--primary)}.course-icon{font-size:2rem}.course-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.course-name{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.course-desc{font-size:.85rem;color:var(--text-muted)}.beginner-progress-summary{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--border-color)}.progress-stats{display:flex;justify-content:space-around;margin-bottom:1rem}.progress-stats .stat{text-align:center}.progress-stats .stat-value{font-size:1.5rem;font-weight:700;color:var(--primary)}.progress-stats .stat-label{font-size:.85rem;color:var(--text-muted);margin-left:.25rem}.progress-bar-container{height:8px;background:var(--bg-dark);border-radius:4px;overflow:hidden}.progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width .5s ease}.beginner-levels-grid{animation:fadeIn .3s ease}.phase-section{margin-bottom:2rem}.phase-title{display:flex;align-items:center;gap:.75rem;font-size:1.1rem;margin-bottom:1rem;color:var(--text-primary)}.phase-badge{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:.25rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600}.beginner-levels-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.beginner-level-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.25rem;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.beginner-level-card:hover:not(.locked){transform:translateY(-4px);box-shadow:0 8px 25px #0000004d;border-color:var(--primary)}.beginner-level-card.completed{border-color:var(--success);background:linear-gradient(135deg,rgba(16,185,129,.1),transparent)}.beginner-level-card.locked{opacity:.6;cursor:not-allowed}.level-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.week-badge{background:var(--bg-hover);color:var(--text-secondary);padding:.2rem .6rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.beginner-level-card .level-icon{font-size:1.5rem}.beginner-level-card .level-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;line-height:1.4}.beginner-level-card .level-week-num{display:inline-block;background:var(--primary);color:#fff;font-weight:700;padding:.1rem .4rem;border-radius:4px;font-size:.85rem;margin-right:.3rem}.selected-course-banner{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:1rem 1.2rem;margin:1rem 0;background:linear-gradient(135deg,#6c63ff26,#00d9ff1a);border:1px solid rgba(108,99,255,.3);border-radius:12px;box-shadow:0 2px 12px #6c63ff26}.selected-course-banner .selected-phase{background:var(--secondary);color:#000;font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:20px}.selected-course-banner .selected-week{background:var(--primary);color:#fff;font-size:.85rem;font-weight:700;padding:.3rem .8rem;border-radius:20px}.selected-course-banner .selected-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);padding-left:.5rem;border-left:2px solid var(--primary)}.course-subtitle{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem;padding-left:.5rem;border-left:3px solid var(--primary)}.beginner-level-card .level-subtitle{font-size:.85rem;color:var(--text-muted);margin-bottom:.75rem}.level-sensors{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}.sensor-tag{font-size:1.1rem;padding:.2rem;border-radius:var(--radius-sm);background:var(--bg-hover)}.physical-ai-badge{display:inline-flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,#6c63ff33,#6c63ff1a);color:var(--primary);padding:.25rem .6rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.physical-ai-badge .ai-icon{font-size:.9rem}.lock-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;opacity:.5}.complete-check{position:absolute;top:.75rem;right:.75rem;width:24px;height:24px;background:var(--success);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}.learning-objectives,.hints-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem 1.25rem;margin-bottom:1rem}.learning-objectives h4,.hints-section h4{font-size:.95rem;color:var(--text-primary);margin-bottom:.75rem}.learning-objectives ul,.hints-section ul{margin:0;padding-left:1.25rem}.learning-objectives li,.hints-section li{color:var(--text-secondary);font-size:.9rem;margin-bottom:.4rem}.hints-section{background:linear-gradient(135deg,rgba(251,191,36,.1),transparent);border-color:#fbbf244d}.beginner-badges .badge-card{display:flex;align-items:flex-start;gap:1rem}.badge-xp{display:inline-block;background:var(--bg-hover);color:var(--primary);padding:.15rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;margin-top:.25rem}.level-progress-section{margin-top:2rem}.level-progress-section h3{font-size:1.1rem;margin-bottom:1rem;color:var(--text-primary)}.level-track{display:flex;flex-wrap:wrap;gap:1rem}.level-node{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);opacity:.5;transition:all var(--transition-fast)}.level-node.achieved{opacity:1;border-color:var(--success)}.level-node.current{border-color:var(--primary);background:linear-gradient(135deg,rgba(108,99,255,.15),transparent);box-shadow:0 4px 15px #6c63ff33}.level-circle{width:40px;height:40px;border-radius:50%;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--text-secondary)}.level-node.achieved .level-circle{background:var(--success);color:#fff}.level-node.current .level-circle{background:var(--primary);color:#fff}.level-info{display:flex;flex-direction:column}.level-info .level-name{font-size:.9rem;font-weight:600;color:var(--text-primary)}.level-info .level-xp{font-size:.75rem;color:var(--text-muted)}.file-explorer{background:linear-gradient(135deg,var(--bg-card) 0%,rgba(30,30,74,.8) 100%);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-md)}.file-explorer h3{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color);background:linear-gradient(90deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.file-list-controls{display:flex;justify-content:flex-end}.file-list-controls button{padding:.5rem 1rem;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-hover));border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:.4rem}.file-list-controls button:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #6c63ff4d}.file-list-controls button:disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.5rem;max-height:280px;overflow-y:auto;padding-right:.25rem}.file-list .no-files{color:var(--text-muted);font-size:.9rem;text-align:center;padding:2rem 1rem;font-style:italic}.file-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);position:relative}.file-item:hover{background:var(--bg-hover);border-color:var(--primary);transform:translate(4px)}.file-item.selected{background:linear-gradient(135deg,#6c63ff33,#6c63ff1a);border-color:var(--primary);box-shadow:0 0 0 1px #6c63ff4d}.file-icon{font-size:1.25rem;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.file-name{flex:1;font-size:.9rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item:hover .file-name{color:#fff}.file-item.selected .file-name{color:var(--primary-light);font-weight:600}.file-size{font-size:.75rem;color:var(--text-muted);background:var(--bg-dark);padding:.2rem .5rem;border-radius:var(--radius-sm);font-family:JetBrains Mono,monospace;margin-right:.5rem}.delete-file-btn{opacity:0;padding:.35rem .5rem;background:transparent;border:1px solid var(--error);border-radius:var(--radius-sm);color:var(--error);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.file-item:hover .delete-file-btn{opacity:1}.delete-file-btn:hover{background:var(--error);color:#fff;transform:scale(1.1)}.file-actions{display:flex;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--border-color)}.file-actions input[type=text]{flex:1;padding:.65rem 1rem;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.85rem;transition:all var(--transition-fast)}.file-actions input[type=text]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff26}.file-actions input[type=text]::placeholder{color:var(--text-muted);font-size:.8rem}.file-actions input[type=text]:disabled{opacity:.5;cursor:not-allowed}.file-actions button{padding:.65rem 1.25rem;background:linear-gradient(135deg,var(--success),#45a049);border:none;border-radius:var(--radius-md);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.file-actions button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.file-actions button:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-hover)}.file-list::-webkit-scrollbar{width:6px}.file-list::-webkit-scrollbar-track{background:var(--bg-dark);border-radius:3px}.file-list::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.file-list::-webkit-scrollbar-thumb:hover{background:var(--primary)}@media (max-width: 768px){.course-selector{flex-direction:column}.course-tab{padding:.75rem 1rem}.progress-stats{flex-wrap:wrap;gap:1rem}.progress-stats .stat{flex:1 1 40%}.beginner-levels-container{grid-template-columns:1fr}.level-track,.file-actions{flex-direction:column}.file-actions button{width:100%}}.admin-panel{margin:.75rem 0 1rem;padding:.75rem;border-radius:10px;background:#0f172a99;border:1px solid rgba(148,163,184,.2)}.admin-panel-header{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.admin-toggle-btn,.admin-clear-btn{background:#1f2937;color:#e5e7eb;border:0;border-radius:8px;padding:.4rem .7rem;cursor:pointer;font-size:.9rem}.admin-toggle-btn:hover,.admin-clear-btn:hover{background:#111827}.admin-status{font-size:.85rem;color:#94a3b8}.admin-status.active{color:#34d399}.admin-panel-body{margin-top:.75rem;display:grid;gap:.5rem}.admin-panel-body input{width:100%;padding:.55rem .7rem;border-radius:8px;border:1px solid rgba(148,163,184,.3);background:#0f172a;color:#e2e8f0}.admin-hint{margin:0;font-size:.8rem;color:#94a3b8}.admin-hint.valid{color:#34d399}.admin-hint.invalid,.admin-hint.error{color:#f87171}.objectives-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,320px);column-gap:1.25rem;align-items:start;justify-content:center;max-width:900px;margin:0 auto}.objectives-list{margin:0;padding-left:1.2rem;line-height:1.6}.pinmap-aside{justify-self:center}.pinmap-thumb-btn{display:inline-flex;flex-direction:column;gap:.5rem;padding:.6rem;border-radius:10px;background:#111827;border:1px solid rgba(255,255,255,.08);cursor:pointer;max-width:320px}.pinmap-thumb-btn:hover{border-color:#fff3}.pinmap-thumb-image{width:100%;max-width:320px;border-radius:8px;display:block;background:#0b1220}.pinmap-thumb-label{color:#e2e8f0;font-size:.9rem}@media (max-width: 900px){.objectives-layout{grid-template-columns:1fr;row-gap:1rem}.pinmap-aside{justify-self:start}.pinmap-thumb-btn,.pinmap-thumb-image{max-width:min(420px,90vw)}}.pinmap-modal-overlay{position:fixed;inset:0;background:#0f172ab3;display:flex;align-items:center;justify-content:center;z-index:2000;padding:1.5rem}.pinmap-modal{width:min(960px,95vw);max-height:90vh;background:#0f172a;border-radius:14px;box-shadow:0 20px 60px #00000073;overflow:hidden;display:flex;flex-direction:column}.pinmap-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.1);color:#f8fafc}.pinmap-close-btn{background:transparent;color:#f8fafc;border:0;font-size:1.2rem;cursor:pointer}.pinmap-image{width:100%;height:auto;max-height:calc(90vh - 70px);object-fit:contain;background:#0b1220}.learning-detail{margin-top:1.2rem;background:#0f172a80;border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:1rem}.learning-detail.sticky{position:sticky;top:1rem;z-index:20;max-height:calc(100vh - 2rem);overflow:auto}.detail-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}.detail-tab{border:1px solid rgba(148,163,184,.2);background:#1e293b80;color:#e2e8f0;padding:.45rem .9rem;border-radius:999px;font-size:.85rem;cursor:pointer;transition:background .2s ease,border .2s ease}.detail-tab.active{background:#38bdf833;border-color:#38bdf880;color:#f8fafc}.detail-tab.detail-cta{background:#10b9812e;border-color:#10b98173;color:#ecfdf5}.detail-toggle-btn{margin:.6rem 0 1rem;border:1px solid rgba(148,163,184,.25);background:#1e293b80;color:#e2e8f0;padding:.45rem .9rem;border-radius:999px;font-size:.85rem;cursor:pointer}.detail-accordion{display:grid;gap:.7rem}.detail-section{border:1px solid rgba(148,163,184,.18);border-radius:14px;overflow:hidden;background:#0f172a59}.detail-section-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#1e293b99;color:#e2e8f0;border:0;cursor:pointer;font-size:.95rem}.detail-section-toggle{font-size:1.1rem;color:#94a3b8}.detail-cta-row{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}.detail-cta-btn{border:1px solid rgba(16,185,129,.45);background:#10b9812e;color:#ecfdf5;padding:.5rem 1rem;border-radius:999px;font-size:.85rem;cursor:pointer}.detail-panel{background:#0f172a66;border-radius:12px;padding:.9rem 1rem}.detail-intro-title{margin:0 0 .6rem;font-size:.9rem;color:#94a3b8}.detail-list{display:grid;gap:.4rem;padding-left:1.1rem;color:#d3dbe7;font-size:.95rem}.detail-list.ordered{list-style:decimal}.detail-list.checklist{list-style:"✅ "}.detail-list.tips{list-style:"💡 "}.detail-code{background:#0b1220;border-radius:12px;padding:.9rem 1rem;overflow-x:auto;font-size:.9rem;line-height:1.5;color:#e2e8f0;border:1px solid rgba(148,163,184,.2)}.learning-detail.horizontal-tabs{background:#0f172a66;border-radius:16px;border:1px solid rgba(148,163,184,.15);overflow:hidden}.learning-detail-header{padding:1rem 1.2rem;border-bottom:1px solid rgba(148,163,184,.12);background:#1e293b66;display:flex;flex-wrap:wrap;gap:1.5rem}.learning-objectives.compact,.hints-section.compact{flex:1;min-width:250px}.learning-objectives.compact h4,.hints-section.compact h4{font-size:.9rem;margin:0 0 .5rem;color:#e2e8f0}.learning-objectives.compact .objectives-list,.hints-section.compact ul{font-size:.85rem;color:#cbd5e1;padding-left:1.2rem;margin:0;display:grid;gap:.3rem}.learning-objectives.compact .objectives-list li,.hints-section.compact ul li{line-height:1.4}.detail-tabs-nav{display:flex;gap:0;background:#1e293b99;border-bottom:1px solid rgba(148,163,184,.15);overflow-x:auto;scrollbar-width:thin}.detail-tabs-nav::-webkit-scrollbar{height:3px}.detail-tabs-nav::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:2px}.detail-tab-btn{flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 16px;background:transparent;border:none;border-bottom:3px solid transparent;color:#94a3b8;font-size:.85rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.detail-tab-btn:hover{background:#94a3b814;color:#e2e8f0}.detail-tab-btn.active{background:#6366f11f;border-bottom-color:#6366f1;color:#fff}.detail-tab-btn .tab-icon{font-size:1.1rem}.detail-tab-btn .tab-label{font-weight:500}.detail-tab-btn.active .tab-label{font-weight:600}.detail-tab-content{padding:0}.detail-tab-content .tab-panel{padding:1rem 1.2rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.learning-detail.horizontal-tabs .detail-cta-row{padding:.8rem 1.2rem;border-top:1px solid rgba(148,163,184,.1);background:#1e293b4d}@media (max-width: 640px){.detail-tab-btn{min-width:70px;padding:10px 12px;font-size:.75rem}.detail-tab-btn .tab-icon{font-size:1rem}.detail-tab-content .tab-panel{padding:.8rem 1rem}}.learning-summary{display:grid;gap:1rem}.dashboard{display:grid;grid-template-columns:280px 1fr;gap:2rem;min-height:80vh;width:100%}.dashboard-sidebar{background:linear-gradient(180deg,#0f172a,#1e1b4b,#0f172a);border-radius:20px;padding:2rem 1.5rem;border:1px solid rgba(139,92,246,.2);display:flex;flex-direction:column;gap:2rem;box-shadow:0 10px 40px #0006,0 0 80px #8b5cf614,inset 0 1px #ffffff0d;position:relative;overflow:hidden}.dashboard-sidebar:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),transparent)}.dashboard-brand{display:flex;flex-direction:column;gap:.6rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(139,92,246,.15)}.dashboard-brand-mark{font-weight:800;letter-spacing:.25rem;font-size:1.2rem;background:linear-gradient(135deg,#a78bfa,#c4b5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-brand-text{font-size:.9rem;color:#a5b4fc;font-weight:500}.dashboard-nav{display:flex;flex-direction:column;gap:.5rem}.dashboard-nav-label{display:flex;align-items:center;gap:.8rem}.dashboard-nav-icon{font-size:1.1rem;opacity:.9}.dashboard-nav-item{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-radius:14px;color:#c7d2fe;text-decoration:none;background:#1e1b4b66;border:1px solid transparent;font-weight:500;font-size:.95rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.dashboard-nav-item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:0;background:linear-gradient(180deg,#a78bfa,#6366f1);border-radius:0 4px 4px 0;transition:height .3s ease}.dashboard-nav-item:hover{transform:translate(4px);border-color:#8b5cf64d;background:#6366f126;color:#e0e7ff}.dashboard-nav-item:hover:before{height:50%}.dashboard-nav-item.active{border-color:#8b5cf680;background:linear-gradient(135deg,#6366f140,#8b5cf626);color:#fff;box-shadow:0 4px 15px #6366f133}.dashboard-nav-item.active:before{height:60%}.dashboard-nav-indicator{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#a78bfa,#6366f1);box-shadow:0 0 12px #a78bfa99;animation:pulse-indicator 2s ease-in-out infinite}@keyframes pulse-indicator{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.9)}}.dashboard-main{display:flex;flex-direction:column;gap:1.5rem}.dashboard-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;padding:1.8rem 2rem;background:linear-gradient(135deg,#0f172ae6,#1e1b4b99);border-radius:20px;border:1px solid rgba(139,92,246,.15);box-shadow:0 4px 20px #00000026;position:relative;overflow:hidden}.dashboard-header:before{content:"";position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);pointer-events:none}.dashboard-header h1{margin:.4rem 0 .6rem;font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-kicker{text-transform:uppercase;letter-spacing:.15rem;font-size:.75rem;color:#a78bfa;font-weight:600}.dashboard-description{color:#a5b4fc;margin:0;font-size:.95rem}.dashboard-actions{display:flex;gap:.8rem}.dashboard-actions .secondary-btn{background:#6366f126;border:1px solid rgba(139,92,246,.3);color:#c7d2fe;padding:.7rem 1.2rem;border-radius:12px;font-weight:500;transition:all .3s ease}.dashboard-actions .secondary-btn:hover{background:#6366f140;border-color:#8b5cf680;transform:translateY(-2px)}.dashboard-actions .primary-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;padding:.7rem 1.4rem;border-radius:12px;font-weight:600;box-shadow:0 4px 15px #6366f159;transition:all .3s ease}.dashboard-actions .primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f173}.dashboard-body{display:flex;flex-direction:column;gap:1.5rem}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}.dashboard-card{background:linear-gradient(135deg,#0f172ad9,#1e1b4b80);border-radius:18px;padding:1.5rem 1.6rem;border:1px solid rgba(139,92,246,.12);color:#e2e8f0;position:relative;overflow:hidden;transition:all .3s ease}.dashboard-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),transparent);opacity:0;transition:opacity .3s ease}.dashboard-card:hover{transform:translateY(-4px);border-color:#8b5cf640;box-shadow:0 8px 30px #6366f126}.dashboard-card:hover:before{opacity:1}.dashboard-card h2{font-size:2.2rem;font-weight:700;margin:.5rem 0 .3rem;background:linear-gradient(135deg,#fff,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-card.highlight{background:linear-gradient(135deg,#6366f140,#8b5cf633);border-color:#8b5cf666;box-shadow:0 0 30px #6366f11a}.dashboard-card.highlight h2{background:linear-gradient(135deg,#a78bfa,#c4b5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-card.wide{grid-column:span 2}.card-kicker{text-transform:uppercase;letter-spacing:.1rem;font-size:.75rem;color:#a5b4fc;margin-bottom:.3rem;font-weight:600}.card-meta{color:#818cf8;font-size:.9rem}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(139,92,246,.1)}.card-header h3{font-size:1.1rem;font-weight:600;color:#e0e7ff}.card-tag{background:linear-gradient(135deg,#6366f133,#8b5cf626);color:#c4b5fd;border-radius:999px;padding:.35rem .9rem;font-size:.75rem;font-weight:600;border:1px solid rgba(139,92,246,.2)}.card-tag.warning{background:linear-gradient(135deg,#fbbf2433,#f59e0b26);color:#fcd34d;border-color:#fbbf244d}.card-list{display:grid;gap:.7rem;padding-left:0;list-style:none;color:#c7d2fe}.card-list li{padding:.7rem 1rem;background:#6366f114;border-radius:10px;border-left:3px solid rgba(139,92,246,.4);font-size:.9rem;transition:all .2s ease}.card-list li:hover{background:#6366f126;border-left-color:#8b5cf6b3;transform:translate(4px)}.alert-grid,.pipeline-grid,.plan-grid,.payment-flow,.funnel-grid,.improvement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.alert-item,.pipeline-item,.flow-step,.funnel-step,.improvement-item{background:linear-gradient(135deg,#1e1b4b80,#0f172a66);border-radius:14px;padding:1rem 1.2rem;border:1px solid rgba(139,92,246,.12);transition:all .3s ease}.alert-item:hover,.pipeline-item:hover,.flow-step:hover,.funnel-step:hover,.improvement-item:hover{border-color:#8b5cf64d;transform:translateY(-2px)}.alert-item p,.pipeline-item p,.flow-step p,.funnel-step p{color:#a5b4fc;font-size:.85rem;margin-bottom:.4rem}.alert-item strong,.pipeline-item strong,.flow-step strong,.funnel-step strong{font-size:1.4rem;background:linear-gradient(135deg,#fff,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.flow-step.warning,.funnel-step.highlight{border-color:#fbbf2466;background:linear-gradient(135deg,#fbbf241a,#1e1b4b80)}.plan-card{border:1px solid rgba(139,92,246,.2);border-radius:14px;padding:1.2rem 1.4rem;background:linear-gradient(135deg,#1e1b4b66,#0f172a66);transition:all .3s ease}.plan-card:hover{border-color:#8b5cf666;transform:translateY(-2px)}.plan-meta{display:inline-block;margin-top:.6rem;font-size:.9rem;color:#a78bfa;font-weight:500}.tag-grid{display:flex;flex-wrap:wrap;gap:.6rem}.tag{background:linear-gradient(135deg,#6366f126,#8b5cf61a);border:1px solid rgba(139,92,246,.2);padding:.4rem .9rem;border-radius:999px;font-size:.8rem;color:#c4b5fd;font-weight:500;transition:all .2s ease}.tag:hover{background:linear-gradient(135deg,#6366f140,#8b5cf633);transform:scale(1.05)}.content-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.board-column{background:linear-gradient(135deg,#1e1b4b66,#0f172a66);border-radius:16px;padding:1.2rem;border:1px solid rgba(139,92,246,.12)}.board-column h4{margin-bottom:1rem;font-size:.95rem;color:#c4b5fd;font-weight:600;padding-bottom:.7rem;border-bottom:1px solid rgba(139,92,246,.1)}.board-card{background:#6366f114;border-radius:12px;padding:.7rem .9rem;margin-bottom:.6rem;font-size:.9rem;color:#e0e7ff;border:1px solid transparent;transition:all .2s ease}.board-card:hover{background:#6366f126;border-color:#8b5cf633;transform:translate(3px)}.access-denied{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem}.access-denied-content{text-align:center;background:linear-gradient(135deg,#0f172ae6,#1e1b4b99);border:1px solid rgba(239,68,68,.2);border-radius:24px;padding:3rem 4rem;box-shadow:0 10px 40px #0000004d}.access-denied-icon{font-size:4rem;margin-bottom:1.5rem}.access-denied-content h2{font-size:1.8rem;color:#f87171;margin-bottom:.8rem}.access-denied-content p{color:#a5b4fc;margin-bottom:2rem;font-size:1.1rem}.access-denied-content .primary-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;padding:.9rem 2rem;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 4px 15px #6366f159;transition:all .3s ease}.access-denied-content .primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f173}@media (max-width: 1200px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 980px){.dashboard{grid-template-columns:1fr}.dashboard-sidebar{order:2}.dashboard-grid{grid-template-columns:1fr}.dashboard-card.wide{grid-column:span 1}.dashboard-header{flex-direction:column;align-items:flex-start;gap:1.2rem}.dashboard-actions{width:100%;justify-content:flex-end}}body.light .dashboard-sidebar{background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-color:#6366f126;box-shadow:0 10px 40px #00000014}body.light .dashboard-sidebar:before{background:linear-gradient(90deg,transparent,rgba(99,102,241,.4),transparent)}body.light .dashboard-brand-mark{background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}body.light .dashboard-brand-text{color:#6366f1}body.light .dashboard-nav-item{color:#475569;background:#f1f5f9cc}body.light .dashboard-nav-item:hover{color:#6366f1;background:#6366f114;border-color:#6366f133}body.light .dashboard-nav-item.active{color:#6366f1;background:linear-gradient(135deg,#6366f11f,#8b5cf614);border-color:#6366f14d}body.light .dashboard-header{background:linear-gradient(135deg,#fff,#f8fafc);border-color:#6366f11a;box-shadow:0 4px 20px #0000000d}body.light .dashboard-header h1{background:linear-gradient(135deg,#1e293b,#475569);-webkit-background-clip:text;-webkit-text-fill-color:transparent}body.light .dashboard-kicker{color:#6366f1}body.light .dashboard-description{color:#64748b}body.light .dashboard-card{background:linear-gradient(135deg,#fff,#f8fafc);border-color:#6366f11a;color:#334155}body.light .dashboard-card h2{background:linear-gradient(135deg,#1e293b,#475569);-webkit-background-clip:text;-webkit-text-fill-color:transparent}body.light .dashboard-card.highlight{background:linear-gradient(135deg,#6366f114,#8b5cf60d);border-color:#6366f133}body.light .dashboard-card.highlight h2{background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}body.light .card-kicker{color:#6366f1}body.light .card-meta{color:#8b5cf6}body.light .card-header h3{color:#334155}body.light .card-list li{background:#6366f10d;color:#475569}body.light .alert-item,body.light .pipeline-item,body.light .flow-step,body.light .funnel-step{background:linear-gradient(135deg,#f8fafc,#fff);border-color:#6366f11a}body.light .alert-item p,body.light .pipeline-item p,body.light .flow-step p{color:#64748b}body.light .alert-item strong,body.light .pipeline-item strong,body.light .flow-step strong{background:linear-gradient(135deg,#1e293b,#475569);-webkit-background-clip:text;-webkit-text-fill-color:transparent}body.light .access-denied-content{background:linear-gradient(135deg,#fff,#f8fafc);border-color:#ef444426;box-shadow:0 10px 40px #0000001a}body.light .access-denied-content p{color:#64748b}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 0%,var(--bg-hover) 50%,var(--bg-secondary) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-text{height:1em;margin-bottom:.5rem;border-radius:var(--radius-sm)}.skeleton-text.sm{height:.875em;width:60%}.skeleton-text.lg{height:1.25em;width:80%}.skeleton-title{height:1.5em;width:70%;margin-bottom:1rem}.skeleton-avatar{width:48px;height:48px;border-radius:50%}.skeleton-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem;border:1px solid var(--border-color)}.skeleton-card .skeleton-icon{width:64px;height:64px;border-radius:var(--radius-md);margin-bottom:1rem}.skeleton-card .skeleton-lines{display:flex;flex-direction:column;gap:.5rem}.skeleton-button{height:40px;width:120px;border-radius:var(--radius-md)}.skeleton-image{width:100%;aspect-ratio:16/9;border-radius:var(--radius-md)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.loading-spinner.sm{width:24px;height:24px;border-width:2px}.loading-spinner.lg{width:56px;height:56px;border-width:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem}.loading-text{color:var(--text-muted);font-size:var(--font-sm)}.tooltip-wrapper{position:relative;display:inline-flex}.tooltip{position:absolute;z-index:var(--z-tooltip);padding:.5rem .75rem;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-md)}.tooltip:before{content:"";position:absolute;width:8px;height:8px;background:var(--bg-elevated);border:1px solid var(--border-color);transform:rotate(45deg)}.tooltip.top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px)}.tooltip.top:before{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg);border-top:none;border-left:none}.tooltip.bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(-4px)}.tooltip.bottom:before{top:-5px;left:50%;transform:translate(-50%) rotate(45deg);border-bottom:none;border-right:none}.tooltip.left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(4px)}.tooltip.left:before{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);border-left:none;border-bottom:none}.tooltip.right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(-4px)}.tooltip.right:before{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);border-right:none;border-top:none}.tooltip-wrapper:hover .tooltip,.tooltip-wrapper:focus-within .tooltip{opacity:1;visibility:visible}.tooltip-wrapper:hover .tooltip.top,.tooltip-wrapper:focus-within .tooltip.top{transform:translate(-50%) translateY(0)}.tooltip-wrapper:hover .tooltip.bottom,.tooltip-wrapper:focus-within .tooltip.bottom{transform:translate(-50%) translateY(0)}.tooltip-wrapper:hover .tooltip.left,.tooltip-wrapper:focus-within .tooltip.left{transform:translateY(-50%) translate(0)}.tooltip-wrapper:hover .tooltip.right,.tooltip-wrapper:focus-within .tooltip.right{transform:translateY(-50%) translate(0)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;animation:fadeInUp .5s ease}.empty-state-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.6;filter:grayscale(30%)}.empty-state-title{font-size:var(--font-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:.5rem}.empty-state-description{font-size:var(--font-md);color:var(--text-muted);max-width:400px;line-height:1.6;margin-bottom:1.5rem}.empty-state-action{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-md);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-normal)}.empty-state-action:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.empty-state.compact{padding:2rem 1rem}.empty-state.compact .empty-state-icon{font-size:2.5rem;margin-bottom:1rem}.empty-state.compact .empty-state-title{font-size:var(--font-lg)}.empty-state.compact .empty-state-description{font-size:var(--font-sm)}.empty-state-bg{position:relative}.empty-state-bg:before{content:"";position:absolute;width:200px;height:200px;background:var(--gradient-glow);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:.5}.progress-bar-container{width:100%;height:8px;background:var(--bg-dark);border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--transition-slow);position:relative;overflow:hidden}.progress-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s ease-in-out infinite}.progress-bar-container.success .progress-bar-fill{background:linear-gradient(90deg,var(--success) 0%,var(--success-light) 100%)}.progress-bar-container.warning .progress-bar-fill{background:linear-gradient(90deg,var(--warning) 0%,var(--warning-light) 100%)}.progress-bar-container.lg{height:12px}.progress-with-label{display:flex;flex-direction:column;gap:.5rem}.progress-label{display:flex;justify-content:space-between;font-size:var(--font-sm);color:var(--text-secondary)}.progress-label-value{font-weight:var(--font-semibold);color:var(--primary)}.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:var(--font-medium);transition:all var(--transition-fast)}.badge-primary{background:#6c63ff26;color:var(--primary-light);border:1px solid rgba(108,99,255,.3)}.badge-success{background:#4caf5026;color:var(--success-light);border:1px solid rgba(76,175,80,.3)}.badge-warning{background:#ffc10726;color:var(--warning);border:1px solid rgba(255,193,7,.3)}.badge-error{background:#f4433626;color:var(--error-light);border:1px solid rgba(244,67,54,.3)}.badge-secondary{background:#00d9ff26;color:var(--secondary-light);border:1px solid rgba(0,217,255,.3)}.badge-icon{font-size:.875em}.badge.animated{animation:fadeInScale .3s ease}.badge.glow{box-shadow:0 0 10px #6c63ff4d}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:var(--radius-md);font-size:var(--font-md);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-normal);border:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transform:scale(0);opacity:0;transition:transform .5s ease,opacity .3s ease}.btn:active:after{transform:scale(4);opacity:0;transition:0s}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 12px #6c63ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff66}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--primary)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-danger{background:var(--gradient-accent);color:#fff;box-shadow:0 4px 12px #ff6b6b4d}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.btn-sm{padding:.375rem .875rem;font-size:var(--font-sm)}.btn-lg{padding:.875rem 1.75rem;font-size:var(--font-lg)}.btn-icon{padding:.625rem;width:40px;height:40px}.btn-icon.sm{padding:.375rem;width:32px;height:32px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.card{background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;transition:all var(--transition-normal)}.card:hover{border-color:var(--border-glow)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-light)}.card-title{font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.card-subtitle{font-size:var(--font-sm);color:var(--text-muted);margin-top:.25rem}.card-body{color:var(--text-secondary)}.card-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:.75rem}.card.highlight{border-color:var(--primary);box-shadow:var(--shadow-glow)}.card.highlight:before{content:"";position:absolute;inset:0;background:var(--gradient-glow);opacity:.5;pointer-events:none;border-radius:inherit}.stat-card{background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;transition:all var(--transition-normal)}.stat-card:hover{transform:translateY(-2px);border-color:var(--border-glow);box-shadow:var(--shadow-md)}.stat-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#6c63ff26;border-radius:var(--radius-md);font-size:1.25rem;margin-bottom:.5rem}.stat-value{font-size:var(--font-2xl);font-weight:var(--font-bold);color:var(--text-primary);line-height:1.2}.stat-label{font-size:var(--font-sm);color:var(--text-muted)}.stat-change{font-size:var(--font-xs);display:flex;align-items:center;gap:.25rem}.stat-change.positive{color:var(--success)}.stat-change.negative{color:var(--error)}.input{width:100%;padding:.75rem 1rem;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-md);transition:all var(--transition-fast)}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff33}.input::placeholder{color:var(--text-disabled)}.input:disabled{opacity:.5;cursor:not-allowed}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-label{font-size:var(--font-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.input-hint{font-size:var(--font-xs);color:var(--text-muted)}.input-error{border-color:var(--error)}.input-error:focus{box-shadow:0 0 0 3px #f4433633}.input-error-message{font-size:var(--font-xs);color:var(--error)}.simulator-panel{background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}.simulator-panel.compact{font-size:.9em}.simulator-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:#0003;border-bottom:1px solid var(--border-color)}.simulator-header h3{margin:0;font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.simulator-close-btn{background:transparent;border:none;color:var(--text-muted);font-size:var(--font-lg);cursor:pointer;padding:var(--space-2);border-radius:var(--radius-sm);transition:var(--transition-fast)}.simulator-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.simulator-expand-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:var(--text-primary);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-normal)}.simulator-expand-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.simulator-content{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-6)}.week-indicator{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,#6c63ff26,#6c63ff0d);border-radius:var(--radius-md);border:1px solid rgba(108,99,255,.3);margin-bottom:var(--space-4)}.week-badge{background:var(--gradient-primary);color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-sm);font-weight:var(--font-semibold);white-space:nowrap}.week-components{color:var(--text-secondary);font-size:var(--font-sm)}.simulator-section{background:#00000026;border-radius:var(--radius-md);padding:var(--space-4)}.simulator-section h4{margin:0 0 var(--space-4) 0;font-size:var(--font-md);font-weight:var(--font-semibold);color:var(--text-secondary)}.simulator-footer{padding:var(--space-3) var(--space-4);background:#0003;border-top:1px solid var(--border-color)}.simulator-hint{font-size:var(--font-xs);color:var(--text-muted)}.simulator-board{display:flex;justify-content:center;padding:var(--space-4)}.esp32-visual{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.esp32-chip{background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:2px solid #444;border-radius:var(--radius-md);padding:var(--space-4) var(--space-6);position:relative;box-shadow:0 4px 12px #00000080,inset 0 1px #ffffff1a}.esp32-chip:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#222;border-radius:50%;box-shadow:0 0 0 2px #333}.esp32-label{font-family:Fira Code,monospace;font-size:var(--font-xs);font-weight:var(--font-bold);color:#888;letter-spacing:.05em}.esp32-pins{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.pin-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.pin-dot{width:8px;height:8px;border-radius:50%;background:#333;border:1px solid #444;transition:var(--transition-fast)}.pin-dot.active{background:var(--success);box-shadow:0 0 8px var(--success)}.pin-label{font-family:Fira Code,monospace;font-size:10px;color:var(--text-muted)}.simulator-leds{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.virtual-led-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.virtual-led{cursor:default;position:relative}.virtual-led.on:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;border-radius:50%;background:inherit;filter:blur(10px);opacity:.4;z-index:-1}.virtual-led-label{font-family:Fira Code,monospace;color:var(--text-secondary);text-align:center}.virtual-led-status{font-family:Fira Code,monospace;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.1em}.virtual-led-status.on{color:var(--success)}.virtual-led-status.off{color:var(--text-muted)}.simulator-sensors{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}.virtual-sensor{background:#0003;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-3);transition:var(--transition-fast)}.virtual-sensor:hover{border-color:var(--border-glow);background:#0000004d}.virtual-sensor-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.virtual-sensor-icon{font-size:var(--font-xl)}.virtual-sensor-label{font-size:var(--font-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.virtual-sensor-display{display:flex;align-items:baseline;gap:var(--space-1);margin-bottom:var(--space-3)}.virtual-sensor-value{font-family:Fira Code,monospace;font-size:var(--font-2xl);font-weight:var(--font-bold)}.virtual-sensor-unit{font-size:var(--font-sm);color:var(--text-muted)}.virtual-sensor-bar-container{height:6px;background:#0000004d;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-3)}.virtual-sensor-bar{height:100%;border-radius:var(--radius-full);transition:width var(--transition-normal)}.virtual-sensor-control{width:100%}.virtual-sensor-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:var(--radius-full);cursor:pointer}.virtual-sensor-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;transition:var(--transition-fast);box-shadow:var(--shadow-sm)}.virtual-sensor-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-glow)}.virtual-sensor-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;transition:var(--transition-fast);box-shadow:var(--shadow-sm)}.virtual-sensor-toggle{width:100%;padding:var(--space-2) var(--space-3);border:2px solid;border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast);color:var(--text-primary)}.virtual-sensor-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.virtual-sensor-toggle.active{animation:pulse 1s infinite}.virtual-buzzer{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:#0003;border:1px solid var(--border-color);border-radius:var(--radius-md);transition:var(--transition-fast)}.virtual-buzzer.playing{border-color:var(--secondary);box-shadow:0 0 20px #00d9ff33}.virtual-buzzer-icon{font-size:var(--font-3xl)}.virtual-buzzer-icon .animate-pulse{animation:pulse .5s ease-in-out infinite}.virtual-buzzer-info{flex:1}.virtual-buzzer-label{font-size:var(--font-sm);color:var(--text-muted);margin-bottom:var(--space-1)}.virtual-buzzer-status{font-family:Fira Code,monospace;font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--text-secondary)}.virtual-buzzer-status.playing{color:var(--secondary)}.virtual-buzzer-waves{display:flex;gap:var(--space-1)}.virtual-buzzer-waves .wave{opacity:0;animation:wave-appear .5s ease-out forwards}.virtual-buzzer-waves .wave-1{animation-delay:0s}.virtual-buzzer-waves .wave-2{animation-delay:.15s}.virtual-buzzer-waves .wave-3{animation-delay:.3s}@keyframes wave-appear{0%{opacity:0;transform:translate(-5px)}50%{opacity:1}to{opacity:.6;transform:translate(5px)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.simulator-wrapper{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-4) 0}.mpu-controls{background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-4)}.mpu-title{font-size:var(--font-md);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}.mpu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.mpu-grid label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-secondary);background:#00000026;padding:var(--space-3);border-radius:var(--radius-md)}.mpu-grid input[type=range]{width:100%;accent-color:var(--accent)}.simulator-tabs{display:flex;gap:var(--space-1);padding:var(--space-2);background:#0003;border-bottom:1px solid var(--border-color)}.sim-tab{flex:1;padding:var(--space-2) var(--space-3);background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-1)}.sim-tab:hover{background:#ffffff0d;color:var(--text-primary)}.sim-tab.active{background:var(--primary);color:#fff}.console-badge{background:var(--accent);color:#fff;font-size:var(--font-xs);padding:2px 6px;border-radius:var(--radius-full);min-width:18px;text-align:center}.running-indicator{color:var(--success);font-size:var(--font-sm);margin-left:var(--space-2);animation:pulse 1s ease-in-out infinite}.current-line{display:block;font-size:var(--font-xs);color:var(--secondary);margin-top:var(--space-1)}.simulator-console{background:#0a0a1a;border-radius:var(--radius-md);height:250px;overflow:hidden}.console-output{height:100%;overflow-y:auto;padding:var(--space-3);font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-sm)}.console-empty{color:var(--text-muted);text-align:center;padding:var(--space-8)}.console-line{color:var(--success-light);padding:var(--space-1) 0;display:flex;gap:var(--space-2)}.console-prefix{color:var(--secondary);font-weight:700}.virtual-imu{background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center}.imu-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-3)}.imu-icon{font-size:var(--font-xl)}.imu-title{font-size:var(--font-md);font-weight:var(--font-semibold);color:var(--text-primary)}.imu-canvas{border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:grab;transition:var(--transition-fast)}.imu-canvas:hover{border-color:var(--primary)}.imu-canvas.dragging{cursor:grabbing;border-color:var(--secondary)}.imu-canvas.disabled{opacity:.6;cursor:not-allowed}.imu-values{display:flex;justify-content:center;gap:var(--space-4);margin:var(--space-3) 0;font-family:JetBrains Mono,monospace;font-size:var(--font-sm)}.imu-value{display:flex;align-items:center;gap:var(--space-1)}.axis-label{font-weight:700}.axis-value{color:var(--text-secondary);min-width:60px;text-align:left}.imu-presets{display:flex;justify-content:center;gap:var(--space-2);margin:var(--space-3) 0}.imu-preset-btn{background:#ffffff1a;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-2);font-size:var(--font-lg);cursor:pointer;transition:var(--transition-fast)}.imu-preset-btn:hover:not(:disabled){background:var(--primary);border-color:var(--primary)}.imu-preset-btn:disabled{opacity:.5;cursor:not-allowed}.imu-reset-btn{background:var(--gradient-accent);border:none;border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);color:#fff;font-size:var(--font-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.imu-reset-btn:hover:not(:disabled){transform:scale(1.05)}.imu-reset-btn:disabled{opacity:.5;cursor:not-allowed}.imu-hint{color:var(--text-muted);font-size:var(--font-xs);margin-top:var(--space-2)}.page-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:var(--space-4)}.loader-spinner{width:48px;height:48px;border:4px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.page-loader p{color:var(--text-secondary);font-size:var(--font-md)}body.light{--bg-dark: #F5F5FA;--bg-primary: #FFFFFF;--bg-secondary: #F0F0F8;--bg-card: #FFFFFF;--bg-hover: #E8E8F0;--bg-elevated: #FAFAFE;--text-primary: #1A1A2E;--text-secondary: #4A4A6A;--text-muted: #8080A0;--text-disabled: #B0B0C8;--border-color: rgba(0, 0, 0, .1);--border-light: rgba(0, 0, 0, .05);--border-glow: rgba(108, 99, 255, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 20px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .12);--shadow-glow: 0 0 20px rgba(108, 99, 255, .15);--shadow-glow-lg: 0 0 40px rgba(108, 99, 255, .2);--gradient-card: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(248, 248, 255, 1) 100%);--gradient-glow: radial-gradient(ellipse at center, rgba(108, 99, 255, .08) 0%, transparent 70%);--gradient-shine: linear-gradient(90deg, transparent, rgba(0, 0, 0, .03), transparent)}body.light .nav-sidebar{background:var(--bg-primary);border-right:1px solid var(--border-color)}body.light .nav-link{color:var(--text-secondary)}body.light .nav-link:hover{background:var(--bg-hover);color:var(--text-primary)}body.light .nav-link.active{background:linear-gradient(135deg,#6c63ff1a,#6c63ff0d);color:var(--primary)}body.light .level-card,body.light .settings-section,body.light .hardware-card{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}body.light .level-card:hover{box-shadow:var(--shadow-md)}body.light input,body.light select,body.light textarea{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)}body.light input:focus,body.light select:focus,body.light textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff1a}body.light .secondary-btn{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}body.light .secondary-btn:hover{background:var(--bg-hover)}body.light .code-output,body.light .terminal-output{background:#1e1e2e;color:#e0e0e0}body.light .modal-overlay{background:#0000004d}body.light .tutorial-modal{background:var(--bg-card);border:1px solid var(--border-color)}body.light .app-header{background:var(--bg-primary);border-bottom:1px solid var(--border-color)}body.light .footer{background:var(--bg-secondary);border-top:1px solid var(--border-color)}body.light .phase-section{margin-bottom:3rem!important;padding-bottom:2rem!important;border-bottom:2px solid #e2e8f0!important}body.light .phase-section:last-child{border-bottom:none!important;margin-bottom:1rem!important}body.light .phase-title{color:#1e293b!important;margin-bottom:1.5rem!important;font-size:1.2rem!important}body.light .phase-badge{background:linear-gradient(135deg,#6366f1,#4f46e5)!important;color:#fff!important;padding:.35rem .9rem!important;font-weight:600!important}body.light .beginner-levels-container{gap:1.25rem!important;margin-top:.5rem!important}body.light .detail-accordion{gap:1.25rem!important;margin-top:1.5rem!important}body.light .detail-section{border:1px solid #e2e8f0!important;background:#fff!important;box-shadow:0 2px 8px #0000000f!important;border-radius:14px!important}body.light .detail-section-header{background:var(--bg-secondary);color:var(--text-primary);border-bottom:1px solid var(--border-color)}body.light .detail-section-toggle{color:var(--text-secondary)}body.light .detail-panel{background:var(--bg-card);border-radius:0}body.light .detail-intro-title{color:var(--text-secondary)}body.light .detail-list{color:var(--text-primary)}body.light .detail-code{display:block!important;background:#1e1e2e!important;color:#a6e3a1!important;border:1px solid #313244!important;border-radius:12px!important;padding:1.25rem 1.5rem!important;margin:0!important;font-family:JetBrains Mono,Fira Code,Consolas,monospace!important;font-size:.875rem!important;line-height:1.8!important;box-shadow:0 4px 16px #0003!important;overflow-x:auto!important;overflow-y:visible!important;white-space:pre-wrap!important;word-break:break-word!important;max-height:none!important}body.light .detail-code code{display:block!important;color:#cdd6f4!important;font-family:inherit!important;background:transparent!important;white-space:pre-wrap!important;word-break:break-word!important}body.light .detail-code .keyword{color:#cba6f7!important}body.light .detail-code .string{color:#a6e3a1!important}body.light .detail-code .comment{color:#6c7086!important}body.light .detail-code .function{color:#89b4fa!important}body.light .detail-code .number{color:#fab387!important}body.light .detail-cta-btn{border:1px solid rgba(16,185,129,.5);background:#10b9811a;color:#047857}body.light .detail-cta-btn:hover{background:#10b98133}body.light .learning-objectives,body.light .hints-section{background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 1px 4px #0000000d!important;padding:1.25rem 1.5rem!important}body.light .learning-objectives h4,body.light .hints-section h4{color:#1e293b!important;font-weight:600!important;font-size:1rem!important}body.light .learning-objectives li,body.light .hints-section li{color:#475569!important}body.light .learning-objectives.compact h4,body.light .hints-section.compact h4{color:#1e293b!important;font-size:.95rem!important}body.light .learning-objectives.compact .objectives-list,body.light .hints-section.compact ul{color:#475569!important}body.light .hints-section{background:#fffbeb!important;border-color:#fcd34d!important}body.light .hints-section h4{color:#92400e!important}body.light .learning-detail.horizontal-tabs{background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 2px 8px #00000014!important;margin-top:1.5rem!important;overflow:visible!important}body.light .learning-detail-header{background:#f8fafc!important;border-bottom:1px solid #e2e8f0!important;padding:1.25rem 1.5rem!important}body.light .detail-tabs-nav{background:#f1f5f9!important;border-bottom:1px solid #e2e8f0!important}body.light .detail-tab-btn{color:#64748b!important;background:transparent!important;padding:14px 20px!important;font-weight:500!important}body.light .detail-tab-btn:hover{color:#1e293b!important;background:#e2e8f0!important}body.light .detail-tab-btn.active{color:#6366f1!important;background:#fff!important;border-bottom-color:#6366f1!important;font-weight:600!important}body.light .detail-tab-content{background:#fff!important;overflow:visible!important;max-height:none!important}body.light .detail-tab-content .tab-panel{padding:1.5rem 1.75rem!important;overflow:visible!important;max-height:none!important}body.light .detail-tab-content .tab-panel h4,body.light .detail-tab-content .tab-panel h5{color:#1e293b!important;margin-bottom:.75rem!important;font-weight:600!important}body.light .detail-tab-content .tab-panel p{color:#475569!important;line-height:1.75!important;font-size:.95rem!important}body.light .detail-tab-content .tab-panel ul,body.light .detail-tab-content .tab-panel ol{color:#475569!important;padding-left:1.5rem!important;margin:.75rem 0!important}body.light .detail-tab-content .tab-panel li{margin-bottom:.5rem!important;line-height:1.65!important}body.light .detail-list.tips{list-style:none!important;padding-left:0!important}body.light .detail-list.tips li{position:relative;padding-left:2rem!important;margin-bottom:.75rem!important;color:#1e293b!important;line-height:1.7!important}body.light .detail-list.tips li:before{content:"💡";position:absolute;left:0;top:0}body.light .detail-list.checklist{list-style:none!important;padding-left:0!important}body.light .detail-list.checklist li{position:relative;padding-left:2rem!important;margin-bottom:.6rem!important;color:#1e293b!important}body.light .detail-list.checklist li:before{content:"✅";position:absolute;left:0;top:0}body.light .detail-list.ordered{color:#1e293b!important;padding-left:1.5rem!important}body.light .detail-list.ordered li{margin-bottom:.6rem!important;line-height:1.7!important}body.light .detail-intro-title{color:#64748b!important;font-size:.95rem!important;margin-bottom:.75rem!important}body.light .detail-list{color:#1e293b!important;line-height:1.7!important}body.light .learning-detail.horizontal-tabs .detail-cta-row{background:#f8fafc!important;border-top:1px solid #e2e8f0!important;padding:1.25rem 1.75rem!important}body.light .tip-box{background:#fbbf241a;border-left:3px solid #D97706}body.light .tip-box p{color:#92400e}body.light .code-block{background:#1e1e2e;border:1px solid var(--border-color)}body.light .code-header{background:#171724}body.light .code-lang{color:#94a3b8}body.light .code-block code{color:#00d9ff}body.light .beginner-level-card{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}body.light .beginner-level-card:hover:not(.locked){box-shadow:var(--shadow-md);border-color:var(--primary)}body.light .beginner-level-card.completed{background:linear-gradient(135deg,rgba(16,185,129,.08),transparent);border-color:var(--success)}body.light .beginner-level-card .level-title{color:var(--text-primary)}body.light .week-badge{background:var(--bg-secondary);color:var(--text-secondary)}body.light .level-node{background:var(--bg-card);border:1px solid var(--border-color)}body.light .level-node.current{background:linear-gradient(135deg,rgba(108,99,255,.08),transparent);border-color:var(--primary)}body.light .badge-xp{background:var(--bg-secondary)}body.light .nav-logo-banner{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f23);padding:10px 14px;border-radius:10px;box-shadow:0 4px 12px #0f0f2366,0 2px 4px #0003,inset 0 1px #ffffff0d;border:1px solid rgba(255,255,255,.08);transition:all .3s ease}body.light .nav-logo-banner:hover{box-shadow:0 6px 20px #0f0f2380,0 4px 8px #00000040,inset 0 1px #ffffff14;transform:translateY(-1px)}body.light .footer-logo{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f23);padding:6px 10px;border-radius:8px;box-shadow:0 3px 10px #0f0f2359,0 2px 4px #00000026;border:1px solid rgba(255,255,255,.06)}body,body.light,body.dark{transition:background-color .3s ease,color .3s ease}.virtual-servo{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-servo-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-servo-icon{font-size:1.25rem}.virtual-servo-label{font-weight:600;color:var(--text-primary);flex:1}.virtual-servo-pin{font-size:.75rem;color:var(--text-muted);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:var(--radius-sm)}.virtual-servo-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.servo-visual{width:120px;height:80px}.servo-svg{width:100%;height:100%}.servo-value{display:flex;flex-direction:column;align-items:center;gap:.25rem}.servo-angle{font-size:1.5rem;font-weight:700}.servo-pwm{font-size:.75rem;color:var(--text-muted)}.virtual-servo-control{width:100%}.servo-slider{width:100%;margin-bottom:.5rem}.servo-presets{display:flex;gap:.25rem;justify-content:center}.servo-presets button{padding:.25rem .5rem;font-size:.7rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}.servo-presets button:hover{background:var(--bg-hover);color:var(--text-primary)}.virtual-stepper{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-stepper-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.virtual-stepper-icon{font-size:1.25rem}.virtual-stepper-label{font-weight:600;color:var(--text-primary);flex:1}.virtual-stepper-pins{font-size:.65rem;color:var(--text-muted);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:var(--radius-sm)}.virtual-stepper-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.stepper-visual{width:100px;height:100px}.stepper-svg{width:100%;height:100%}.stepper-info{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:100%}.stepper-stat{display:flex;flex-direction:column;align-items:center;padding:.5rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.stepper-stat-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase}.stepper-stat-value{font-size:.875rem;font-weight:600;color:var(--text-primary)}.stepper-stat-value.direction-cw{color:#4ade80}.stepper-stat-value.direction-ccw{color:#f97316}.stepper-stat-value.direction-stop{color:var(--text-muted)}.virtual-stepper-control{width:100%;display:flex;flex-direction:column;gap:.5rem}.stepper-buttons{display:flex;gap:.5rem}.stepper-buttons button{flex:1;padding:.5rem;font-size:.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}.stepper-buttons button:hover{background:var(--bg-hover)}.stepper-buttons button.active{background:var(--primary);border-color:var(--primary);color:#fff}.stepper-step-control{display:flex;gap:.25rem}.stepper-step-control button{flex:1;padding:.25rem;font-size:.65rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}.virtual-dht11{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-dht11-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-dht11-icon{font-size:1.25rem}.virtual-dht11-label{font-weight:600;color:var(--text-primary);flex:1}.virtual-dht11-pin{font-size:.75rem;color:var(--text-muted);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:var(--radius-sm)}.virtual-dht11-display{display:flex;gap:1rem;align-items:flex-start}.dht11-visual{width:100px;height:70px;flex-shrink:0}.dht11-svg{width:100%;height:100%}.dht11-readings{flex:1;display:flex;flex-direction:column;gap:.75rem}.dht11-reading{display:flex;align-items:center;gap:.5rem}.dht11-reading-icon{font-size:1rem}.dht11-reading-data{display:flex;flex-direction:column;min-width:60px}.dht11-reading-value{font-size:1.125rem;font-weight:700}.dht11-reading-label{font-size:.65rem;color:var(--text-muted)}.dht11-bar-container{flex:1;height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden}.dht11-bar{height:100%;border-radius:3px;transition:width .3s ease}.virtual-dht11-control{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.dht11-slider-group{display:flex;flex-direction:column;gap:.25rem}.dht11-slider-group label{font-size:.75rem;color:var(--text-secondary)}.dht11-slider-group input[type=range]{width:100%}.virtual-lcd{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-lcd-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-lcd-icon{font-size:1.25rem}.virtual-lcd-label{font-weight:600;color:var(--text-primary);flex:1}.virtual-lcd-addr{font-size:.7rem;color:var(--text-muted);font-family:monospace;background:var(--bg-secondary);padding:.25rem .5rem;border-radius:var(--radius-sm)}.virtual-lcd-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.lcd-frame{background:#1a4a1a;padding:.75rem;border-radius:var(--radius-md);border:3px solid #0d2d0d;box-shadow:inset 0 2px 4px #00000080}.lcd-frame.backlight-on{background:#2a6a2a;box-shadow:inset 0 2px 4px #0000004d,0 0 10px #32c8324d}.lcd-frame.backlight-off{background:#1a3a1a}.lcd-screen{font-family:Courier New,monospace;background:transparent;padding:.25rem}.lcd-line{display:flex;gap:2px;margin-bottom:2px}.lcd-char{width:12px;height:18px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-size:14px;font-weight:700;background:#0000001a;border-radius:1px}.lcd-frame.backlight-on .lcd-char{color:#0a2a0a}.lcd-char.cursor{animation:lcd-cursor 1s infinite}@keyframes lcd-cursor{0%,50%{background:#0006}51%,to{background:#0000001a}}.lcd-info{display:flex;gap:1rem;font-size:.7rem;color:var(--text-muted)}.lcd-info-item{display:flex;align-items:center;gap:.25rem}.lcd-info-label{color:var(--text-muted)}.lcd-backlight-indicator.on{color:#4ade80}.lcd-backlight-indicator.off{color:var(--text-muted)}.virtual-joystick{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-joystick-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-joystick-icon{font-size:1.25rem}.virtual-joystick-label{font-weight:600;color:var(--text-primary)}.virtual-joystick-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.joystick-pad{width:120px;height:120px;position:relative;cursor:grab;user-select:none}.joystick-pad.dragging{cursor:grabbing}.joystick-bg{position:absolute;width:100%;height:100%}.joystick-handle{position:absolute;width:30px;height:30px;border-radius:50%;left:50%;top:50%;margin-left:-15px;margin-top:-15px;box-shadow:0 2px 8px #0000004d;transition:transform .05s ease-out}.joystick-values{display:flex;gap:1rem;width:100%}.joystick-value-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:.5rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.joystick-value-label{font-size:.65rem;color:var(--text-muted)}.joystick-value-num{font-size:.875rem;font-weight:600;color:var(--text-primary);font-family:monospace}.joystick-value-dir{font-size:.875rem;font-weight:600;color:var(--secondary)}.joystick-button{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);font-size:.75rem}.joystick-button.pressed{background:var(--accent);border-color:var(--accent);color:#fff}.virtual-ir{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-ir-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-ir-icon{font-size:1.25rem}.virtual-ir-label{font-weight:600;color:var(--text-primary);flex:1}.virtual-ir-pin{font-size:.75rem;color:var(--text-muted);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:var(--radius-sm)}.virtual-ir-display{display:flex;gap:1rem;align-items:flex-start}.ir-receiver{display:flex;flex-direction:column;align-items:center;gap:.5rem}.ir-receiver-visual{width:60px;height:40px}.ir-receiver-visual.receiving .ir-receiver-svg circle:nth-child(2){animation:ir-pulse .3s infinite}@keyframes ir-pulse{0%,to{fill:#333}50%{fill:#ff6b6b}}.ir-receiver-svg{width:100%;height:100%}.ir-last-code{display:flex;flex-direction:column;align-items:center;gap:.125rem}.ir-code-label{font-size:.65rem;color:var(--text-muted)}.ir-code-value{font-size:.875rem;font-weight:700;color:var(--secondary);font-family:monospace}.ir-code-name{font-size:.7rem;color:var(--text-secondary)}.ir-remote{flex:1}.ir-remote-body{background:linear-gradient(180deg,#2a2a3e,#1a1a2e);border-radius:var(--radius-md);padding:.75rem;border:1px solid var(--border-color)}.ir-remote-header{display:flex;justify-content:center;margin-bottom:.5rem}.ir-led{width:8px;height:8px;border-radius:50%;background:#404}.ir-button-row{display:flex;justify-content:center;gap:.25rem;margin-bottom:.25rem}.ir-btn{width:28px;height:24px;border:none;border-radius:4px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.6rem;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.ir-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.ir-btn:active{background:var(--primary);color:#fff}.ir-btn.power{color:var(--accent)}.ir-btn.play{background:var(--primary);color:#fff}.ir-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;margin-top:.5rem}.ir-btn.num{width:100%;height:22px}.virtual-shiftregister{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-shiftregister-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-shiftregister-icon{font-size:1.25rem}.virtual-shiftregister-label{font-weight:600;color:var(--text-primary)}.virtual-shiftregister-display{display:flex;flex-direction:column;gap:1rem}.shiftregister-ic{width:100%;max-width:200px;margin:0 auto}.shiftregister-svg{width:100%;height:auto}.shiftregister-pins{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.pin-info{font-size:.7rem;color:var(--text-muted)}.pin-info .pin-label{color:var(--secondary);font-weight:600}.shiftregister-outputs{display:flex;flex-direction:column;gap:.5rem}.output-label{font-size:.75rem;color:var(--text-secondary);text-align:center}.output-leds{display:flex;justify-content:center;gap:.25rem}.output-led{width:28px;height:36px;border:none;border-radius:var(--radius-sm);background:var(--bg-secondary);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:var(--transition-fast)}.output-led:hover{background:var(--bg-hover)}.output-led .led-glow{width:12px;height:12px;border-radius:50%;background:#333;transition:var(--transition-fast)}.output-led.on .led-glow{background:#4ade80;box-shadow:0 0 8px #4ade80}.output-led .led-label{font-size:.55rem;color:var(--text-muted)}.shiftregister-value{background:var(--bg-secondary);border-radius:var(--radius-sm);padding:.75rem}.value-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.value-row:last-child{margin-bottom:0}.value-label{font-size:.7rem;color:var(--text-muted);min-width:50px}.value-binary{font-family:monospace;font-size:.875rem;letter-spacing:2px}.value-binary .bit-on{color:#4ade80;font-weight:700}.value-binary .bit-off{color:var(--text-muted)}.value-decimal,.value-hex{font-family:monospace;font-size:.875rem;font-weight:600;color:var(--secondary)}.shiftregister-controls{display:flex;flex-direction:column;gap:.5rem}.shiftregister-controls>button{padding:.5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);font-size:.75rem}.shiftregister-controls>button:hover{background:var(--bg-hover);color:var(--text-primary)}.preset-buttons{display:flex;gap:.25rem}.preset-buttons button{flex:1;padding:.25rem;font-size:.65rem;font-family:monospace;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}.preset-buttons button:hover{background:var(--bg-hover);color:var(--text-secondary)}.virtual-potentiometer{background:var(--bg-card);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border-color)}.virtual-potentiometer-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.virtual-potentiometer-icon{font-size:1.25rem}.virtual-potentiometer-label{font-weight:600;color:var(--text-primary);flex:1}.virtual-potentiometer-pin{font-size:.75rem;color:var(--text-muted);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:var(--radius-sm)}.virtual-potentiometer-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.potentiometer-visual{width:100px;height:100px}.potentiometer-svg{width:100%;height:100%}.potentiometer-values{display:flex;gap:1rem;width:100%}.pot-value-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:.5rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.pot-value-label{font-size:.65rem;color:var(--text-muted)}.pot-value-num{font-size:.875rem;font-weight:600;color:var(--text-primary);font-family:monospace}.potentiometer-bar-container{width:100%;height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden}.potentiometer-bar{height:100%;border-radius:3px;transition:width .1s ease}.virtual-potentiometer-control{width:100%}.potentiometer-slider{width:100%;margin-bottom:.5rem}.pot-presets{display:flex;gap:.25rem;justify-content:center}.pot-presets button{padding:.25rem .5rem;font-size:.65rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:var(--transition-fast)}.pot-presets button:hover{background:var(--bg-hover);color:var(--text-secondary)}.simulator-section{background:var(--bg-secondary);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem}.simulator-section:last-child{margin-bottom:0}.simulator-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.auth-modal-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn .2s ease}.auth-modal{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:2rem;width:100%;max-width:400px;position:relative;box-shadow:var(--shadow-lg);animation:slideUp .3s ease}.auth-modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1;padding:.25rem;transition:var(--transition-fast)}.auth-modal-close:hover{color:var(--text-primary)}.auth-modal-title{font-size:var(--font-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0 0 1.5rem;text-align:center}.auth-oauth-buttons{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.auth-oauth-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.75rem 1rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:var(--font-md);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.auth-oauth-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--primary)}.auth-oauth-btn:disabled{opacity:.6;cursor:not-allowed}.auth-oauth-btn.google:hover:not(:disabled){border-color:#4285f4}.auth-oauth-btn.github:hover:not(:disabled){border-color:#fff}.auth-divider{display:flex;align-items:center;text-align:center;margin:1.5rem 0;color:var(--text-muted);font-size:var(--font-sm)}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--border-color)}.auth-divider span{padding:0 1rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-form-group{display:flex;flex-direction:column;gap:.5rem}.auth-form-group label{font-size:var(--font-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.auth-form-group input{padding:.75rem 1rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:var(--font-md);transition:var(--transition-fast)}.auth-form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff33}.auth-form-group input:disabled{opacity:.6;cursor:not-allowed}.auth-form-group input::placeholder{color:var(--text-muted)}.auth-error{padding:.75rem 1rem;border-radius:var(--radius-md);background:#f443361a;border:1px solid var(--error);color:var(--error-light);font-size:var(--font-sm);text-align:center}.auth-error.success{background:#4caf501a;border-color:var(--success);color:var(--success-light)}.auth-not-configured{margin-bottom:1rem}.auth-submit-btn{padding:.875rem 1.5rem;border-radius:var(--radius-md);border:none;background:var(--gradient-primary);color:#fff;font-size:var(--font-md);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast);margin-top:.5rem}.auth-submit-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.5rem;font-size:var(--font-sm);color:var(--text-muted)}.auth-toggle button{background:transparent;border:none;color:var(--primary);cursor:pointer;font-size:var(--font-sm);font-weight:var(--font-medium);transition:var(--transition-fast)}.auth-toggle button:hover:not(:disabled){color:var(--primary-light);text-decoration:underline}.auth-toggle button:disabled{opacity:.6;cursor:not-allowed}.nav-auth{padding:.5rem 0;margin-bottom:.5rem;border-bottom:1px solid var(--border-light)}.nav-user{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem}.nav-user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.nav-user-name{font-size:var(--font-sm);color:var(--text-secondary);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-auth-btn{padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:var(--font-xs);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.nav-auth-btn.login{width:100%;background:var(--gradient-primary);border:none;color:#fff}.nav-auth-btn.login:hover{opacity:.9}.nav-auth-btn.logout{background:transparent;border:1px solid var(--border-color);color:var(--text-muted);margin-left:auto}.nav-auth-btn.logout:hover{background:var(--bg-hover);color:var(--text-secondary)}.auth-callback-container{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem}.auth-callback-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary)}.auth-callback-error{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;max-width:400px}.auth-callback-error h2{color:var(--error);margin:0}.auth-callback-error p{color:var(--text-secondary);margin:0}.auth-callback-error button{padding:.75rem 1.5rem;border-radius:var(--radius-md);border:none;background:var(--gradient-primary);color:#fff;font-size:var(--font-md);cursor:pointer;transition:var(--transition-fast)}.auth-callback-error button:hover{opacity:.9}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.home-page{padding:var(--space-6);max-width:1200px;margin:0 auto;animation:fadeIn .5s ease}.hero-section{background:linear-gradient(135deg,#6c63ff14,#2563eb14);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);margin-bottom:var(--space-10);position:relative;overflow:hidden;border:1px solid rgba(108,99,255,.15);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}.hero-section:before{content:"";position:absolute;top:-50%;right:-30%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(108,99,255,.1) 0%,transparent 60%);pointer-events:none}.hero-background{display:none}.hero-content{position:relative;z-index:1}.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 14px;background:#6c63ff26;border-radius:var(--radius-full);color:var(--primary-light);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:var(--space-5);border:1px solid rgba(108,99,255,.25)}.hero-title{font-size:2.5rem;font-weight:800;color:var(--text-primary);margin-bottom:var(--space-3);line-height:1.15;letter-spacing:-.02em}.hero-subtitle{font-size:1.125rem;color:var(--primary-light);margin-bottom:var(--space-2);font-weight:500}.hero-description{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--space-6);line-height:1.7;max-width:480px}.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:14px 28px;border-radius:var(--radius-lg);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;border:none}.hero-btn.primary{background:linear-gradient(135deg,var(--primary) 0%,#4f46e5 100%);color:#fff;box-shadow:0 4px 14px #6c63ff66}.hero-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff80}.hero-btn.secondary{background:#ffffff0d;color:var(--text-primary);border:1px solid var(--border-color)}.hero-btn.secondary:hover{background:#ffffff1a;border-color:var(--primary)}.hero-stats{display:flex;gap:var(--space-8);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1)}.hero-stat{text-align:left}.hero-stat-value{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--primary-light) 0%,#818cf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;line-height:1.1}.hero-stat-label{font-size:13px;color:var(--text-muted);font-weight:500;margin-top:4px}.hero-visual{position:relative;z-index:1;display:flex;justify-content:center;align-items:center}.hero-robot-animation{width:280px;height:280px;position:relative}.robot-body{width:160px;height:160px;background:linear-gradient(145deg,#2a2d3e,#1a1c28);border-radius:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid rgba(108,99,255,.3);box-shadow:0 20px 40px #0000004d,inset 0 1px #ffffff1a;display:flex;justify-content:center;align-items:center;gap:24px}.robot-eye{width:24px;height:24px;background:var(--primary);border-radius:50%;box-shadow:0 0 20px var(--primary),0 0 40px #6c63ff80;animation:robotEyePulse 2s ease-in-out infinite}.robot-eye.left{animation-delay:0s}.robot-eye.right{animation-delay:.3s}.robot-antenna{position:absolute;top:-20px;left:50%;transform:translate(-50%);width:4px;height:24px;background:linear-gradient(to top,#2a2d3e,var(--primary));border-radius:2px}.robot-antenna:after{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:12px;height:12px;background:var(--primary);border-radius:50%;box-shadow:0 0 12px var(--primary);animation:robotEyePulse 1.5s ease-in-out infinite}.robot-code-lines{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;opacity:.6}.code-line{height:3px;background:var(--primary);border-radius:2px;animation:codeLine 2s ease-in-out infinite}.code-line:nth-child(1){width:60px;animation-delay:0s}.code-line:nth-child(2){width:80px;animation-delay:.2s}.code-line:nth-child(3){width:50px;animation-delay:.4s}@keyframes robotEyePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}@keyframes codeLine{0%,to{opacity:.4}50%{opacity:.8}}.section-header{text-align:center;margin-bottom:var(--space-8)}.section-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-2);letter-spacing:-.01em}.section-subtitle{font-size:1rem;color:var(--text-secondary);max-width:500px;margin:0 auto;line-height:1.6}.features-section{margin-bottom:var(--space-10)}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.feature-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);border:1px solid var(--border-color);transition:all .25s ease;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),#818cf8);opacity:0;transition:opacity .25s ease}.feature-card:hover{transform:translateY(-4px);border-color:#6c63ff4d;box-shadow:0 12px 24px #00000026}.feature-card:hover:before{opacity:1}.feature-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#6c63ff1a;border-radius:var(--radius-md);margin-bottom:var(--space-4);color:var(--primary-light)}.feature-icon svg{width:24px;height:24px}.feature-title{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-2)}.feature-description{font-size:.875rem;color:var(--text-secondary);line-height:1.65}.curriculum-section{margin-bottom:var(--space-10);background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-8);border:1px solid var(--border-color)}.curriculum-timeline{position:relative;padding:var(--space-6) 0}.timeline-track{position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(90deg,#6c63ff33,#6c63ff66,#6c63ff33);transform:translateY(-50%)}.curriculum-levels{display:flex;justify-content:space-between;position:relative;z-index:1}.curriculum-level{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);flex:1}.level-node{width:48px;height:48px;border-radius:50%;background:var(--bg-card);border:3px solid var(--border-color);display:flex;align-items:center;justify-content:center;transition:all .25s ease;cursor:pointer}.level-node:hover{transform:scale(1.1);box-shadow:0 4px 16px #0003}.level-number{font-size:1rem;font-weight:700}.level-icon{display:none}.level-info{text-align:center}.level-title{font-size:.8125rem;font-weight:500;color:var(--text-secondary);white-space:nowrap}.curriculum-cta{text-align:center;margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-color)}.curriculum-cta-text{font-size:.9375rem;color:var(--text-secondary);margin-bottom:var(--space-4)}.curriculum-cta-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:12px 24px;background:transparent;color:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;text-decoration:none;transition:all .2s ease}.curriculum-cta-btn:hover{background:#6c63ff1a}.quick-access-section{margin-bottom:var(--space-10)}.quick-access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.quick-access-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);text-decoration:none;color:inherit;transition:all .25s ease;position:relative;overflow:hidden}.quick-access-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary);opacity:0;transition:opacity .2s ease}.quick-access-card.primary:before{background:var(--primary)}.quick-access-card.warning:before{background:var(--warning)}.quick-access-card.secondary:before{background:var(--success)}.quick-access-card:hover{transform:translate(4px);border-color:#6c63ff4d;box-shadow:0 8px 20px #0000001f}.quick-access-card:hover:before{opacity:1}.quick-access-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);flex-shrink:0}.quick-access-card.primary .quick-access-icon{background:#6c63ff1f;color:var(--primary-light)}.quick-access-card.warning .quick-access-icon{background:#ffc1071f;color:var(--warning)}.quick-access-card.secondary .quick-access-icon{background:#4caf501f;color:var(--success)}.quick-access-icon svg{width:24px;height:24px}.quick-access-content{flex:1;min-width:0}.quick-access-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.quick-access-description{font-size:.8125rem;color:var(--text-muted);line-height:1.5}.quick-access-arrow{font-size:1.25rem;color:var(--text-muted);transition:transform .2s ease}.quick-access-card:hover .quick-access-arrow{transform:translate(4px);color:var(--primary-light)}.stats-section{margin-bottom:var(--space-10);background:linear-gradient(135deg,#6c63ff0f,#2563eb0f);border-radius:var(--radius-xl);padding:var(--space-8);border:1px solid rgba(108,99,255,.12)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}.stat-card{text-align:center;padding:var(--space-4)}.stat-icon{width:40px;height:40px;margin:0 auto var(--space-3);display:flex;align-items:center;justify-content:center;color:var(--primary-light);opacity:.8}.stat-icon svg{width:24px;height:24px}.stat-value{font-size:2rem;font-weight:800;color:var(--text-primary);display:block;line-height:1.1;margin-bottom:6px}.stat-label{font-size:.8125rem;color:var(--text-muted);font-weight:500}.recent-activity-section{margin-bottom:var(--space-6)}.recent-activity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.recent-activity-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-5);border:1px solid var(--border-color)}.recent-activity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-color)}.recent-activity-title{display:flex;align-items:center;gap:var(--space-2);font-size:.9375rem;font-weight:600;color:var(--text-primary);margin:0}.recent-activity-title svg,.recent-activity-icon{width:16px;height:16px;color:var(--primary-light)}.section-title-icon,.comments-title-icon{margin-right:6px}.recent-activity-more{font-size:.75rem;color:var(--text-muted);text-decoration:none;transition:color .2s ease}.recent-activity-more:hover{color:var(--primary-light)}.recent-activity-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.recent-activity-item{padding:0}.recent-activity-link{display:flex;align-items:center;gap:var(--space-3);padding:10px 12px;background:var(--bg-secondary);border-radius:var(--radius-md);text-decoration:none;transition:all .2s ease}.recent-activity-link:hover{background:var(--bg-hover)}.recent-activity-section .notice-category{font-size:.6875rem;font-weight:600;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}.recent-activity-section .notice-category.update{background:#6c63ff1f;color:var(--primary-light)}.recent-activity-section .notice-category.event{background:#4caf501f;color:var(--success)}.recent-activity-section .notice-category.maintenance{background:#ffc1071f;color:var(--warning)}.recent-activity-section .notice-title{flex:1;font-size:.8125rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-activity-section .notice-date{font-size:.75rem;color:var(--text-muted);flex-shrink:0}.recent-activity-section .post-title{flex:1;font-size:.8125rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-activity-section .post-meta{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}.recent-activity-section .post-author{font-size:.75rem;color:var(--text-muted)}.recent-activity-section .post-likes{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text-muted)}.recent-activity-section .post-likes svg{width:12px;height:12px;color:#f87171}@media (max-width: 1024px){.hero-section{grid-template-columns:1fr;text-align:center;padding:var(--space-8) var(--space-6)}.hero-content{order:1}.hero-visual{order:0;margin-bottom:var(--space-6)}.hero-robot-animation{width:200px;height:200px}.robot-body{width:120px;height:120px}.hero-description{max-width:100%;margin-left:auto;margin-right:auto}.hero-actions,.hero-stats{justify-content:center}.features-grid,.quick-access-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.curriculum-levels{flex-wrap:wrap;gap:var(--space-4);justify-content:center}.curriculum-level{flex:0 0 auto;width:calc(25% - var(--space-3))}.timeline-track{display:none}}@media (max-width: 768px){.home-page{padding:var(--space-4)}.hero-title{font-size:1.75rem}.hero-stat-value{font-size:1.5rem}.section-title{font-size:1.375rem}.features-grid,.quick-access-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.recent-activity-grid{grid-template-columns:1fr}.curriculum-level{width:calc(50% - var(--space-2))}.quick-access-card{flex-direction:column;text-align:center}.quick-access-card:before{inset:0 0 auto;width:100%;height:3px}.notice-page{padding:var(--space-5) var(--space-4)}.notice-page>.notice-header .notice-title{font-size:1.5rem}.notice-filter{flex-wrap:wrap;padding:var(--space-2)}.notice-filter-btn{padding:8px 14px;font-size:.8125rem}.notice-item{padding:var(--space-4)}.notice-item-title{font-size:.9375rem}.notice-article-title{font-size:1.375rem}.notice-detail{padding:var(--space-5)}}.quick-access-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);cursor:pointer;transition:var(--transition-fast);text-decoration:none;color:inherit}.quick-access-btn:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-2px)}.quick-access-label{font-size:var(--font-md);font-weight:var(--font-medium);color:var(--text-primary)}.quick-access-desc{font-size:var(--font-sm);color:var(--text-muted);text-align:center}.stat-item{padding:var(--space-4)}.recent-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);border:1px solid var(--border-color)}.recent-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-color)}.recent-card-title{font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.recent-card-link{font-size:var(--font-sm);color:var(--primary);text-decoration:none}.recent-card-link:hover{text-decoration:underline}.recent-list{display:flex;flex-direction:column;gap:var(--space-3)}.recent-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);text-decoration:none;color:inherit}.recent-item:hover{background:var(--bg-hover)}.recent-item-icon{font-size:var(--font-xl)}.recent-item-content{flex:1;min-width:0}.recent-item-title{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-item-meta{font-size:var(--font-xs);color:var(--text-muted)}.about-page{max-width:1200px;margin:0 auto;animation:fadeIn .6s ease}.about-hero{position:relative;padding:var(--space-16) var(--space-8);text-align:center;background:linear-gradient(135deg,#6c63ff1f,#9333ea14,#3b82f61a);border-radius:var(--radius-2xl);margin:var(--space-6);margin-bottom:var(--space-10);overflow:hidden}.about-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(108,99,255,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(59,130,246,.12) 0%,transparent 50%);pointer-events:none}.about-hero-content{position:relative;z-index:1}.about-hero-title{font-size:2.75rem;font-weight:800;color:var(--text-primary);margin:0 0 var(--space-4) 0;letter-spacing:-.03em;line-height:1.2;background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin:0 auto;max-width:700px;line-height:1.6}.about-section{padding:var(--space-8) var(--space-6);margin-bottom:var(--space-8)}.about-section-header{text-align:center;margin-bottom:var(--space-8)}.about-section-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.02em;position:relative;display:inline-block}.about-section-title:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60px;height:3px;background:var(--gradient-primary);border-radius:2px}.about-vision-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center;background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-8);border:1px solid var(--border-color)}.about-vision-text{color:var(--text-secondary);font-size:1.0625rem;line-height:1.8}.about-vision-text p{margin:0 0 var(--space-4) 0}.about-vision-text p:last-child{margin-bottom:0}.about-vision-image{display:flex;justify-content:center;align-items:center}.vision-robot-graphic{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-6);background:linear-gradient(135deg,#6c63ff1a,#9333ea14);border-radius:var(--radius-xl);border:1px solid rgba(108,99,255,.2)}.vision-text{font-size:1.5rem;font-weight:700;color:var(--text-primary);padding:var(--space-2) var(--space-4);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color)}.vision-plus,.vision-equals{font-size:1.5rem;font-weight:300;color:var(--primary-light)}.about-roadmap{display:flex;gap:var(--space-4);align-items:stretch;overflow-x:auto;padding:var(--space-2)}.roadmap-phase{flex:1;min-width:280px;background:var(--bg-card);border-radius:var(--radius-xl);border:1px solid var(--border-color);overflow:hidden;transition:all .3s ease}.roadmap-phase:hover{transform:translateY(-4px);box-shadow:0 12px 40px #00000026}.roadmap-phase-header{padding:var(--space-5);text-align:center}.roadmap-phase-header.beginner{background:linear-gradient(135deg,#4caf5026,#4caf500d);border-bottom:3px solid var(--success)}.roadmap-phase-header.intermediate{background:linear-gradient(135deg,#6c63ff26,#6c63ff0d);border-bottom:3px solid var(--primary)}.roadmap-phase-header.advanced{background:linear-gradient(135deg,#ffc10726,#ffc1070d);border-bottom:3px solid var(--warning)}.roadmap-phase-header h3{margin:0;font-size:1.125rem;font-weight:700;color:var(--text-primary)}.roadmap-phase-list{list-style:none;padding:var(--space-5);margin:0}.roadmap-phase-list li{padding:var(--space-3) 0;color:var(--text-secondary);font-size:.9375rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:var(--space-2)}.roadmap-phase-list li:last-child{border-bottom:none}.roadmap-phase-list li:before{content:"";width:6px;height:6px;background:var(--primary);border-radius:50%;flex-shrink:0}.roadmap-arrow{display:flex;align-items:center;font-size:2rem;color:var(--text-muted);padding:0 var(--space-2)}.about-tech-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}.tech-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;border:1px solid var(--border-color);transition:all .3s ease}.tech-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 8px 24px #6c63ff26}.tech-icon{display:flex;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto var(--space-3);background:linear-gradient(135deg,#6c63ff26,#9333ea1a);border-radius:var(--radius-lg);color:var(--primary-light)}.tech-name{font-size:.9375rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--space-2) 0}.tech-description{font-size:.8125rem;color:var(--text-muted);margin:0;line-height:1.4}.about-faq{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3)}.faq-item{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden;transition:all .2s ease}.faq-item:hover{border-color:var(--primary)}.faq-item.open{border-color:var(--primary);box-shadow:0 4px 16px #6c63ff1a}.faq-question{width:100%;padding:var(--space-5);background:transparent;border:none;color:var(--text-primary);font-size:1rem;font-weight:600;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);transition:all .2s ease}.faq-question:hover{background:var(--bg-hover)}.faq-question span:first-child{flex:1}.faq-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:50%;font-size:1.25rem;color:var(--primary-light);transition:all .2s ease;flex-shrink:0}.faq-item.open .faq-toggle{background:var(--primary);color:#fff}.faq-answer{padding:0 var(--space-5) var(--space-5);color:var(--text-secondary);font-size:.9375rem;line-height:1.7}.faq-answer p{margin:0}.about-cta{text-align:center;padding:var(--space-12) var(--space-8);background:linear-gradient(135deg,#6c63ff1a,#9333ea14);border-radius:var(--radius-2xl);margin:var(--space-6);border:1px solid rgba(108,99,255,.2)}.about-cta-title{font-size:2rem;font-weight:700;color:var(--text-primary);margin:0 0 var(--space-3) 0;letter-spacing:-.02em}.about-cta-description{font-size:1.0625rem;color:var(--text-secondary);margin:0 auto var(--space-6);max-width:500px}.about-cta-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:14px 32px;background:var(--gradient-primary);color:#fff;font-size:1rem;font-weight:600;border-radius:var(--radius-lg);text-decoration:none;transition:all .3s ease;box-shadow:0 4px 16px #6c63ff4d}.about-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6c63ff66}@media (max-width: 1024px){.about-tech-grid{grid-template-columns:repeat(3,1fr)}.about-vision-content{grid-template-columns:1fr}.vision-robot-graphic{justify-content:center}}@media (max-width: 768px){.about-hero{padding:var(--space-10) var(--space-5);margin:var(--space-4)}.about-hero-title{font-size:1.875rem}.about-hero-subtitle{font-size:1rem}.about-section{padding:var(--space-6) var(--space-4)}.about-section-title{font-size:1.375rem}.about-roadmap{flex-direction:column}.roadmap-phase{min-width:auto}.roadmap-arrow{transform:rotate(90deg);justify-content:center;padding:var(--space-2) 0}.about-tech-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.about-cta{padding:var(--space-8) var(--space-5);margin:var(--space-4)}.about-cta-title{font-size:1.5rem}}.notice-page{padding:var(--space-8) var(--space-6);max-width:960px;margin:0 auto;animation:fadeIn .5s ease}.notice-header{margin-bottom:var(--space-8);text-align:center}.notice-title-wrapper{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-3)}.notice-title-icon{color:var(--primary-light);width:32px;height:32px}.notice-page>.notice-header .notice-title{font-size:2rem;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.02em}.notice-subtitle{font-size:1rem;color:var(--text-secondary);margin:0;line-height:1.5}.notice-filter{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-6);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-lg)}.notice-filter-btn{padding:10px 20px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.notice-filter-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.notice-filter-btn.active{background:var(--gradient-primary);color:#fff;box-shadow:0 2px 8px #6c63ff4d}.notice-list{display:flex;flex-direction:column;gap:var(--space-3)}.notice-item{display:block;text-decoration:none;background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);border:1px solid var(--border-color);cursor:pointer;transition:all .2s ease}.notice-item:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.notice-item.pinned{border-left:4px solid var(--warning);background:linear-gradient(135deg,rgba(255,193,7,.08) 0%,transparent 100%)}.notice-item.pinned:hover{border-color:var(--warning);border-left-color:var(--warning)}.notice-item-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.notice-category-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.notice-category-badge.update{background:#6c63ff26;color:var(--primary-light)}.notice-category-badge.event{background:#4caf5026;color:var(--success)}.notice-category-badge.maintenance{background:#ffc10726;color:var(--warning)}.notice-category-badge.general{background:#b0b0d026;color:var(--text-secondary)}.notice-pinned-icon{color:var(--warning);display:flex;align-items:center}.notice-item-title{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--space-3) 0;line-height:1.4;text-decoration:none}.notice-item-meta{display:flex;align-items:center;gap:var(--space-4)}.notice-item-date{font-size:.8125rem;color:var(--text-muted)}.notice-item-views{display:flex;align-items:center;gap:4px;font-size:.8125rem;color:var(--text-muted)}.notice-item-views svg{width:14px;height:14px;opacity:.7}.notice-item-preview{font-size:.875rem;color:var(--text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:var(--space-2)}.notice-loading,.notice-empty{display:flex;justify-content:center;align-items:center;padding:var(--space-10);color:var(--text-muted)}.notice-detail{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-8);border:1px solid var(--border-color)}.notice-back-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 16px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s ease;margin-bottom:var(--space-6)}.notice-back-link:hover{background:var(--bg-hover);border-color:var(--primary);color:var(--primary-light)}.notice-article{padding-top:var(--space-4)}.notice-article-header{margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-color)}.notice-article-meta{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.notice-pinned-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.6875rem;font-weight:600;background:#ffc10726;color:var(--warning)}.notice-article-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:0 0 var(--space-4) 0;line-height:1.3;letter-spacing:-.01em}.notice-article-info{display:flex;align-items:center;gap:var(--space-4)}.notice-article-info .notice-date{font-size:.875rem;color:var(--text-muted)}.notice-article-info .notice-views{display:flex;align-items:center;gap:4px;font-size:.875rem;color:var(--text-muted)}.notice-article-info .notice-views svg{width:14px;height:14px;opacity:.7}.notice-article-content{color:var(--text-secondary);font-size:1rem;line-height:1.8}.notice-article-content h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:var(--space-6) 0 var(--space-3) 0;padding-bottom:var(--space-2);border-bottom:2px solid var(--primary);display:inline-block}.notice-article-content h3{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin:var(--space-5) 0 var(--space-2) 0}.notice-article-content p{margin:var(--space-2) 0}.notice-article-content li{margin-left:var(--space-5);margin-bottom:var(--space-2);position:relative;padding-left:var(--space-2)}.notice-article-content li:before{content:"•";position:absolute;left:-8px;color:var(--primary-light)}.notice-detail-header{margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-color)}.notice-detail-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-4)}.notice-detail-meta{display:flex;align-items:center;gap:var(--space-4);font-size:.875rem;color:var(--text-muted)}.notice-detail-content{color:var(--text-secondary);font-size:1rem;line-height:1.8}.notice-detail-content h2{font-size:var(--font-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin:var(--space-6) 0 var(--space-3)}.notice-detail-content ul{list-style:disc;padding-left:var(--space-6);margin:var(--space-4) 0}.notice-detail-content li{margin-bottom:var(--space-2)}.ranking-page{padding:var(--space-8) var(--space-6);max-width:1100px;margin:0 auto;animation:fadeIn .5s ease}.ranking-header{text-align:center;margin-bottom:var(--space-10);padding:var(--space-10) var(--space-6);background:linear-gradient(135deg,#ffc1071f,#ff980014,#6c63ff0f);border-radius:var(--radius-2xl);position:relative;overflow:hidden}.ranking-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,193,7,.15) 0%,transparent 60%);pointer-events:none}.ranking-title-wrapper{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-3);position:relative}.ranking-title-icon{color:var(--warning);width:36px;height:36px;filter:drop-shadow(0 2px 4px rgba(255,193,7,.4))}.ranking-title{font-size:2.25rem;font-weight:800;color:var(--text-primary);margin:0;letter-spacing:-.02em}.ranking-subtitle{font-size:1.0625rem;color:var(--text-secondary);margin:0;position:relative}.my-rank-card{background:linear-gradient(135deg,#6c63ff1a,#9333ea14);border:1px solid rgba(108,99,255,.3);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-8);position:relative;overflow:hidden}.my-rank-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary)}.my-rank-header{margin-bottom:var(--space-4)}.my-rank-label{font-size:.875rem;font-weight:600;color:var(--primary-light);text-transform:uppercase;letter-spacing:.5px}.my-rank-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}.my-rank-position{display:flex;flex-direction:column;gap:var(--space-1)}.my-rank-number{font-size:2.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em}.my-rank-percentile{font-size:.875rem;color:var(--success);font-weight:600}.my-rank-stats{display:flex;gap:var(--space-8)}.my-rank-stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.my-rank-stat-value{display:flex;align-items:center;gap:var(--space-2);font-size:1.25rem;font-weight:700;color:var(--text-primary)}.my-rank-stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.ranking-tabs{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-lg);width:fit-content;margin-left:auto;margin-right:auto}.ranking-tab{padding:12px 24px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--text-secondary);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease}.ranking-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.ranking-tab.active{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 12px #6c63ff4d}.ranking-leaderboard{display:flex;flex-direction:column;gap:var(--space-8)}.ranking-loading{display:flex;justify-content:center;padding:var(--space-12)}.ranking-top3{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:var(--space-5);align-items:end;margin-bottom:var(--space-4)}.top3-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-6);background:var(--bg-card);border-radius:var(--radius-xl);border:2px solid var(--border-color);transition:all .3s ease;position:relative}.top3-card:hover{transform:translateY(-8px)}.top3-card.rank-1{order:2;padding:var(--space-8) var(--space-6);border-color:gold;background:linear-gradient(180deg,rgba(255,215,0,.15) 0%,var(--bg-card) 50%);box-shadow:0 8px 32px #ffd70033}.top3-card.rank-1:hover{box-shadow:0 16px 48px #ffd7004d}.top3-card.rank-1 .top3-medal{color:gold;filter:drop-shadow(0 4px 8px rgba(255,215,0,.5))}.top3-card.rank-2{order:1;padding:var(--space-6);border-color:silver;background:linear-gradient(180deg,rgba(192,192,192,.15) 0%,var(--bg-card) 50%);box-shadow:0 4px 20px #c0c0c026}.top3-card.rank-2:hover{box-shadow:0 12px 36px #c0c0c040}.top3-card.rank-2 .top3-medal{color:silver;filter:drop-shadow(0 3px 6px rgba(192,192,192,.5))}.top3-card.rank-3{order:3;padding:var(--space-5);border-color:#cd7f32;background:linear-gradient(180deg,rgba(205,127,50,.15) 0%,var(--bg-card) 50%);box-shadow:0 4px 16px #cd7f321f}.top3-card.rank-3:hover{box-shadow:0 10px 32px #cd7f3233}.top3-card.rank-3 .top3-medal{color:#cd7f32;filter:drop-shadow(0 3px 6px rgba(205,127,50,.5))}.top3-medal{margin-bottom:var(--space-3)}.top3-medal svg{width:40px;height:40px}.top3-card.rank-1 .top3-medal svg{width:48px;height:48px}.top3-avatar{width:72px;height:72px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);border:3px solid var(--bg-card);box-shadow:0 4px 16px #00000026;overflow:hidden}.top3-card.rank-1 .top3-avatar{width:88px;height:88px;border-width:4px}.top3-avatar img{width:100%;height:100%;object-fit:cover}.top3-avatar-placeholder{font-size:1.75rem;font-weight:700;color:#fff}.top3-card.rank-1 .top3-avatar-placeholder{font-size:2rem}.top3-name{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-2);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top3-card.rank-1 .top3-name{font-size:1.125rem}.top3-level{display:flex;align-items:center;gap:var(--space-1);font-size:.8125rem;color:var(--text-muted);margin-bottom:var(--space-2)}.top3-xp{font-size:1.125rem;font-weight:700;color:var(--primary-light);margin-bottom:var(--space-3)}.top3-card.rank-1 .top3-xp{font-size:1.25rem}.top3-badges{display:flex;gap:var(--space-1)}.top3-badge{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--bg-secondary);border-radius:50%;color:var(--primary-light)}.ranking-list{background:var(--bg-card);border-radius:var(--radius-xl);border:1px solid var(--border-color);overflow:hidden}.ranking-list-header{display:grid;grid-template-columns:70px 1fr 90px 120px 80px;gap:var(--space-4);padding:var(--space-4) var(--space-6);background:var(--bg-secondary);font-size:.8125rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color)}.ranking-list-item{display:grid;grid-template-columns:70px 1fr 90px 120px 80px;gap:var(--space-4);padding:var(--space-4) var(--space-6);align-items:center;transition:all .2s ease;border-bottom:1px solid var(--border-color)}.ranking-list-item:last-child{border-bottom:none}.ranking-list-item:hover{background:var(--bg-hover)}.ranking-list-item.is-me{background:linear-gradient(90deg,rgba(108,99,255,.12) 0%,transparent 100%);border-left:4px solid var(--primary)}.ranking-col-rank{display:flex;align-items:center;justify-content:center}.rank-badge{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:1rem;font-weight:700;color:var(--text-primary);background:var(--bg-secondary);border-radius:50%}.rank-badge svg{width:24px;height:24px}.ranking-col-user{display:flex;align-items:center;gap:var(--space-3)}.ranking-user-avatar{width:44px;height:44px;border-radius:50%;background:var(--gradient-secondary);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.ranking-user-avatar img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{font-size:1rem;font-weight:600;color:#fff}.ranking-user-name{font-size:.9375rem;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-col-level{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;color:var(--text-secondary);font-weight:500}.ranking-col-xp{font-size:.9375rem;font-weight:700;color:var(--primary-light)}.ranking-col-trend{display:flex;align-items:center;justify-content:center}.trend-up{display:flex;align-items:center;gap:2px;font-size:.8125rem;font-weight:600;color:var(--success);background:#4caf501f;padding:4px 10px;border-radius:20px}.trend-down{display:flex;align-items:center;gap:2px;font-size:.8125rem;font-weight:600;color:var(--error);background:#f443361f;padding:4px 10px;border-radius:20px}.trend-same{font-size:1rem;color:var(--text-muted)}@media (max-width: 768px){.ranking-page{padding:var(--space-5) var(--space-4)}.ranking-header{padding:var(--space-8) var(--space-4);margin-bottom:var(--space-6)}.ranking-title{font-size:1.75rem}.my-rank-content{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.my-rank-stats{width:100%;justify-content:space-around}.ranking-tabs{width:100%;overflow-x:auto}.ranking-tab{padding:10px 16px;font-size:.875rem;white-space:nowrap}.ranking-top3{grid-template-columns:1fr;gap:var(--space-4)}.top3-card{order:unset!important}.top3-card.rank-1{padding:var(--space-6)}.ranking-list-header,.ranking-list-item{grid-template-columns:50px 1fr 70px 80px;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.ranking-col-trend{display:none}.ranking-list-header span:last-child{display:none}}.community-page{padding:var(--space-8) var(--space-6);max-width:1100px;margin:0 auto;animation:fadeIn .5s ease}.community-header{text-align:center;margin-bottom:var(--space-10);padding:var(--space-10) var(--space-6);background:linear-gradient(135deg,#6c63ff1a,#9333ea14,#3b82f60f);border-radius:var(--radius-2xl);position:relative;overflow:hidden}.community-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 70%,rgba(108,99,255,.12) 0%,transparent 50%);pointer-events:none}.community-title-wrapper{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-3);position:relative}.community-title-icon{color:var(--primary-light);width:36px;height:36px}.community-title{font-size:2.25rem;font-weight:800;color:var(--text-primary);margin:0;letter-spacing:-.02em;background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.community-subtitle{font-size:1.0625rem;color:var(--text-secondary);margin:0;position:relative;line-height:1.5}.community-boards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-bottom:var(--space-10)}.community-board-card{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-6);background:var(--bg-card);border-radius:var(--radius-xl);border:1px solid var(--border-color);cursor:pointer;transition:all .3s ease;text-decoration:none;color:inherit;position:relative;overflow:hidden}.community-board-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}.community-board-card:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px #6c63ff26}.community-board-card:hover:before{opacity:1}.board-card-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6c63ff26,#9333ea1a);border-radius:var(--radius-lg);color:var(--primary-light);flex-shrink:0;transition:all .3s ease}.community-board-card:hover .board-card-icon{background:var(--gradient-primary);color:#fff;transform:scale(1.05)}.board-card-icon svg{width:28px;height:28px}.board-card-content{flex:1}.board-card-name{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin:0 0 var(--space-2) 0}.board-card-description{font-size:.875rem;color:var(--text-muted);margin:0;line-height:1.5}.board-card-arrow{font-size:1.5rem;color:var(--text-muted);transition:all .3s ease}.community-board-card:hover .board-card-arrow{color:var(--primary-light);transform:translate(4px)}.community-popular{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-8);border:1px solid var(--border-color)}.community-section-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0 0 var(--space-6) 0;padding-bottom:var(--space-4);border-bottom:1px solid var(--border-color)}.community-section-title svg{color:var(--warning);width:22px;height:22px}.community-popular-list{display:flex;flex-direction:column;gap:var(--space-3)}.popular-post-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);transition:all .2s ease;cursor:pointer;border:1px solid transparent}.popular-post-item:hover{background:var(--bg-hover);border-color:var(--border-color);transform:translate(4px)}.popular-post-board{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;background:linear-gradient(135deg,#6c63ff1a,#9333ea14);border-radius:var(--radius-md)}.popular-post-board svg{width:18px;height:18px;color:var(--primary-light)}.popular-post-title{flex:1;font-size:.9375rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popular-post-likes{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--text-muted);flex-shrink:0;padding:6px 12px;background:#f871711a;border-radius:20px}.popular-post-likes svg{width:14px;height:14px;color:#f87171}@media (max-width: 768px){.community-page{padding:var(--space-5) var(--space-4)}.community-header{padding:var(--space-8) var(--space-4);margin-bottom:var(--space-6)}.community-title{font-size:1.75rem}.community-boards{grid-template-columns:1fr;gap:var(--space-3)}.community-board-card{padding:var(--space-4)}.board-card-icon{width:48px;height:48px}.community-popular{padding:var(--space-5)}}.board-list-page{padding:var(--space-8);max-width:1000px;margin:0 auto;animation:fadeIn .5s ease}.board-list-header{margin-bottom:var(--space-6)}.board-back-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:var(--font-sm);text-decoration:none;margin-bottom:var(--space-4);transition:var(--transition-fast)}.board-back-link:hover{color:var(--primary)}.board-list-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.board-list-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.5rem;font-weight:700;color:var(--text-primary);margin:0}.board-title-icon{color:var(--primary-light)}.board-write-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-sm);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast)}.board-write-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.board-list-description{font-size:var(--font-md);color:var(--text-secondary);margin-top:var(--space-2)}.board-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.board-search{flex:1;min-width:200px;max-width:400px}.board-search-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-sm);transition:var(--transition-fast)}.board-search-input:focus{outline:none;border-color:var(--primary)}.board-search-input::placeholder{color:var(--text-muted)}.board-sort{display:flex;gap:var(--space-2)}.board-sort-btn{padding:var(--space-2) var(--space-4);background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:var(--transition-fast)}.board-sort-btn:hover{background:var(--bg-hover)}.board-sort-btn.active{background:var(--gradient-primary);color:#fff;border-color:transparent}.board-post-list{display:flex;flex-direction:column;gap:var(--space-3)}.board-loading,.board-empty{padding:var(--space-12);text-align:center;color:var(--text-muted)}.board-post-item{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);border:1px solid var(--border-color);cursor:pointer;transition:var(--transition-fast)}.board-post-item:hover{background:var(--bg-hover);border-color:var(--primary)}.post-item-main{margin-bottom:var(--space-3)}.post-item-title-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.post-accepted-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:#4caf5033;color:var(--success-light);border-radius:var(--radius-sm);font-size:var(--font-xs);font-weight:var(--font-medium)}.post-item-title{font-size:var(--font-md);font-weight:var(--font-semibold);color:var(--text-primary)}.post-item-tags{display:flex;gap:var(--space-2);flex-wrap:wrap}.post-tag{font-size:var(--font-xs);color:var(--primary-light);padding:var(--space-1) var(--space-2);background:#6c63ff1a;border-radius:var(--radius-sm)}.post-item-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.post-item-author{display:flex;align-items:center;gap:var(--space-2)}.post-author-avatar{width:28px;height:28px;border-radius:50%;background:var(--gradient-secondary);display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:var(--font-semibold);color:#fff}.post-author-name{font-size:var(--font-sm);color:var(--text-secondary)}.post-item-stats{display:flex;align-items:center;gap:var(--space-4);font-size:.8125rem;color:var(--text-muted)}.post-stat{display:flex;align-items:center;gap:4px}.post-stat svg{width:14px;height:14px;opacity:.7}.post-date{color:var(--text-muted)}.post-detail-page{padding:var(--space-8);max-width:900px;margin:0 auto;animation:fadeIn .5s ease}.post-back-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:var(--transition-fast);margin-bottom:var(--space-6)}.post-back-btn:hover{background:var(--bg-hover);border-color:var(--primary)}.post-detail{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--border-color);margin-bottom:var(--space-6)}.post-detail-header{margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-color)}.post-detail-tags{display:flex;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap}.post-detail-title{font-size:var(--font-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-4)}.post-detail-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.post-author-info{display:flex;align-items:center;gap:var(--space-3)}.post-detail-stats{display:flex;align-items:center;gap:var(--space-4);font-size:var(--font-sm);color:var(--text-muted)}.post-detail-content{color:var(--text-secondary);font-size:var(--font-md);line-height:1.8}.post-content-h2{font-size:var(--font-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin:var(--space-6) 0 var(--space-3)}.post-content-h3{font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:var(--space-4) 0 var(--space-2)}.post-content-p{margin-bottom:var(--space-3)}.post-content-li{margin-left:var(--space-6);margin-bottom:var(--space-2)}.post-detail-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-color)}.post-like-btn,.post-share-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:var(--transition-fast)}.post-like-btn:hover,.post-share-btn:hover{background:var(--bg-hover)}.post-like-btn.liked{background:#f443361a;border-color:var(--error);color:var(--error-light)}.post-comments{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);border:1px solid var(--border-color)}.comments-title{font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-4)}.comment-form{margin-bottom:var(--space-6)}.comment-input{width:100%;padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-sm);resize:vertical;min-height:80px;margin-bottom:var(--space-3);transition:var(--transition-fast)}.comment-input:focus{outline:none;border-color:var(--primary)}.comment-input::placeholder{color:var(--text-muted)}.comment-submit-btn{padding:var(--space-3) var(--space-5);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-sm);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast)}.comment-submit-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.comments-list{display:flex;flex-direction:column;gap:var(--space-4)}.comment-item{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-light)}.comment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.comment-author{display:flex;align-items:center;gap:var(--space-2)}.comment-avatar{width:32px;height:32px;border-radius:50%;background:var(--gradient-secondary);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:var(--font-semibold);color:#fff}.comment-author-name{font-size:var(--font-sm);font-weight:var(--font-medium);color:var(--text-primary)}.comment-date{font-size:var(--font-xs);color:var(--text-muted)}.comment-content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-3)}.comment-actions{display:flex;gap:var(--space-3)}.comment-like-btn,.comment-reply-btn{padding:var(--space-1) var(--space-3);background:transparent;border:none;color:var(--text-muted);font-size:var(--font-xs);cursor:pointer;transition:var(--transition-fast)}.comment-like-btn:hover,.comment-reply-btn:hover{color:var(--primary)}.post-write-page{padding:var(--space-8);max-width:800px;margin:0 auto;animation:fadeIn .5s ease}.post-write-header{margin-bottom:var(--space-6)}.post-write-title{font-size:var(--font-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-2)}.post-write-board{font-size:var(--font-md);color:var(--text-secondary)}.post-write-form{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--border-color)}.post-write-error{padding:var(--space-4);background:#f443361a;border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error-light);font-size:var(--font-sm);margin-bottom:var(--space-4)}.form-group{margin-bottom:var(--space-6)}.form-label{display:block;font-size:var(--font-sm);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:var(--space-2)}.form-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-md);transition:var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--primary)}.form-input::placeholder{color:var(--text-muted)}.form-textarea{width:100%;padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-md);resize:vertical;min-height:300px;font-family:Fira Code,JetBrains Mono,monospace;line-height:1.6;transition:var(--transition-fast)}.form-textarea:focus{outline:none;border-color:var(--primary)}.form-textarea::placeholder{color:var(--text-muted)}.form-hint{display:block;font-size:var(--font-xs);color:var(--text-muted);margin-top:var(--space-2);text-align:right}.tags-input-wrapper{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-3);transition:var(--transition-fast)}.tags-input-wrapper:focus-within{border-color:var(--primary)}.tags-list{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.tag-item{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:#6c63ff33;color:var(--primary-light);border-radius:var(--radius-full);font-size:var(--font-sm)}.tag-remove{background:none;border:none;color:var(--primary-light);cursor:pointer;padding:0;font-size:var(--font-lg);line-height:1;opacity:.7;transition:var(--transition-fast)}.tag-remove:hover{opacity:1}.tag-input{flex:1;min-width:100px;padding:var(--space-1) var(--space-2);background:transparent;border:none;color:var(--text-primary);font-size:var(--font-sm)}.tag-input:focus{outline:none}.tag-input::placeholder{color:var(--text-muted)}.popular-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}.popular-tags-label{font-size:var(--font-xs);color:var(--text-muted)}.popular-tag-btn{padding:var(--space-1) var(--space-2);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-xs);cursor:pointer;transition:var(--transition-fast)}.popular-tag-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--primary)}.popular-tag-btn:disabled{opacity:.5;cursor:not-allowed}.post-write-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-color)}.post-cancel-btn{padding:var(--space-3) var(--space-6);background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-md);cursor:pointer;transition:var(--transition-fast)}.post-cancel-btn:hover{background:var(--bg-hover)}.post-cancel-btn:disabled{opacity:.5;cursor:not-allowed}.post-submit-btn{padding:var(--space-3) var(--space-6);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-md);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast)}.post-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow)}.post-submit-btn:disabled{opacity:.7;cursor:not-allowed}@media (max-width: 768px){.hero-section{padding:var(--space-8) var(--space-4)}.hero-title{font-size:var(--font-2xl)}.hero-stats{flex-direction:column;gap:var(--space-4)}.board-list-toolbar{flex-direction:column;align-items:stretch}.board-search{max-width:none}.post-detail-meta{flex-direction:column;align-items:flex-start}}.locked-content-wrapper{position:relative;min-height:200px}.locked-content-preview{pointer-events:none;user-select:none}.locked-content-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;backdrop-filter:blur(2px);z-index:10}.locked-content-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--space-8);max-width:400px;text-align:center;animation:scaleIn .3s ease}.locked-icon{color:var(--primary);margin-bottom:var(--space-4)}.locked-title{font-size:var(--font-xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-2)}.locked-description{font-size:var(--font-md);color:var(--text-secondary);margin-bottom:var(--space-4);line-height:1.6}.upgrade-info{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-4)}.required-plan{font-size:var(--font-sm);color:var(--text-secondary)}.required-plan strong{color:var(--primary)}.discount-tag{background:var(--success);color:#fff;font-size:var(--font-xs);font-weight:var(--font-bold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full)}.upgrade-button{width:100%;padding:var(--space-3) var(--space-6);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-md);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast);margin-bottom:var(--space-3)}.upgrade-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.view-plans-link{display:inline-block;font-size:var(--font-sm);color:var(--text-muted);text-decoration:none;transition:var(--transition-fast)}.view-plans-link:hover{color:var(--primary)}.upgrade-prompt-minimal{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:linear-gradient(135deg,var(--primary),#6366f1);border:none;border-radius:var(--radius-full);color:#fff;font-size:var(--font-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.upgrade-prompt-minimal:hover{transform:scale(1.05);box-shadow:0 4px 12px #6366f166}.upgrade-prompt-minimal .upgrade-icon{font-size:1rem}.upgrade-prompt-inline{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-sm)}.upgrade-prompt-inline .inline-text{color:var(--text-secondary)}.upgrade-prompt-inline .inline-btn{padding:var(--space-1) var(--space-3);background:var(--primary);border:none;border-radius:var(--radius-sm);color:#fff;font-size:var(--font-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.upgrade-prompt-inline .inline-btn:hover{background:var(--primary-hover)}.upgrade-prompt-banner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);background:linear-gradient(135deg,#6366f126,#9333ea26);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-lg);margin-bottom:var(--space-4)}.upgrade-prompt-banner .banner-content{display:flex;align-items:center;gap:var(--space-4)}.upgrade-prompt-banner .banner-icon{color:var(--primary);display:flex;align-items:center}.upgrade-prompt-banner .banner-text{display:flex;flex-direction:column;gap:var(--space-1)}.upgrade-prompt-banner .banner-text strong{color:var(--text-primary);font-size:var(--font-md)}.upgrade-prompt-banner .banner-text span{color:var(--text-secondary);font-size:var(--font-sm)}.upgrade-prompt-banner .banner-discount{background:var(--success);color:#fff;font-size:var(--font-xs);font-weight:var(--font-bold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full)}.upgrade-prompt-banner .banner-btn{padding:var(--space-2) var(--space-5);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-sm);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.upgrade-prompt-banner .banner-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}.upgrade-prompt-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;max-width:320px;margin:0 auto}.upgrade-prompt-card .card-icon{color:var(--primary);margin-bottom:var(--space-3)}.upgrade-prompt-card .card-title{font-size:var(--font-lg);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-2)}.upgrade-prompt-card .card-description{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--space-4);line-height:1.6}.upgrade-prompt-card .card-plan-info{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md)}.upgrade-prompt-card .plan-name{font-size:var(--font-sm);font-weight:var(--font-semibold);color:var(--text-primary)}.upgrade-prompt-card .plan-price{font-size:var(--font-xl);font-weight:var(--font-bold);color:var(--primary)}.upgrade-prompt-card .price-interval{font-size:var(--font-sm);font-weight:var(--font-normal);color:var(--text-muted)}.upgrade-prompt-card .plan-discount{background:var(--success);color:#fff;font-size:var(--font-xs);font-weight:var(--font-bold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full)}.upgrade-prompt-card .card-btn{width:100%;padding:var(--space-3) var(--space-5);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-md);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-fast)}.upgrade-prompt-card .card-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}@media (max-width: 640px){.upgrade-prompt-banner{flex-direction:column;gap:var(--space-4);text-align:center}.upgrade-prompt-banner .banner-content{flex-direction:column}.locked-content-card{margin:var(--space-4);padding:var(--space-6)}}.hardware-selector{position:relative;min-width:200px}.hardware-selector.disabled{opacity:.6;pointer-events:none}.hardware-selector-trigger{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast)}.hardware-selector-trigger:hover{border-color:var(--primary)}.selected-hardware{display:flex;align-items:center;gap:var(--space-2)}.hardware-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}.hardware-icon.small{width:24px;height:24px;font-size:12px}.dropdown-arrow{width:20px;height:20px;color:var(--text-muted);transition:transform var(--transition-fast)}.dropdown-arrow.expanded{transform:rotate(180deg)}.hardware-selector-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100;max-height:400px;overflow-y:auto}.hardware-group{border-bottom:1px solid var(--border-color)}.hardware-group:last-child{border-bottom:none}.hardware-group-header{display:flex;flex-direction:column;padding:var(--space-3);background:var(--bg-secondary);cursor:pointer}.hardware-group-header .group-label{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--font-sm)}.hardware-group-header .group-desc{font-size:var(--font-xs);color:var(--text-muted)}.hardware-group-options{padding:var(--space-2)}.hardware-option{display:flex;flex-direction:column;padding:var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);margin-bottom:var(--space-1)}.hardware-option:hover{background:var(--bg-hover)}.hardware-option.selected{background:#6366f11a;border:1px solid var(--primary)}.hardware-option-header{display:flex;align-items:center;gap:var(--space-3)}.hardware-info{flex:1}.hardware-info .hardware-name{font-weight:var(--font-medium);color:var(--text-primary);font-size:var(--font-sm)}.hardware-info .hardware-desc{font-size:var(--font-xs);color:var(--text-muted)}.hardware-check{width:20px;height:20px;color:var(--primary)}.hardware-capabilities{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-color);font-size:var(--font-xs)}.capability-row{display:flex;justify-content:space-between;padding:var(--space-1) 0}.capability-label{color:var(--text-muted)}.capability-value{color:var(--text-secondary);font-family:var(--font-mono)}.capability-badges{display:flex;gap:var(--space-1);margin-top:var(--space-2);flex-wrap:wrap}.capability-badge{padding:var(--space-1) var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-full);font-size:10px;color:var(--text-secondary)}.hardware-selector-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);flex-wrap:wrap}.hardware-connection-status{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-xs);color:var(--text-muted)}.connection-indicator{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.connection-indicator[style*=connecting]{animation:pulse .5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.connection-label{font-size:var(--font-xs)}.hardware-usb-detect{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--font-xs);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}.hardware-usb-detect:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.hardware-usb-detect:disabled{opacity:.5;cursor:not-allowed}.hardware-usb-detect.detecting{pointer-events:none}.hardware-usb-detect.detecting svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hardware-mode-toggle{margin-left:auto}.mode-toggle-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-xs)}.mode-toggle-label input{display:none}.toggle-switch{position:relative;width:36px;height:20px;background:var(--bg-tertiary);border-radius:var(--radius-full);transition:var(--transition-fast)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:var(--transition-fast)}.mode-toggle-label input:checked+.toggle-switch{background:var(--primary)}.mode-toggle-label input:checked+.toggle-switch:after{transform:translate(16px)}.toggle-text{color:var(--text-secondary);min-width:70px}.simulation-badge{padding:2px 6px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:10px;font-weight:var(--font-semibold);margin-left:var(--space-1)}.hardware-option.has-warnings{border-left:3px solid #f59e0b}.hardware-info .hardware-name{display:flex;align-items:center;gap:var(--space-1)}.warning-icon{display:inline-flex;align-items:center}.hardware-confirm-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.hardware-confirm-modal{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);max-width:400px;width:90%;box-shadow:var(--shadow-xl)}.hardware-confirm-modal h3{margin:0 0 var(--space-3) 0;color:var(--text-primary);font-size:var(--font-lg)}.hardware-confirm-modal p{color:var(--text-secondary);margin-bottom:var(--space-3);font-size:var(--font-sm)}.compatibility-issues{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-4);list-style:none}.compatibility-issues li{color:#b45309;font-size:var(--font-sm);padding:var(--space-1) 0;display:flex;align-items:flex-start;gap:var(--space-2)}.compatibility-issues li:before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:#f59e0b;color:#fff;border-radius:50%;font-size:10px;font-weight:700;flex-shrink:0}.modal-actions{display:flex;gap:var(--space-3);justify-content:flex-end}.modal-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.modal-btn.cancel{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary)}.modal-btn.cancel:hover{background:var(--bg-hover)}.modal-btn.confirm{background:var(--primary);border:none;color:#fff}.modal-btn.confirm:hover{background:var(--primary-hover)}.hardware-selector-trigger:focus-visible,.hardware-option:focus-visible,.hardware-group-header:focus-visible,.hardware-usb-detect:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.virtual-pico-board{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);transform-origin:top center}.pico-svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.pico-pin{cursor:default;transition:opacity var(--transition-fast)}.pico-pin.gpio{cursor:pointer}.pico-pin.hovered circle:first-child{filter:brightness(1.3)}.pin-tooltip{pointer-events:none}.builtin-led circle:first-child{transition:fill .15s ease}.pico-status-panel{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md);font-size:var(--font-sm);min-width:150px}.pico-status-panel .status-item{display:flex;justify-content:space-between;align-items:center}.pico-status-panel .status-label{color:var(--text-muted)}.pico-status-panel .status-value{font-weight:var(--font-medium);color:var(--text-primary);font-family:var(--font-mono)}.pico-status-panel .status-value.on{color:var(--success)}.pico-status-panel .status-value.off{color:var(--text-muted)}.pico-playground{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--bg-dark);border-radius:var(--radius-lg)}.pico-playground-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--space-3);border-bottom:1px solid var(--border-color)}.pico-playground-header h2{margin:0;font-size:var(--font-lg);color:var(--text-primary)}.pico-playground-content{display:grid;grid-template-columns:1fr 300px;gap:var(--space-4)}.code-panel{display:flex;flex-direction:column;gap:var(--space-3)}.template-selector{display:flex;align-items:center;gap:var(--space-2)}.template-selector label{color:var(--text-secondary);font-size:var(--font-sm)}.template-selector select{padding:var(--space-2) var(--space-3);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-sm)}.editor-container{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color)}.control-buttons{display:flex;gap:var(--space-2)}.control-buttons .btn{padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast)}.control-buttons .btn.primary{background:var(--primary);color:#fff}.control-buttons .btn.primary:hover{background:var(--primary-hover)}.control-buttons .btn.primary.running{background:var(--warning)}.control-buttons .btn.danger{background:var(--error);color:#fff}.control-buttons .btn.secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.control-buttons .btn:disabled{opacity:.5;cursor:not-allowed}.output-panel{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);overflow:hidden}.output-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);font-size:var(--font-sm);color:var(--text-secondary)}.output-content{padding:var(--space-3);height:150px;overflow-y:auto;font-family:var(--font-mono);font-size:var(--font-sm)}.output-line{color:var(--success);line-height:1.5}.output-placeholder{color:var(--text-muted);font-style:italic}.board-panel{display:flex;flex-direction:column;gap:var(--space-4)}.stats-panel{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-3)}.stats-panel h4{margin:0 0 var(--space-2);font-size:var(--font-sm);color:var(--text-muted)}.stat-item{display:flex;justify-content:space-between;padding:var(--space-1) 0;font-size:var(--font-sm)}.stat-label{color:var(--text-muted)}.stat-value{color:var(--text-primary);font-family:var(--font-mono)}@media (max-width: 768px){.pico-playground-content{grid-template-columns:1fr}.hardware-selector-dropdown{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw;max-height:80vh}}@media (max-width: 768px){:root{--font-xs: .7rem;--font-sm: .8rem;--font-md: .9rem;--font-lg: 1rem;--font-xl: 1.1rem;--font-2xl: 1.25rem;--font-3xl: 1.5rem;--font-4xl: 1.75rem;--space-4: .875rem;--space-6: 1.25rem;--space-8: 1.5rem;--radius-md: 10px;--radius-lg: 14px}}@media (max-width: 480px){:root{--font-xs: .65rem;--font-sm: .75rem;--font-md: .85rem;--font-lg: .95rem;--font-xl: 1.05rem;--font-2xl: 1.15rem;--font-3xl: 1.35rem;--font-4xl: 1.5rem}}@media (max-width: 900px){.nav-item,.btn,button,.lang-btn,.tab-btn,.detail-tab,.action-btn,.control-btn,.mode-btn,.lesson-card,.level-card,[role=button],input[type=button],input[type=submit],input[type=checkbox],input[type=radio]{min-height:44px;min-width:44px}.nav-item{padding:.75rem}a{padding:.25rem;margin:-.25rem}}@media (hover: none) and (pointer: coarse){.nav-item:active,.btn:active,button:active,.card:active,.level-card:active,.lesson-card:active,.tab-btn:active,.lang-btn:active{transform:scale(.97);opacity:.85;transition:transform .1s ease,opacity .1s ease}.nav-item:hover,.btn:hover,.card:hover{transform:none}button,.btn,.nav-item,.card,.tab-btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}*{touch-action:manipulation}*{-webkit-tap-highlight-color:transparent}}@supports (padding: env(safe-area-inset-bottom)){.main-navigation{padding-bottom:calc(.5rem + env(safe-area-inset-bottom))}.app-content{padding-bottom:env(safe-area-inset-bottom)}@media (max-width: 900px){.app-content{margin-bottom:calc(70px + env(safe-area-inset-bottom))}}}@media (max-width: 375px){.main-content{padding:.75rem}.header{padding:.75rem 1rem}.page-title,.dashboard-header h1{font-size:1.25rem}.section-title{font-size:1.1rem}.card-title{font-size:.9rem}.card-description{font-size:.75rem}.nav-items{gap:0}.nav-item{padding:.5rem .25rem;min-width:40px}.nav-icon{font-size:1.1rem}.nav-label{display:none}.level-card,.lesson-card{padding:.75rem}.progress-stats{gap:.5rem}.stat-card{padding:.75rem;min-width:70px}.stat-value{font-size:1.25rem}.stat-label{font-size:.65rem}}@media (max-width: 480px){.main-content{padding:.875rem}.header{padding:.875rem 1.25rem}.header-left,.header-right{flex-wrap:wrap;gap:.5rem}.connection-status{gap:.75rem}.course-selector{flex-direction:column;gap:.5rem}.course-btn{width:100%;justify-content:center}.levels-container{gap:.75rem}.level-card{padding:1rem}.level-header{flex-direction:column;align-items:flex-start;gap:.5rem}.lessons-list{gap:.5rem}.lesson-card{padding:.875rem}.progress-tracker{gap:1rem}.progress-stats{flex-wrap:wrap;justify-content:space-between}.stat-card{flex:1 1 45%;min-width:0}.playground-layout{flex-direction:column;gap:0}.editor-section,.output-section,.simulator-section{width:100%;max-width:100%;flex:none}.editor-panel{min-height:200px;max-height:300px}.output-panel{min-height:120px;max-height:180px}.playground-tabs{display:flex;gap:.25rem;padding:.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);overflow-x:auto;-webkit-overflow-scrolling:touch}.playground-tab{flex:1;padding:.625rem .75rem;min-height:44px;border-radius:var(--radius-sm);font-size:.8rem;white-space:nowrap}.action-buttons,.control-buttons{flex-wrap:wrap;gap:.5rem}.action-buttons .btn,.control-buttons .btn{flex:1 1 auto;min-width:80px;text-align:center;justify-content:center}.robot-control{gap:.75rem}.camera-section{aspect-ratio:16/10}.joystick-container{width:140px;height:140px}.control-pad{gap:.25rem}.control-btn{padding:.625rem}}@media (max-width: 768px){.dashboard-grid{grid-template-columns:1fr;gap:1rem}.dashboard{grid-template-columns:1fr}.dashboard-sidebar{position:fixed;left:-280px;top:0;bottom:0;width:280px;z-index:var(--z-modal);transition:left var(--transition-normal)}.dashboard-sidebar.open{left:0}.sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:calc(var(--z-modal) - 1)}.sidebar-overlay.visible{display:block}.mobile-menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:var(--transition-fast)}.mobile-menu-toggle:active{background:var(--bg-hover)}.detail-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;gap:.25rem;padding-bottom:.25rem}.detail-tabs::-webkit-scrollbar{display:none}.detail-tab{flex-shrink:0;padding:.625rem 1rem;font-size:.8rem;min-height:44px}.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table th,.data-table td{padding:.625rem .75rem;font-size:.8rem;white-space:nowrap}.form-group{margin-bottom:1rem}.form-input,.form-select,.form-textarea{padding:.75rem;font-size:16px;min-height:44px}.modal-content{width:95vw;max-width:95vw;max-height:90vh;margin:5vh auto}.modal-header,.modal-body{padding:1rem}.modal-footer{padding:1rem;flex-direction:column;gap:.5rem}.modal-footer .btn{width:100%}}@media (max-width: 1024px){.learning-dashboard{max-width:100%}.dashboard-grid,.beginner-levels-container{grid-template-columns:1fr}.progress-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px) and (orientation: landscape){.main-content{padding:.75rem 1rem}.nav-items{flex-direction:row;justify-content:center;gap:1rem}.nav-item{flex-direction:row;padding:.5rem .75rem;gap:.5rem}.nav-label{display:inline;font-size:.75rem}.playground-layout{flex-direction:row;height:calc(100vh - 120px)}.editor-section,.simulator-section{flex:1;max-height:100%}.level-card,.lesson-card{padding:.75rem}.robot-control{grid-template-columns:1fr 1fr}.camera-section{aspect-ratio:16/9}}@media (max-width: 768px) and (orientation: portrait){.playground-layout{flex-direction:column}.level-card,.lesson-card,.stat-card{width:100%}.camera-section{aspect-ratio:4/3}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.card,.level-card,.lesson-card,.btn{border-width:.5px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.main-navigation,.mobile-menu-toggle,.action-buttons,.control-buttons{display:none!important}.app-content{margin-left:0!important;margin-bottom:0!important}.main-content{padding:0!important}}@media (max-width: 900px){.joystick-container,.control-pad{touch-action:none}.lessons-list,.levels-container,.dashboard-grid{-webkit-overflow-scrolling:touch}input[type=checkbox],input[type=radio]{width:20px;height:20px}select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23B0B0D0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}input:focus,select:focus,textarea:focus,button:focus{outline:2px solid var(--primary);outline-offset:2px}body.modal-open{overflow:hidden;position:fixed;width:100%}}@media (max-width: 900px){.main-navigation{background:var(--bg-primary);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -4px 20px #0000004d}.nav-items{max-width:500px;margin:0 auto}.nav-item{flex:1;max-width:80px;border-radius:var(--radius-md)}.nav-item.active{background:var(--gradient-primary)}.nav-icon{font-size:1.35rem}.nav-label{font-size:.65rem;text-align:center;line-height:1.2}}.mobile-fab{display:none;position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px));right:16px;width:56px;height:56px;border-radius:50%;background:var(--gradient-primary);color:#fff;border:none;box-shadow:var(--shadow-lg),var(--shadow-glow);cursor:pointer;z-index:var(--z-fixed);align-items:center;justify-content:center;font-size:1.5rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.mobile-fab:active{transform:scale(.95);box-shadow:var(--shadow-md)}@media (max-width: 768px){.mobile-fab{display:flex}}.swipe-indicator{display:none;width:36px;height:4px;background:var(--text-muted);border-radius:2px;margin:8px auto;opacity:.5}@media (max-width: 768px){.modal-content .swipe-indicator,.bottom-sheet .swipe-indicator{display:block}}@media (max-width: 768px){.bottom-sheet{position:fixed;bottom:0;left:0;right:0;max-height:90vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--bg-card);transform:translateY(100%);transition:transform var(--transition-normal);z-index:var(--z-modal)}.bottom-sheet.open{transform:translateY(0)}.bottom-sheet-content{max-height:calc(90vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 1rem 1rem}}.pull-to-refresh{display:none;position:absolute;top:-50px;left:50%;transform:translate(-50%);padding:.75rem;background:var(--bg-card);border-radius:var(--radius-full);box-shadow:var(--shadow-md);transition:transform var(--transition-fast)}@media (max-width: 768px){.pull-to-refresh{display:flex}.pull-to-refresh.pulling{transform:translate(-50%) translateY(70px)}}@media (max-width: 768px){.editor-toolbar{flex-wrap:wrap;gap:.375rem;padding:.5rem}.editor-toolbar .btn{padding:.5rem .75rem;font-size:.75rem}.file-actions{width:100%;justify-content:space-between;order:-1}.run-actions{width:100%;justify-content:center;gap:.5rem}.run-actions .btn{flex:1;max-width:150px}}@media (max-width: 768px){.keyboard-open .main-navigation{display:none}.keyboard-open .app-content{margin-bottom:0}.keyboard-open .mobile-fab{display:none}}@media (max-width: 768px){.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-hover) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton-text{height:1rem;border-radius:var(--radius-sm);margin-bottom:.5rem}.skeleton-card{height:120px;border-radius:var(--radius-md)}}@media (max-width: 768px){.a11y-touch-target{min-height:48px;min-width:48px}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.skip-link{position:absolute;top:-40px;left:0;background:var(--primary);color:#fff;padding:8px 16px;z-index:1000;transition:top var(--transition-fast)}.skip-link:focus{top:0}}@media (max-width: 768px){.hardware-selector{min-width:0;width:100%}.hardware-selector-trigger{padding:var(--space-3);min-height:48px}.hardware-selector-header{flex-direction:column;align-items:stretch;gap:var(--space-3)}.hardware-mode-toggle{order:-1}.hardware-usb-detect{flex:1;justify-content:center;min-height:44px;padding:var(--space-2) var(--space-3)}.hardware-option{padding:var(--space-4);min-height:56px}.hardware-option-header{gap:var(--space-4)}.hardware-icon{width:36px;height:36px;font-size:16px}.hardware-info .hardware-name{font-size:var(--font-md)}.hardware-info .hardware-desc{font-size:var(--font-sm)}.hardware-confirm-modal{width:90vw;max-width:400px;padding:var(--space-4)}.hardware-confirm-modal h3{font-size:var(--font-lg)}.modal-actions{flex-direction:column;gap:var(--space-2)}.modal-btn{width:100%;min-height:48px;font-size:var(--font-md)}}@media (max-width: 480px){.hardware-selector-dropdown{position:fixed;inset:auto 0 0;transform:none;max-width:100%;max-height:70vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;z-index:var(--z-modal)}.hardware-group-header{padding:var(--space-4);min-height:56px}.capability-badges{justify-content:center}.simulation-badge{font-size:var(--font-xs);padding:var(--space-1) var(--space-2)}}@media (max-width: 768px){.learning-dashboard{padding:0}.dashboard-header{flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-4)}.dashboard-header h1{font-size:var(--font-xl);line-height:1.3}.course-selector{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--space-2);display:flex;gap:var(--space-2)}.course-selector::-webkit-scrollbar{display:none}.course-btn{flex-shrink:0;min-height:44px;padding:var(--space-2) var(--space-4);white-space:nowrap}.levels-container,.beginner-levels-container{padding:0 var(--space-4);gap:var(--space-4)}.level-card{padding:var(--space-4)}.level-header{margin-bottom:var(--space-3)}.level-title{font-size:var(--font-lg)}.lessons-list{gap:var(--space-2)}.lesson-card{padding:var(--space-3);min-height:56px;display:flex;align-items:center;gap:var(--space-3)}.lesson-card .lesson-icon{flex-shrink:0}.lesson-card .lesson-info{flex:1;min-width:0}.lesson-card .lesson-title{font-size:var(--font-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-section{padding:var(--space-4)}.progress-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.stat-card{padding:var(--space-3);text-align:center}.stat-value{font-size:var(--font-2xl)}.stat-label{font-size:var(--font-xs)}}@media (max-width: 375px){.progress-stats{grid-template-columns:1fr 1fr;gap:var(--space-2)}.stat-card{padding:var(--space-2)}.stat-value{font-size:var(--font-xl)}}@media (max-width: 768px){.playground-container{height:calc(100vh - 70px - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}.playground-header{padding:var(--space-3);flex-shrink:0}.playground-header h2{font-size:var(--font-lg)}.playground-layout{flex:1;flex-direction:column;overflow:hidden}.editor-section{flex:1;min-height:200px;max-height:none}.simulator-section{flex:none;height:40%;min-height:180px}.output-section{flex:none;height:25%;min-height:100px}.mobile-panel-tabs{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:var(--space-2);gap:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch}.mobile-panel-tab{flex:1;min-width:80px;padding:var(--space-2) var(--space-3);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);text-align:center;cursor:pointer;transition:var(--transition-fast);min-height:44px}.mobile-panel-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.mobile-panel-tab:active{transform:scale(.97)}.cm-editor{font-size:14px;line-height:1.5}.cm-editor .cm-content{padding:var(--space-3)}.cm-gutters{min-width:40px}}@media (max-width: 480px){.playground-header{padding:var(--space-2)}.playground-header h2{font-size:var(--font-md)}.file-info{display:none}.toolbar-btn{padding:var(--space-2);min-height:40px;min-width:40px;font-size:var(--font-sm)}.toolbar-btn .btn-text{display:none}.toolbar-btn .btn-icon{font-size:18px}}@media (max-width: 768px){.robot-control-container{padding:var(--space-3)}.robot-control{gap:var(--space-4)}.camera-section{border-radius:var(--radius-lg);overflow:hidden}.camera-placeholder,.camera-feed{aspect-ratio:16/10;min-height:180px}.joystick-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.joystick-container{width:min(180px,50vw);height:min(180px,50vw);touch-action:none}.control-pad{width:100%;max-width:200px}.control-btn{min-height:48px;min-width:48px;font-size:20px;border-radius:var(--radius-md)}.control-btn:active{transform:scale(.95);background:var(--primary)}.sensor-data-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.sensor-item{padding:var(--space-2);font-size:var(--font-sm)}.sensor-label{font-size:var(--font-xs)}.sensor-value{font-size:var(--font-md)}}@media (max-width: 480px){.joystick-container{width:min(150px,45vw);height:min(150px,45vw)}.control-pad{max-width:180px}.control-btn{min-height:44px;min-width:44px;font-size:18px}.sensor-data-grid{grid-template-columns:1fr 1fr}}@media (max-width: 768px){.virtual-board{width:100%;max-width:300px;margin:0 auto}.virtual-board-container{padding:var(--space-3)}.board-led{width:16px;height:16px}.board-pin{width:12px;height:12px;font-size:8px}.board-label{font-size:var(--font-xs)}.gpio-monitor{font-size:var(--font-sm)}.gpio-pin-row{padding:var(--space-2);gap:var(--space-2)}.gpio-pin-value{font-size:var(--font-xs);padding:var(--space-1);min-width:32px}}@media (max-width: 900px){.admin-dashboard{display:flex;flex-direction:column}.admin-sidebar{position:fixed;top:0;left:-280px;width:280px;height:100%;background:var(--bg-primary);z-index:var(--z-modal);transition:left var(--transition-normal);overflow-y:auto}.admin-sidebar.open{left:0}.admin-sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:calc(var(--z-modal) - 1)}.admin-sidebar-overlay.visible{display:block}.admin-content{width:100%;padding:var(--space-4)}.admin-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.admin-menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;flex-shrink:0}.admin-menu-toggle:active{background:var(--bg-hover)}.admin-cards-grid{grid-template-columns:1fr;gap:var(--space-3)}.admin-card{padding:var(--space-4)}.admin-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-table{min-width:600px}.admin-table th,.admin-table td{padding:var(--space-2) var(--space-3);font-size:var(--font-sm);white-space:nowrap}}@media (max-width: 480px){.admin-content{padding:var(--space-3)}.admin-page-title{font-size:var(--font-lg)}.admin-card-value{font-size:var(--font-2xl)}}@media (max-width: 768px){.modal-overlay{padding:var(--space-3)}.modal-content{width:100%;max-width:100%;max-height:calc(100vh - var(--space-6));margin:0;border-radius:var(--radius-lg)}.modal-header{padding:var(--space-4);position:sticky;top:0;background:var(--bg-card);z-index:1}.modal-title{font-size:var(--font-lg);padding-right:40px}.modal-close{width:40px;height:40px;top:var(--space-3);right:var(--space-3)}.modal-body{padding:var(--space-4);overflow-y:auto;-webkit-overflow-scrolling:touch}.auth-modal-content{padding:var(--space-4)}.auth-input{min-height:48px;font-size:16px}.auth-btn{min-height:48px;font-size:var(--font-md)}.social-auth-buttons{flex-direction:column;gap:var(--space-2)}.social-auth-btn{width:100%;min-height:48px;justify-content:center}.form-group{margin-bottom:var(--space-4)}.form-label{font-size:var(--font-sm);margin-bottom:var(--space-2)}.form-input,.form-select,.form-textarea{width:100%;min-height:48px;padding:var(--space-3);font-size:16px;border-radius:var(--radius-md)}.form-textarea{min-height:120px}.checkbox-label,.radio-label{min-height:44px;display:flex;align-items:center;padding:var(--space-2) 0}.checkbox-label input,.radio-label input{width:22px;height:22px;margin-right:var(--space-3)}}@media (max-width: 768px){.pricing-container{padding:var(--space-4)}.pricing-header{text-align:center;margin-bottom:var(--space-6)}.pricing-title{font-size:var(--font-2xl)}.pricing-cards{flex-direction:column;gap:var(--space-4)}.pricing-card{width:100%;padding:var(--space-4)}.pricing-card.featured{transform:none;order:-1}.price-amount{font-size:var(--font-3xl)}.pricing-features{padding:var(--space-4) 0}.pricing-feature{padding:var(--space-2) 0;font-size:var(--font-sm)}.pricing-cta{min-height:48px;font-size:var(--font-md)}}@media (max-width: 768px){.community-container,.leaderboard-container{padding:var(--space-4)}.community-header,.leaderboard-header{flex-direction:column;gap:var(--space-3)}.community-search input,.leaderboard-search input{min-height:48px;font-size:16px}.community-filters,.leaderboard-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-2);gap:var(--space-2)}.post-card,.leaderboard-item{padding:var(--space-3)}.post-avatar,.leaderboard-avatar{width:36px;height:36px}.post-title,.leaderboard-name{font-size:var(--font-sm)}}@media (max-width: 768px){.desktop-only{display:none!important}}@media (min-width: 769px){.mobile-only{display:none!important}}@media (max-width: 768px){.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}}@supports (-webkit-touch-callout: none){.modal-content{max-height:-webkit-fill-available}input,textarea,select{font-size:16px}.modal-body{overscroll-behavior:contain}@media (max-width: 768px){.app-content{padding-top:env(safe-area-inset-top)}}}@media (max-width: 768px){.ripple-effect{position:relative;overflow:hidden}.ripple-effect:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}.ripple-effect:active:after{width:200px;height:200px}}@media (prefers-color-scheme: dark) and (max-width: 768px){:root{--bg-dark: #000000;--bg-primary: #0a0a0a;--bg-secondary: #141414}}