:root{--bg-black-30: rgba(0, 0, 0, .3);--bg-white-10: rgba(255, 255, 255, .1);--bg-white-15: rgba(255, 255, 255, .15);--bg-white-08: rgba(255, 255, 255, .08);--bg-white-05: rgba(255, 255, 255, .05);--bg-gray-blue: #2a2d42;--bg-gray-blue-80: rgba(42, 45, 66, .8);--bg-dark-blue: #1a1a2e;--bg-cyan-purple-gradient: linear-gradient(90deg, #00d4ff, #7b2ff7);--bg-purple-gradient: linear-gradient(135deg, #667eea, #764ba2);--bg-pink-gradient: linear-gradient(135deg, #f093fb, #f5576c);--bg-dark-blue-gradient: linear-gradient(135deg, #1a1a2e, #16213e);--bg-gray-blue-gradient: linear-gradient(145deg, #2a2d42, #1f2235);--bg-cyan-10: rgba(0, 212, 255, .1);--bg-cyan-15: rgba(0, 212, 255, .15);--bg-cyan-05: rgba(0, 212, 255, .05);--bg-green-15: rgba(76, 217, 100, .15);--bg-green-08: rgba(0, 200, 83, .08);--bg-green-05: rgba(0, 200, 83, .05);--bg-red-15: rgba(255, 45, 85, .15);--bg-red-10: rgba(255, 107, 107, .1);--bg-red-05: rgba(255, 107, 107, .05);--bg-orange-15: rgba(255, 149, 0, .15);--bg-orange-05: rgba(255, 149, 0, .05);--bg-purple-15: rgba(175, 82, 222, .15);--bg-purple-blue-10: rgba(102, 126, 234, .1);--bg-sky-blue-15: rgba(90, 200, 250, .15);--bg-sky-blue-10: rgba(90, 200, 250, .1);--bg-medium-purple: #7b68ee;--bg-hot-pink: #ff5577;--bg-coral-red: #ff4757;--bg-dark-navy-75: rgba(10, 14, 30, .75);--bg-overlay-50: rgba(0, 0, 0, .5);--shadow-black-30: rgba(0, 0, 0, .3);--shadow-black-40: rgba(0, 0, 0, .4);--shadow-black-60: rgba(0, 0, 0, .6);--shadow-purple-blue-40: rgba(102, 126, 234, .4);--shadow-pink-red-40: rgba(245, 87, 108, .4);--shadow-cyan-30: rgba(0, 212, 255, .3);--shadow-green-65: rgba(76, 217, 100, .65);--shadow-red-65: rgba(255, 45, 85, .65);--shadow-red-50: rgba(255, 107, 107, .5);--shadow-orange-65: rgba(255, 149, 0, .65);--shadow-purple-65: rgba(175, 82, 222, .65);--shadow-sky-blue-65: rgba(90, 200, 250, .65);--border-gray-dark: #444;--border-gray-mid: #666;--border-cyan: #00d4ff;--border-sky-blue-50: rgba(90, 200, 250, .5);--border-white-20: rgba(255, 255, 255, .2);--border-red-light: #ff6b6b;--border-green: #00c853;--border-orange: #ff9500;--divider-white-10: rgba(255, 255, 255, .1);--scrollbar-track-white-5: rgba(255, 255, 255, .05);--scrollbar-thumb-white-20: rgba(255, 255, 255, .2);--scrollbar-thumb-white-30: rgba(255, 255, 255, .3);--text-white: #fff;--text-gray-light: #ccc;--text-gray: #888;--text-gray-mid: #666;--text-medium-purple: #7b68ee;--text-sky-blue: #5ac8fa;--text-red-light: #ff6b6b;--text-white-50: rgba(255, 255, 255, .5);--text-blue-light: #60a5fa;--hover-white-20: rgba(255, 255, 255, .2);--hover-cyan-20: rgba(0, 212, 255, .2);--hover-cyan-purple-gradient: linear-gradient(135deg, rgba(0, 212, 255, .1), rgba(123, 47, 247, .1));--hover-sky-blue-40: rgba(90, 200, 250, .4);--hover-sky-blue-35: rgba(90, 200, 250, .35);--hover-green-35: rgba(76, 217, 100, .35);--hover-red-35: rgba(255, 45, 85, .35);--hover-orange-35: rgba(255, 149, 0, .35);--hover-purple-35: rgba(175, 82, 222, .35);--hover-slate-blue: #6a5acd;--hover-hot-pink: #e63d5e;--hover-coral-red: #ff6b7a}.btn-rect-normal{padding:10px 15px;border:none;border-radius:8px;background:var(--bg-white-10);color:var(--text-white);font-size:14px;cursor:pointer;transition:background-color .3s;display:flex;align-items:center;gap:5px;white-space:nowrap}@media(hover:hover){.btn-rect-normal:hover{background:var(--hover-white-20)}}.btn-rect-fancy{padding:10px 20px;border:none;border-radius:8px;background:var(--bg-purple-gradient);color:var(--text-white);font-size:14px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .3s,box-shadow .3s;white-space:nowrap}@media(hover:hover){.btn-rect-fancy:hover{transform:translateY(-2px);box-shadow:0 5px 15px var(--shadow-purple-blue-40)}}.btn-rect-fancy-small{padding:4px 12px;font-size:12px}.btn-capsule{padding:7px 15px;border-radius:20px;color:var(--text-white);font-size:14px;cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;white-space:nowrap;background:var(--bg-sky-blue-15)}@media(hover:hover){.btn-capsule:hover{transform:translateY(-2px);background:var(--hover-sky-blue-35);box-shadow:0 4px 20px var(--shadow-sky-blue-65)}}.btn-capsule.active{transform:translateY(-2px);background:var(--hover-sky-blue-35);box-shadow:0 4px 20px var(--shadow-sky-blue-65)}.btn-capsule-small{padding:2px 9px;border:none;border-radius:10px;color:var(--text-white);font-size:11px;cursor:pointer;transition:background .2s;white-space:nowrap;text-decoration:none;vertical-align:middle;background:var(--bg-medium-purple);display:inline-flex;align-items:center;justify-content:center}@media(hover:hover){.btn-capsule-small:hover{background:var(--hover-slate-blue)}}.input-field{width:100%;padding:10px 15px;border:2px solid var(--border-gray-dark);border-radius:8px;background:var(--bg-white-10);color:var(--text-white);font-size:14px;transition:border-color .3s,background-color .3s,box-shadow .3s}.input-field:focus{outline:none;border-color:var(--border-cyan);background:var(--bg-white-15)}.input-field::placeholder{color:var(--text-gray-mid)}.input-field.error{border-color:var(--border-red-light)!important;background:var(--bg-red-10)!important}.input-field.error:focus{border-color:var(--border-red-light)!important;box-shadow:0 0 10px var(--shadow-red-50)!important}.input-field.valid{border-color:var(--border-green)!important;background:var(--bg-green-08)!important}.upload-zone{border:2px dashed var(--border-white-20);border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:border-color .3s,background-color .3s;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px}.upload-zone:hover{border-color:var(--border-cyan);background:var(--bg-cyan-05)}.upload-zone.drag-over{border-color:var(--border-cyan);background:var(--bg-cyan-10)}.upload-zone.error{border-color:var(--border-red-light)!important;background:var(--bg-red-05)!important}.upload-zone.valid{border-color:var(--border-green)!important;background:var(--bg-green-05)!important}.upload-zone .upload-icon{font-size:48px;margin-bottom:15px}.upload-zone .upload-text{font-size:16px;color:var(--text-gray-light);margin-bottom:8px;min-height:24px}.upload-zone .upload-hint{font-size:14px;color:var(--text-gray);min-height:21px}.dropdown{position:relative}.dropdown-menu{position:absolute;top:110%;right:0;background:var(--bg-gray-blue);border-radius:8px;box-shadow:0 5px 20px var(--shadow-black-40);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,visibility .3s,transform .3s;min-width:140px;z-index:1000}.dropdown-menu.active{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{padding:12px 20px;cursor:pointer;background:transparent;color:var(--text-white);font-size:14px;text-align:center}.dropdown-item:hover{background:var(--hover-cyan-20)}.badge{display:inline-block;padding:4px 10px;font-size:12px;color:var(--text-sky-blue);border:1px solid var(--border-sky-blue-50);border-radius:4px;background:var(--bg-sky-blue-10)}.btn-circle-delete{width:22px;height:22px;border:none;border-radius:50%;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:width .2s,height .2s,margin .2s,box-shadow .2s;background:var(--bg-coral-red);color:var(--text-white)}@media(hover:hover){.btn-circle-delete:hover{width:24px;height:24px;margin:-1px;box-shadow:0 2px 8px var(--shadow-black-60)}}.btn-circle-top{position:fixed;bottom:65px;right:50px;width:50px;height:50px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,background-color .3s,transform .3s,box-shadow .3s;z-index:999;background:var(--bg-gray-blue-80);box-shadow:0 4px 15px var(--shadow-black-30)}.btn-circle-top.visible{opacity:1;visibility:visible}@media(hover:hover){.btn-circle-top:hover{background:var(--hover-sky-blue-40);transform:translateY(-3px);box-shadow:0 6px 20px var(--hover-sky-blue-40)}}.btn-circle-top:before{content:"";width:12px;height:12px;border-left:3px solid var(--text-white);border-top:3px solid var(--text-white);transform:rotate(45deg) translate(2px,2px)}@media(max-width:768px){.btn-circle-top{bottom:55px;right:22px;width:45px;height:45px}}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-white-20) transparent}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--scrollbar-track-white-5);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-white-20);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-white-30)}.card-static{background:var(--bg-white-05);border:1px solid var(--divider-white-10);border-radius:12px;padding:25px;margin-bottom:25px}.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding-bottom:25px;margin-top:20px}.card-interactive{background:var(--bg-gray-blue-gradient);border-radius:15px;border:2px solid transparent;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;padding:30px 20px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.card-interactive:before{content:"";position:absolute;inset:0;background:var(--hover-cyan-purple-gradient);opacity:0;transition:opacity .3s;z-index:0}.card-interactive:hover:before{opacity:1}.card-interactive:hover{transform:translateY(-8px);border-color:var(--border-cyan);box-shadow:0 10px 30px var(--shadow-cyan-30)}.card-interactive *{position:relative;z-index:1}.list-table-container{width:100%;max-width:100%;height:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg-white-05);border-radius:8px}.list-table{min-width:100%;border-collapse:collapse;font-size:14px}.list-table thead{background:var(--bg-white-10);position:sticky;top:0;z-index:1}.list-table th{padding:14px 20px;text-align:center;color:var(--text-white-50);font-weight:700;font-size:13px;white-space:nowrap}.list-table td{padding:14px 20px;color:var(--text-white);border-bottom:1px solid var(--divider-white-10);text-align:center;vertical-align:middle;white-space:nowrap}.list-table tbody tr:last-child td{border-bottom:none}.long-content{display:inline-block;width:200px;white-space:normal;word-break:break-all;text-align:center}.long-content-inner{display:inline-block;text-align:left}.table-empty{color:var(--text-white-50)}.hyperlink{color:inherit;text-decoration:none;transition:color .2s ease}.hyperlink:hover{color:var(--border-cyan);text-decoration:underline;cursor:pointer}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;padding:40px 0 5px;-webkit-user-select:none;user-select:none}.pagination-btn{min-width:32px;height:32px;padding:0 6px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:600;color:var(--text-white);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.pagination-btn:not(.active):not(:disabled):hover{background:var(--bg-white-10);color:var(--text-cyan);border-color:var(--bg-white-10)}.pagination-btn.active{background:var(--bg-white-10);color:var(--text-cyan);border-color:var(--bg-white-10);box-shadow:none;cursor:default}.pagination-btn:disabled{opacity:.3;cursor:not-allowed}.pagination-ellipsis{color:var(--text-white-50);font-size:14px;padding:0 4px;line-height:32px}.modal-container{display:none}.modal-container.show{display:block}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay-50);z-index:9999;display:flex;align-items:center;justify-content:center;animation:modalFadeIn .2s ease}.modal-box{background:var(--bg-gray-blue-gradient);border:1px solid var(--divider-white-10);border-radius:12px;padding:11px 32px 17px;min-width:280px;max-width:90vw;box-shadow:0 10px 40px var(--shadow-black-40);animation:modalSlideIn .2s ease}@media(min-width:768px){.modal-box{min-width:360px;max-width:450px;padding:16px 40px 25px}.modal-header{margin-bottom:16px}.modal-icon{font-size:24px}.modal-title{font-size:22px}.modal-divider{margin-bottom:35px}.modal-message{font-size:16px;margin-bottom:35px}.modal-buttons{gap:24px}}.modal-header{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:11px}.modal-icon{font-size:20px;line-height:1}.modal-title{font-size:18px;font-weight:600;color:var(--text-white)}.modal-divider{height:1px;background:var(--divider-white-10);margin-bottom:26px}.modal-message{font-size:14px;color:var(--text-gray-light);margin-bottom:26px;text-align:center;line-height:1.5}.modal-buttons{display:flex;justify-content:center;gap:20px}.modal-cancel{background:var(--bg-white-10)}@media(hover:hover){.modal-cancel:hover{background:var(--hover-white-20);transform:translateY(-2px);box-shadow:none}}.modal-confirm.danger{background:var(--bg-pink-gradient)}@media(hover:hover){.modal-confirm.danger:hover{box-shadow:0 5px 15px var(--shadow-pink-red-40)}}.modal-confirm:focus,.modal-cancel:focus{outline:none}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}body.modal-open{overflow:hidden}.modal-fullscreen-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay-50);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal-fullscreen-overlay.show{opacity:1;visibility:visible}.modal-fullscreen-overlay.hidden{display:none}.modal-content-fullscreen{background:var(--bg-dark-blue-gradient);width:90%;height:90%;max-width:1400px;border-radius:8px;border:1px solid var(--bg-white-05);display:flex;flex-direction:column;box-shadow:0 20px 50px var(--shadow-black-60);overflow:hidden;transform:scale(.95);transition:transform .3s cubic-bezier(.165,.84,.44,1)}.modal-fullscreen-overlay.show .modal-content-fullscreen{transform:scale(1)}.modal-fullscreen-header{padding:15px 30px;border-bottom:1px solid var(--divider-white-10);display:flex;justify-content:space-between;align-items:center;background:var(--bg-dark-navy-75)}.modal-fullscreen-header .header-left{display:flex;align-items:center;gap:15px}.btn-modal-close{width:28px;height:28px;border:none;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:width .2s,height .2s,margin .2s,box-shadow .2s;background:var(--bg-coral-red);color:var(--text-white);line-height:1}@media(hover:hover){.btn-modal-close:hover{width:30px;height:30px;margin:-1px;box-shadow:0 2px 8px var(--shadow-black-60)}}.modal-fullscreen-header .header-actions{display:flex;gap:15px}.modal-fullscreen-header h2{margin:0;font-size:1.2rem;color:var(--text-white);display:flex;align-items:center}.modal-fullscreen-body{flex:1;padding:30px;overflow-x:hidden;overflow-y:auto;color:var(--text-white);position:relative}.modal-footer-actions{display:flex;justify-content:center;gap:20px;padding-top:30px;margin-top:30px;border-top:1px solid var(--divider-white-10)}
