@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css";@media (max-width: 768px){.app-layout{grid-template-columns:1fr}.main-content{padding-left:0!important}.sidebar{position:fixed;inset:0 auto 0 0;width:clamp(240px,80vw,320px);transform:translate(-100%);box-shadow:2px 0 10px #0000001a;z-index:1000;transition:transform .3s ease}.sidebar.active{transform:translate(0)}.sidebar.collapsed{transform:translate(-100%);width:clamp(240px,80vw,320px)}.mobile-toggle{display:block!important}.user-name{display:none}.user-dropdown-menu{right:-10px;width:max-content;min-width:180px}.stats-overview{grid-template-columns:1fr}.stat-item{border-right:none;border-bottom:1px solid var(--cf-border-light);padding:1rem;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left}.avatar-upload-container{grid-template-columns:1fr;place-items:center;text-align:center}.device-card{grid-template-columns:1fr;gap:.5rem}.device-actions{display:grid;justify-content:end}.form-actions-simple{grid-auto-flow:row}.oauth-authorize-modal{padding:15px}.app-footer{margin-left:0!important}.grid-2-1,.form-row{grid-template-columns:1fr!important}.stats-overview{grid-template-columns:repeat(2,1fr)!important}}:root{--cf-orange: #F38020;--cf-blue: #0051C3;--cf-blue-hover: #003681;--cf-bg: #F4F4F4;--cf-sidebar-bg: #FFFFFF;--cf-card-bg: #FFFFFF;--cf-text-primary: #36393A;--cf-text-secondary: #757575;--cf-border: #D9D9D9;--cf-border-light: #EAEAEA;--cf-danger: #D0021B;--cf-success: #05A081;--cf-warning: #FFBF00;--sidebar-width: 240px;--header-height: 60px}*{margin:0;padding:0;box-sizing:border-box;font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,ui-monospace}body{background-color:var(--cf-bg);color:var(--cf-text-primary);line-height:1.5;font-size:14px}.auth-wrapper{display:flex;align-items:center;justify-content:center;background-color:#fff}.cf-login-card{width:100%;max-width:400px;padding:2rem;background:#fff}.cf-logo{text-align:center;font-size:1.5rem;font-weight:600;margin-bottom:2rem;color:var(--cf-text-primary)}.cf-logo i{color:var(--cf-orange)}.cf-card-body h2{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;text-align:center}.app-layout{display:flex;max-height:95dvh}.sidebar{width:var(--sidebar-width);background:var(--cf-sidebar-bg);border-right:1px solid var(--cf-border);display:flex;flex-direction:column;position:fixed;height:calc(100dvh - 62.5px);transition:width .3s ease;margin-top:60px;z-index:100;overflow-x:hidden}.sidebar-header{height:var(--header-height);display:flex;align-items:center;padding:0 1.5rem;border-bottom:1px solid var(--cf-border-light)}.sidebar-logo{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:.5rem;transition:opacity .3s ease}.sidebar-logo i{color:var(--cf-orange);font-size:1.5rem}.sidebar-toggle{background:none;border:none;color:var(--cf-text-secondary);cursor:pointer;padding:.5rem;border-radius:3px;transition:all .2s;margin-left:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sidebar-toggle:hover{background-color:#f8f8f8;color:var(--cf-text-primary)}.sidebar.collapsed{width:60px}.sidebar.collapsed .sidebar-logo span,.sidebar.collapsed .nav-section-label,.sidebar.collapsed .nav-link span{display:none}.sidebar.collapsed .sidebar-toggle i{transform:rotate(180deg)}.sidebar.collapsed .nav-link{justify-content:center;padding:.75rem}.sidebar.collapsed .nav-link i{margin-right:0;font-size:1.1rem}.sidebar-nav{flex:1;overflow-x:hidden}.nav-section-label{padding:0 1.5rem;margin-bottom:.5rem;margin-top:1rem;font-size:.75rem;text-transform:uppercase;color:var(--cf-text-secondary);font-weight:600;letter-spacing:.05em;transition:opacity .3s ease}.nav-link{display:flex;align-items:center;padding:.6rem 1.5rem;color:var(--cf-text-primary);text-decoration:none;transition:background .2s,color .2s;font-weight:500;cursor:pointer}.nav-link i{width:20px;margin-right:.75rem;color:var(--cf-text-secondary);text-align:center;transition:margin-right .3s ease}.nav-link:hover{background-color:#f8f8f8;color:var(--cf-blue)}.nav-link:hover i{color:var(--cf-blue)}.nav-link.active{background-color:#f2f7fc;color:var(--cf-blue);border-left-color:var(--cf-blue)}.nav-link.active i{color:var(--cf-blue)}.sidebar-footer{padding:.2rem;border-top:1px solid var(--cf-border-light);font-size:.75rem;color:var(--cf-text-secondary);transition:opacity .3s ease}.main-wrapper{flex:2;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s ease}.sidebar.collapsed+.main-wrapper{margin-left:60px}.topbar{height:var(--header-height);background:#fff;border-bottom:1px solid var(--cf-border);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;position:sticky;top:0;z-index:90}.breadcrumb{font-weight:600;font-size:1.1rem;color:var(--cf-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:70vw}.mobile-toggle{display:none;font-size:1.25rem;cursor:pointer;color:var(--cf-text-secondary)}.user-menu,.user-info-dropdown{position:relative}.user-info-trigger{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:4px;cursor:pointer;transition:background-color .2s}.user-info-trigger:hover{background-color:#f8f8f8}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--cf-border-light)}.user-name{font-size:.9rem;font-weight:500;color:var(--cf-text-primary)}.user-info-trigger i{font-size:.8rem;color:var(--cf-text-secondary);transition:transform .2s}.user-info-dropdown.active .user-info-trigger i{transform:rotate(180deg)}.user-dropdown-menu{position:absolute;top:100%;right:0;width:200px;background:#fff;border:1px solid var(--cf-border);border-radius:4px;box-shadow:0 4px 12px #0000001a;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000}.user-info-dropdown.active .user-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:var(--cf-text-primary);text-decoration:none;cursor:pointer;transition:background-color .2s;font-size:.9rem}.dropdown-item:hover{background-color:#f8f8f8;color:var(--cf-blue)}.dropdown-item i{width:16px;text-align:center;color:var(--cf-text-secondary)}.dropdown-item:hover i{color:var(--cf-blue)}.dropdown-divider{height:1px;background-color:var(--cf-border-light);margin:.25rem 0}.logout-btn{color:var(--cf-danger)}.logout-btn:hover{background-color:#fff0f0;color:var(--cf-danger)}.logout-btn i{color:var(--cf-danger)}.avatar-upload-container{display:flex;align-items:flex-start;gap:20px;margin-bottom:10px}.avatar-preview{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #e0e0e0}.avatar-preview img{width:100%;height:100%;object-fit:cover}.avatar-upload-controls{flex:1;display:flex;flex-direction:column;gap:10px}.avatar-file-input{display:none}.form-help{font-size:12px;color:#666;margin-top:5px}.main-content{flex:1;padding-top:0rem;padding-left:4rem;background:var(--cf-card-bg);max-height:calc(100dvh - 95px);overflow-y:scroll}.page{display:none}.page.active{display:block}.cf-card{margin-bottom:1.5rem;box-shadow:0 1px 2px #00000005}.card-header{padding:1rem 1.5rem;border-bottom:1px solid var(--cf-border-light);display:flex;justify-content:space-between;align-items:center}.card-header h3{font-size:1rem;font-weight:600;color:var(--cf-text-primary);margin:0}.card-subtitle{font-size:.85rem;color:var(--cf-text-secondary);margin-top:.25rem}.card-body{padding:1.5rem}.stats-overview{display:grid;grid-template-columns:repeat(3,1fr);padding:1.5rem 0}.stat-item{padding:0 2rem;border-right:1px solid var(--cf-border-light);text-align:center}.stat-item:last-child{border-right:none}.stat-label{display:block;font-size:.85rem;color:var(--cf-text-secondary);margin-bottom:.5rem;text-transform:uppercase;font-weight:600}.stat-value{font-size:2rem;font-weight:700;color:var(--cf-text-primary)}.stat-desc{font-size:.85rem;color:var(--cf-text-secondary);margin-left:.25rem}.cf-form-layout{max-width:800px}.form-group{margin-bottom:1.25rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--cf-text-primary);font-size:.9rem}.form-group input,.form-group textarea,.form-group select{width:100%;padding:.6rem .75rem;border:1px solid var(--cf-text-secondary);border-radius:4px;font-size:.9rem;font-family:inherit;transition:border-color .15s;background:#fff}.form-group input{border-color:#bcbcbc}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--cf-blue);box-shadow:0 0 0 1px var(--cf-blue)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;border-radius:4px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .15s;text-decoration:none;border:1px solid transparent;gap:.5rem}.btn-primary{background-color:var(--cf-blue);color:#fff;border-color:var(--cf-blue)}.btn-primary:hover{background-color:var(--cf-blue-hover);border-color:var(--cf-blue-hover)}.btn-secondary{background-color:#fff;color:var(--cf-blue);border:1px solid var(--cf-border)}.btn-secondary:hover{border-color:var(--cf-text-secondary);background-color:#f8f8f8}.btn-danger{background-color:#fff;color:var(--cf-danger);border:1px solid var(--cf-border)}.btn-danger:hover{background-color:#fff0f0;border-color:var(--cf-danger)}.btn-sm{padding:.3rem .8rem;font-size:.8rem}.btn-full{width:100%}.btn:disabled{background-color:#f4f4f4;color:var(--cf-text-secondary);border-color:var(--cf-border-light);cursor:not-allowed;opacity:.7}.btn-primary:disabled{background-color:#e0e0e0;border-color:#e0e0e0;color:var(--cf-text-secondary)}.btn-secondary:disabled{background-color:#f4f4f4;border-color:var(--cf-border-light);color:var(--cf-text-secondary)}.btn-danger:disabled{background-color:#f4f4f4;border-color:var(--cf-border-light);color:var(--cf-text-secondary)}.projects-grid-cf{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.project-card{background:#fff;border:1px solid var(--cf-border);border-radius:4px;padding:1.5rem;transition:border-color .2s;display:flex;flex-direction:column;height:100%}.project-card:hover{border-color:var(--cf-blue)}.project-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.project-icon{width:40px;height:40px;background:#ebf3fb;color:var(--cf-blue);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.project-title h3{font-size:1rem;margin-bottom:.2rem}.project-category{font-size:.75rem;background:#f4f4f4;padding:2px 6px;border-radius:4px;color:var(--cf-text-secondary)}.project-description{color:var(--cf-text-secondary);font-size:.9rem;margin-bottom:1.5rem;flex:1}.permission-badge{font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:10px}.permission-read{background:#ebf3fb;color:var(--cf-blue)}.permission-write{background:#e3fcef;color:var(--cf-success)}.permission-admin{background:#ffebe6;color:var(--cf-danger)}.cf-table-list{border-top:1px solid var(--cf-border-light)}.device-card{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--cf-border-light);background:transparent;box-shadow:none;border-radius:0;margin:0}.device-card:last-child{border-bottom:none}.device-card:hover{background:#fafafa}.device-name{font-weight:600;font-size:.95rem}.device-details{color:var(--cf-text-secondary);font-size:.85rem;margin-top:2px}.status-badge.current-badge{background:#e3fcef;color:var(--cf-success);padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:600}.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-top:1.5rem}.activity-item{display:flex;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--cf-border-light)}.activity-item:last-child{border-bottom:none}.activity-status{width:10px;height:10px;border-radius:50%;margin-top:6px}.status-success{background:var(--cf-success)}.status-info{background:var(--cf-blue)}.quick-actions-list{display:flex;flex-direction:column;gap:.5rem}.action-btn{background:none;border:1px solid var(--cf-border);padding:.75rem;text-align:left;border-radius:4px;cursor:pointer;font-weight:500;color:var(--cf-text-primary);transition:all .1s}.action-btn:hover{border-color:var(--cf-blue);color:var(--cf-blue);background:#f2f7fc}.app-footer{padding:.4rem;margin-top:auto;margin-left:3.8rem;border-top:1px solid var(--cf-border);background:#fff}.footer-links{justify-content:center;font-size:.85rem;color:var(--cf-text-secondary)}.footer-links a{color:var(--cf-text-secondary);text-decoration:none}.footer-links a:hover{text-decoration:underline}#notification-container{position:fixed;bottom:0;left:0;right:0;z-index:9999999999999999999999;display:flex;flex-direction:column-reverse}.notification{position:relative;color:#fff;padding:.5rem;transform:translateY(100%) scale(.9);opacity:0;transition:all .4s;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:space-between;width:100%}.notification.show{transform:translateY(0) scale(1);opacity:1}.notification.error{background:#d0021b}.notification.success{background:#05a081}.notification-content{flex:1}.notification-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0 .5rem;margin-left:.5rem;line-height:1;opacity:.8;transition:opacity .2s}.notification-close:hover{opacity:1}.modal{display:none;position:fixed;z-index:3000;left:0;top:0;width:100%;height:100%;background-color:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;border:1px solid var(--cf-border);border-radius:4px;width:90%;max-width:500px;box-shadow:0 10px 40px #0000001a}.modal-content .modal-close{color:var(--cf-text-secondary);float:right;font-size:1.5rem;font-weight:700;padding:.5rem 1rem;cursor:pointer}.modal-content .modal-close:hover{color:var(--cf-danger)}.modal-content #modal-body{padding:20px}.modal-content .action{margin-top:1rem;text-align:left}.checkbox{display:flex;align-items:center;cursor:pointer;font-size:.9rem}.checkbox input{display:none}.checkmark{width:16px;height:16px;border:1px solid var(--cf-text-secondary);border-radius:3px;margin-right:.5rem;position:relative}.checkbox input:checked+.checkmark{background:var(--cf-blue);border-color:var(--cf-blue)}.checkbox input:checked+.checkmark:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.forgot-link{color:var(--cf-blue);text-decoration:none;font-size:.9rem}.forgot-link:hover{text-decoration:underline}.oauth-connection-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid var(--cf-border-light);border-radius:4px;margin-bottom:.75rem;transition:border-color .2s}.oauth-connection-item:hover{border-color:var(--cf-blue)}.connection-info{display:flex;align-items:center;gap:.75rem}.connection-info i{font-size:1.25rem;width:24px;text-align:center}.fa-microsoft{color:#0078d4}.fa-google{color:#db4437}.fa-github{color:#333}.provider-name{font-weight:500;color:var(--cf-text-primary)}.connection-status{font-size:.85rem;padding:.25rem .5rem;border-radius:4px;font-weight:500}.connection-status.connected{background:#e3fcef;color:var(--cf-success)}.connection-status.disconnected{background:#f4f4f4;color:var(--cf-text-secondary)}.connection-actions{display:flex;gap:.5rem}.error-message{color:var(--cf-danger);text-align:center;padding:1rem}.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.app-card{background:#fff;border:1px solid var(--cf-border);border-radius:8px;padding:1.5rem;transition:all .3s ease;display:flex;flex-direction:column;height:100%;position:relative}.app-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.app-icon{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}.app-title h3{font-size:1.1rem;margin-bottom:.3rem;color:var(--cf-text-primary)}.app-category{font-size:.75rem;background:#f4f4f4;padding:4px 8px;border-radius:12px;color:var(--cf-text-secondary);font-weight:500}.app-description{color:var(--cf-text-secondary);font-size:.9rem;line-height:1.5;margin-bottom:1.5rem;flex:1}.app-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.app-badge{position:absolute;top:-8px;right:-8px;background:var(--cf-orange);color:#fff;padding:4px 8px;border-radius:4px;font-size:.7rem;font-weight:600}.g-recaptcha{padding-bottom:10px;width:100%;justify-items:center}.oauth-authorize-modal{max-width:450px;margin:0 auto;padding:20px}.oauth-authorize-modal.loading,.oauth-authorize-modal.processing{text-align:center;padding:60px 20px}.oauth-authorize-modal.loading i,.oauth-authorize-modal.processing i{font-size:40px;color:var(--cf-blue);margin-bottom:20px}.oauth-authorize-modal.loading p,.oauth-authorize-modal.processing p{color:var(--cf-text-secondary);font-size:.9rem}.app-card-simple{text-align:center;margin-bottom:30px;padding:25px;background:var(--cf-card-bg);border:1px solid var(--cf-border);border-radius:8px}.app-icon-large{font-size:48px;color:var(--cf-blue);margin-bottom:15px}.app-name{font-size:18px;font-weight:600;color:var(--cf-text-primary);margin-bottom:8px}.app-url{color:var(--cf-text-secondary);font-size:.85rem;margin-bottom:15px;display:flex;align-items:center;justify-content:center;gap:5px}.app-url i{font-size:.8rem}.scopes-list{background:#f8f8f8;padding:12px;border-radius:6px;margin-top:15px}.scopes-list h4{font-size:.9rem;color:var(--cf-text-secondary);margin-bottom:8px;font-weight:500}.scopes-list ul{list-style:none;padding:0;margin:0}.scopes-list li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.85rem;color:var(--cf-text-primary)}.scopes-list li i{color:var(--cf-success);font-size:.8rem}.warning-simple{display:flex;gap:10px;padding:12px;background:#fff8e6;border:1px solid var(--cf-warning);border-radius:6px;margin-bottom:25px;font-size:.85rem;color:#856404}.warning-simple i{color:var(--cf-warning);font-size:1rem;flex-shrink:0;margin-top:2px}.warning-simple p{margin:0;line-height:1.4}.oauth-authorize-modal.error{text-align:center;padding:40px 20px}.oauth-authorize-modal.error i{font-size:48px;color:var(--cf-danger);margin-bottom:20px}.oauth-authorize-modal.error h3{color:var(--cf-danger);margin-bottom:10px}.oauth-authorize-modal.error p{color:var(--cf-text-secondary);font-size:.9rem;margin-bottom:25px}.form-actions-simple{display:flex;gap:10px}.form-actions-simple .btn{flex:1;padding:10px 20px;font-size:.95rem}.form-actions-simple .btn i{margin-right:6px}
