@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap);:root{--bp-sm:640px;--bp-md:1023px;--page-pad-mobile:16px;--page-pad-desktop:32px 40px;--touch-target:44px}.safe-area-pad-bottom{padding-bottom:env(safe-area-inset-bottom,0)}.safe-area-pad-inline{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@media (max-width:640px){body{overflow-x:hidden}a,button{min-height:var(--touch-target)}}*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#111827;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;padding:0}#root,body{background:#f9fafb}#root{min-height:100vh}@media (max-width:640px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (max-width:640px){.modal-overlay{align-items:flex-end;padding:0}.modal-content{-webkit-overflow-scrolling:touch;border-radius:20px 20px 0 0;max-height:92dvh;max-width:100%!important;overflow-y:auto;padding:20px 20px calc(20px + env(safe-area-inset-bottom, 0px));width:100%}.modal-actions{background:#fff;bottom:0;flex-direction:column-reverse;gap:10px;margin-top:8px;padding-top:12px;position:sticky}.modal-actions button{width:100%}}.confirm-sheet__message{color:#334155;font-size:15px;line-height:1.5;margin:0}.confirm-sheet__actions{margin-top:0}.submit-btn.confirm-sheet__confirm--danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 24px #dc262659}.submit-btn.confirm-sheet__confirm--danger:hover{box-shadow:0 10px 28px #dc262673}.login-split-container{display:flex;font-family:Inter,sans-serif;min-height:100vh;width:100%}.login-left-panel{background:linear-gradient(180deg,#0d47a1,#08295e);color:#fff;display:flex;flex:1 1;flex-direction:column;justify-content:center;overflow:hidden;padding:0 10%;position:relative}.left-panel-content{max-width:450px;position:relative;z-index:2}.brand-strip-mobile{align-items:center;display:none;gap:12px}.brand-logo-mobile{display:block;max-height:40px;object-fit:contain;width:auto}.brand-tagline-mobile{color:#fffffff2;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2}.brand-title{font-size:48px;font-weight:700;letter-spacing:-.02em;margin:0 0 16px}.brand-subtitle{color:#ffffffe6;font-size:18px;line-height:1.5;margin:0 0 40px}.read-more-button{background:#1976d2;border:none;border-radius:999px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 32px;transition:background .3s}.read-more-button:hover{background:#1565c0}.decorative-curves{bottom:0;height:60%;left:0;pointer-events:none;position:absolute;width:100%;z-index:1}.decorative-curves svg{height:100%;width:100%}.login-right-panel{align-items:center;background:#fff;display:flex;flex:1 1;justify-content:center;padding:40px}.login-form-container{max-width:400px;width:100%}.login-header{margin-bottom:40px}.login-header h2{color:#1e293b;font-size:32px;font-weight:700;margin:0 0 8px}.login-header p{color:#64748b;font-size:16px;margin:0}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{width:100%}.login-input-wrapper{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;display:flex;position:relative;transition:all .3s ease;width:100%}.login-input-wrapper:focus-within{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.login-input-wrapper .input-icon,.login-input-wrapper .password-input__icon{align-items:center;color:#94a3b8;display:flex;justify-content:center;left:16px;pointer-events:none;position:absolute;z-index:1}.login-input-wrapper .password-input__field,.login-input-wrapper .pill-input{background:#0000;border:none!important;border-radius:999px;color:#334155;font-family:inherit;font-size:15px;outline:none!important;padding:16px 20px 16px 48px;width:100%}.login-input-wrapper .password-input__field::placeholder,.login-input-wrapper .pill-input::placeholder{color:#cbd5e1}.login-input-wrapper .password-input__field{padding-right:48px}.login-input-wrapper .password-input__toggle{align-items:center;background:#0000;border:none;color:#94a3b8;cursor:pointer;display:flex;margin:0;opacity:.75;padding:0;position:absolute;right:16px}.login-input-wrapper .password-input__toggle:hover{opacity:1}.error-message{background-color:#fef2f2;border:1px solid #fee2e2;border-radius:12px;color:#ef4444;font-size:14px;padding:12px 20px}.login-button-pill{align-items:center;background:#0d6efd;border:none;border-radius:999px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:500;justify-content:center;margin-top:10px;min-height:52px;padding:16px;transition:all .3s ease;width:100%}.login-button-pill:hover:not(:disabled){background:#0b5ed7;box-shadow:0 4px 12px #0d6efd40;transform:translateY(-1px)}.login-button-pill:disabled{cursor:not-allowed;opacity:.7}.forgot-password-link{margin-top:20px;text-align:center}.forgot-password-link a{color:#64748b;font-size:14px;font-weight:500;text-decoration:none;transition:color .3s}.forgot-password-link a:hover{color:#334155}.loader{animation:spin 1s ease-in-out infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:20px;width:20px}@media (max-width:768px){.login-split-container{flex-direction:column}.login-left-panel{flex:none;min-height:40vh;padding:60px 30px}.login-right-panel{flex:none;min-height:60vh;padding:40px 20px}}@media (max-width:640px){.login-left-panel{flex:none;max-height:96px;min-height:96px;padding:12px 20px}.left-panel-content,.login-left-panel{align-items:center;justify-content:center}.left-panel-content{display:flex;margin:0 auto;max-width:none;width:100%}.brand-strip-mobile{display:flex}.brand-desktop,.decorative-curves,.read-more-button{display:none}.login-right-panel{align-items:flex-start;flex:1 1;justify-content:flex-start;min-height:0;padding:24px 20px max(24px,env(safe-area-inset-bottom,0px))}.login-header{margin-bottom:28px}.login-header h2{font-size:26px}.login-header p{font-size:15px}.login-form{gap:16px}.login-input-wrapper{box-sizing:border-box;min-height:52px}.login-input-wrapper .password-input__field,.login-input-wrapper .pill-input{box-sizing:border-box;font-size:16px;min-height:52px;padding-bottom:14px;padding-top:14px}.login-input-wrapper .password-input__field{padding-right:48px}.login-button-pill{font-size:16px;min-height:52px}.error-message__debug{max-height:30vh}}.password-input{align-items:center;display:flex;position:relative;width:100%}.password-input__field{font-size:16px;padding-right:44px;width:100%}.password-input__field.has-icon{padding-left:44px}.password-input__icon{left:14px;pointer-events:none}.password-input__icon,.password-input__toggle{align-items:center;color:#94a3b8;display:flex;justify-content:center;position:absolute}.password-input__toggle{background:#0000;border:none;border-radius:10px;cursor:pointer;margin:0;min-height:44px;min-width:44px;opacity:.75;padding:0;right:6px;top:50%;transform:translateY(-50%)}.password-input__toggle:hover{opacity:1}.password-input__toggle:focus-visible{border-radius:8px;outline:2px solid currentColor;outline-offset:2px}.layout{background:#f9fafb;display:flex;min-height:100vh}.layout.theme-default{--accent:#9b59b6;--accent-soft:#9b59b61a;--accent-border:#9b59b633;--accent-grad-a:#9b59b6;--accent-grad-b:#8e44ad}.layout.theme-platform-admin{--accent:#b45309;--accent-soft:#f59e0b24;--accent-border:#f59e0b47;--accent-grad-a:#f59e0b;--accent-grad-b:#dc2626}.layout-content{flex:1 1;margin-left:260px;min-height:100vh}.layout.theme-platform-admin .layout-content{box-shadow:inset 0 4px 0 0 var(--accent-grad-a)}@media (max-width:1023px){.layout-content{margin-left:0;min-height:100vh;min-height:100dvh;padding-top:calc(56px + env(safe-area-inset-top, 0px))}}.side-navigation{background:#fff;border-right:1px solid #e5e7eb;box-shadow:2px 0 8px #0000000a;display:flex;flex-direction:column;height:100vh;left:0;position:fixed;top:0;width:260px;z-index:1000}.logo-container{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:center;padding:24px 20px}.logo-image{height:auto;max-height:60px;max-width:100%;object-fit:contain}.nav-menu{display:flex;flex:1 1;flex-direction:column;gap:8px;overflow-y:auto;padding:20px 12px}.nav-item{align-items:center;border-radius:10px;color:#6b7280;display:flex;font-size:15px;font-weight:500;gap:12px;padding:12px 16px;text-decoration:none;transition:all .2s ease}.nav-item svg{flex-shrink:0}.nav-item:hover{background:#f3f4f6;color:#374151}.nav-item.active{background:linear-gradient(135deg,var(--accent-soft) 0,#0000 100%);border:1px solid var(--accent-border)}.nav-item.active,.nav-item.active svg{color:var(--accent)}.nav-footer{border-top:1px solid #e5e7eb;justify-content:space-between;padding:20px}.nav-footer,.user-info{align-items:center;display:flex;gap:12px}.user-info{flex:1 1}.user-avatar{align-items:center;background:linear-gradient(135deg,var(--accent-grad-a) 0,var(--accent-grad-b) 100%);border-radius:10px;color:#fff;display:flex;font-size:16px;font-weight:600;height:40px;justify-content:center;width:40px}.user-details{flex:1 1;min-width:0}.user-name{color:#111827;font-size:14px;font-weight:600}.user-name,.user-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-role{color:#6b7280;font-size:12px}.logout-btn{align-items:center;background:#0000;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.logout-btn:hover{background:#f3f4f6;border-color:#d1d5db;color:#374151}.nav-menu::-webkit-scrollbar{width:6px}.nav-menu::-webkit-scrollbar-track{background:#0000}.nav-menu::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.nav-menu::-webkit-scrollbar-thumb:hover{background:#9ca3af}.drawer-scrim{background:#0f172a73;inset:0;position:fixed;z-index:1100}@media (max-width:1023px){.side-navigation{height:100dvh;max-height:100dvh;transform:translateX(-100%);transition:transform .25s ease;width:min(280px,84vw);z-index:1101}.side-navigation.open{box-shadow:0 0 40px #0003;transform:translateX(0)}.nav-item{font-size:16px;padding:14px 16px}.nav-footer{flex-shrink:0;padding-bottom:calc(20px + max(env(safe-area-inset-bottom, 0px), 48px))}}.mobile-top-bar{display:none}@media (max-width:1023px){.mobile-top-bar{align-items:center;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #0000000f;display:flex;gap:12px;left:0;min-height:calc(56px + env(safe-area-inset-top, 0px));padding:env(safe-area-inset-top,0) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));position:fixed;right:0;top:0;z-index:1050}.mobile-top-bar__menu{align-items:center;background:#f3f4f6;border:none;border-radius:12px;color:#374151;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;margin:0;padding:0;transition:background .2s ease;width:44px}.mobile-top-bar__menu:hover{background:#e5e7eb}.mobile-top-bar__title{color:#111827;flex:1 1;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-top-bar__actions{align-items:center;display:flex;flex-shrink:0;gap:8px;justify-content:flex-end;max-width:50%}.mobile-top-bar-add-btn{align-items:center;background:linear-gradient(135deg,#0ea5e9,#0284c7);border:none;border-radius:12px;box-shadow:0 4px 12px #0ea5e959;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;margin:0;padding:0;width:44px}.mobile-top-bar-add-btn:active{opacity:.92;transform:scale(.98)}}.dashboard{background:linear-gradient(135deg,#f5f7fa,#e4e8ed);color:#1a1d21;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;padding:32px 40px}.dashboard-header{margin-bottom:36px}.dashboard-header h1{color:#1a1d21;font-size:34px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}.dashboard-header p{color:#64748b;font-size:15px;font-weight:500;margin:0}.stats-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);margin-bottom:32px}.stat-card{background:#fff;border:none;border-radius:20px;box-shadow:0 4px 20px #0000000f;overflow:hidden;padding:4px 0 0;position:relative;transition:all .4s cubic-bezier(.25,.46,.45,.94)}.stat-card:before{content:"";height:100%;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease;z-index:0}.stat-card:hover{box-shadow:0 20px 40px #0000001f;transform:translateY(-6px)}.stat-card-inner{align-items:flex-start;display:flex;gap:20px;padding:28px;position:relative;z-index:1}.stat-card .card-accent{height:4px;left:0;position:absolute;top:0;width:100%;z-index:2}.stat-card.playlist-card .card-accent{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd)}.stat-card.device-card .card-accent{background:linear-gradient(90deg,#0ea5e9,#38bdf8 50%,#7dd3fc)}.stat-card.schedule-card .card-accent{background:linear-gradient(90deg,#10b981,#34d399 50%,#6ee7b7)}.stat-icon{align-items:center;border-radius:16px;color:#fff;display:flex;flex-shrink:0;height:60px;justify-content:center;overflow:hidden;position:relative;width:60px}.stat-icon:after{background:linear-gradient(135deg,#fff3,#0000 50%);content:"";inset:0;position:absolute}.stat-icon svg{position:relative;z-index:1}.playlist-icon{box-shadow:0 8px 24px #8b5cf659}.device-icon{background:linear-gradient(135deg,#0ea5e9,#0284c7);box-shadow:0 8px 24px #0ea5e959}.schedule-icon{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px #10b98159}.stat-content{flex:1 1;min-width:0}.stat-label{color:#64748b;font-size:13px;font-weight:600;letter-spacing:.8px;margin-bottom:6px;text-transform:uppercase}.stat-value{color:#1a1d21;font-size:42px;font-weight:800;letter-spacing:-2px;line-height:1;margin-bottom:12px}.stat-detail{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.stat-badge{align-items:center;border-radius:20px;display:inline-flex;font-size:12px;font-weight:600;gap:6px;padding:6px 12px}.stat-badge:before{background:currentColor;border-radius:50%;content:"";height:6px;width:6px}.stat-badge.active,.stat-badge.online{background:#10b9811f;color:#059669}.stat-badge.inactive,.stat-badge.offline{background:#ef44441f;color:#dc2626}.stat-badge.upcoming{background:#f59e0b1f;color:#d97706}.stat-badge.completed{background:#64748b1f;color:#64748b}.stat-trend{align-items:center;display:flex;font-size:13px;font-weight:600;gap:4px;margin-top:8px}.stat-trend.up{color:#10b981}.stat-trend.down{color:#ef4444}.dashboard-content{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}.content-section{background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;overflow:hidden;padding:0;transition:all .3s ease}.content-section:hover{box-shadow:0 12px 32px #0000001a}.section-header{justify-content:space-between;margin-bottom:20px;padding:24px 24px 0}.section-header,.section-title{align-items:center;display:flex}.section-title{gap:12px}.section-icon{align-items:center;border-radius:12px;display:flex;height:40px;justify-content:center;width:40px}.section-icon.playlist{background:linear-gradient(135deg,#8b5cf626,#8b5cf60d);color:#8b5cf6}.section-icon.device{background:linear-gradient(135deg,#0ea5e926,#0ea5e90d);color:#0ea5e9}.section-icon.schedule{background:linear-gradient(135deg,#10b98126,#10b9810d);color:#10b981}.section-header h2{color:#1a1d21;font-size:18px;font-weight:700;margin:0}.view-all-btn{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:10px;color:#64748b;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:6px;padding:8px 16px;transition:all .25s ease}.view-all-btn:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:#0000;box-shadow:0 4px 12px #8b5cf64d;color:#fff;transform:translateY(-1px)}.view-all-btn svg{height:14px;transition:transform .2s ease;width:14px}.view-all-btn:hover svg{transform:translateX(2px)}.device-list,.playlist-list,.schedule-list{display:flex;flex:1 1;flex-direction:column;gap:8px;padding:0 16px 16px}.device-item,.playlist-item,.schedule-item{align-items:center;background:linear-gradient(135deg,#fafbfc,#f8fafc);border:1px solid #f1f5f9;border-radius:14px;cursor:pointer;display:flex;justify-content:space-between;overflow:hidden;padding:16px 18px;position:relative;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.device-item:before,.playlist-item:before,.schedule-item:before{bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:3px}.playlist-item:before{background:linear-gradient(180deg,#8b5cf6,#7c3aed)}.device-item:before{background:linear-gradient(180deg,#0ea5e9,#0284c7)}.schedule-item:before{background:linear-gradient(180deg,#10b981,#059669)}.device-item:hover,.playlist-item:hover,.schedule-item:hover{background:#fff;border-color:#e2e8f0;box-shadow:0 4px 16px #0000000f;transform:translateX(4px)}.device-item:hover:before,.playlist-item:hover:before,.schedule-item:hover:before{opacity:1}.device-info,.playlist-info,.schedule-info{align-items:center;display:flex;flex:1 1;gap:14px;min-width:0}.item-icon{align-items:center;border-radius:12px;display:flex;flex-shrink:0;height:42px;justify-content:center;width:42px}.item-icon.playlist{background:linear-gradient(135deg,#8b5cf61f,#8b5cf60f);color:#8b5cf6}.item-icon.device{background:linear-gradient(135deg,#0ea5e91f,#0ea5e90f);color:#0ea5e9}.item-icon.schedule{background:linear-gradient(135deg,#10b9811f,#10b9810f);color:#10b981}.item-details{flex:1 1;min-width:0}.device-item-end,.playlist-item-end{align-items:center;display:flex;flex-shrink:0;gap:10px}.list-item-chevron{align-items:center;color:#94a3b8;display:flex;flex-shrink:0;justify-content:center}.schedule-item .list-item-chevron{margin-left:8px}.device-name,.playlist-name,.schedule-playlist{color:#1a1d21;font-size:14px;font-weight:600;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-playlist,.playlist-meta,.schedule-meta{align-items:center;color:#64748b;display:flex;font-size:12px;gap:8px}.playlist-status,.schedule-status{border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.6px;padding:6px 14px;text-transform:uppercase}.playlist-status.active,.schedule-status.active{background:linear-gradient(135deg,#10b98126,#10b98114);color:#059669}.playlist-status.inactive{background:linear-gradient(135deg,#ef444426,#ef444414);color:#dc2626}.schedule-status.upcoming{background:linear-gradient(135deg,#f59e0b26,#f59e0b14);color:#d97706}.device-status{align-items:center;border-radius:20px;display:flex;font-size:12px;font-weight:700;gap:8px;letter-spacing:.5px;padding:6px 14px;text-transform:uppercase}.device-status.online{background:linear-gradient(135deg,#10b98126,#10b98114);color:#059669}.device-status.offline{background:linear-gradient(135deg,#ef444426,#ef444414);color:#dc2626}.status-dot{border-radius:50%;height:8px;position:relative;width:8px}.device-status.online .status-dot{animation:pulse-green 2s infinite;background:#10b981;box-shadow:0 0 0 3px #10b98133}.device-status.offline .status-dot{background:#ef4444}.stat-card{animation:fadeSlideIn .5s ease-out forwards}.stat-card:first-child{animation-delay:.1s}.stat-card:nth-child(2){animation-delay:.2s}.stat-card:nth-child(3){animation-delay:.3s}.content-section{animation:fadeSlideIn .5s ease-out forwards}.content-section:first-child{animation-delay:.35s}.content-section:nth-child(2){animation-delay:.45s}.content-section:nth-child(3){animation-delay:.55s}@media (max-width:1400px){.dashboard-content{grid-template-columns:1fr 1fr}.content-section:last-child{grid-column:span 2}}@media (max-width:1024px){.dashboard-content,.stats-grid{grid-template-columns:1fr}.content-section:last-child{grid-column:span 1}.dashboard{padding:24px}}@media (max-width:768px){.dashboard-header h1{font-size:28px}.stat-value{font-size:34px}.stat-card-inner{padding:20px}}@media (max-width:640px){.dashboard{padding:16px 16px max(16px,env(safe-area-inset-bottom,0px))}.dashboard-header{margin-bottom:20px}.dashboard-header h1{font-size:24px}.dashboard-header p{font-size:14px}.stat-card-inner{gap:14px;padding:16px}.stat-icon{border-radius:14px;height:48px;width:48px}.stat-icon svg{height:22px;width:22px}.stat-value{font-size:28px;letter-spacing:-1px}.stats-grid{gap:16px;margin-bottom:24px}.dashboard-content{gap:16px}.section-header{flex-wrap:wrap;gap:12px;margin-bottom:16px;padding:20px 16px 0}.device-list,.playlist-list,.schedule-list{flex-direction:column;gap:10px;max-width:100%;overflow-x:visible;padding:0 12px 16px}.device-item,.playlist-item,.schedule-item{box-sizing:border-box;min-height:56px;padding:12px 14px}.device-name,.playlist-name,.schedule-playlist{overflow:visible;text-overflow:clip;white-space:normal;word-break:break-word}}@media (hover:none){.stat-card:hover{box-shadow:0 4px 20px #0000000f;transform:none}.device-item:hover,.playlist-item:hover,.schedule-item:hover{background:linear-gradient(135deg,#fafbfc,#f8fafc);border-color:#f1f5f9;box-shadow:none;transform:none}.device-item:hover:before,.playlist-item:hover:before,.schedule-item:hover:before{opacity:0}.content-section:hover{box-shadow:0 4px 20px #0000000f}.view-all-btn:hover{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-color:#e2e8f0;box-shadow:none;color:#64748b;transform:none}.view-all-btn:hover svg{transform:none}}.playlists-page{background:linear-gradient(135deg,#f5f7fa,#e4e8ed);color:#1a1d21;display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;height:100%;max-height:100dvh;min-height:100vh;min-height:0;overflow:auto;padding:32px 40px}.playlists-page .modal-overlay{z-index:1200}.playlist-detail-upload-bar,.upload-btn-mobile-only{display:none}.playlist-detail-body{display:flex;flex:1 1;flex-direction:column;min-height:0;overflow:hidden}.mobile-top-bar-add-btn.playlists-top-add{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 12px #8b5cf659}.playlists-container{grid-gap:24px;display:grid;flex:1 1;gap:24px;grid-template-columns:380px 1fr;height:100%;min-height:0}.playlists-list{animation:fadeSlideIn .5s ease-out forwards;animation-delay:.1s;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;min-height:0;opacity:0;overflow:hidden;padding:0;position:relative}.playlists-list:before{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}.playlists-list h2{align-items:center;color:#1a1d21;display:flex;font-size:18px;font-weight:700;gap:12px;margin:0;padding:24px 24px 20px}.playlists-list h2:before{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;content:"";height:8px;width:8px}.playlist-cards{-webkit-overflow-scrolling:touch;display:flex;flex:1 1;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding:0 16px 16px}.playlist-card{background:linear-gradient(135deg,#fafbfc,#f8fafc);border:1px solid #f1f5f9;border-radius:16px;cursor:pointer;padding:18px 20px;position:relative;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.playlist-card:before{background:linear-gradient(180deg,#8b5cf6,#7c3aed);border-radius:16px 0 0 16px;bottom:0;content:"";left:0;margin-bottom:5px;margin-top:5px;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:4px}.playlist-card:hover{background:#fff;border-color:#e2e8f0;box-shadow:0 8px 24px #00000014;transform:translateX(4px)}.playlist-card:hover:before{opacity:1}.playlist-card.active{background:linear-gradient(135deg,#8b5cf614,#8b5cf608);border-color:#8b5cf64d}.playlist-card.active:before{opacity:1}.playlist-card-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:10px}.playlist-card-header h3{color:#1a1d21;flex:1 1;font-size:15px;font-weight:700;line-height:1.3;margin:0}.playlist-card:hover .delete-btn-small{opacity:1;transform:scale(1)}.delete-btn-small:disabled{cursor:not-allowed;opacity:.45}.delete-btn-small:disabled:hover{background:#0000;color:#94a3b8}.playlist-description{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#64748b;display:-webkit-box;font-size:13px;line-height:1.5;margin:0 0 12px;overflow:hidden}.playlist-meta{align-items:center;color:#94a3b8;display:flex;font-size:12px;font-weight:500;gap:8px}.device-group-badge{align-items:center;background:linear-gradient(135deg,#8b5cf626,#8b5cf614);border-radius:8px;color:#7c3aed;display:inline-flex;font-size:11px;font-weight:600;margin-left:4px;padding:4px 10px}.playlist-detail{animation:fadeSlideIn .5s ease-out forwards;animation-delay:.2s;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;min-height:0;opacity:0;overflow:hidden;padding:0;position:relative}.playlist-detail:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8 50%,#7dd3fc);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}.detail-header>div:first-child{margin-bottom:20px}.detail-header p{color:#64748b;font-size:14px;font-weight:500;margin:0 0 16px}.playlist-status-badge{align-items:center;display:flex;flex-wrap:wrap;gap:14px}.status-indicator{font-size:12px;font-weight:700;letter-spacing:.6px;padding:8px 16px;text-transform:uppercase}.status-indicator:before{background:currentColor;border-radius:50%;content:"";height:8px;width:8px}.status-indicator.active{background:linear-gradient(135deg,#10b98126,#10b98114);color:#059669}.status-indicator.active:before{animation:pulse-green 2s infinite;box-shadow:0 0 0 3px #10b98133}@keyframes pulse-green{0%,to{box-shadow:0 0 0 3px #10b98133}50%{box-shadow:0 0 0 6px #10b9811a}}.status-indicator.scheduled{background:linear-gradient(135deg,#f59e0b26,#f59e0b14);color:#d97706}.status-indicator.inactive{background:linear-gradient(135deg,#64748b1f,#64748b0f);color:#64748b}.schedule-info{background:#f8fafc;border-radius:10px;color:#64748b;font-size:12px;font-weight:500;padding:8px 14px}.schedule-info-row{align-items:center;display:inline-flex;gap:10px}.schedule-delete-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#64748b;cursor:pointer;display:inline-flex;height:28px;justify-content:center;transition:all .2s ease;width:28px}.schedule-delete-btn:hover{background:#f8fafc;border-color:#fecaca;color:#ef4444}.schedule-empty{background:#f8fafc;color:#94a3b8;font-weight:500}.device-group-info,.schedule-empty{border-radius:10px;font-size:12px;padding:8px 14px}.device-group-info{background:linear-gradient(135deg,#8b5cf626,#8b5cf614);color:#7c3aed;font-weight:600}.header-actions{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.playlist-controls{display:flex;flex-wrap:wrap;gap:10px}.control-btn{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:12px;color:#64748b;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:8px;padding:10px 18px;transition:all .25s ease}.control-btn:hover:not(:disabled){background:#fff;border-color:#cbd5e1;box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.control-btn.active{background:linear-gradient(135deg,#10b98126,#10b98114);border-color:#10b9814d;color:#059669}.control-btn.schedule-btn{background:linear-gradient(135deg,#f59e0b1f,#f59e0b0f);border-color:#f59e0b4d;color:#d97706}.control-btn.schedule-btn:hover{background:linear-gradient(135deg,#f59e0b33,#f59e0b1f);box-shadow:0 4px 16px #f59e0b33}.control-btn.deactivate-btn{background:linear-gradient(135deg,#ef44441f,#ef44440f);border-color:#ef44444d;color:#dc2626}.control-btn.deactivate-btn:hover{background:linear-gradient(135deg,#ef444433,#ef44441f);box-shadow:0 4px 16px #ef444433}.control-btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.upload-btn{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:12px;box-shadow:0 6px 20px #8b5cf64d;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:600;gap:10px;padding:12px 24px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.upload-btn:hover{box-shadow:0 10px 28px #8b5cf666;transform:translateY(-2px)}.empty-detail{color:#94a3b8;font-size:15px;font-weight:500;text-align:center}.empty-detail p{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px dashed #e2e8f0;border-radius:16px;margin:0;padding:40px}.playlist-items{-webkit-overflow-scrolling:touch;display:flex;flex:1 1;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:20px 24px 24px}.playlist-item-card{align-items:center;background:linear-gradient(135deg,#fafbfc,#f8fafc);border:1px solid #f1f5f9;border-radius:16px;display:flex;flex:0 0 auto;flex-shrink:0;gap:20px;min-height:112px;overflow:hidden;padding:16px 20px;position:relative;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.playlist-item-card:before{background:linear-gradient(180deg,#0ea5e9,#0284c7);bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:4px}.playlist-item-card:hover{background:#fff;border-color:#e2e8f0;box-shadow:0 8px 24px #00000014;transform:translateX(4px)}.playlist-item-card:hover:before{opacity:1}.item-preview{align-items:center;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);border-radius:12px;box-shadow:0 4px 12px #00000014;display:flex;flex-shrink:0;height:90px;justify-content:center;overflow:hidden;width:140px}.item-preview img{height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.playlist-item-card:hover .item-preview img{transform:scale(1.05)}.video-placeholder{align-items:center;background:linear-gradient(135deg,#64748b,#475569);color:#fff;display:flex;height:100%;justify-content:center;width:100%}.item-info{flex:1 1;min-width:0}.item-name{color:#1a1d21;font-size:15px;font-weight:700;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-details{align-items:center;color:#64748b;display:flex;font-size:13px;font-weight:500;gap:10px}.item-details span{background:#f1f5f9;border-radius:6px;padding:4px 10px}.item-actions{align-items:center;display:flex;flex-shrink:0;gap:14px}.duration-control{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;display:flex;gap:10px;padding:8px 14px}.duration-control label{color:#64748b;font-size:12px;font-weight:600;white-space:nowrap}.duration-input{background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;padding:6px 10px;text-align:center;transition:all .2s ease;width:56px}.duration-input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a;outline:none}.order-controls{display:flex;gap:6px}.order-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#64748b;cursor:pointer;display:flex;font-size:16px;height:36px;justify-content:center;transition:all .2s ease;width:36px}.order-btn:hover:not(:disabled){background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:#0000;box-shadow:0 4px 12px #8b5cf64d;color:#fff;transform:translateY(-2px)}.order-btn:disabled{cursor:not-allowed;opacity:.3}.delete-item-btn{align-items:center;background:linear-gradient(135deg,#ef44441a,#ef44440d);border:1px solid #ef444433;border-radius:10px;color:#ef4444;cursor:pointer;display:flex;justify-content:center;padding:10px;transition:all .2s ease}.delete-item-btn:hover{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#0000;box-shadow:0 4px 12px #ef44444d;color:#fff;transform:translateY(-2px)}.modal-content{display:flex;flex-direction:column;max-height:min(90vh,720px)}.form-group input,.form-group textarea{background:#fafbfc;border:2px solid #e2e8f0;border-radius:12px;box-sizing:border-box;font-family:inherit;font-size:15px;padding:14px 16px;transition:all .2s ease;width:100%}.form-group input:focus,.form-group textarea:focus{background:#fff;border-color:#8b5cf6;box-shadow:0 0 0 4px #8b5cf61a;outline:none}.form-group input::placeholder,.form-group textarea::placeholder{color:#94a3b8}.file-upload-area{position:relative}.file-input{height:0;opacity:0;position:absolute;width:0}.file-upload-label{align-items:center;background:linear-gradient(135deg,#fafbfc,#f8fafc);border:2px dashed #cbd5e1;border-radius:16px;color:#64748b;cursor:pointer;display:flex;flex-direction:column;font-size:15px;font-weight:500;justify-content:center;padding:48px 24px;text-align:center;transition:all .3s ease}.file-upload-label:hover{background:linear-gradient(135deg,#8b5cf60d,#8b5cf605);border-color:#8b5cf6;color:#8b5cf6;transform:translateY(-2px)}.file-info{background:#f8fafc;border-radius:10px;color:#64748b;display:flex;font-size:13px;font-weight:500;gap:20px;margin-top:16px;padding:12px 16px}.multi-file-list{display:block}.multi-file-list ul{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}.multi-file-list li{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.multi-file-list .file-name{color:#1a1d21;font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multi-file-list .file-duration{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;display:inline-flex;gap:10px;margin-left:auto;padding:6px 10px}.multi-file-list .file-duration input{background:#fafbfc;border:1px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;padding:6px 10px;text-align:center;width:64px}.upload-image-thumb{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 2px 8px #00000014;flex-shrink:0;height:44px;object-fit:cover;width:44px}.modal-actions{flex-shrink:0}.playlist-upload-progress{display:flex;flex-direction:column;gap:8px;margin-right:auto;max-width:320px;min-width:220px}.playlist-upload-progress--top{margin:2px 0 18px;max-width:100%}.playlist-upload-progress__row{align-items:center;color:#64748b;display:inline-flex;font-size:12px;font-weight:700;gap:10px;letter-spacing:.2px}.playlist-upload-progress__spinner{animation:spin .8s linear infinite;border:2px solid #e2e8f0;border-radius:999px;border-top-color:#8b5cf6;height:14px;width:14px}.playlist-upload-progress__label{background:linear-gradient(135deg,#8b5cf61f,#8b5cf60f);border:1px solid #8b5cf62e;border-radius:999px;color:#7c3aed;padding:6px 10px}.playlist-upload-progress__bar{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;height:10px;overflow:hidden}.playlist-upload-progress__barFill{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);border-radius:999px;height:100%;transition:width .12s ease-out;width:0}.playlist-cards::-webkit-scrollbar,.playlist-items::-webkit-scrollbar{width:6px}.playlist-cards::-webkit-scrollbar-track,.playlist-items::-webkit-scrollbar-track{background:#0000}.playlist-cards::-webkit-scrollbar-thumb,.playlist-items::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.playlist-cards::-webkit-scrollbar-thumb:hover,.playlist-items::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width:1200px){.playlists-container{grid-template-columns:340px 1fr}}@media (max-width:1023px){.playlists-page{padding:16px 16px max(16px,env(safe-area-inset-bottom,0px))}.playlists-page .page-header h1{font-size:26px}.create-btn-desktop-only{display:none!important}.playlists-container{display:block;width:100%}.playlist-detail,.playlists-list{max-width:100%;width:100%}.playlists-page .is-hidden-mobile{display:none!important}.playlists-list{max-height:none;min-height:auto}.playlist-cards{display:grid;grid-template-columns:1fr}.playlists-mobile-back-bar{background:#fff;border-bottom:1px solid #f1f5f9;flex-shrink:0;margin:0;padding:12px 16px;position:sticky;top:0;z-index:3}.playlists-mobile-back{align-items:center;background:#0000;border:none;border-radius:10px;color:#7c3aed;cursor:pointer;display:inline-flex;font-family:inherit;font-size:15px;font-weight:600;gap:8px;margin:0;min-height:44px;padding:8px 12px 8px 4px}.playlists-mobile-back:active{background:#7c3aed14}.playlist-detail{display:flex;flex-direction:column;max-height:min(100dvh,920px);min-height:0}.playlist-detail-upload-bar{background:#fff;border-top:1px solid #f1f5f9;box-shadow:0 -6px 24px #0f172a0f;display:block;flex-shrink:0;padding:12px 16px max(12px,env(safe-area-inset-bottom,0px))}.upload-btn-desktop-only{display:none!important}.upload-btn-mobile-only{align-items:center;display:flex;justify-content:center;width:100%}.header-actions{align-items:stretch;flex-direction:column}.playlist-controls{flex-wrap:wrap;justify-content:center}.upload-btn.upload-btn-desktop-only{justify-content:center;width:100%}}@media (max-width:640px){.playlist-item-card{align-items:stretch;flex-direction:column;gap:14px;min-height:0;padding:16px}.item-preview{aspect-ratio:16/9;height:auto;max-height:none;width:100%}.item-info{width:100%}.item-name{overflow:visible;text-overflow:clip;white-space:normal}.item-actions{grid-gap:12px 14px;align-items:center;border-top:1px solid #f1f5f9;display:grid;flex-wrap:nowrap;gap:12px 14px;grid-template-columns:1fr auto;margin-top:0;padding-top:14px;width:100%}.duration-control{box-sizing:border-box;grid-column:1/-1;justify-content:space-between;width:100%}.duration-input{flex:1 1;max-width:120px}.order-controls{grid-column:1;justify-self:start}.delete-item-btn{align-self:center;grid-column:2;grid-row:2;justify-self:end}.order-btn{height:44px;min-height:44px;min-width:44px;width:44px}.schedule-playlist-form .form-group input,.schedule-playlist-form .form-group select{box-sizing:border-box;width:100%}}@media (hover:none){.playlist-item-card:hover{background:linear-gradient(135deg,#fafbfc,#f8fafc);border-color:#f1f5f9;box-shadow:none;transform:none}.playlist-item-card:hover:before{opacity:0}.playlist-item-card:hover .item-preview img{transform:none}}.sheet-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a99;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:1100}.sheet-panel{background:#fff;border-radius:24px;box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;max-height:min(92vh,820px);overflow:hidden;position:relative;width:min(92vw,560px)}.sheet-panel:before{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:1}.sheet-header{background:#fff;flex-shrink:0;padding:32px 32px 18px;position:relative;z-index:2}.sheet-title-row{align-items:center;display:flex;gap:16px;justify-content:space-between}.sheet-header h2{color:#1a1d21;font-size:22px;font-weight:800;letter-spacing:-.3px;margin:0}.sheet-close{align-items:center;background:#f8fafc;border:none;border-radius:12px;color:#64748b;cursor:pointer;display:flex;flex-shrink:0;font-size:24px;height:40px;justify-content:center;padding:0;transition:all .2s ease;width:40px}.sheet-close:hover{background:#f1f5f9;color:#1a1d21;transform:rotate(90deg)}.sheet-body{flex:1 1;min-height:0;overflow:auto;padding:0 32px 18px}.sheet-footer{background:#fff;border-top:1px solid #f1f5f9;flex-shrink:0;padding:18px 32px 32px}@media (max-width:640px){.sheet-overlay{align-items:flex-end;padding:0}.sheet-panel{border-radius:24px 24px 0 0;max-height:92dvh;width:100%}.sheet-footer{padding-bottom:calc(32px + env(safe-area-inset-bottom))}}.devices-page{background:linear-gradient(135deg,#f5f7fa,#e4e8ed);color:#1a1d21;display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;height:100%;max-height:100dvh;min-height:100vh;min-height:0;overflow:auto;padding:32px 40px}.create-btn{background:linear-gradient(135deg,#0ea5e9,#0284c7);box-shadow:0 8px 24px #0ea5e959}.create-btn:hover{box-shadow:0 12px 32px #0ea5e973}.devices-container{grid-gap:24px;display:grid;flex:1 1;gap:24px;grid-template-columns:380px 1fr;height:100%;min-height:0}.devices-list{animation:fadeSlideIn .5s ease-out forwards;animation-delay:.1s;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;min-height:0;opacity:0;overflow:hidden;padding:0;position:relative}.devices-list:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8 50%,#7dd3fc);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}.devices-list h2{align-items:center;color:#1a1d21;display:flex;font-size:18px;font-weight:700;gap:12px;margin:0;padding:24px 24px 20px}.devices-list h2:before{background:linear-gradient(135deg,#0ea5e9,#0284c7);border-radius:50%;content:"";height:8px;width:8px}.loading:after{border-top-color:#0ea5e9}.device-cards{grid-gap:10px;-webkit-overflow-scrolling:touch;display:grid;flex:1 1;gap:10px;grid-auto-rows:max-content;min-height:0;overflow-y:auto;padding:0 16px 16px}.device-card{background:linear-gradient(135deg,#fafbfc,#f8fafc);border:1px solid #f1f5f9;border-radius:16px;cursor:pointer;overflow:hidden;padding:18px 20px;position:relative;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.device-card:before{background:linear-gradient(180deg,#0ea5e9,#0284c7);border-radius:16px 0 0 16px;bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:4px}.device-card:hover{background:#fff;border-color:#e2e8f0;box-shadow:0 8px 24px #00000014;transform:translateX(4px)}.device-card:hover:before{opacity:1}.device-card.active{background:linear-gradient(135deg,#0ea5e914,#0ea5e908);border-color:#0ea5e94d}.device-card.active:before{opacity:1}.device-card-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.device-icon-wrapper{align-items:center;background:linear-gradient(135deg,#0ea5e91f,#0ea5e90f);border-radius:12px;color:#0ea5e9;display:flex;height:44px;justify-content:center;width:44px}.device-card h3{color:#1a1d21;font-size:15px;font-weight:700;line-height:1.3;margin:0 0 10px}.device-card:hover .delete-btn-small{opacity:1;transform:scale(1)}.device-meta{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.status-badge{align-items:center;border-radius:20px;display:inline-flex;font-size:12px;font-weight:600;gap:6px;padding:5px 10px;text-transform:capitalize}.status-badge .status-dot{border-radius:50%;height:6px;width:6px}.status-badge.online{background:linear-gradient(135deg,#10b98126,#10b98114);color:#059669}.status-badge.online .status-dot{animation:pulse-dot 2s infinite;background:#10b981;box-shadow:0 0 0 2px #10b98133}@keyframes pulse-dot{0%,to{box-shadow:0 0 0 2px #10b98133}50%{box-shadow:0 0 0 4px #10b9811a}}.status-badge.offline{background:linear-gradient(135deg,#64748b1f,#64748b0f);color:#64748b}.status-badge.offline .status-dot{background:#94a3b8}.playlist-badge{background:#f1f5f9;border-radius:6px;color:#64748b;font-size:12px;font-weight:500;max-width:150px;overflow:hidden;padding:4px 10px;text-overflow:ellipsis;white-space:nowrap}.device-detail{animation:fadeSlideIn .5s ease-out forwards;animation-delay:.2s;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;min-height:0;opacity:0;overflow:hidden;padding:0;position:relative}.device-detail:before{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}.detail-icon{background:linear-gradient(135deg,#0ea5e91f,#0ea5e90f);color:#0ea5e9}.status-indicator{align-items:center;border-radius:20px;display:inline-flex;font-size:13px;font-weight:600;gap:8px;padding:6px 14px}.status-indicator .status-dot{border-radius:50%;height:8px;width:8px}.status-indicator.online{background:linear-gradient(135deg,#10b98126,#10b98114);color:#059669}.status-indicator.online .status-dot{animation:pulse-dot 2s infinite;background:#10b981;box-shadow:0 0 0 3px #10b98133}.status-indicator.offline{background:linear-gradient(135deg,#64748b1f,#64748b0f);color:#64748b}.status-indicator.offline .status-dot{background:#94a3b8}.device-key-container{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:14px;padding:16px}.device-key-display{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.device-key-display code{background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#1a1d21;flex:1 1;font-family:JetBrains Mono,Fira Code,monospace;font-size:14px;min-width:200px;padding:12px 16px;word-break:break-all}.key-actions{display:flex;gap:8px}.key-toggle-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#64748b;cursor:pointer;display:flex;justify-content:center;padding:10px;transition:all .2s ease}.key-toggle-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#0ea5e9}.copy-btn{align-items:center;background:linear-gradient(135deg,#0ea5e9,#0284c7);border:none;border-radius:10px;box-shadow:0 4px 12px #0ea5e940;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:8px;padding:10px 18px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.copy-btn:hover{box-shadow:0 6px 16px #0ea5e959;transform:translateY(-2px)}.copy-btn.copied{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #10b98140}.playlist-assignment{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.assigned-playlist{align-items:center;background:linear-gradient(135deg,#8b5cf614,#8b5cf608);border:1px solid #8b5cf633;border-radius:14px;display:flex;flex:1 1;gap:14px;min-width:200px;padding:14px 18px}.playlist-icon{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:10px;color:#fff;display:flex;height:40px;justify-content:center;width:40px}.playlist-info{display:flex;flex-direction:row;gap:4px}.playlist-name{color:#1a1d21;font-size:14px;font-weight:700}.playlist-status{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.playlist-status.active{color:#059669}.playlist-status.inactive{color:#64748b}.no-playlist{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px dashed #e2e8f0;border-radius:14px;color:#94a3b8;display:flex;flex:1 1;gap:12px;min-width:200px;padding:14px 18px}.no-playlist span{font-size:14px;font-weight:500}.change-playlist-btn{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:12px;box-shadow:0 6px 20px #8b5cf64d;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:8px;padding:12px 20px;transition:all .3s cubic-bezier(.25,.46,.45,.94);white-space:nowrap}.change-playlist-btn:hover{box-shadow:0 10px 28px #8b5cf666;transform:translateY(-2px)}.delete-device-btn{align-items:center;background:linear-gradient(135deg,#ef44441f,#ef44440f);border:1px solid #ef44444d;border-radius:12px;color:#dc2626;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:10px;padding:12px 20px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.delete-device-btn:hover{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#0000;box-shadow:0 6px 20px #ef44444d;color:#fff;transform:translateY(-2px)}.modal-content:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8 50%,#7dd3fc)}.form-group input:focus,.form-group select:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px #0ea5e91a}.playlist-select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;cursor:pointer;padding-right:48px}.submit-btn{background:linear-gradient(135deg,#0ea5e9,#0284c7);box-shadow:0 6px 20px #0ea5e94d}.submit-btn:hover:not(:disabled){box-shadow:0 10px 28px #0ea5e966}.detail-content::-webkit-scrollbar,.device-cards::-webkit-scrollbar{width:6px}.detail-content::-webkit-scrollbar-track,.device-cards::-webkit-scrollbar-track{background:#0000}.detail-content::-webkit-scrollbar-thumb,.device-cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.detail-content::-webkit-scrollbar-thumb:hover,.device-cards::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width:1200px){.devices-container{grid-template-columns:340px 1fr}}@media (max-width:1023px){.devices-page{padding:16px 16px max(16px,env(safe-area-inset-bottom,0px))}.devices-page .page-header h1{font-size:26px}.create-btn-desktop-only{display:none!important}.devices-container{display:block;gap:16px;width:100%}.device-detail,.devices-list{max-width:100%;width:100%}.devices-page .is-hidden-mobile{display:none!important}.devices-list{max-height:none}.device-cards{display:grid;grid-template-columns:1fr}.device-card{padding:20px 18px}.device-card h3{margin-bottom:8px}.device-meta{align-items:flex-start;width:100%}.delete-btn-small{opacity:1;transform:scale(1)}.devices-mobile-back-bar{background:#fff;border-bottom:1px solid #f1f5f9;flex-shrink:0;margin:0;padding:12px 16px;position:sticky;top:0;z-index:3}.devices-mobile-back{align-items:center;background:#0000;border:none;border-radius:10px;color:#0ea5e9;cursor:pointer;display:inline-flex;font-family:inherit;font-size:15px;font-weight:600;gap:8px;margin:0;min-height:44px;padding:8px 12px 8px 4px}.devices-mobile-back:active{background:#0ea5e914}.device-key-display{align-items:stretch;flex-direction:column;gap:12px}.device-key-display code{-webkit-overflow-scrolling:touch;box-sizing:border-box;display:block;max-width:100%;min-width:0;overflow-x:auto;text-align:left;width:100%;word-break:break-all}.key-actions{align-items:stretch;flex-direction:column;flex-wrap:wrap;gap:10px;justify-content:stretch;width:100%}.key-actions .copy-btn{justify-content:center;width:100%}.key-actions .key-toggle-btn{align-self:flex-start}.info-grid{grid-template-columns:1fr}.playlist-assignment{align-items:stretch;flex-direction:column}.change-playlist-btn{justify-content:center;width:100%}}@media (hover:none){.device-card:hover{background:linear-gradient(135deg,#fafbfc,#f8fafc);border-color:#f1f5f9;box-shadow:none;transform:none}.device-card:hover:before{opacity:0}.device-card.active:hover:before{opacity:1}}.device-groups-page{background:linear-gradient(135deg,#f5f7fa,#e4e8ed);color:#1a1d21;display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;height:100%;max-height:100dvh;min-height:100vh;min-height:0;overflow:auto;padding:32px 40px}.page-header{flex-shrink:0;margin-bottom:36px}.header-content{align-items:flex-start;display:flex;justify-content:space-between}.page-header h1{color:#1a1d21;font-size:34px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}.page-header p{color:#64748b;font-size:15px;font-weight:500;margin:0}.create-btn{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:14px;box-shadow:0 8px 24px #8b5cf659;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:15px;font-weight:600;gap:10px;padding:14px 28px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.create-btn:hover{box-shadow:0 12px 32px #8b5cf673;transform:translateY(-3px)}.create-btn svg{transition:transform .2s ease}.create-btn:hover svg{transform:rotate(90deg)}.error-banner{align-items:center;animation:slideDown .3s ease-out;background:linear-gradient(135deg,#ef44441f,#ef44440f);border:1px solid #ef444433;border-radius:14px;color:#dc2626;display:flex;flex-shrink:0;font-weight:500;justify-content:space-between;margin-bottom:24px;padding:16px 20px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-banner button{align-items:center;background:#ef44441a;border:none;border-radius:8px;color:#dc2626;cursor:pointer;display:flex;font-size:20px;height:28px;justify-content:center;padding:0;transition:all .2s ease;width:28px}.error-banner button:hover{background:#ef444433}.device-groups-container{grid-gap:24px;display:grid;flex:1 1;gap:24px;grid-template-columns:380px 1fr;height:100%;min-height:0}.device-groups-list{animation:fadeSlideIn .5s ease-out forwards;animation-delay:.1s;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;min-height:0;opacity:0;overflow:hidden;padding:0;position:relative}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.device-groups-list:before{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}.device-groups-list h2{align-items:center;color:#1a1d21;display:flex;font-size:18px;font-weight:700;gap:12px;margin:0;padding:24px 24px 20px}.device-groups-list h2:before{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;content:"";height:8px;width:8px}.loading{color:#64748b;font-weight:500;padding:60px 40px;text-align:center}.loading:after{animation:spin .8s linear infinite;border:3px solid #e2e8f0;border-radius:50%;border-top-color:#8b5cf6;content:"";display:block;height:32px;margin:16px auto 0;width:32px}@keyframes spin{to{transform:rotate(1turn)}}.empty-state{color:#94a3b8;font-size:15px;padding:60px 40px;text-align:center}.empty-state .empty-icon{color:#cbd5e1;margin-bottom:16px}.empty-state p{line-height:1.6;margin:0}.group-cards{grid-gap:10px;-webkit-overflow-scrolling:touch;display:grid;flex:1 1;gap:10px;grid-auto-rows:max-content;min-height:0;overflow-y:auto;padding:0 16px 16px}.group-card{background:linear-gradient(135deg,#fafbfc,#f8fafc);border:1px solid #f1f5f9;border-radius:16px;cursor:pointer;overflow:hidden;padding:18px 20px;position:relative;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.group-card:before{background:linear-gradient(180deg,#8b5cf6,#7c3aed);border-radius:16px 0 0 16px;bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:4px}.group-card:hover{background:#fff;border-color:#e2e8f0;box-shadow:0 8px 24px #00000014;transform:translateX(4px)}.group-card:hover:before{opacity:1}.group-card.active{background:linear-gradient(135deg,#8b5cf614,#8b5cf608);border-color:#8b5cf64d}.group-card.active:before{opacity:1}.group-card-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.group-icon-wrapper{align-items:center;background:linear-gradient(135deg,#8b5cf61f,#8b5cf60f);border-radius:12px;color:#8b5cf6;display:flex;height:44px;justify-content:center;width:44px}.group-card h3{color:#1a1d21;font-size:15px;font-weight:700;line-height:1.3;margin:0 0 10px}.delete-btn-small{background:#0000;border:none;border-radius:8px;color:#94a3b8;cursor:pointer;opacity:0;padding:6px;transform:scale(.9);transition:all .2s ease}.group-card:hover .delete-btn-small{opacity:1;transform:scale(1)}.delete-btn-small:hover{background:#ef44441a;color:#ef4444}.group-meta{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.device-count-badge{background:#f1f5f9;border-radius:6px;color:#64748b;font-size:12px;font-weight:500;padding:4px 10px}.active-playlist-badge{background:linear-gradient(135deg,#8b5cf626,#8b5cf614);color:#7c3aed;font-weight:600}.active-playlist-badge,.no-playlist-badge{border-radius:8px;display:inline-block;font-size:12px;margin-top:8px;padding:6px 12px}.no-playlist-badge{background:#f8fafc;color:#94a3b8;font-weight:500}.meta-separator{color:#cbd5e1;font-size:8px}.global-badge{background:#8b5cf61a;border-radius:6px;color:#8b5cf6;font-size:12px;font-weight:600;padding:4px 10px}.group-detail{animation:fadeSlideIn .5s ease-out forwards;animation-delay:.2s;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;min-height:0;opacity:0;overflow:hidden;padding:0;position:relative}.group-detail:before{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}.detail-header{border-bottom:1px solid #f1f5f9;flex-shrink:0;padding:28px 28px 24px}.detail-title-row{gap:16px}.detail-icon,.detail-title-row{align-items:center;display:flex}.detail-icon{background:linear-gradient(135deg,#8b5cf61f,#8b5cf60f);border-radius:16px;color:#8b5cf6;height:56px;justify-content:center;width:56px}.detail-header h2{color:#1a1d21;font-size:24px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}.global-indicator{align-items:center;background:linear-gradient(135deg,#8b5cf626,#8b5cf614);border-radius:20px;color:#7c3aed;display:inline-flex;font-size:13px;font-weight:600;gap:8px;padding:6px 14px}.detail-content{-webkit-overflow-scrolling:touch;flex:1 1;min-height:0;overflow-y:auto;padding:24px 28px}.detail-section{margin-bottom:28px}.detail-section h3{color:#1a1d21;font-size:16px;font-weight:700;margin:0 0 6px}.section-description{color:#64748b;font-size:13px;font-weight:500;margin:0 0 16px}.info-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.info-item{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:12px;padding:16px}.info-label{color:#64748b;display:block;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}.info-value{color:#1a1d21;font-size:14px;font-weight:700}.active-playlist-name{color:#7c3aed;font-weight:600}.no-playlist-text{color:#94a3b8;font-style:italic;font-weight:500}.devices-in-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.device-item{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:10px;padding:12px 16px}.device-item-info{align-items:center;display:flex;justify-content:space-between}.device-item-name{color:#1a1d21;font-size:14px;font-weight:600}.device-item-status{border-radius:12px;font-size:12px;font-weight:600;padding:4px 8px}.device-item-status.online{background:#10b9811a;color:#059669}.device-item-status.offline{background:#64748b1a;color:#64748b}.no-devices{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px dashed #e2e8f0;border-radius:14px;color:#94a3b8;display:flex;gap:12px;margin-bottom:16px;padding:14px 18px}.no-devices span{font-size:14px;font-weight:500}.edit-group-btn{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:12px;box-shadow:0 6px 20px #8b5cf64d;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:8px;padding:12px 20px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.edit-group-btn:hover{box-shadow:0 10px 28px #8b5cf666;transform:translateY(-2px)}.danger-zone{background:linear-gradient(135deg,#ef44440f,#ef444405);border:1px solid #ef444426;border-radius:14px;margin-top:24px;padding:20px}.danger-zone h3{color:#dc2626;font-size:15px;font-weight:700;margin:0 0 8px}.danger-zone p{color:#64748b;font-size:13px;line-height:1.5;margin:0 0 16px}.delete-group-btn{align-items:center;background:linear-gradient(135deg,#ef44441f,#ef44440f);border:1px solid #ef44444d;border-radius:12px;color:#dc2626;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:10px;padding:12px 20px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.delete-group-btn:hover{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#0000;box-shadow:0 6px 20px #ef44444d;color:#fff;transform:translateY(-2px)}.empty-detail{align-items:center;display:flex;height:100%;justify-content:center;min-height:400px}.empty-detail-content{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px dashed #e2e8f0;border-radius:16px;color:#94a3b8;padding:40px;text-align:center}.empty-detail-content svg{color:#cbd5e1;margin-bottom:16px}.empty-detail-content p{font-size:15px;font-weight:500;margin:0}.modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a99;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.device-groups-page .modal-overlay{z-index:1200}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:24px;box-shadow:0 25px 50px -12px #00000040;max-width:480px;overflow:hidden;padding:32px;position:relative;width:100%}.modal-content-large{max-width:600px}.modal-content:before{background:linear-gradient(90deg,#8b5cf6,#a78bfa 50%,#c4b5fd);content:"";height:4px;left:0;position:absolute;right:0;top:0}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:28px;padding-top:4px}.modal-header h2{color:#1a1d21;font-size:22px;font-weight:800;letter-spacing:-.3px;margin:0}.close-btn{align-items:center;background:#f8fafc;border:none;border-radius:12px;color:#64748b;cursor:pointer;display:flex;font-size:24px;height:40px;justify-content:center;padding:0;transition:all .2s ease;width:40px}.close-btn:hover{background:#f1f5f9;color:#1a1d21;transform:rotate(90deg)}.form-group{margin-bottom:24px}.form-group label{color:#374151;display:block;font-size:14px;font-weight:600;margin-bottom:10px}.form-group input,.form-group select{background:#fafbfc;border:2px solid #e2e8f0;border-radius:12px;box-sizing:border-box;font-family:inherit;font-size:15px;padding:14px 16px;transition:all .2s ease;width:100%}.form-group input:focus,.form-group select:focus{background:#fff;border-color:#8b5cf6;box-shadow:0 0 0 4px #8b5cf61a;outline:none}.form-group input::placeholder{color:#94a3b8}.form-group small{color:#64748b;display:block;font-size:12px;font-weight:500;margin-top:8px}.device-checkbox-list{background:#fafbfc;border:2px solid #e2e8f0;border-radius:12px;max-height:300px;overflow-y:auto;padding:12px}.device-checkbox-item{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px;transition:all .2s ease}.device-checkbox-item:hover{background:#f1f5f9}.device-checkbox-item input[type=checkbox]{accent-color:#8b5cf6;cursor:pointer;height:18px;width:18px}.device-checkbox-label{align-items:center;color:#1a1d21;display:flex;flex:1 1;font-size:14px;font-weight:500;justify-content:space-between}.device-checkbox-status{border-radius:10px;font-size:11px;font-weight:600;padding:3px 8px}.device-checkbox-status.online{background:#10b9811a;color:#059669}.device-checkbox-status.offline{background:#64748b1a;color:#64748b}.no-devices-text{color:#94a3b8;font-size:14px;margin:0;padding:20px;text-align:center}.modal-actions{display:flex;gap:14px;justify-content:flex-end;margin-top:32px}.cancel-btn{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:12px;color:#64748b;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:14px 28px;transition:all .2s ease}.cancel-btn:hover{background:#e2e8f0;color:#475569}.submit-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:12px;box-shadow:0 6px 20px #8b5cf64d;color:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;padding:14px 28px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.submit-btn:hover:not(:disabled){box-shadow:0 10px 28px #8b5cf666;transform:translateY(-2px)}.submit-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.modal-content.modal-content--stacked{display:flex;flex-direction:column;max-height:min(85vh,920px);overflow:hidden;padding:0}.modal-content.modal-content--stacked .modal-header{flex-shrink:0;margin-bottom:0;padding:28px 28px 16px}.modal-form-stack{display:flex;flex:1 1;flex-direction:column;min-height:0}.modal-body-scroll{-webkit-overflow-scrolling:touch;flex:1 1;min-height:0;overflow-y:auto;padding:8px 28px 24px}.modal-content.modal-content--stacked .modal-actions-footer{background:#fff;border-top:1px solid #f1f5f9;flex-shrink:0;margin-top:0;padding:16px 28px 28px}.mobile-top-bar-add-btn.device-groups-top-add{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 12px #8b5cf659}.detail-content::-webkit-scrollbar,.device-checkbox-list::-webkit-scrollbar,.group-cards::-webkit-scrollbar{width:6px}.detail-content::-webkit-scrollbar-track,.device-checkbox-list::-webkit-scrollbar-track,.group-cards::-webkit-scrollbar-track{background:#0000}.detail-content::-webkit-scrollbar-thumb,.device-checkbox-list::-webkit-scrollbar-thumb,.group-cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.detail-content::-webkit-scrollbar-thumb:hover,.device-checkbox-list::-webkit-scrollbar-thumb:hover,.group-cards::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width:1200px){.device-groups-container{grid-template-columns:340px 1fr}}@media (max-width:1023px){.device-groups-page{padding:16px 16px max(16px,env(safe-area-inset-bottom,0px))}.device-groups-page .page-header h1{font-size:26px}.create-btn-desktop-only{display:none!important}.device-groups-container{display:block;gap:16px;width:100%}.device-groups-list,.group-detail{max-width:100%;width:100%}.device-groups-page .is-hidden-mobile{display:none!important}.device-groups-list{max-height:none}.group-cards{display:grid;grid-template-columns:1fr}.group-card{padding:20px 18px}.delete-btn-small{opacity:1;transform:scale(1)}.group-detail-back-bar{background:#fff;border-bottom:1px solid #f1f5f9;flex-shrink:0;margin:0;padding:12px 16px;position:sticky;top:0;z-index:3}.group-detail-back{align-items:center;background:#0000;border:none;border-radius:10px;color:#8b5cf6;cursor:pointer;display:inline-flex;font-family:inherit;font-size:15px;font-weight:600;gap:8px;margin:0;min-height:44px;padding:8px 12px 8px 4px}.group-detail-back:active{background:#8b5cf614}.info-grid{grid-template-columns:1fr}}@media (max-width:768px){.header-content{flex-direction:column;gap:20px}.create-btn:not(.create-btn-desktop-only){justify-content:center;width:100%}.page-header h1{font-size:26px}}@media (max-width:640px){.modal-overlay{align-items:flex-end;padding:0}.modal-content.modal-content--stacked{border-radius:24px 24px 0 0;max-height:min(92dvh,920px);max-width:100%;width:100%}.modal-content.modal-content--stacked.modal-content-large{max-width:100%}.modal-body-scroll,.modal-content.modal-content--stacked .modal-header{padding-left:20px;padding-right:20px}.modal-content.modal-content--stacked .modal-actions-footer{flex-wrap:wrap;gap:10px;justify-content:stretch;padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px))}.modal-actions-footer .cancel-btn,.modal-actions-footer .submit-btn{flex:1 1;justify-content:center;min-width:0}.device-checkbox-list{box-sizing:border-box;max-height:min(42vh,320px);max-width:100%;width:100%}.device-checkbox-item{align-items:center;box-sizing:border-box;min-height:48px;width:100%}.device-checkbox-label{min-width:0}}@media (hover:none){.group-card:hover{background:linear-gradient(135deg,#fafbfc,#f8fafc);border-color:#f1f5f9;box-shadow:none;transform:none}.group-card:hover:before{opacity:0}.group-card.active:hover:before{opacity:1}}.users-layout{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1.1fr 1.4fr}.users-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 4px 20px #0000000f;padding:20px 22px}.users-card-primary{border-top:4px solid #8b5cf6}.users-card h2{color:#1a1d21;font-size:18px;font-weight:700;margin:0 0 14px}.users-form{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1.2fr 1.2fr .9fr auto}.users-form input,.users-form select{background:#fafbfc;border:2px solid #e2e8f0;border-radius:12px;color:#0f172a;font-size:14px;padding:12px 14px}.users-form input:focus,.users-form select:focus{background:#fff;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61f;outline:none}.users-form button{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:0;border-radius:12px;box-shadow:0 6px 18px #8b5cf659;color:#fff;cursor:pointer;font-weight:600;padding:12px 18px;transition:all .2s ease}.users-form button:hover{box-shadow:0 10px 24px #8b5cf673;transform:translateY(-1px)}.users-loading{color:#64748b;font-weight:500;padding:40px 20px;text-align:center}.users-table{grid-gap:8px;display:grid;gap:8px;width:100%}.users-row{grid-gap:12px;align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:14px;display:grid;gap:12px;grid-template-columns:80px 1fr 140px 1.8fr;padding:12px 14px}.users-head{background:#0000;border:none;color:#64748b;font-weight:700}.users-row input,.users-row select{background:#fff;border:2px solid #e2e8f0;border-radius:10px;color:#0f172a;font-size:14px;padding:10px 12px;width:100%}.users-row input:focus,.users-row select:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61f;outline:none}.users-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.users-actions button{border:0;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;padding:8px 12px}.users-actions button.secondary{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b}.users-actions button.danger{background:linear-gradient(135deg,#ef44441f,#ef44440f);border:1px solid #ef44444d;color:#dc2626}.users-actions button.danger:hover{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.users-actions button:disabled{cursor:not-allowed;opacity:.5}.mobile-top-bar-add-btn.users-top-add{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 12px #8b5cf659}.users-card-top-row{align-items:flex-start;display:flex;gap:14px}.users-avatar{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;box-shadow:0 4px 12px #8b5cf640;color:#fff;display:flex;flex-shrink:0;font-size:18px;font-weight:800;height:48px;justify-content:center;width:48px}.users-card-body{flex:1 1;min-width:0}.users-card-body .group-card-header{margin-bottom:4px}.users-card-body h3{margin:0 0 8px}.users-card-icon-desktop{display:flex}.users-card-actions{border-top:1px solid #f1f5f9;display:none;gap:10px;margin-top:14px;padding-top:14px}.users-card-action-btn{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;color:#475569;cursor:pointer;flex:1 1;font-family:inherit;font-size:14px;font-weight:600;min-height:44px}.users-card-action-btn--primary{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;box-shadow:0 4px 14px #8b5cf64d;color:#fff}.users-card-action-btn--danger{background:linear-gradient(135deg,#ef44441f,#ef44440f);border-color:#ef444459;color:#dc2626}.users-card-action-btn:disabled{cursor:not-allowed;opacity:.45}.users-modal-form .form-group input,.users-modal-form .form-group select{box-sizing:border-box;width:100%}@media (max-width:1100px){.users-layout{grid-template-columns:1fr}}@media (min-width:641px){.users-list-card .users-avatar{display:none}.users-list-card .users-card-icon-desktop{display:flex}}@media (max-width:640px){.users-page .users-list-card{padding-bottom:16px}.users-list-card .users-card-icon-desktop,.users-list-card .users-delete-corner{display:none}.users-card-actions{display:flex}.users-modal-form{padding-bottom:8px}}@media (max-width:900px){.users-form{grid-template-columns:1fr}.users-row{grid-auto-rows:auto;grid-template-columns:minmax(0,1fr)}.users-actions{justify-content:flex-start}}.companies-page .detail-icon,.companies-page .group-icon-wrapper{color:#8b5cf6}.companies-slug{color:#64748b;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.companies-page .modal-content:not(.modal-content--stacked){-webkit-overflow-scrolling:touch;max-height:85vh;overflow:auto;overscroll-behavior:contain;will-change:scroll-position}.companies-form-grid{grid-gap:18px;display:grid;gap:18px;grid-template-columns:1fr 1fr}.companies-form-grid .form-group{margin-bottom:0}.companies-full{grid-column:1/-1}.companies-modal-fieldset{border:none;margin:0;min-width:0;padding:0}.companies-modal-error{align-items:flex-start;background:linear-gradient(135deg,#ef44441f,#ef44440f);border:1px solid #ef444438;border-radius:12px;box-sizing:border-box;color:#b91c1c;display:flex;flex-shrink:0;font-size:14px;font-weight:500;gap:10px;line-height:1.45;margin:0 28px 16px;padding:12px 14px}.companies-modal-error__text{flex:1 1;min-width:0}.companies-modal-error__dismiss{background:#ef44441f;border:none;border-radius:8px;color:#b91c1c;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:18px;line-height:1;margin:-4px -6px -4px 0;padding:4px 8px}.companies-modal-error__dismiss:hover{background:#ef444433}@media (max-width:640px){.companies-modal-error{margin-left:20px;margin-right:20px}}.companies-create-submit{align-items:center;display:inline-flex;gap:10px;justify-content:center}.companies-btn-spinner{animation:companies-spin .65s linear infinite;border:2px solid #ffffff59;border-radius:50%;border-top-color:#fff;box-sizing:border-box;flex-shrink:0;height:18px;width:18px}@keyframes companies-spin{to{transform:rotate(1turn)}}.companies-company-modal .close-btn:disabled{cursor:not-allowed;opacity:.45;transform:none}.companies-page .modal-overlay{-webkit-backdrop-filter:none;backdrop-filter:none}@media (max-width:768px){.companies-form-grid{gap:16px;grid-template-columns:1fr}}@media (max-width:640px){.companies-page .modal-body-scroll .companies-form-grid{gap:14px}.companies-logo-field{align-items:stretch}.companies-logo-upload{align-self:stretch}.companies-logo-upload__btn{box-sizing:border-box;width:100%}}.mobile-top-bar-add-btn.companies-top-add{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 12px #8b5cf659}.companies-field-label{color:#334155;display:block;font-size:14px;font-weight:600;margin-bottom:6px}.companies-logo-field{display:flex;flex-direction:column;gap:10px}.companies-logo-upload{align-items:center;align-self:flex-start;cursor:pointer;display:inline-flex}.companies-logo-upload__btn{align-items:center;background:#f8fafc;border:2px dashed #cbd5e1;border-radius:12px;color:#475569;display:inline-flex;font-size:15px;font-weight:600;justify-content:center;min-height:44px;padding:0 18px}.companies-logo-picked{align-items:center;color:#64748b;display:flex;flex-wrap:wrap;font-size:13px;gap:10px}.companies-logo-picked__name{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.companies-logo-remove{background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;font-family:inherit;font-weight:600;min-height:40px;padding:0 14px}.companies-admin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.companies-admin-creds-body{padding:0 0 8px}.companies-creds-block{margin-top:16px}.companies-creds-label{color:#64748b;display:block;font-size:12px;font-weight:700;letter-spacing:.4px;margin-bottom:8px;text-transform:uppercase}.companies-creds-row{align-items:stretch;display:flex;flex-direction:column;gap:10px}.companies-creds-value{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;color:#0f172a;display:block;font-size:15px;padding:12px 14px;word-break:break-all}.companies-creds-row--password .companies-creds-password{-webkit-overflow-scrolling:touch;background:#0f172a;border:1px solid #1e293b;border-radius:10px;color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.45;margin:0;max-height:180px;overflow:auto;padding:12px 14px;white-space:pre-wrap;word-break:break-all}.companies-copy-btn{background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#7c3aed;cursor:pointer;font-family:inherit;font-weight:600;min-height:44px;padding:0 16px}.companies-admin-creds-modal .modal-actions .submit-btn{width:100%}@media (min-width:641px){.companies-creds-row{align-items:flex-start;flex-direction:row}.companies-copy-btn{align-self:stretch;flex-shrink:0;min-width:100px}.companies-admin-creds-modal .modal-actions .submit-btn{width:auto}}.company-logo{background:#ffffff0f;border:1px solid #94a3b840;display:inline-block;object-fit:contain}.company-logo--list{border-radius:10px;height:36px;width:36px}.company-logo--detail{border-radius:14px;height:54px;width:54px}
/*# sourceMappingURL=main.8bdd4fc2.css.map*/