*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,sans-serif;background:#f5f5f5}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(145deg,#8B52C0 0%,#693B97 45%,#4E2B72 100%);padding:20px}.login-box{background:white;border-radius:16px;box-shadow:0 20px 60px #0000004d;padding:40px;width:100%;max-width:400px;border-top:5px solid #A5CF4C}.login-header{text-align:center;margin-bottom:30px}.login-title{font-size:24px;font-weight:700;color:#333;margin-bottom:8px}.login-subtitle{color:#666;font-size:14px}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:500;color:#333;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:all .3s}.form-input:focus{outline:none;border-color:#693b97;box-shadow:0 0 0 3px #693b9726}.error-message{background:#fee;border:1px solid #fcc;color:#c00;padding:12px;border-radius:8px;font-size:14px;margin-bottom:15px;display:none}.error-message.show{display:block}.login-button{width:100%;background:linear-gradient(135deg,#B8DB5A 0%,#A5CF4C 60%,#8CBF40 100%);color:#fff;padding:14px;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.15)}.login-button:hover{background:linear-gradient(135deg,#A5CF4C 0%,#8CBF40 100%);transform:translateY(-1px);box-shadow:0 6px 20px #a5cf4c66}.test-info{text-align:center;margin-top:20px;color:#999;font-size:12px}.admin-container{display:none;min-height:100vh}.admin-container.active{display:flex;flex-direction:column}.header{background:white;border-bottom:3px solid #A5CF4C;position:sticky;top:0;z-index:100}.header-top{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:white;border-bottom:1px solid #f0f0f0}.header-logo{display:flex;align-items:center;gap:8px}.logo-niceto{background:#693B97;color:#fff;padding:6px 14px;border-radius:24px;font-size:13px;font-weight:600;letter-spacing:.3px;white-space:nowrap;line-height:1.4}.logo-cu{font-size:26px;font-weight:900;letter-spacing:-1.5px;line-height:1;font-family:Arial Black,Arial,sans-serif}.logo-cu .cu-c{color:#693b97}.logo-cu .cu-u{color:#85aa30}.mobile-menu-btn{display:none;background:none;border:none;font-size:24px;cursor:pointer;padding:8px}.header-user{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#f5f5f5;border-radius:8px;cursor:pointer;position:relative}.user-name{font-size:14px;font-weight:500;color:#333}.user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #0000001a;display:none;min-width:120px;z-index:1000}.user-dropdown.show{display:block}.dropdown-item{padding:12px 16px;cursor:pointer;font-size:14px;color:#333;transition:background .2s}.dropdown-item:hover{background:#f5f5f5}.nav-menu{display:flex;background:white;overflow-x:auto;-webkit-overflow-scrolling:touch}.nav-menu::-webkit-scrollbar{height:4px}.nav-menu::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.nav-item{padding:16px 24px;color:#666;font-size:14px;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;transition:all .3s;white-space:nowrap;display:flex;align-items:center;gap:8px}.nav-item:hover{color:#693b97;background:#F3EFF9}.nav-item.active{color:#693b97;border-bottom-color:#693b97}.main-content{padding:24px;flex:1;overflow-y:auto}.content-wrapper{max-width:2400px;margin:0 auto}.page-header{margin-bottom:24px}.page-title{font-size:28px;font-weight:700;color:#693b97;margin-bottom:8px}.page-subtitle{font-size:14px;color:#666}.page-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}.search-box{display:flex;align-items:center;background:white;border:1px solid #ddd;border-radius:8px;padding:8px 16px;flex:1;min-width:200px;max-width:400px}.search-input{border:none;outline:none;flex:1;font-size:14px;padding:4px}.action-buttons{display:flex;gap:8px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.btn-primary{background:#693B97;color:#fff}.btn-primary:hover{background:#4E2B72}.btn-secondary{background:#4a5568;color:#fff}.btn-secondary:hover{background:#2d3748}.btn-outline{background:white;color:#693b97;border:1px solid #693B97}.btn-outline:hover{background:#F3EFF9}.btn-warning{background:#8B52C0;color:#fff}.table-container{background:white;border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;min-width:800px}th{background:#f8f9fa;padding:16px 12px;text-align:left;font-size:13px;font-weight:600;color:#555;border-bottom:2px solid #e0e0e0}td{padding:16px 12px;font-size:14px;color:#333;border-bottom:1px solid #f0f0f0}tr:hover{background:#fafafa}.badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;white-space:nowrap}.badge-on{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.badge-primary,.badge-secondary{background:#EDE0F8;color:#693b97;border:1px solid #C9A8E6}.badge-warning{background:#EDE0F8;color:#856404;border:1px solid #E8D9F5}.badge-success{background:#EAF5CC;color:#065f46;border:1px solid #6ee7b7}.badge-danger{background:#fee;color:#c00;border:1px solid #fcc}.icon-button{padding:8px;background:transparent;border:none;cursor:pointer;color:#693b97;font-size:14px;transition:all .2s}.icon-button:hover{background:#f0f0f0;border-radius:4px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-bottom:24px}.category-card{background:white;border:2px solid #e0e0e0;border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .3s}.category-card:hover{border-color:#693b97;box-shadow:0 4px 12px #693b971a;transform:translateY(-2px)}.category-card.active{border-color:#693b97;background:#F3EFF9}.category-icon{font-size:48px;margin-bottom:12px}.category-name{font-size:14px;font-weight:500;color:#333}.playlist-section{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.playlist-box{background:white;border-radius:12px;padding:20px;box-shadow:0 2px 8px #00000014}.playlist-title{font-size:16px;font-weight:600;color:#333;margin-bottom:16px}.playlist-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#f8f9fa;border-radius:8px;margin-bottom:8px}.playlist-info{display:flex;align-items:center;gap:12px}.playlist-logo{width:40px;height:40px;background:#693B97;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0}.delete-btn{color:#dc2626;cursor:pointer;font-size:18px}.filter-section{background:white;padding:20px;border-radius:12px;margin-bottom:20px;box-shadow:0 2px 8px #00000014}.filter-group{margin-bottom:16px}.filter-label{display:block;font-size:14px;font-weight:500;color:#333;margin-bottom:8px}.filter-select{width:100%;max-width:400px;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer}.date-range{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.date-input{padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;flex:1;min-width:150px}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;flex-wrap:wrap}.page-info{font-size:14px;color:#666;margin-right:16px}.page-btn{width:32px;height:32px;border:1px solid #ddd;background:white;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.page-btn:hover{background:#f5f5f5}.page-btn.active{background:#693B97;color:#fff;border-color:#693b97}.hidden{display:none!important}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:rgba(0,0,0,.45);z-index:2000;align-items:center;justify-content:center;padding:20px}.modal-overlay.show{display:flex}.modal{background:white;border-radius:16px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px #0000004d;animation:modalIn .22s ease}@keyframes modalIn{0%{opacity:0;transform:translateY(-20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:20px 24px 16px;border-bottom:2px solid #A5CF4C;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#F9F6FD,white)}.modal-title{font-size:18px;font-weight:700;color:#693b97}.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:#666;line-height:1;padding:4px 8px;border-radius:6px;transition:background .2s}.modal-close:hover{background:#f0f0f0}.modal-body{padding:24px}.modal-field{margin-bottom:22px}.modal-label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:10px}.modal-input{width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:border-color .2s,box-shadow .2s;background:#fafafa}.modal-input:focus{outline:none;border-color:#693b97;background:#fff;box-shadow:0 0 0 3px #693b971f}.modal-input.input-error{border-color:#dc2626;background:#fff8f8;box-shadow:0 0 0 3px #dc26261a}.field-error{display:none;font-size:12px;color:#dc2626;margin-top:6px;font-weight:500}.field-error.show{display:block}.checkbox-group.group-error .checkbox-label{color:#dc2626}#toastMsg{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(20px);background:#1a1a1a;color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999;white-space:nowrap;box-shadow:0 4px 16px #00000040}#toastMsg.show{opacity:1;transform:translate(-50%) translateY(0)}textarea.modal-input{resize:vertical;min-height:80px}.img-upload-row{display:flex;align-items:center;gap:20px;margin-bottom:22px}.img-preview{width:100px;height:100px;border:2px dashed #ccc;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;overflow:hidden;flex-shrink:0}.img-preview img{width:100%;height:100%;object-fit:cover;border-radius:10px}.img-upload-info{flex:1}.img-hint{font-size:12px;color:#999;margin-top:8px}.checkbox-group{display:flex;flex-wrap:wrap;gap:16px}.checkbox-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14px;color:#444;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:17px;height:17px;accent-color:#693B97;cursor:pointer}.date-range-picker{width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#fafafa}.date-range-picker:focus{outline:none;border-color:#693b97;background:#fff}.time-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.time-select{padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#fafafa;cursor:pointer;min-width:72px}.time-select:focus{outline:none;border-color:#693b97}.time-sep{font-weight:600;color:#555;font-size:16px}.audio-upload-row{display:flex;flex-direction:column;gap:12px}.audio-player{background:#f0f2f5;border:1.5px solid #e0e0e0;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;-webkit-user-select:none;user-select:none;transition:background .2s,border-color .2s}.audio-player.has-file{background:#ece4f8;border-color:#b89ed9}.ap-play-btn{width:34px;height:34px;min-width:34px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#693b97;padding:0;border-radius:50%;transition:background .15s}.ap-play-btn:disabled{color:#bbb;cursor:default}.ap-play-btn:not(:disabled):hover{background:rgba(105,59,151,.1)}.ap-play-btn svg{width:20px;height:20px}.ap-time{font-size:13px;color:#555;white-space:nowrap;min-width:96px;font-variant-numeric:tabular-nums}.ap-progress-wrap{flex:1;position:relative;height:4px;background:#d0d0d0;border-radius:3px;cursor:pointer;transition:height .12s}.ap-progress-wrap:hover{height:7px}.ap-progress-fill{height:100%;background:linear-gradient(90deg,#8B52C0,#693B97);border-radius:3px;width:0%;pointer-events:none}.ap-progress-thumb{position:absolute;top:50%;width:13px;height:13px;background:#693B97;border:2px solid white;box-shadow:0 1px 4px #00000040;border-radius:50%;transform:translate(-50%,-50%);left:0%;display:none;pointer-events:none}.ap-progress-wrap:hover .ap-progress-thumb{display:block}.ap-volume-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s}.ap-volume-btn:hover{background:rgba(0,0,0,.07)}.ap-volume-btn svg{width:18px;height:18px}.ap-more-btn{background:none;border:none;cursor:pointer;padding:4px 6px;color:#666;font-size:18px;line-height:1;border-radius:4px;transition:background .15s}.ap-more-btn:hover{background:rgba(0,0,0,.07)}.ap-filename{font-size:12px;color:#693b97;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:220px;display:none;font-weight:500}.radio-group{display:flex;gap:24px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#444;-webkit-user-select:none;user-select:none}.radio-label input[type=radio]{width:18px;height:18px;accent-color:#693B97;cursor:pointer}.modal-footer{padding:16px 24px 24px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #f0f0f0}.btn-cancel{background:#4a5568;color:#fff;padding:11px 28px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.btn-cancel:hover{background:#2d3748}.btn-save{background:#693B97;color:#fff;padding:11px 28px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.btn-save:hover{background:#4E2B72}@media (max-width: 640px){.modal{border-radius:12px}.modal-header,.modal-body{padding:16px}.modal-footer{padding:12px 16px 16px}.img-upload-row{flex-direction:column;align-items:flex-start}.time-range{gap:6px}.time-select{min-width:60px;padding:8px 10px}}@media (max-width: 480px){.modal-overlay{padding:12px}.checkbox-group{gap:12px}.radio-group{gap:16px}}.mobile-nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:999}.mobile-nav-overlay.show{display:block}.mobile-nav{display:none;position:fixed;top:0;left:-100%;bottom:0;width:280px;background:white;z-index:1000;transition:left .3s;overflow-y:auto}.mobile-nav.show{left:0}.mobile-nav-header{padding:20px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.mobile-nav-close{background:none;border:none;font-size:24px;cursor:pointer}.mobile-nav-item{padding:16px 20px;border-bottom:1px solid #f0f0f0;cursor:pointer;display:flex;align-items:center;gap:12px;transition:background .2s}.mobile-nav-item:hover{background:#f5f5f5}.mobile-nav-item.active{background:#F3EFF9;color:#693b97;font-weight:600}.mobile-card{display:none;background:white;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #00000014}.mobile-card-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0}.mobile-card-row:last-child{border-bottom:none}.mobile-card-label{font-size:13px;color:#666;font-weight:500}.mobile-card-value{font-size:14px;color:#333;font-weight:500}@media (min-width: 2560px){.content-wrapper{max-width:2400px}.page-title{font-size:32px}th,td{padding:18px 16px;font-size:15px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media (max-width: 1400px){.main-content{padding:20px}.page-title{font-size:26px}}@media (max-width: 1000px){.main-content{padding:16px}.page-title{font-size:24px}.page-actions{flex-direction:column;align-items:stretch}.search-box{max-width:100%}.action-buttons{justify-content:stretch}.action-buttons .btn{flex:1}.playlist-section{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media (max-width: 720px){.mobile-menu-btn{display:block}.header-top{padding:12px 16px}.nav-menu{display:none}.mobile-nav{display:block}.main-content{padding:12px}.page-title{font-size:22px}.page-subtitle{font-size:13px}.table-container table{display:none}.mobile-card{display:block}.card-grid{grid-template-columns:repeat(2,1fr)}.category-icon{font-size:36px}.btn{padding:10px 16px;font-size:13px}.filter-select,.date-input{max-width:100%}}@media (max-width: 640px){.login-box{padding:30px 20px}.header-logo{font-size:16px}.logo-niceto{font-size:11px;padding:4px 10px}.logo-cu{font-size:18px}.user-name{display:none}.page-title{font-size:20px}.page-header{margin-bottom:16px}.card-grid{grid-template-columns:repeat(2,1fr);gap:12px}.category-card{padding:16px}.category-icon{font-size:32px;margin-bottom:8px}.category-name{font-size:13px}.playlist-item{padding:10px}.playlist-logo{width:36px;height:36px;font-size:14px}}@media (max-width: 480px){.header-top{padding:10px 12px}.main-content{padding:8px}.page-title{font-size:18px}.page-subtitle{font-size:12px}.btn{padding:8px 12px;font-size:12px}.card-grid{grid-template-columns:1fr}.search-box{padding:6px 12px}.search-input{font-size:13px}.mobile-card{padding:12px}.mobile-card-row{flex-direction:column;gap:4px}.badge{font-size:11px;padding:3px 10px}.filter-section{padding:16px}.date-range{flex-direction:column}.date-input{width:100%}.playlist-section{gap:12px}.playlist-box{padding:16px}}@media (max-width: 720px){.table-scroll{margin:-1px;padding:1px}}.toggle-switch{position:relative;display:inline-block;width:50px;height:26px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:26px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#693b97}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-slider:hover{opacity:.9}#deviceModalDelete:hover{background:#b91c1c!important;border-color:#b91c1c!important;transform:translateY(-1px);box-shadow:0 4px 6px #0000001a}#deviceModalDelete:active{transform:translateY(0);box-shadow:none}