.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out;padding:1rem}.modal-container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:480px;position:relative;animation:slideUp .3s ease-out}.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:#f7fafc;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#718096;z-index:1}.modal-close:hover{background:#edf2f7;color:#2d3748;transform:rotate(90deg)}.modal-close:focus{outline:none;box-shadow:0 0 0 3px #667eea33}.modal-header{text-align:center;padding:3rem 2rem 1.5rem;border-bottom:1px solid #f7fafc}.modal-header .modal-icon{width:64px;height:64px;background:linear-gradient(135deg,#667eea15,#764ba215);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:#667eea}.modal-header h2{font-size:1.75rem;font-weight:700;color:#1a202c;margin:0 0 .5rem}.modal-header p{color:#718096;font-size:.95rem;margin:0}.modal-form{padding:2rem}.modal-form .form-group{margin-bottom:2rem}.modal-form .form-group label{display:block;color:#2d3748;font-weight:600;margin-bottom:.75rem;font-size:.95rem}.modal-form .form-group input{width:100%;padding:1rem 1.25rem;background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;color:#1a202c;font-size:1rem;transition:all .3s ease}.modal-form .form-group input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.modal-form .form-group input::-moz-placeholder{color:#a0aec0}.modal-form .form-group input::placeholder{color:#a0aec0}.modal-form .form-group input.error{border-color:#fc8181}.modal-form .form-group input.error:focus{border-color:#fc8181;box-shadow:0 0 0 3px #fc81811a}.modal-form .form-group .error-message{display:block;color:#c53030;font-size:.875rem;margin-top:.5rem;animation:shake .3s ease}.modal-form .modal-actions{display:flex;gap:1rem;justify-content:flex-end}.modal-form .modal-actions button{padding:.875rem 1.75rem;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s ease;border:none}.modal-form .modal-actions button:focus{outline:none}.modal-form .modal-actions .btn-secondary{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0}.modal-form .modal-actions .btn-secondary:hover{background:#edf2f7;border-color:#cbd5e0}.modal-form .modal-actions .btn-secondary:focus{box-shadow:0 0 0 3px #a0aec033}.modal-form .modal-actions .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;position:relative;overflow:hidden}.modal-form .modal-actions .btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.modal-form .modal-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.modal-form .modal-actions .btn-primary:hover:before{left:100%}.modal-form .modal-actions .btn-primary:active{transform:translateY(0)}.modal-form .modal-actions .btn-primary:focus{box-shadow:0 0 0 3px #667eea4d}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (max-width: 480px){.modal-container{margin:1rem}.modal-header{padding:2.5rem 1.5rem 1.5rem}.modal-form{padding:1.5rem}.modal-form .modal-actions{flex-direction:column-reverse}.modal-form .modal-actions button{width:100%}}.dashboard-container{min-height:100vh;background:#f8f9fa}.dashboard-header{background:#fff;border-bottom:1px solid #e9ecef;padding:1rem 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 4px #00000005}.dashboard-header .header-content{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}.dashboard-header .header-logo{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700;color:#1a202c;text-decoration:none}.dashboard-header .header-logo .logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}.dashboard-header .header-nav{display:flex;align-items:center;gap:2rem}.dashboard-header .header-nav .nav-link{color:#4a5568;text-decoration:none;font-weight:500;transition:color .3s ease;position:relative}.dashboard-header .header-nav .nav-link:hover,.dashboard-header .header-nav .nav-link.active{color:#667eea}.dashboard-header .header-nav .nav-link.active:after{content:"";position:absolute;bottom:-1.5rem;left:0;right:0;height:3px;background:linear-gradient(135deg,#667eea,#764ba2)}.dashboard-header .header-actions{display:flex;align-items:center;gap:1rem}.dashboard-header .header-actions .user-info{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:#f7fafc;border-radius:10px;cursor:pointer;transition:all .3s ease}.dashboard-header .header-actions .user-info:hover{background:#edf2f7}.dashboard-header .header-actions .user-info .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem}.dashboard-header .header-actions .user-info .user-name{font-weight:500;color:#2d3748}.dashboard-header .header-actions .logout-btn{padding:.5rem 1.25rem;background:transparent;border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;font-weight:500;cursor:pointer;transition:all .3s ease}.dashboard-header .header-actions .logout-btn:hover{border-color:#667eea;color:#667eea}.dashboard-hero{background:linear-gradient(180deg,#fff,#f8f9fa);padding:4rem 0;text-align:center}.dashboard-hero .hero-content{max-width:1400px;margin:0 auto;padding:0 2rem}.dashboard-hero .hero-title{font-size:3.5rem;font-weight:800;color:#1a202c;margin-bottom:1.5rem;line-height:1.2}@media (max-width: 768px){.dashboard-hero .hero-title{font-size:2.5rem}}.dashboard-hero .hero-subtitle{font-size:1.25rem;color:#718096;margin-bottom:2.5rem;max-width:700px;margin-left:auto;margin-right:auto}.dashboard-hero .hero-search{max-width:700px;margin:0 auto;position:relative}.dashboard-hero .hero-search .search-wrapper{display:flex;background:#fff;border-radius:50px;box-shadow:0 10px 40px #0000001a;overflow:hidden;border:2px solid transparent;transition:all .3s ease}.dashboard-hero .hero-search .search-wrapper:focus-within{border-color:#667eea;box-shadow:0 10px 40px #667eea33}.dashboard-hero .hero-search .search-wrapper input{flex:1;padding:1.25rem 2rem;border:none;outline:none;font-size:1rem;color:#1a202c}.dashboard-hero .hero-search .search-wrapper input::-moz-placeholder{color:#a0aec0}.dashboard-hero .hero-search .search-wrapper input::placeholder{color:#a0aec0}.dashboard-hero .hero-search .search-wrapper .create-btn{padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;white-space:nowrap}.dashboard-hero .hero-search .search-wrapper .create-btn:hover{transform:scale(1.02)}.dashboard-hero .hero-search .search-wrapper .create-btn:active{transform:scale(.98)}.dashboard-projects{padding:4rem 0}.dashboard-projects .projects-content{max-width:1400px;margin:0 auto;padding:0 2rem}.dashboard-projects .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}.dashboard-projects .section-header h2{font-size:1.75rem;font-weight:700;color:#1a202c;margin:0}.dashboard-projects .section-header .view-all-btn{display:flex;align-items:center;gap:.5rem;color:#667eea;text-decoration:none;font-weight:600;transition:gap .3s ease}.dashboard-projects .section-header .view-all-btn:hover{gap:.75rem}.dashboard-projects .projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}@media (max-width: 768px){.dashboard-projects .projects-grid{grid-template-columns:1fr}}.dashboard-projects .project-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 12px #0000000f;cursor:pointer;transition:all .3s ease;border:1px solid transparent;position:relative;overflow:hidden}.dashboard-projects .project-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.dashboard-projects .project-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a;border-color:#e2e8f0}.dashboard-projects .project-card:hover:before{transform:scaleX(1)}.dashboard-projects .project-card .card-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.dashboard-projects .project-card .card-header .card-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#667eea15,#764ba215);display:flex;align-items:center;justify-content:center;color:#667eea;font-size:1.5rem}.dashboard-projects .project-card .card-header .card-info{flex:1}.dashboard-projects .project-card .card-header .card-info h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 .25rem}.dashboard-projects .project-card .card-header .card-info .project-rating{display:flex;align-items:center;gap:.25rem;color:#718096;font-size:.875rem}.dashboard-projects .project-card .card-header .card-info .project-rating .star{color:#f6ad55}.dashboard-projects .project-card .card-description{color:#718096;font-size:.95rem;line-height:1.6;margin-bottom:1.5rem}.dashboard-projects .project-card .card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #f7fafc}.dashboard-projects .project-card .card-footer .card-date{color:#a0aec0;font-size:.875rem}.dashboard-projects .project-card .card-footer .card-action{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#1a202c;color:#fff;border-radius:8px;font-weight:500;font-size:.875rem;border:none;cursor:pointer;transition:all .3s ease}.dashboard-projects .project-card .card-footer .card-action:hover{background:#2d3748;transform:translate(4px)}.dashboard-projects .empty-state{text-align:center;padding:4rem 2rem}.dashboard-projects .empty-state .empty-icon{font-size:4rem;color:#cbd5e0;margin-bottom:1rem}.dashboard-projects .empty-state h3{font-size:1.5rem;color:#2d3748;margin-bottom:.5rem}.dashboard-projects .empty-state p{color:#718096;margin-bottom:2rem}.dashboard-projects .empty-state .empty-cta{padding:.875rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease}.dashboard-projects .empty-state .empty-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}.loading-overlay .loading-spinner{background:#fff;padding:3rem 4rem;border-radius:20px;text-align:center;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.loading-overlay .loading-spinner .spinner{width:60px;height:60px;margin:0 auto 1.5rem;border:4px solid #f3f4f6;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite}.loading-overlay .loading-spinner p{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.dashboard-header .header-content{padding:0 1rem}.dashboard-header .header-nav{display:none}.dashboard-hero{padding:3rem 0}.dashboard-hero .hero-content,.dashboard-projects .projects-content{padding:0 1rem}.loading-overlay .loading-spinner{padding:2rem 3rem}}.code-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:99999;animation:fadeIn .2s ease}.code-editor-modal{background:#fff;border:1px solid #e2e8f0;border-radius:20px;width:90%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.code-editor-header{padding:24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e9ecef;background:#fff}.code-editor-header h2{margin:0;color:#1a202c;font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:8px}.code-editor-header h2:before{content:"";width:4px;height:24px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.code-editor-header .close-button{color:#718096;padding:8px;border-radius:8px;transition:all .15s ease;display:flex;align-items:center;justify-content:center;background:#f7fafc}.code-editor-header .close-button:hover{color:#2d3748;background:#edf2f7;transform:rotate(90deg)}.code-editor-content{flex:1;min-height:400px;border:1px solid #e2e8f0;margin:24px;border-radius:12px;overflow:hidden;background:#f7fafc}.code-editor-footer{padding:24px;display:flex;justify-content:flex-end;gap:16px;border-top:1px solid #e9ecef;background:#f7fafc}.code-editor-footer button{padding:12px 24px;border-radius:10px;font-weight:600;font-size:.875rem;transition:all .15s ease;display:flex;align-items:center;gap:4px}.code-editor-footer button.cancel-button{background:#fff;border:1px solid #e2e8f0;color:#4a5568}.code-editor-footer button.cancel-button:hover{background:#f7fafc;border-color:#cbd5e0;color:#2d3748;transform:translateY(-1px)}.code-editor-footer button.save-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;box-shadow:0 4px 12px #667eea4d}.code-editor-footer button.save-button:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.code-editor-footer button.save-button:active{transform:translateY(0)}.project-dashboard{min-height:100vh;background:#f8f9fa}.project-dashboard__header{background:#fff;border-bottom:1px solid #e9ecef;padding:2rem;box-shadow:0 2px 4px #00000005}.project-dashboard__header .header-left{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:1.5rem}.project-dashboard__header .header-left .back-button{width:40px;height:40px;border-radius:10px;background:#f7fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4a5568;transition:all .3s ease;cursor:pointer}.project-dashboard__header .header-left .back-button:hover{background:#edf2f7;border-color:#cbd5e0;color:#2d3748}.project-dashboard__header .header-left h1{font-size:1.75rem;font-weight:700;color:#1a202c;margin:0 0 .25rem}.project-dashboard__header .header-left p{color:#718096;margin:0;font-size:.95rem}.project-dashboard__tabs{max-width:1400px;margin:0 auto;padding:1.5rem 2rem 0;display:flex;gap:1rem;border-bottom:2px solid #e9ecef}.project-dashboard__tabs .tab{padding:.75rem 1.5rem;background:none;border:none;color:#718096;font-weight:600;font-size:.95rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .3s ease}.project-dashboard__tabs .tab:hover{color:#4a5568;background:#f7fafc;border-radius:8px 8px 0 0}.project-dashboard__tabs .tab.active{color:#667eea;border-bottom-color:#667eea}.project-dashboard__content{max-width:1400px;margin:0 auto;padding:2rem}.project-dashboard__content .content-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.project-dashboard__content .content-section .section-header h2{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0}.project-dashboard__content .content-section .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}@media (max-width: 768px){.project-dashboard__content .content-section .cards-grid{grid-template-columns:1fr}}.project-dashboard__content .content-section .card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000000f;border:1px solid transparent;transition:all .3s ease;position:relative;overflow:hidden}.project-dashboard__content .content-section .card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.project-dashboard__content .content-section .card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a;border-color:#e2e8f0}.project-dashboard__content .content-section .card:hover:before{transform:scaleX(1)}.project-dashboard__content .content-section .card .card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.project-dashboard__content .content-section .card .card-header svg{width:36px;height:36px;padding:8px;border-radius:10px;background:linear-gradient(135deg,#667eea15,#764ba215);color:#667eea}.project-dashboard__content .content-section .card .card-header h3{font-size:1.15rem;font-weight:700;color:#1a202c;margin:0}.project-dashboard__content .content-section .card .card-body{margin-bottom:1rem}.project-dashboard__content .content-section .card .card-body .card-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}.project-dashboard__content .content-section .card .card-body .card-stats span{font-size:.875rem;color:#4a5568;padding:.25rem .75rem;background:#f7fafc;border-radius:6px}.project-dashboard__content .content-section .card .card-body .file-info{font-size:.875rem;color:#718096;margin-bottom:.5rem}.project-dashboard__content .content-section .card .card-body .card-classname{font-size:.875rem;color:#667eea;margin:.5rem 0;padding:.5rem;background:linear-gradient(135deg,#667eea08,#764ba208);border-radius:6px;border-left:3px solid #667eea}.project-dashboard__content .content-section .card .card-body .card-classname code{font-family:Monaco,Menlo,Consolas,monospace;font-size:.8rem;font-weight:600;color:#667eea}.project-dashboard__content .content-section .card .card-body .card-date{font-size:.875rem;color:#a0aec0;margin:0}.project-dashboard__content .content-section .card .card-actions{display:flex;gap:.5rem;padding-top:1rem;border-top:1px solid #f7fafc}.project-dashboard__content .content-section .empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:#718096}.project-dashboard__content .content-section .empty-state svg{color:#cbd5e0;margin-bottom:1rem;opacity:.4}.project-dashboard__content .content-section .empty-state p{font-size:1.1rem;font-weight:500;color:#4a5568;margin-bottom:1.5rem}.btn-primary{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-primary:active{transform:translateY(0)}.btn-secondary{padding:.75rem 1.5rem;background:#fff;color:#4a5568;border:1px solid #e2e8f0;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s ease}.btn-secondary:hover{background:#f7fafc;border-color:#cbd5e0;color:#2d3748}.btn-icon{padding:.5rem;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;color:#718096;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.btn-icon:hover{background:#edf2f7;border-color:#cbd5e0;color:#4a5568}.btn-icon.btn-danger:hover{background:#fff5f5;border-color:#fc8181;color:#e53e3e}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.btn-attach{padding:.5rem 1rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease}.btn-attach:hover{background:#f7fafc;border-color:#cbd5e0}.btn-attach.attached{background:linear-gradient(135deg,#667eea15,#764ba215);border-color:#667eea;color:#667eea}.btn-attach.attached:hover{background:linear-gradient(135deg,#667eea25,#764ba225)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:20px;padding:2rem;width:100%;max-width:480px;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.modal-content.large{max-width:700px}.modal-content h3{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0 0 1.5rem}.modal-content h4{font-size:1.1rem;font-weight:600;color:#2d3748;margin:0 0 1rem}.modal-content input{width:100%;padding:.875rem 1rem;background:#f7fafc;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;color:#1a202c;transition:all .3s ease}.modal-content input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.modal-content input::-moz-placeholder{color:#a0aec0}.modal-content input::placeholder{color:#a0aec0}.modal-content .modal-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem}.modal-content.attach-modal-v2{max-width:1000px;max-height:90vh;display:flex;flex-direction:column}.modal-content.attach-modal-v2 .attach-modal-header{padding-bottom:1.5rem;border-bottom:2px solid #f0f4f8;margin-bottom:1.5rem}.modal-content.attach-modal-v2 .attach-modal-header .header-title{display:flex;align-items:center;gap:1rem}.modal-content.attach-modal-v2 .attach-modal-header .header-title svg{padding:.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;box-shadow:0 4px 12px #667eea4d}.modal-content.attach-modal-v2 .attach-modal-header .header-title h3{margin:0 0 .25rem;font-size:1.5rem;font-weight:700;color:#1a202c}.modal-content.attach-modal-v2 .attach-modal-header .header-title .page-name{margin:0;font-size:.875rem;color:#718096;font-weight:500}.modal-content.attach-modal-v2 .search-section{margin-bottom:1rem;position:relative}.modal-content.attach-modal-v2 .search-section .search-input-wrapper{position:relative}.modal-content.attach-modal-v2 .search-section .search-input-wrapper .search-input{width:100%;padding:.75rem 3rem .75rem 1rem;background:#f7fafc;border:2px solid #e2e8f0;border-radius:10px;font-size:.95rem;color:#1a202c;font-weight:500;transition:all .3s ease}.modal-content.attach-modal-v2 .search-section .search-input-wrapper .search-input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.modal-content.attach-modal-v2 .search-section .search-input-wrapper .search-input::-moz-placeholder{color:#a0aec0;font-weight:400}.modal-content.attach-modal-v2 .search-section .search-input-wrapper .search-input::placeholder{color:#a0aec0;font-weight:400}.modal-content.attach-modal-v2 .search-section .search-input-wrapper .clear-search{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);padding:.4rem;background:#e2e8f0;border:none;border-radius:6px;color:#4a5568;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-content.attach-modal-v2 .search-section .search-input-wrapper .clear-search:hover{background:#cbd5e0;color:#2d3748}.modal-content.attach-modal-v2 .search-section .search-results{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:#fff;border:2px solid #e2e8f0;border-radius:10px;box-shadow:0 10px 40px #00000026;max-height:250px;overflow-y:auto;z-index:10;animation:slideDown .2s ease}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item{display:flex;align-items:center;gap:.65rem;padding:.75rem .875rem;cursor:pointer;transition:all .2s ease;border-bottom:1px solid #f0f4f8}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item:last-child{border-bottom:none}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item svg{color:#718096;flex-shrink:0}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item .file-type-badge{font-size:.65rem;font-weight:700;color:#fff;background:#667eea;padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item .result-name{flex:1;font-size:.85rem;color:#2d3748;font-weight:500;font-family:Monaco,Menlo,Consolas,monospace}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item .add-icon{color:#667eea;opacity:0;transform:scale(.8);transition:all .2s ease}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item:hover{background:linear-gradient(135deg,#667eea08,#764ba208)}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item:hover .result-name{color:#667eea}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item:hover svg{color:#667eea}.modal-content.attach-modal-v2 .search-section .search-results .search-result-item:hover .add-icon{opacity:1;transform:scale(1)}.modal-content.attach-modal-v2 .search-section .search-results .no-results{padding:1.5rem 1rem;text-align:center;color:#a0aec0;font-size:.85rem}.modal-content.attach-modal-v2 .attached-files-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem;overflow-y:auto;max-height:550px;padding-right:.5rem}.modal-content.attach-modal-v2 .attached-files-grid::-webkit-scrollbar{width:6px}.modal-content.attach-modal-v2 .attached-files-grid::-webkit-scrollbar-track{background:#f7fafc;border-radius:3px}.modal-content.attach-modal-v2 .attached-files-grid::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.modal-content.attach-modal-v2 .attached-files-grid::-webkit-scrollbar-thumb:hover{background:#a0aec0}@media (max-width: 768px){.modal-content.attach-modal-v2 .attached-files-grid{grid-template-columns:1fr}}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .section-header svg{color:#667eea}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .section-header h4{flex:1;margin:0;font-size:.95rem;font-weight:600;color:#2d3748;text-transform:uppercase;letter-spacing:.5px}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .section-header .badge{font-size:.75rem;font-weight:700;color:#8b6914;background:#fef3c7;padding:.25rem .65rem;border-radius:10px;border:1px solid #fcd34d}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block{background:#fef3e2;border-radius:10px;padding:1rem;min-height:200px;box-shadow:0 2px 8px #00000014;border:2px solid #f5ddb8}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports{display:flex;flex-direction:column;gap:.35rem}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line{display:flex;align-items:center;padding:.55rem .75rem;border-radius:6px;font-family:Monaco,Menlo,Consolas,monospace;font-size:.875rem;cursor:pointer;transition:all .2s ease;position:relative;background:#fffbf0;border:1px solid #f5ddb8}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line:hover{background:#fef5e7;border-color:#f0c98f;box-shadow:0 2px 6px #0000000d}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line:hover .detach-btn{opacity:1;transform:translate(0)}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line:hover .import-path{color:#dc2626;text-decoration:line-through}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line .line-number{color:#a0826d;margin-right:1rem;min-width:20px;text-align:right;font-size:.75rem;font-weight:500}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line .import-keyword{color:#9333ea;margin-right:.5rem;font-weight:700}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line .import-path{color:#ca8a04;flex:1;transition:all .2s ease;font-weight:500}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line .semicolon{color:#78716c}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line .detach-btn{opacity:0;transform:translate(-10px);position:absolute;right:.5rem;background:#ef4444;border:none;border-radius:4px;padding:.3rem .55rem;color:#fff;cursor:pointer;display:flex;align-items:center;gap:.25rem;transition:all .2s ease;font-size:.75rem;box-shadow:0 2px 4px #ef44444d}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .file-imports .import-line .detach-btn:hover{background:#dc2626;transform:translate(0) scale(1.05);box-shadow:0 3px 6px #ef444466}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .empty-code-block{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem;color:#a0826d;min-height:200px}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .empty-code-block svg{color:#d4b896;margin-bottom:.75rem;opacity:.6}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .empty-code-block p{margin:0;font-size:.9rem;font-weight:600;color:#8b7355}.modal-content.attach-modal-v2 .attached-files-grid .attached-section .code-block .empty-code-block span{margin-top:.35rem;font-size:.75rem;color:#a0826d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast-notification{position:fixed;bottom:2rem;right:2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 1.5rem;border-radius:12px;box-shadow:0 10px 40px #0003;font-weight:500;font-size:.9rem;z-index:10000;animation:slideInUp .3s ease}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.delete-modal .delete-modal-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #fee}.delete-modal .delete-modal-header h3{margin:0;color:#dc2626;font-size:1.5rem;font-weight:700}.delete-modal .delete-modal-body{margin-bottom:1.5rem}.delete-modal .delete-modal-body .delete-warning{padding:1rem;background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #ef4444;border-radius:8px;font-size:.95rem;line-height:1.6;color:#7f1d1d;margin-bottom:1.5rem}.delete-modal .delete-modal-body .delete-warning strong{color:#dc2626;font-weight:700}.delete-modal .delete-modal-body .delete-confirmation-input label{display:block;font-size:.9rem;color:#4a5568;margin-bottom:.75rem;font-weight:500}.delete-modal .delete-modal-body .delete-confirmation-input label strong{color:#dc2626;font-weight:700;padding:.2rem .4rem;background:#fef2f2;border-radius:4px}.delete-modal .delete-modal-body .delete-confirmation-input input{width:100%;padding:.875rem 1rem;background:#fff;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;color:#1a202c;transition:all .3s ease;font-family:Monaco,Menlo,Consolas,monospace}.delete-modal .delete-modal-body .delete-confirmation-input input:focus{outline:none;border-color:#dc2626;background:#fff;box-shadow:0 0 0 3px #dc26261a}.delete-modal .delete-modal-body .delete-confirmation-input input::-moz-placeholder{color:#cbd5e0;font-style:italic}.delete-modal .delete-modal-body .delete-confirmation-input input::placeholder{color:#cbd5e0;font-style:italic}.delete-modal .delete-modal-body .delete-confirmation-input input:disabled{opacity:.6;cursor:not-allowed;background:#f7fafc}.delete-modal .modal-actions{display:flex;gap:1rem;justify-content:flex-end}.delete-modal .modal-actions .btn-danger{padding:.75rem 1.5rem;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #dc26264d}.delete-modal .modal-actions .btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #dc262666;background:linear-gradient(135deg,#b91c1c,#991b1b)}.delete-modal .modal-actions .btn-danger:active:not(:disabled){transform:translateY(0)}.delete-modal .modal-actions .btn-danger:disabled{opacity:.5;cursor:not-allowed;transform:none}.delete-modal .modal-actions .btn-secondary:disabled{opacity:.5;cursor:not-allowed}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:16px;position:relative;overflow:hidden}.login-container:before,.login-container:after{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;animation:float 20s ease-in-out infinite}.login-container:before{width:600px;height:600px;background:linear-gradient(135deg,#a8edea,#fed6e3);top:-300px;right:-300px;animation-delay:-5s}.login-container:after{width:500px;height:500px;background:linear-gradient(135deg,#e0c3fc,#8ec5fc);bottom:-250px;left:-250px}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-50px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.login-card{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:3rem;width:100%;max-width:450px;box-shadow:0 20px 60px #0000001a,0 0 1px #0000000d;border:1px solid rgba(255,255,255,.8);position:relative;z-index:1;animation:slideUp .6s ease-out}@media (max-width: 480px){.login-card{padding:2rem}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:2.5rem}.login-header svg{color:#667eea;margin-bottom:1rem;filter:drop-shadow(0 4px 8px rgba(102,126,234,.3));animation:iconPulse 2s ease-in-out infinite}.login-header h1{color:#1a202c;font-size:2rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-header p{color:#718096;font-size:1rem;font-weight:400}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.login-form .form-group{margin-bottom:1.5rem}.login-form .form-group label{display:block;color:#2d3748;margin-bottom:.5rem;font-size:.95rem;font-weight:600;letter-spacing:.3px}.login-form .form-group .password-input-wrapper{position:relative;display:flex;align-items:center}.login-form .form-group .password-input-wrapper input{padding-right:50px}.login-form .form-group .password-input-wrapper .password-toggle{position:absolute;right:1rem;background:none;border:none;color:#718096;padding:.5rem;cursor:pointer;transition:all .3s ease;border-radius:8px}.login-form .form-group .password-input-wrapper .password-toggle:hover{color:#667eea;background:#667eea14}.login-form .form-group .password-input-wrapper .password-toggle:focus{outline:none;color:#667eea;background:#667eea1f}.login-form .form-group input{width:100%;padding:1rem 1.25rem;background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;color:#1a202c;font-size:1rem;transition:all .3s ease}.login-form .form-group input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a;transform:translateY(-2px)}.login-form .form-group input::-moz-placeholder{color:#a0aec0}.login-form .form-group input::placeholder{color:#a0aec0}.login-form .form-group input:-webkit-autofill,.login-form .form-group input:-webkit-autofill:hover,.login-form .form-group input:-webkit-autofill:focus{-webkit-text-fill-color:#1a202c;-webkit-box-shadow:0 0 0px 1000px #f7fafc inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.login-form .error-message{color:#c53030;font-size:.9rem;margin-bottom:1rem;padding:.75rem;background:#fff5f5;border:1px solid #fc8181;border-radius:10px;text-align:center;animation:shake .5s ease}.login-form .success-message{color:#22543d;font-size:.9rem;margin-bottom:1rem;padding:.75rem;background:#f0fff4;border:1px solid #68d391;border-radius:10px;text-align:center;animation:slideDown .5s ease}.login-form .login-button{width:100%;padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 4px 15px #667eea66}.login-form .login-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.login-form .login-button:hover{transform:translateY(-2px);box-shadow:0 6px 25px #667eea80}.login-form .login-button:hover:before{left:100%}.login-form .login-button:active{transform:translateY(0);box-shadow:0 2px 10px #667eea4d}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.otp-info{margin-bottom:1.5rem;padding:1rem;background:linear-gradient(135deg,#667eea14,#764ba214);border-radius:12px;border:1px solid rgba(102,126,234,.2);display:flex;justify-content:space-between;align-items:center;gap:1rem}.otp-info .email-display{display:flex;align-items:center;gap:.5rem;color:#2d3748;font-size:.95rem;font-weight:500}.otp-info .email-display svg{color:#667eea;flex-shrink:0}.otp-info .email-display span{word-break:break-all}.otp-info .change-email-btn{background:none;border:none;color:#667eea;font-size:.85rem;font-weight:600;cursor:pointer;padding:.5rem .75rem;border-radius:8px;transition:all .3s ease;white-space:nowrap}.otp-info .change-email-btn:hover{background:#667eea1a;color:#764ba2}.otp-info .change-email-btn:focus{outline:none;background:#667eea26}.otp-input{font-size:1.5rem!important;letter-spacing:.5rem!important;text-align:center!important;font-weight:600!important;font-family:Courier New,monospace!important}.resend-otp{margin-top:1rem;margin-bottom:1rem;text-align:center;padding:1rem;background:#f7fafc;border-radius:10px;border:1px dashed #e2e8f0}.resend-otp p{color:#718096;font-size:.9rem;margin-bottom:.5rem}.resend-otp .resend-btn{background:none;border:none;color:#667eea;font-weight:600;font-size:.95rem;cursor:pointer;padding:.5rem 1rem;border-radius:8px;transition:all .3s ease;position:relative}.resend-otp .resend-btn:hover:not(:disabled){background:#667eea1a;color:#764ba2;transform:translateY(-1px)}.resend-otp .resend-btn:focus{outline:none;background:#667eea26}.resend-otp .resend-btn:disabled{opacity:.6;cursor:not-allowed}.resend-otp .resend-btn:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:0;height:2px;background:linear-gradient(135deg,#667eea,#764ba2);transition:width .3s ease}.resend-otp .resend-btn:hover:not(:disabled):after{width:80%}.toggle-mode{margin-top:2rem;text-align:center;padding-top:1.5rem;border-top:1px solid #e2e8f0}.toggle-mode p{color:#718096;font-size:.95rem}.toggle-mode .toggle-link{background:none;border:none;color:#667eea;font-weight:600;cursor:pointer;text-decoration:none;transition:all .3s ease;padding:.25rem .5rem;border-radius:6px;display:inline-block;position:relative}.toggle-mode .toggle-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(135deg,#667eea,#764ba2);transition:width .3s ease}.toggle-mode .toggle-link:hover{transform:translateY(-1px);color:#764ba2}.toggle-mode .toggle-link:hover:after{width:100%}.toggle-mode .toggle-link:focus{outline:none;background:#667eea14}.sidebar{width:280px;background:#fff;border-right:1px solid #e9ecef;padding:24px 24px 64px;height:calc(100vh - 70px);overflow-y:auto;position:fixed;top:70px;left:0;z-index:1000;box-shadow:2px 0 8px #0000000a}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#a0aec0}.sidebar__header{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #e9ecef}.sidebar__header h2{font-size:1.25rem;color:#1a202c;font-weight:700;margin-bottom:4px}.sidebar__header p{color:#718096;font-size:.875rem;margin:0}.sidebar__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sidebar__list-item{padding:16px;border-radius:10px;cursor:grab;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f7fafc;border:1px solid #e2e8f0;min-height:80px}.sidebar__list-item:hover{background:linear-gradient(135deg,#667eea15,#764ba215);border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea26}.sidebar__list-item:active{cursor:grabbing;transform:scale(.98)}.sidebar__list-item svg{color:#718096;transition:color .15s ease}.sidebar__list-item span{font-size:.875rem;color:#4a5568;font-weight:500;transition:color .15s ease}.sidebar__list-item:hover svg,.sidebar__list-item:hover span{color:#667eea}.sidebar__list-item--active{background-color:#6200ee1a;border-color:#6200ee}.sidebar__list-item--active:hover{background-color:#6200ee26}.sidebar__list-item--active svg{color:#6200ee}.sidebar__page-tools{margin-top:24px;padding-top:24px;border-top:1px solid #e9ecef}.sidebar__page-tools h3{font-size:1rem;font-weight:600;color:#1a202c;margin-bottom:16px}.sidebar__page-tools .tool-button{width:100%;padding:16px;margin-bottom:8px;background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;color:#4a5568;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s ease}.sidebar__page-tools .tool-button svg{color:#718096;transition:color .15s ease}.sidebar__page-tools .tool-button:hover{background:linear-gradient(135deg,#667eea15,#764ba215);border-color:#667eea;color:#667eea;transform:translateY(-1px);box-shadow:0 2px 8px #667eea26}.sidebar__page-tools .tool-button:hover svg{color:#667eea}.sidebar__page-tools .tool-button:active{transform:translateY(0)}.style-panel{color:#1a202c;padding-top:16px}.style-panel h3{font-size:1.15rem;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e9ecef;font-weight:700}.style-panel__section{margin-bottom:16px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;transition:all .15s ease}.style-panel__section:hover{border-color:#cbd5e0;box-shadow:0 2px 8px #0000000a}.style-panel__section-header{width:100%;padding:16px;background:#f7fafc;border:none;color:#2d3748;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .15s ease;font-weight:600}.style-panel__section-header:hover{background:#edf2f7;color:#667eea}.style-panel__section-header svg{transition:transform .15s ease;color:#718096}.style-panel__section-content{padding:16px;border-top:1px solid #e9ecef;background:#f7fafc}.style-panel__group{margin-bottom:16px}.style-panel__group:last-child{margin-bottom:0}.style-panel__group label{display:block;margin-bottom:4px;color:#4a5568;font-size:.875rem;font-weight:600}.style-panel__group input[type=number],.style-panel__group input[type=text],.style-panel__group select,.style-panel__group textarea{width:100%;padding:10px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1a202c;font-size:.875rem;font-family:Monaco,Menlo,monospace;transition:all .15s ease}.style-panel__group input[type=number]:focus,.style-panel__group input[type=text]:focus,.style-panel__group select:focus,.style-panel__group textarea:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.style-panel__group input[type=number].invalid,.style-panel__group input[type=text].invalid,.style-panel__group select.invalid,.style-panel__group textarea.invalid{border-color:#fc8181;background:#fff5f5}.style-panel__group textarea{resize:vertical;min-height:100px;font-family:Monaco,Menlo,Courier New,monospace}.style-panel__group .error-message{display:block;margin-top:4px;color:#e53e3e;font-size:.75rem}.style-panel__group.disabled{opacity:.5}.style-panel__group.disabled input,.style-panel__group.disabled select,.style-panel__group.disabled textarea{background:#f7fafc!important;cursor:not-allowed}.style-panel__group .style-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.style-panel__group .style-label-row label{margin-bottom:0}.style-panel__group .style-label-row .style-visibility-toggle{padding:4px;background:transparent;border:none;color:#718096;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;border-radius:4px}.style-panel__group .style-label-row .style-visibility-toggle:hover{background:#f7fafc;color:#667eea}.style-panel__group .style-label-row .style-visibility-toggle:active{transform:scale(.95)}.style-panel__button-group{display:flex;gap:4px}.style-panel__button-group button{flex:1;padding:10px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#718096;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.style-panel__button-group button:hover:not(:disabled){background:#f7fafc;border-color:#cbd5e0;color:#4a5568;transform:translateY(-1px)}.style-panel__button-group button.active{background:linear-gradient(135deg,#667eea15,#764ba215);border-color:#667eea;color:#667eea;box-shadow:0 0 0 3px #667eea1a}.style-panel__button-group button:disabled{opacity:.5;cursor:not-allowed;background:#f7fafc!important}.style-panel__apply-button{width:100%;margin-top:8px;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;transition:all .15s ease;box-shadow:0 4px 12px #667eea4d}.style-panel__apply-button:hover{transform:translateY(-1px);box-shadow:0 6px 20px #667eea66}.style-panel__apply-button:active{transform:translateY(0)}.applied-css-viewer .css-rule{margin-bottom:16px;padding:16px;background:#f7fafc;border-radius:8px;border-left:3px solid #667eea}.applied-css-viewer .css-rule:last-child{margin-bottom:0}.applied-css-viewer .css-rule__source{font-size:.75rem;font-weight:700;color:#667eea;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.applied-css-viewer .css-rule__selector{font-size:.875rem;font-weight:600;color:#2d3748;margin-bottom:8px;font-family:Monaco,Menlo,monospace}.applied-css-viewer .css-rule__properties{font-family:Monaco,Menlo,monospace;font-size:.8rem}.applied-css-viewer .css-rule__properties .css-property{color:#4a5568;padding:4px 0 4px 8px;border-left:2px solid #e2e8f0;margin-left:8px;margin-bottom:4px}.applied-css-viewer .css-rule__properties .css-property:last-child{margin-bottom:0}.style-panel-container{width:100%;display:flex;flex-direction:column}.multi-select-panel{padding:24px}.multi-select-panel__header{display:flex;flex-direction:column;gap:4px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e9ecef}.multi-select-panel__header h3{font-size:1.1rem;color:#1a202c;font-weight:700;margin:0}.multi-select-panel__header .selection-count{display:inline-block;font-size:.875rem;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);padding:4px 12px;border-radius:12px;font-weight:600;align-self:flex-start}.multi-select-panel__content{display:flex;flex-direction:column;gap:24px}.multi-select-panel .selected-elements-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto;padding:8px;background:#f8f9fa;border-radius:8px}.multi-select-panel .selected-elements-list::-webkit-scrollbar{width:4px}.multi-select-panel .selected-elements-list::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:2px}.multi-select-panel .selected-element-item{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;transition:all .25s ease}.multi-select-panel .selected-element-item:hover{border-color:#667eea;transform:translate(4px)}.multi-select-panel .selected-element-item .element-type{font-size:.875rem;color:#667eea;font-weight:600;text-transform:capitalize}.multi-select-panel .selected-element-item .element-id{font-size:.75rem;color:#718096;font-family:Monaco,Menlo,monospace}.multi-select-panel .group-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 12px #667eea4d}.multi-select-panel .group-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.multi-select-panel .group-button:active{transform:translateY(0)}.group-info-panel{padding:24px}.group-info-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #667eea}.group-info-panel__header h3{font-size:1.1rem;color:#1a202c;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}.group-info-panel__header h3:before{content:"";display:inline-block;width:4px;height:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.group-info-panel__header .ungroup-button{display:flex;align-items:center;gap:4px;padding:4px 16px;background:#fff;color:#764ba2;border:2px solid #764ba2;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .25s ease}.group-info-panel__header .ungroup-button:hover{background:#764ba2;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #764ba24d}.group-info-panel__header .ungroup-button:active{transform:translateY(0)}.reusable-components-section{margin-top:32px;padding-top:24px;border-top:2px solid #e9ecef}.reusable-components-section .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.reusable-components-section .section-header h3{font-size:1rem;font-weight:700;color:#1a202c;margin:0;display:flex;align-items:center;gap:4px}.reusable-components-section .section-header .component-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;font-size:.75rem;font-weight:700;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border-radius:12px}.reusable-components-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.reusable-component-item{position:relative}.reusable-component-item .delete-component-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;background:#ef4444f2;border:none;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;z-index:10;opacity:0;transform:scale(.8)}.reusable-component-item .delete-component-btn:hover{background:#dc2626;transform:scale(1)}.reusable-component-item .delete-component-btn:active{transform:scale(.9)}.reusable-component-item:hover .delete-component-btn{opacity:1;transform:scale(1)}.save-component-section{margin-top:24px;padding-top:24px;border-top:1px solid #e9ecef}.save-component-button{width:100%;padding:16px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:10px;font-size:.875rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .15s ease;box-shadow:0 4px 12px #48bb784d}.save-component-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #48bb7866}.save-component-button:active{transform:translateY(0)}.component-name-dialog{margin-top:16px;padding:16px;background:#f7fafc;border:2px solid #48bb78;border-radius:10px;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.component-name-dialog label{display:block;margin-bottom:4px;color:#2d3748;font-size:.875rem;font-weight:600}.component-name-dialog input{width:100%;padding:10px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;margin-bottom:16px;transition:all .15s ease}.component-name-dialog input:focus{outline:none;border-color:#48bb78;box-shadow:0 0 0 3px #48bb781a}.component-name-dialog .dialog-buttons{display:flex;gap:8px}.component-name-dialog .dialog-buttons button{flex:1;padding:10px;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.component-name-dialog .dialog-buttons button.save-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;box-shadow:0 2px 8px #48bb784d}.component-name-dialog .dialog-buttons button.save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #48bb7866}.component-name-dialog .dialog-buttons button.cancel-btn{background:#fff;color:#718096;border:1px solid #e2e8f0}.component-name-dialog .dialog-buttons button.cancel-btn:hover{background:#f7fafc;color:#4a5568;border-color:#cbd5e0}.component-name-dialog .dialog-buttons button:active{transform:translateY(0)}.design-board{width:100%;background:#f8f9fa;min-height:100vh;overflow-x:hidden;overflow-y:auto;position:relative;transition:width .25s ease}.design-board.sidebar-hidden .design-board__content{margin-left:0}.design-board__header{position:fixed;top:0;left:0;right:0;height:70px;background:#fff;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:100000;box-shadow:0 2px 4px #00000005}.design-board__header .header-left{display:flex;align-items:center;gap:2rem}.design-board__header .header-left .logo{display:flex;align-items:center;gap:.75rem;color:#1a202c;font-weight:700;font-size:1.25rem}.design-board__header .header-left .logo .logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}.design-board__header .header-left .project-name{color:#718096;font-size:1rem;font-weight:500;padding-left:2rem;border-left:2px solid #e9ecef}.design-board__header .header-actions{display:flex;align-items:center;gap:8px}.design-board__controls{display:flex;gap:8px}.design-board__control-button{padding:.5rem 1rem;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;display:flex;align-items:center;gap:4px;justify-content:center;transition:all .15s ease;font-size:.875rem;font-weight:500}.design-board__control-button:hover{background:#edf2f7;border-color:#cbd5e0;color:#2d3748;transform:translateY(-1px)}.design-board__control-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff}.design-board__control-button.primary:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.design-board__expand-button{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .15s ease;z-index:1000;box-shadow:0 4px 12px #667eea4d}.design-board__expand-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.design-board__content{min-height:calc(100vh - 70px);position:relative;margin-left:280px;margin-top:0;padding:2rem;transition:margin-left .25s ease}.sidebar-hidden .design-board__content{margin-left:0}.design-board__content::-webkit-scrollbar{width:8px;height:8px}.design-board__content::-webkit-scrollbar-track{background:#f8f9fa}.design-board__content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.design-board__content::-webkit-scrollbar-thumb:hover{background:#a0aec0}.design-board__element{position:absolute;background:#fff;border-radius:12px;border:1px solid #e2e8f0;transition:all .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:0 2px 4px #0000000a}.design-board__element-wrapper{width:-moz-max-content!important;width:max-content!important;position:absolute;left:0;top:0}.design-board__element-wrapper.is-dragging{z-index:1000}.design-board__element-wrapper:hover .drag-handle{display:flex;opacity:1!important}.design-board__element-wrapper:hover .react-resizable-handle{opacity:1!important}.design-board__element.is-dragging{transform:scale(1.02);box-shadow:0 8px 24px #667eea33;border-color:#667eea}.design-board__element.is-selected{border:2px solid #667eea;box-shadow:0 4px 12px #667eea26}.design-board__element.is-group{border:none!important;background:transparent!important}.design-board__element.is-group.is-group-focused{border:1px dashed rgba(118,75,162,.5)!important;background:#764ba205!important}.design-board__element.is-group.is-group-focused.is-selected{border:1px dashed rgba(102,126,234,.6)!important;background:#667eea08!important}.design-board__element-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:16px;color:#1a202c;cursor:pointer;position:relative}.design-board__element-content--image{padding:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}.design-board__element-content--image.design-board__image-element,.design-board__element-content--image.design-board__image-element .design-board__element-image{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}.design-board__element-content--image .design-board__element-image-upload{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f7fafc;border-radius:inherit;cursor:pointer;transition:background .15s ease}.design-board__element-content--image .design-board__element-image-upload:hover{background:#edf2f7}.design-board__element-content--image .design-board__element-image-upload p{margin:0;font-size:.875rem;color:#718096}.design-board__element-content--image .design-board__element-image-upload svg{color:#a0aec0}.design-board__element-content--container{padding:inherit;position:relative;height:100%;width:100%;border-radius:inherit;overflow:visible;background:inherit}.design-board__element-content--container.drop-target{border:2px dashed #6200ee!important;background:#6200ee1a;box-shadow:0 0 10px #6200ee4d}.design-board__element-content--text,.design-board__element-content--text-input{justify-content:flex-start;font-size:1rem;width:100%;background:transparent;border:none;color:inherit}.design-board__element-content--text:focus,.design-board__element-content--text-input:focus{outline:none}.design-board__element-content--button,.design-board__element-content--button-input{width:100%;height:100%;background-color:inherit;color:inherit;font-weight:500;border-radius:inherit;border:none}.design-board__element-content--button:hover,.design-board__element-content--button-input:hover{opacity:.9}.design-board__element-content--button:focus,.design-board__element-content--button-input:focus{outline:none}.design-board__element .element-controls{position:absolute;top:-36px;right:0;display:flex;gap:4px;z-index:1000}.design-board__element .element-controls.position-bottom{bottom:-36px;top:unset}.design-board__element .element-controls .control-button{padding:6px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;color:#718096;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;box-shadow:0 2px 4px #0000000a}.design-board__element .element-controls .control-button:hover{color:#2d3748;background:#f7fafc;border-color:#cbd5e0;transform:translateY(-1px);box-shadow:0 4px 8px #00000014}.design-board__element .element-controls .control-button.delete:hover{color:#e53e3e;background:#fff5f5;border-color:#fc8181}.design-board__element .element-controls .control-button.more{padding:6px 8px}.design-board__element .element-controls .element-dropdown{position:absolute;top:32px;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 40px #0000001a;overflow:hidden;min-width:180px;z-index:1001}.design-board__element .element-controls .element-dropdown .dropdown-item{width:100%;padding:10px 14px;font-size:.875rem;transition:all .15s ease;display:flex;align-items:center;gap:8px;background:none;border:none;color:#4a5568;cursor:pointer;text-align:left}.design-board__element .element-controls .element-dropdown .dropdown-item svg{flex-shrink:0;color:#718096}.design-board__element .element-controls .element-dropdown .dropdown-item:hover{background:#f7fafc;color:#1a202c!important}.design-board__element .element-controls .element-dropdown .dropdown-item:hover svg{color:#667eea}.design-board__element .element-controls .element-dropdown .dropdown-item:not(:last-child){border-bottom:1px solid #f7fafc}.design-board__element .element-controls.position-bottom .element-dropdown{top:unset;bottom:32px}.design-board__content-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#718096;gap:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.design-board__content-empty svg{opacity:.4;color:#cbd5e0}.design-board__content-empty p{font-size:1.1rem;font-weight:500;color:#4a5568}.design-board__ghost{padding:12px 20px;background:#fff;border:2px solid #667eea;border-radius:8px;color:#1a202c;font-size:.875rem;font-weight:500;box-shadow:0 4px 12px #667eea33}.drag-handle{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:6px!important;transition:all .15s ease!important;box-shadow:0 2px 4px #0000000a!important}.drag-handle:hover{background:#f7fafc!important;border-color:#667eea!important;box-shadow:0 4px 8px #00000014!important}.drag-handle:hover span{color:#667eea!important}.drag-handle span{color:#a0aec0!important}.preview-mode .design-board__header{display:none}.preview-mode .design-board__content{margin-left:0;margin-top:0;height:100vh;min-height:100vh}.preview-mode .design-board__element .element-controls,.preview-mode .design-board__element .react-resizable-handle,.preview-mode .design-board__element .drag-handle{display:none!important}.is-drop-target{border:2px dashed #667eea!important;background:#667eea1a!important}.design-board__container-element{padding:0!important}.design-board__element-content.is-drop-target{background:#667eea1f;transition:outline .2s,background .2s}.react-resizable-handle{opacity:0!important;transition:opacity .2s ease!important}.react-resizable-handle:after{border-color:#667eea!important;border-width:3px!important}.design-board__element-wrapper:hover .react-resizable-handle,.design-board__element.is-selected~.react-resizable-handle{opacity:1!important}.hierarchy-panel{position:fixed;top:70px;right:0;width:350px;height:calc(100vh - 70px);background:#fff;box-shadow:-4px 0 24px #0000001a;z-index:1001;display:flex;flex-direction:column;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.hierarchy-panel__header{display:flex;align-items:center;justify-content:space-between;padding:24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #0000001a}.hierarchy-panel__title{display:flex;align-items:center;gap:8px}.hierarchy-panel__title h3{font-size:1rem;font-weight:700;margin:0;letter-spacing:.3px}.hierarchy-panel__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:#fff3;border:none;border-radius:6px;color:#fff;cursor:pointer;transition:all .25s ease}.hierarchy-panel__close:hover{background:#ffffff4d;transform:scale(1.05)}.hierarchy-panel__close:active{transform:scale(.95)}.hierarchy-panel__content{flex:1;overflow-y:auto;padding:16px}.hierarchy-panel__content::-webkit-scrollbar{width:6px}.hierarchy-panel__content::-webkit-scrollbar-track{background:transparent}.hierarchy-panel__content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.hierarchy-panel__content::-webkit-scrollbar-thumb:hover{background:#a0aec0}.hierarchy-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px;color:#a0aec0}.hierarchy-panel__empty svg{margin-bottom:16px;opacity:.5}.hierarchy-panel__empty p{margin:0;font-size:.875rem}.design-board__control-button.active{background:linear-gradient(135deg,#667eea1a,#764ba21a);color:#667eea;border-color:#667eea}.hierarchy-node__item{display:flex;align-items:center;padding:6px 8px;margin:2px 0;border-radius:6px;cursor:pointer;transition:all .25s ease;background:#fff;border:1px solid transparent;position:relative}.hierarchy-node__item:hover{background:#f0f4ff;border-color:#e0e7ff;transform:translate(2px)}.hierarchy-node__item.selected{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 2px 8px #667eea26}.hierarchy-node__item.selected .hierarchy-node__label{color:#667eea;font-weight:600}.hierarchy-node__item.is-group{background:#764ba20d}.hierarchy-node__item.is-group:hover{background:#764ba21a}.hierarchy-node__item.is-group.selected{background:linear-gradient(135deg,#764ba226,#667eea26);border-color:#764ba2}.hierarchy-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin-right:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;color:#718096;transition:all .25s ease;flex-shrink:0}.hierarchy-node__toggle:hover{background:#e2e8f0;color:#667eea}.hierarchy-node__spacer{width:20px;margin-right:4px;flex-shrink:0}.hierarchy-node__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:4px;color:#667eea;flex-shrink:0}.hierarchy-node__label{flex:1;font-size:.875rem;color:#2d3748;font-weight:500;font-family:Monaco,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}.hierarchy-node__label .group-badge{display:inline-block;padding:2px 6px;background:linear-gradient(135deg,#764ba2,#667eea);color:#fff;font-size:.65rem;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.hierarchy-node__type{font-size:.75rem;color:#a0aec0;text-transform:capitalize;padding:2px 8px;background:#f7fafc;border-radius:4px;font-weight:500;flex-shrink:0}.hierarchy-node__children{border-left:2px solid #e9ecef;margin-left:14px;padding-left:4px}.design-board__image-with-controls{position:relative;width:100%;height:100%}.design-board__image-with-controls img{display:block}.design-board__image-change-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}.design-board__image-with-controls:hover .design-board__image-change-overlay{opacity:1}.design-board__image-change-btn{padding:.5rem 1rem;background:#fff;border:none;border-radius:8px;color:#2d3748;font-weight:600;font-size:.875rem;display:flex;align-items:center;gap:4px;cursor:pointer;transition:all .15s ease;box-shadow:0 4px 12px #0003}.design-board__image-change-btn:hover{background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.design-board__image-change-btn:active{transform:translateY(0)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.preview-container{position:relative;width:100%;margin:0;padding:20px;box-sizing:border-box;background-color:#f8f9fa}.preview-element--container{border:1px dashed #ccc}.preview-element button{width:100%;height:100%;border:none;background:none;cursor:pointer}.preview-element img{-o-object-fit:inherit;object-fit:inherit}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#121212;color:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{cursor:pointer;border:none;background:none;font-family:inherit}button:focus{outline:none}h1,h2,h3,h4,h5,h6{font-weight:600;margin-bottom:16px}a{color:#7c4dff;text-decoration:none;transition:color .15s ease}a:hover{color:#6200ee}.app-container{display:flex;min-height:100vh;width:100%}.design-board{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.design-board__text-element{line-height:1.5;margin:0;padding:8px}.design-board__button-element{cursor:pointer;border:none;padding:8px 16px;border-radius:4px;transition:background-color .2s ease}.design-board__image-element{max-width:100%;height:auto;-o-object-fit:cover;object-fit:cover}.design-board__container-element{background:#ffffff0d;border-radius:8px;padding:16px}.design-board__icon-element{display:flex;align-items:center;justify-content:center}.design-board__element:hover{outline:1px solid rgba(98,0,238,.1)}.design-board__element.is-selected{outline:2px solid #6200ee}.design-board__flex-container{display:flex;gap:16px}.design-board__grid-container{display:grid;gap:16px}