*{margin:0;padding:0;box-sizing:border-box}:root{--dark-background: rgba(28, 32, 39, 1);--dark-background-card: rgba(47, 51, 58, 1);--dark-text: rgba(255, 255, 255, 1);--light-background: #f8f9fa;--light-background-card: rgba(234, 238, 246, 1);--light-text: #1a1a1a;--primary-blue: rgba(65, 99, 188, 1);--status-ok: #28a745;--status-slow: #ffc107;--status-down: #dc3545;--border-color: #919ca7;--gray-text: rgba(130, 130, 130, 1);--status-circle-scale: 1.15;--status-circle-size: clamp(6rem, 13vw, 9rem);--status-circle-gap-ratio: .14;--status-circle-group-gap: clamp(.95rem, 4vw, 1.75rem);--status-circle-padding-ratio: .18;--status-circle-dot-ratio: .32;--status-circle-icon-ratio: .42;--status-circle-icon-slot-ratio: .65;--status-circle-text-ratio: .13;--status-circle-line-clamp: 3}html,body{height:100%;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--light-background);color:var(--light-text);line-height:1.5;transition:background-color .3s ease,color .3s ease;min-height:100vh}.dark{background:var(--dark-background);color:var(--dark-text)}.app{padding:40px 20px 20px;min-height:100vh;display:flex;flex-direction:column;gap:10px}.header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 0;gap:20px;flex-shrink:0;flex-wrap:wrap}.header-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;flex:1;min-width:0}.header-box{display:flex;flex-direction:row;align-items:center;gap:15px;flex-wrap:wrap}.logo{flex-shrink:0}.logo-img{max-width:100%;height:auto;width:clamp(200px,25vw,287px)}.server-status{padding:10px 15px;display:flex;flex-direction:row;align-items:center;gap:15px;border:1px solid var(--border-color);border-radius:20px;transition:all .3s ease;min-width:0;flex:1;max-width:600px;background:var(--light-background);cursor:pointer}.server-status__log{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:clamp(14px,1.5vw,20px);color:#6c757d;min-width:0;flex:1}.server-status__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:inherit}.dark .server-status{background-color:var(--dark-background-card);color:var(--dark-text)}.dark .server-status__log{color:var(--dark-text)}.status-indicator{width:8px;height:8px;background:var(--status-ok);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}.date_time{display:flex;flex-direction:row;align-items:center;gap:5px;font-size:clamp(14px,1.5vw,20px);color:#6c757d;white-space:nowrap;flex-shrink:0}.dark .date_time{color:var(--dark-text)}.color-change__btn{border:none;background:none;cursor:pointer;transition:transform .2s ease;flex-shrink:0;padding:5px}.color-change__btn:hover{transform:scale(1.1)}.color-change__btn--img{width:clamp(50px,6vw,70px);height:auto}.logout-btn{padding:8px 16px;border-radius:20px;border:1px solid var(--border-color);background:var(--light-background);color:var(--light-text);cursor:pointer;transition:background .2s ease,transform .2s ease}.logout-btn:hover{background:#4163bc1f;transform:translateY(-1px)}.dark .logout-btn{background:var(--dark-background-card);color:var(--dark-text);border-color:#ffffff3d}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.admin{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-bottom:15px;flex-shrink:0}.admin-box{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;cursor:pointer}.admin-checkbox{width:18px;height:18px;border:1px solid var(--gray-text);border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:relative;background:transparent;transition:all .2s ease;flex-shrink:0}.admin-checkbox:checked{border:1px solid var(--gray-text)}.admin-checkbox:checked:before{content:"";position:absolute;inset:2px;background:var(--primary-blue);border-radius:1px}.admin-checkbox:focus{outline:2px solid var(--primary-blue);outline-offset:2px}.admin-text{font-weight:400;font-size:clamp(14px,1.5vw,18px);line-height:1.67;color:var(--gray-text);transition:color .3s ease;white-space:nowrap}.dark .admin-text{color:var(--dark-text)}.main-content{flex:1;display:flex;flex-direction:column;min-height:0;gap:10px}.services-container{flex:1;overflow-y:auto;min-height:300px;max-height:60vh;padding:5px;margin-bottom:0;border:1px solid var(--border-color);border-radius:12px;background:var(--light-background-card)}.dept-banner{padding:12px 18px;border-radius:12px;background:#4163bc14;border:1px solid rgba(65,99,188,.24);color:var(--light-text)}.dark .dept-banner{background:#4163bc2e;border-color:#ffffff3d;color:var(--dark-text)}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));gap:20px}.service-card{display:flex;flex-direction:column;gap:25px;background:var(--light-background-card);border-radius:12px;padding:25px;box-shadow:0 2px 8px #0000001a;text-align:center;position:relative;transition:all .3s ease;min-height:240px}.dark .service-card{background-color:var(--dark-background-card)}.maintenance-banner{position:absolute;inset:0;background:#15151980;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:600;color:#fff;font-size:clamp(12px,1.5vw,14px);z-index:2;padding:15px;text-align:center}.maintenance-container{justify-content:center;background-color:var(--primary-blue);padding:clamp(6px,1.5vw,10px);border-radius:5px}.maintenance-container__text{font-size:clamp(14px,2vw,18px);white-space:nowrap}.maintenance-text{font-size:clamp(14px,2.5vw,20px);width:min(95%,350px);text-align:center;line-height:1.3}.title-container{display:flex;align-items:center;justify-content:center;position:relative;min-height:30px}.service-title{font-size:clamp(18px,2.5vw,24px);font-weight:600;text-align:center;transition:color .3s ease;margin:0;padding:0 10px}.dark .service-title{color:var(--dark-text)}.settings{position:absolute;right:0;visibility:hidden;width:clamp(25px,4vw,40px);height:auto}.settings.visible{visibility:visible}.status-circles{--status-circle-size-effective: calc(var(--status-circle-size) * var(--status-circle-scale, 1));display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--status-circle-size-effective)),1fr));justify-items:center;align-items:center;gap:var(--status-circle-group-gap);padding-bottom:5px;min-height:150px;max-width:100%;container-type:inline-size}.status-circle{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .2s ease;flex-shrink:0;overflow:visible;border:none;background:transparent;padding:0;aspect-ratio:1 / 1;container-type:inline-size;--circle-size: var(--status-circle-size-effective, var(--status-circle-size));--circle-gap: calc(var(--circle-size) * var(--status-circle-gap-ratio, .12));--circle-padding: calc(var(--circle-size) * var(--status-circle-padding-ratio, .16));--circle-dot-size: calc(var(--circle-size) * var(--status-circle-dot-ratio, .28));--circle-icon-size: calc(var(--circle-size) * var(--status-circle-icon-ratio, .36));--circle-icon-slot-size: calc(var(--circle-size) * var(--status-circle-icon-slot-ratio, .58));--circle-text-size: calc(var(--circle-size) * var(--status-circle-text-ratio, .11));gap:var(--circle-gap);width:min(var(--circle-size),100%)}.status-circle:focus{outline:2px solid var(--primary-blue);border-radius:8px}.status-circle__visual{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;transform:scale(var(--status-circle-scale, 1));transform-origin:center;transition:transform .2s ease}.status-circle__badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--circle-gap);width:100%;height:100%;min-width:0;border-radius:50%;transition:transform .2s ease,background-color .2s ease;padding:var(--circle-padding);text-align:center;overflow:hidden}.status-circle__badge--active{box-shadow:0 12px 25px #0000002e}.status-circle__icon-slot{display:flex;align-items:center;justify-content:center;width:100%;height:var(--circle-icon-slot-size)}.status-circle__dot{display:block;font-size:var(--circle-dot-size);line-height:1;margin-top:calc(var(--circle-size) * -.04)}.status-circle__icon{display:block;width:var(--circle-icon-size);height:var(--circle-icon-size);-o-object-fit:contain;object-fit:contain;flex-shrink:0;max-width:100%}.status-circle__icon svg{width:100%;height:100%}.status-circle__text{display:-webkit-box;width:100%;min-width:0;max-width:min(100%,calc(var(--circle-size) - 2 * var(--circle-padding)));max-height:none;text-align:center;font-size:var(--circle-text-size);font-weight:600;line-height:1.2;text-transform:none;white-space:normal;word-break:break-word;overflow-wrap:anywhere;overflow:hidden;text-wrap:balance;margin:0;-webkit-box-orient:vertical;-webkit-line-clamp:var(--status-circle-line-clamp, 3);line-clamp:var(--status-circle-line-clamp, 3)}.status-circle__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.status-circle:disabled{cursor:not-allowed}.event-log{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;border:1px solid #e1e5e9;flex-shrink:0;transition:all .3s ease;max-height:200px;overflow-y:auto;margin-top:10px}.dark .event-log{background:var(--dark-background)}.event-log h3{margin:0 0 10px;color:var(--light-text);font-size:clamp(18px,2.5vw,24px);font-weight:600;transition:color .3s ease}.event-item-container{display:flex;flex-direction:column}.dark .event-log h3{color:var(--dark-text)}.event-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #e1e5e9;gap:8px}.event-item:last-child{border-bottom:none}.event-item p{margin:0;font-size:clamp(12px,1.5vw,16px);color:var(--light-text);transition:color .3s ease;flex:1;min-width:0}.dark .event-item p{color:var(--dark-text)}.event-date{font-size:clamp(10px,1.2vw,14px);color:var(--gray-text);white-space:nowrap;flex-shrink:0}@media (min-width: 1400px){.app{padding:50px 30px 30px;gap:25px}.services-grid{grid-template-columns:repeat(auto-fit,minmax(650px,1fr));gap:25px}.service-card{gap:25px;padding:25px;min-height:280px}}@media (max-width: 1399px) and (min-width: 1200px){.header-box{gap:12px}.server-status{gap:12px;padding:8px 12px}}@media (max-width: 1199px){.services-grid{grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:20px}.admin{justify-content:flex-start}}@media (max-width: 1023px){.app{padding:30px 15px 15px;gap:15px}.header{gap:15px}.header-container{justify-content:space-between;order:2}.logo{order:1;text-align:center}.services-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:15px}.service-card{padding:20px;gap:20px;min-height:200px}.server-status{flex-direction:row;justify-content:space-between}}@media (max-width: 768px){.status-circles{min-height:120px}.service-card{padding:20px;gap:20px;min-height:210px}}@media (max-width: 480px){.status-circles{min-height:100px}.service-card{padding:15px;gap:15px;min-height:190px}.services-container{max-height:50vh}}@media (max-width: 360px){.app{padding:15px 8px 8px;gap:8px}.service-card{padding:10px;min-height:130px;gap:10px}.service-title{font-size:16px}.status-circles{min-height:70px}.event-log{max-height:80px;padding:8px}}@media (max-height: 700px) and (orientation: landscape){.app{padding:20px 10px 10px;gap:10px;min-height:100vh;height:auto}.header{margin-bottom:10px;padding:8px 0}.services-container{min-height:150px;margin-bottom:5px}.service-card{min-height:140px;max-height:220px;gap:10px;padding:10px}.status-circles{min-height:60px}.event-log{max-height:80px;padding:8px}.event-item{padding:4px 0}.event-item p{font-size:11px}.event-date{font-size:10px}}@media (orientation: landscape) and (max-height: 600px){.services-container{max-height:45vh}.service-card{padding:15px;gap:15px;min-height:140px}.status-circles{justify-content:center}}@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px){.header{display:flex;align-items:center;justify-content:space-between}.header-container{display:flex;align-items:center;margin-left:auto;gap:30px}.header-box{display:flex;flex-direction:row;justify-content:space-between;gap:20px}.services-grid{gap:20px}.event-log{display:flex;flex-direction:row;gap:20px;justify-content:space-between;max-height:150px}.event-log h3{width:25%;font-size:18px;margin-bottom:0}.event-item-container{display:flex;flex-direction:column;flex:1}.event-item{display:flex;flex-direction:row;justify-content:space-between;gap:10px}}.services-container::-webkit-scrollbar,.event-log::-webkit-scrollbar,.status-circles::-webkit-scrollbar{width:4px;height:4px}.services-container::-webkit-scrollbar-track,.event-log::-webkit-scrollbar-track,.status-circles::-webkit-scrollbar-track{background:transparent}.services-container::-webkit-scrollbar-thumb,.event-log::-webkit-scrollbar-thumb,.status-circles::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.services-container::-webkit-scrollbar-thumb:hover,.event-log::-webkit-scrollbar-thumb:hover,.status-circles::-webkit-scrollbar-thumb:hover{background:var(--primary-blue)}.no-services{padding:24px;border-radius:12px;border:1px dashed var(--border-color);text-align:center;color:var(--gray-text);background:#eaeef680}.no-services h2{margin-bottom:8px}.provision-card{background:var(--light-background-card);border-radius:12px;border:1px solid var(--border-color);padding:24px;max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:16px;align-items:stretch}.dark .provision-card{background:var(--dark-background-card);border-color:#ffffff3d}.provision-form{display:flex;flex-direction:column;gap:12px}.provision-input{padding:10px 14px;border-radius:8px;border:1px solid var(--border-color);font-size:16px}.provision-input:disabled{opacity:.6}.provision-submit{padding:12px;border-radius:8px;border:none;background:var(--primary-blue);color:#fff;font-weight:600;cursor:pointer;transition:opacity .2s ease,transform .2s ease}.provision-submit:disabled{opacity:.6;cursor:not-allowed}.provision-submit:not(:disabled):hover{transform:translateY(-1px)}.loading-container{display:flex;justify-content:center;align-items:center;height:50vh;flex-direction:column;gap:20px}.loading-container h2{color:var(--light-text);font-size:clamp(18px,3vw,24px)}.dark .loading-container h2{color:var(--dark-text)}.error-banner{background:#f8d7da;color:#721c24;padding:10px;border-radius:6px;margin-bottom:15px;border:1px solid #f5c6cb;font-size:clamp(12px,1.5vw,14px)}.dark .error-banner{background:#2d1b1f;color:#f8d7da;border-color:#842029}html,body,.app,.dark,.light{background-attachment:fixed}@media (max-width: 600px){.status-circle__text{--status-circle-line-clamp: 2}}@container (min-width: 120px){.status-circle__text{--status-circle-line-clamp: 3}}@container (min-width: 150px){.status-circle__text{--status-circle-line-clamp: 4}}.app{--status-circle-size: clamp(5rem, 10vw, 7.5rem)}@media (max-width: 768px){.app{--status-circle-size: clamp(4.5rem, 32vw, 7rem);--status-circle-group-gap: clamp(.5rem, 6vw, 1.25rem)}}@media (max-width: 480px){.app{--status-circle-size: clamp(3.5rem, 48vw, 5.5rem);--status-circle-group-gap: clamp(.5rem, 7vw, 1rem)}}@media (max-height: 700px) and (orientation: landscape){.app{--status-circle-size: clamp(3.25rem, 18vw, 5.5rem);--status-circle-group-gap: clamp(.4rem, 4vw, .9rem)}}@media (orientation: landscape) and (max-height: 600px){.app{--status-circle-size: clamp(3rem, 16vw, 5rem);--status-circle-group-gap: clamp(.35rem, 3.5vw, .8rem)}}@media (orientation: landscape) and (min-height: 701px) and (max-height: 900px){.app{--status-circle-size: clamp(4rem, 7vw, 6rem);--status-circle-group-gap: clamp(.5rem, 3vw, 1.1rem);padding:25px 15px 15px;gap:10px}.service-card{padding:15px;gap:15px;min-height:175px}.status-circles{min-height:85px}.services-grid{gap:12px}.event-log{max-height:100px;padding:10px}}.status-circle__text{max-height:none;margin:0;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--status-circle-line-clamp, 3);line-clamp:var(--status-circle-line-clamp, 3);overflow:hidden;min-width:0}.status-circle__badge{gap:var(--circle-gap);transition:background-color .2s ease,transform .15s ease;will-change:transform}@container (max-width: 120px){.status-circle__icon-slot{height:calc(var(--circle-size) * .5)}}:root{--status-circle-padding-ratio: .08;--status-circle-icon-slot-ratio: .44;--status-circle-gap-ratio: .06;--status-circle-text-ratio: .095}@container (max-width: 120px){.status-circle__text{--status-circle-line-clamp: 2}.status-circle{--circle-icon-slot-size: calc(var(--circle-size) * .4)}}@container (min-width: 160px){.status-circle__text{--status-circle-line-clamp: 4}.status-circle{--circle-icon-slot-size: calc(var(--circle-size) * .48)}}.status-circle__badge{display:grid;grid-template-rows:var(--circle-icon-slot-size) 1fr;align-items:center;justify-items:center;gap:var(--circle-gap);padding:var(--circle-padding);border-radius:50%;overflow:hidden;transition:background-color .2s ease,transform .15s ease;will-change:transform}.status-circle__text{align-self:start}.status-circle__icon-slot{align-self:center}.status-circle:hover{transform:none}.status-circle:hover .status-circle__badge{transform:scale(1.03)}.status-circle__dot{margin-top:0}.app-loading{display:flex;justify-content:center;align-items:center;height:100vh;background:#f8f9fa}.loading-spinner{text-align:center}.loading-spinner h2{color:#333;margin-bottom:20px}