body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f9fa}*{box-sizing:border-box}.app{min-height:100vh;display:flex;position:relative}.main-content{flex:1;display:flex;flex-direction:column;margin-left:0;transition:margin-left .3s ease}.app.sidebar-open .main-content{margin-left:280px}.content-area{flex:1;padding:30px;max-width:1400px;margin:0 auto;width:100%}.welcome-screen{display:flex;align-items:center;justify-content:center;min-height:60vh;text-align:center}.welcome-content{max-width:600px;padding:40px}.welcome-icon{font-size:5em;margin-bottom:30px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.welcome-content h1{color:#2c3e50;font-size:2.5em;margin-bottom:20px;font-weight:700}.welcome-content p{color:#6c757d;font-size:1.2em;line-height:1.6;margin-bottom:40px}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px}.feature{display:flex;align-items:center;gap:10px;padding:15px 20px;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;transition:transform .2s}.feature:hover{transform:translateY(-2px)}.feature-icon{font-size:1.5em}.feature span:last-child{font-weight:500;color:#495057}@media (max-width: 768px){.app.sidebar-open .main-content{margin-left:0}.content-area{padding:20px 15px}.welcome-content{padding:20px}.welcome-content h1{font-size:2em}.features{grid-template-columns:1fr}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.project-actions{display:flex;gap:4px;align-items:center}.btn-icon{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;font-size:14px;transition:all .2s ease}.rename-btn{opacity:.7}.rename-btn:hover{opacity:1;background-color:#fef3c7}.delete-btn{opacity:.7}.delete-btn:hover{opacity:1;background-color:#fee2e2}.sidebar{width:280px;height:100vh;background:linear-gradient(145deg,#2c3e50,#34495e);color:#fff;position:fixed;left:0;top:0;z-index:1000;display:flex;flex-direction:column;box-shadow:2px 0 10px #0000001a}.sidebar-header{padding:20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.sidebar-header h2{margin:0;font-size:1.2em;font-weight:600}.sidebar-toggle{background:none;border:none;color:#fff;font-size:1.2em;cursor:pointer;padding:5px;border-radius:4px;transition:background-color .2s}.sidebar-toggle:hover{background-color:#ffffff1a}.sidebar-content{flex:1;overflow-y:auto;padding:20px}.projects-section{margin-bottom:30px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-header h3{margin:0;font-size:1em;font-weight:600;color:#ecf0f1}.btn-icon{background:none;border:none;color:#fff;font-size:.9em;cursor:pointer;padding:6px 8px;border-radius:4px;transition:background-color .2s}.btn-icon:hover{background-color:#ffffff26}.projects-list{display:flex;flex-direction:column;gap:8px}.project-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background-color:#ffffff0d;border-radius:8px;cursor:pointer;transition:all .2s;border:2px solid transparent}.project-item:hover{background-color:#ffffff1a;transform:translate(4px)}.project-item.active{background-color:#3498db;border-color:#2980b9;box-shadow:0 2px 8px #3498db4d}.project-name{font-weight:500;flex:1}.delete-btn{opacity:0;transition:opacity .2s;font-size:.8em}.project-item:hover .delete-btn{opacity:1}.delete-btn:hover{background-color:#e74c3c}.empty-state{text-align:center;padding:30px 15px;color:#bdc3c7}.empty-state p{margin-bottom:15px;font-style:italic}.btn-primary{background:linear-gradient(145deg,#3498db,#2980b9);color:#fff;border:none;padding:10px 20px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3498db4d}.current-project-info{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.current-project-info h4{margin:0 0 10px;font-size:.9em;color:#ecf0f1}.project-badge{background-color:#3498db33;border:1px solid #3498db;padding:8px 12px;border-radius:6px;font-size:.9em;font-weight:500}@media (max-width: 768px){.sidebar{width:100%;transform:translate(-100%);transition:transform .3s}.sidebar.open{transform:translate(0)}}.header{background:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;z-index:900;box-shadow:0 2px 8px #00000014}.header-empty{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:200px;display:flex;align-items:center;justify-content:center}.container{max-width:1400px;margin:0 auto;padding:0 20px}.header-top{display:flex;justify-content:space-between;align-items:center;padding:15px 0}.header-left{display:flex;align-items:center;gap:15px}.sidebar-toggle-btn{background:none;border:2px solid #ddd;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:1.1em;transition:all .2s}.sidebar-toggle-btn:hover{background-color:#f8f9fa;border-color:#007bff}.header-empty .sidebar-toggle-btn{border-color:#ffffff4d;color:#fff}.header-empty .sidebar-toggle-btn:hover{background-color:#ffffff1a;border-color:#fff}.header h1{margin:0;font-size:1.5em;font-weight:600;color:#2c3e50}.header-empty h1{color:#fff;font-size:2em;text-align:center}.header-right{display:flex;align-items:center;gap:20px}.stats-summary{color:#666;font-weight:500}.stat{background:#e8f4f8;padding:6px 12px;border-radius:20px;font-size:.9em;color:#06c}.header-controls{display:flex;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid #eee;flex-wrap:wrap}.search-box{flex:1;min-width:300px}.search-input{width:100%;padding:10px 15px;border:2px solid #ddd;border-radius:8px;font-size:1em;transition:border-color .2s}.search-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.filter-controls{display:flex;gap:10px;align-items:center}.filter-select{padding:8px 12px;border:2px solid #ddd;border-radius:6px;background:#fff;font-size:.9em;cursor:pointer;transition:border-color .2s}.filter-select:focus{outline:none;border-color:#007bff}.view-mode-toggle{display:flex;border:2px solid #ddd;border-radius:6px;overflow:hidden}.view-btn{background:#fff;border:none;padding:8px 12px;cursor:pointer;font-size:1.1em;transition:all .2s}.view-btn:hover{background-color:#f8f9fa}.view-btn.active{background-color:#007bff;color:#fff}.language-selector{display:flex;align-items:center;gap:15px;padding:15px 0;flex-wrap:wrap}.language-label{font-weight:600;color:#495057;white-space:nowrap}.language-chips{display:flex;gap:8px;flex-wrap:wrap}.language-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#f8f9fa;border:2px solid #dee2e6;border-radius:20px;cursor:pointer;transition:all .2s;font-size:.9em}.language-chip:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.language-chip.active{background:linear-gradient(135deg,#007bff,#0056b3);border-color:#0056b3;color:#fff;box-shadow:0 2px 8px #007bff4d}.language-chip .flag{font-size:1.1em}.language-chip .code{font-weight:500;text-transform:uppercase}.language-chip .percentage{background:#fff3;padding:2px 6px;border-radius:10px;font-size:.8em;font-weight:600}@media (max-width: 768px){.header-controls{flex-direction:column;align-items:stretch}.search-box{min-width:unset}.filter-controls{justify-content:space-between}.language-selector{flex-direction:column;align-items:stretch}.language-chips{justify-content:center}}.add-translation-form{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px;border-radius:12px;margin-bottom:30px;box-shadow:0 8px 32px #667eea4d}.add-translation-form h3{margin:0 0 20px;font-size:1.3em;font-weight:600}.form{display:flex;flex-direction:column;gap:20px}.form-row{display:grid;grid-template-columns:1fr 1fr auto;gap:15px;align-items:end}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-weight:500;font-size:.9em;opacity:.9}.form-input{padding:12px 16px;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:1em;background:#ffffff1a;color:#fff;transition:all .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-input::placeholder{color:#fff9}.form-input:focus{outline:none;border-color:#ffffff80;background:#ffffff26;box-shadow:0 0 0 3px #ffffff1a}.form-input:disabled{opacity:.6;cursor:not-allowed}.submit-group{display:flex;align-items:flex-end}.submit-btn{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:12px 24px;border-radius:8px;font-weight:600;font-size:1em;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.submit-btn:hover:not(:disabled){background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 20px #fff3}.submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.submit-btn.loading{cursor:wait}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.auto-translate-info{display:flex;align-items:center;gap:10px;background:#ffffff1a;padding:12px 16px;border-radius:8px;font-size:.9em;opacity:.9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.info-icon{font-size:1.1em}@media (max-width: 768px){.form-row{grid-template-columns:1fr;gap:20px}.submit-btn{width:100%;justify-content:center}}@media (max-width: 480px){.add-translation-form{padding:20px 15px}.form-row{gap:15px}}.translations-table-container{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;overflow:hidden}.table-header{padding:20px 25px;background:#f8f9fa;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;align-items:center}.table-header h3{margin:0;color:#495057;font-weight:600}.table-actions{display:flex;gap:10px}.table-wrapper{overflow-x:auto;max-height:70vh}.translations-table{width:100%;border-collapse:collapse;font-size:.9em}.translations-table th{background:#f8f9fa;padding:15px 12px;text-align:left;font-weight:600;color:#495057;border-bottom:2px solid #e1e5e9;position:sticky;top:0;z-index:10}.key-column{width:200px;min-width:180px}.progress-column{width:120px;min-width:100px}.lang-column{width:250px;min-width:200px}.actions-column{width:80px;min-width:60px}.lang-header{display:flex;align-items:center;gap:8px}.lang-flag{font-size:1.2em}.lang-name{font-weight:500}.translation-row{border-bottom:1px solid #f0f0f0;transition:background-color .2s}.translation-row:hover{background-color:#f8f9fa}.translations-table td{padding:15px 12px;vertical-align:top;border-right:1px solid #f0f0f0}.key-cell{background:#fafbfc;border-right:2px solid #e1e5e9}.key-content{display:flex;flex-direction:column;gap:4px}.key-text{font-weight:600;color:#495057;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.key-meta{opacity:.7}.key-meta small{font-size:.8em}.progress-cell{background:#fafbfc}.progress-info{display:flex;flex-direction:column;gap:6px}.progress-bar{background:#e9ecef;height:6px;border-radius:3px;overflow:hidden}.progress-text{font-size:.8em;color:#6c757d;font-weight:500}.translation-cell{position:relative}.translation-cell.empty{background:#fff8f0}.cell-content{min-height:40px;cursor:pointer;border-radius:4px;transition:all .2s;padding:4px}.cell-content:hover{background:#007bff0d;border-color:#007bff}.empty-state{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:60px;text-align:center}.empty-text{color:#6c757d;font-style:italic;font-size:.85em}.auto-translate-options{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.auto-translate-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:6px 12px;border-radius:16px;font-size:.8em;cursor:pointer;transition:all .2s;font-weight:500;box-shadow:0 2px 4px #667eea33;display:inline-flex;align-items:center;gap:4px}.auto-translate-btn:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 4px 8px #667eea4d}.value-display{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.value-text{flex:1;line-height:1.4;word-break:break-word}.cell-actions{opacity:0;transition:opacity .2s}.cell-content:hover .cell-actions{opacity:1}.edit-btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;transition:background-color .2s}.edit-btn:hover{background:#007bff1a}.edit-mode{width:100%}.edit-input{width:100%;padding:8px;border:2px solid #007bff;border-radius:4px;font-size:.9em;font-family:inherit;resize:vertical;min-height:40px}.edit-input:focus{outline:none;box-shadow:0 0 0 3px #007bff1a}.actions-cell{text-align:center}.row-actions{display:flex;justify-content:center;gap:8px}.delete-btn{background:none;border:none;padding:6px 8px;cursor:pointer;border-radius:4px;transition:all .2s;opacity:.6}.delete-btn:hover{background:#dc3545;opacity:1;transform:scale(1.1)}@media (max-width: 768px){.table-wrapper{max-height:60vh}.lang-column{width:200px;min-width:150px}.key-column{width:150px;min-width:120px}.progress-column{display:none}}.translations-cards{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #00000014;border:1px solid #e1e5e9}.cards-header{padding:20px 25px;background:#f8f9fa;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;align-items:center}.cards-header h3{margin:0;color:#495057;font-weight:600}.cards-actions{display:flex;gap:10px}.export-btn{background:#28a745;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s}.export-btn:hover{background:#218838;transform:translateY(-1px);box-shadow:0 2px 8px #28a7454d}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px;padding:25px;max-height:70vh;overflow-y:auto}.translation-card{background:#fff;border:1px solid #e1e5e9;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:all .3s}.translation-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #00000026}.card-header{padding:15px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center}.card-key{display:flex;align-items:center;gap:10px}.key-icon{font-size:1.2em}.key-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:600;font-size:.95em}.card-actions{display:flex;gap:8px}.delete-btn{background:#fff3;border:none;padding:6px 8px;border-radius:4px;cursor:pointer;transition:all .2s;color:#fff}.delete-btn:hover{background:#dc3545}.card-progress{padding:15px 20px;background:#f8f9fa;border-bottom:1px solid #e1e5e9}.progress-bar{background:#e9ecef;height:8px;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{background:linear-gradient(90deg,#28a745,#20c997);height:100%;transition:width .3s}.progress-text{font-size:.85em;color:#6c757d;font-weight:500}.card-translations{padding:20px}.translation-item{margin-bottom:20px;border:1px solid #e1e5e9;border-radius:8px;overflow:hidden;transition:all .2s}.translation-item:last-child{margin-bottom:0}.translation-item.empty{border-color:#ffc107;background:#fff8e1}.translation-item:hover{border-color:#007bff}.language-header{padding:10px 15px;background:#f8f9fa;border-bottom:1px solid #e1e5e9;display:flex;align-items:center;gap:8px;font-size:.9em}.translation-item.empty .language-header{background:#fff3cd}.lang-flag{font-size:1.1em}.lang-name{font-weight:500;flex:1}.lang-code{background:#e9ecef;padding:2px 6px;border-radius:4px;font-size:.8em;font-weight:600}.translation-item.empty .lang-code{background:#ffc107;color:#212529}.translation-content{padding:15px}.empty-translation{text-align:center;padding:10px}.empty-text{display:block;color:#856404;font-style:italic;margin-bottom:10px;font-size:.9em}.auto-translate-buttons{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.auto-translate-btn{background:#ffc107;color:#212529;border:none;padding:4px 8px;border-radius:12px;font-size:.75em;cursor:pointer;transition:all .2s;font-weight:500}.auto-translate-btn:hover{background:#e0a800;transform:scale(1.05)}.translation-value{width:100%}.value-input{width:100%;border:1px solid #e1e5e9;border-radius:6px;padding:10px;font-size:.9em;font-family:inherit;resize:vertical;min-height:60px;transition:border-color .2s}.value-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.card-footer{padding:15px 20px;background:#f8f9fa;border-top:1px solid #e1e5e9}.card-meta{color:#6c757d;font-size:.8em;line-height:1.4}.empty-translations{text-align:center;padding:60px 20px;color:#6c757d}.empty-icon{font-size:4em;margin-bottom:20px}.empty-translations h3{margin:0 0 10px;color:#495057}.empty-translations p{margin:0;font-style:italic}@media (max-width: 768px){.cards-grid{grid-template-columns:1fr;padding:15px;gap:15px}.translation-card{margin:0}.card-header{padding:12px 15px}.card-translations{padding:15px}.translation-item{margin-bottom:15px}}@media (max-width: 480px){.cards-grid{grid-template-columns:1fr;gap:10px;padding:10px}.language-header{padding:8px 12px;font-size:.85em}.translation-content{padding:12px}}:root{--primary-color: #007bff;--primary-dark: #0056b3;--success-color: #28a745;--warning-color: #ffc107;--danger-color: #dc3545;--info-color: #17a2b8;--light-color: #f8f9fa;--dark-color: #343a40;--border-color: #e1e5e9;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .2);--border-radius: 8px;--transition: all .2s ease}.btn{padding:8px 16px;border:none;border-radius:var(--border-radius);font-weight:500;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-success{background:var(--success-color);color:#fff}.btn-warning{background:var(--warning-color);color:var(--dark-color)}.btn-danger{background:var(--danger-color);color:#fff}.text-muted{color:#6c757d}.text-center{text-align:center}.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.p-0{padding:0}.p-1{padding:8px}.p-2{padding:16px}.p-3{padding:24px}.p-4{padding:32px}.d-flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.w-100{width:100%}.h-100{height:100%}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-8px,0)}70%{transform:translate3d(0,-4px,0)}90%{transform:translate3d(0,-2px,0)}}.animate-fadeIn{animation:fadeIn .5s ease-out}.animate-bounce{animation:bounce 1s ease-in-out}.loading{opacity:.7;pointer-events:none}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.hover-scale:hover{transform:scale(1.02)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.d-md-none{display:none!important}.d-md-block{display:block!important}}