:root{--dash-bg:#eaf3ff;--text-primary:#07173f;--text-secondary:#53698e;--text-label:#23385c;--blue:#1677ff;--green:#20c76c;--red:#f23759;--orange:#ff7200;--glass-bg:rgba(255, 255, 255, var(--light-card-opacity,.75));--glass-border:#ffd033;--shadow-soft:0 10px 30px #1f497d14, 0 0 10px #ffd03326, inset 0 1px 0 #ffffffad;--shadow-hover:0 16px 38px #1f497d21, 0 0 15px #ffd03340;--radius:22px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--text-primary);font-family:Segoe UI Variable,Segoe UI,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.dashboard-page{width:100%;padding:24px 16px;position:relative}.dashboard-container{z-index:1;width:100%;max-width:1540px;margin:0 auto;position:relative}.dashboard-header{-webkit-backdrop-filter:blur(12px)saturate(150%);min-height:110px;box-shadow:var(--shadow-soft);background:#ffffff80;border:1px solid #ffffffd1;border-radius:22px;justify-content:space-between;align-items:center;margin-bottom:18px;padding:22px 28px;display:flex}.dashboard-header-left{align-items:center;gap:18px;display:flex}.dashboard-header-icon{color:#123c82;background:#3577ff1a;border-radius:18px;place-items:center;width:58px;height:58px;display:grid}.dashboard-title{letter-spacing:-.8px;margin:0;font-size:clamp(24px,2vw,31px);font-weight:750}.dashboard-subtitle{color:var(--text-secondary);margin-top:4px;font-size:15px}.dashboard-date{color:#31517e;align-items:center;gap:14px;font-size:15px;line-height:1.6;display:flex}.dashboard-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;display:grid}.dashboard-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px)saturate(145%);min-width:0;box-shadow:var(--shadow-soft);will-change:transform, box-shadow;touch-action:manipulation;padding:24px;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;transform:translateZ(0)}.dashboard-card>*{min-width:0}.dashboard-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.card-weather,.card-birthday,.card-operation,.card-maintenance{grid-column:span 3;min-height:275px}.card-total,.card-presence,.card-absence{grid-column:span 4;min-height:225px}.card-dds{grid-column:span 6;min-height:145px}.card-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.card-title-wrap{align-items:center;gap:13px;display:flex}.card-title{letter-spacing:.1px;color:var(--text-primary);margin:0;font-size:15px;font-weight:700}.card-menu{color:#34547f;cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;width:32px;height:32px;display:grid}.card-menu:hover{background:#ffffff8c}.icon-box{border-radius:14px;place-items:center;width:48px;height:48px;display:grid}.icon-blue{color:var(--blue);background:#1677ff1f}.icon-green{color:var(--green);background:#20c76c21}.icon-red{color:var(--red);background:#f237591f}.icon-orange{color:var(--orange);background:#ff720021}.icon-yellow{color:#b89300;background:#f5c40026}.icon-purple{color:#6747ef;background:#6f53ff1f}.weather-main{align-items:center;gap:20px;display:flex}.weather-icon{color:#7a9bc5;place-items:center;width:86px;height:86px;display:grid}.weather-temp{letter-spacing:-2px;font-size:48px;font-weight:500;line-height:1}.weather-status{margin-top:7px;font-size:18px;font-weight:650}.weather-divider{background:#50709b21;height:1px;margin:20px 0 16px}.weather-info{color:var(--text-secondary);flex-direction:column;gap:11px;font-size:14px;display:flex}.weather-row{align-items:center;gap:10px;display:flex}.big-number{letter-spacing:-2px;margin:12px 0 0;font-size:clamp(50px,5vw,66px);font-weight:750;line-height:1}.big-number-label{color:var(--text-secondary);margin-top:8px;font-size:15px}.donut-wrapper{flex-wrap:wrap;justify-content:space-evenly;align-items:center;gap:10px;display:flex}.donut{--value:0;--accent:#1677ff;--track:#1677ff26;background:conic-gradient(var(--accent) calc(var(--value) * 1%), var(--track) 0);border-radius:50%;flex:0 0 120px;width:120px;height:120px;position:relative;transform:rotate(-90deg)}.donut:after{content:"";background:#f6fbffe0;border-radius:50%;position:absolute;inset:15px;box-shadow:inset 0 0 0 1px #ffffffb3}.donut-content{z-index:2;text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;transform:rotate(90deg)}.donut-number{font-size:35px;font-weight:750;line-height:1}.donut-total{color:var(--text-secondary);margin-top:5px;font-size:13px}.percent-box{text-align:center;border-radius:15px;min-width:110px;padding:12px 14px}.percent-box strong{margin-bottom:6px;font-size:26px;line-height:1;display:block}.percent-box span{font-size:14px}.percent-green{color:#00a844;background:#20c76c1a}.percent-blue{color:#006fe9;background:#1677ff1a}.percent-red{color:#e31b42;background:#f237591a}.percent-yellow{color:#b89300;background:#f5c40026}.percent-orange{color:#f16400;background:#ff72001a}.birthday-list{flex-direction:column;gap:8px;display:flex}.birthday-item{background:#ffffff57;border:1px solid #ffffff80;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:11px 14px;display:flex}.birthday-item.active{background:#ffffff26}.birthday-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:14px;overflow:hidden}.birthday-item.active .birthday-name{font-weight:700}.birthday-day{flex-shrink:0;font-size:14px}.employee-decoration{opacity:.1;color:#0f62d8;pointer-events:none;position:absolute;bottom:26px;right:32px;transform:scale(2.2)}.dds-card-content{justify-content:space-between;align-items:center;gap:20px;height:100%;display:flex}.dds-main{align-items:center;gap:18px;display:flex}.dds-label{text-transform:uppercase;margin-bottom:6px;font-size:13px;font-weight:700}.dds-status{font-size:30px;font-weight:750;line-height:1.1}.dds-theme{color:var(--text-secondary);margin-top:8px;font-size:14px}.dds-arrow{color:#4d6f9c}.dashboard-card,.dashboard-header{animation:.35s both dashboardEnter}@keyframes dashboardEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=1199px){.dashboard-page{padding:20px}.card-weather,.card-presence,.card-birthday,.card-operation,.card-total,.card-absence,.card-maintenance{grid-column:span 6}.card-dds{grid-column:span 12}.donut-wrapper{justify-content:flex-start}}@media (width<=767px){.dashboard-page{padding:12px}.dashboard-header{border-radius:18px;flex-direction:column;align-items:flex-start;gap:18px;padding:20px}.dashboard-date{width:100%}.dashboard-grid{grid-template-columns:1fr;gap:12px}.dashboard-card,.card-weather,.card-presence,.card-birthday,.card-operation,.card-total,.card-absence,.card-maintenance,.card-dds{border-radius:18px;grid-column:1/-1;min-height:auto}.dashboard-card{padding:18px}.dashboard-card:active{transition:transform .1s;transform:scale(.97)translateZ(0)}.donut-wrapper{align-items:center}.donut{flex-basis:122px;width:122px;height:122px}.donut:after{inset:13px}.donut-number{font-size:28px}.percent-box{min-width:112px;padding:12px}.weather-temp{font-size:42px}.employee-decoration{transform:scale(1.6)}}@media (width<=430px){.dashboard-header-left{align-items:flex-start}.dashboard-header-icon{border-radius:15px;width:50px;height:50px}.donut-wrapper{gap:10px}.percent-box{min-width:105px}}@media (prefers-reduced-motion:reduce){.dashboard-card,.dashboard-header{transition:none;animation:none}}.dark .dashboard-page{--text-primary:#fff;--text-secondary:#ffffffb3;--text-label:#ffffffe6}.dark .dashboard-header{background:#14191eb3;border-color:#ffffff26;box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff0d}.dark .dashboard-card{background:#00000059;border-color:#ffffff1a;box-shadow:0 10px 30px #0000004d,inset 0 1px #ffffff0d}.dark .icon-box{color:#fff!important;background:#ffffff1a!important;border:1px solid #fff3!important;box-shadow:0 4px 12px #fff3!important}.dark .donut{filter:drop-shadow(0 0 4px #fff9);--accent:#fff!important;--track:#ffffff1a!important}.dark .donut:after{background:#191e28f2;box-shadow:inset 0 0 0 1px #ffffff1a}.dark .percent-box{color:#fff!important;background:#ffffff1a!important}.dark .percent-box span{color:#ffffffb3!important}.dark .card-title,.dark .anniversary-list li,.dark .weather-temp,.dark .weather-desc{color:#fff}.dark .dashboard-page{position:relative}.dark .dashboard-page:before{display:none}.neon-title .neon-name{color:#00e5ff;text-shadow:0 0 10px #00e5ff80,0 0 20px #00e5ff4d;font-weight:700}@property --border-angle{syntax:"<angle>";inherits:true;initial-value:0deg}@keyframes borderRotate{to{--border-angle:360deg}}.neon-card{position:relative}.dark .neon-card:before{content:"";border-radius:var(--radius,22px);background:conic-gradient(from var(--border-angle), transparent 20%, var(--neon-border-color,#fff) 50%, transparent 80%);-webkit-mask-composite:xor;pointer-events:none;opacity:.9;z-index:10;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:1.5px;animation:30s linear infinite borderRotate;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.neon-card.neon-blue{--neon-color:#00d2ff}.neon-card.neon-green{--neon-color:#0f8}.neon-card.neon-pink{--neon-color:#f0a}.neon-card.neon-purple{--neon-color:#a0f}.neon-card.neon-orange{--neon-color:#fa0}.neon-card.neon-yellow{--neon-color:gold}.neon-card.neon-red{--neon-color:#f33}.dark .neon-card{--neon-border-color:#fff;-webkit-backdrop-filter:blur(12px);transition:all .3s;overflow:hidden;background:rgba(0, 0, 0, var(--dark-card-opacity,.35))!important;border:1px solid #ffffff0d!important;border-radius:16px!important;box-shadow:0 10px 30px #00000080!important}.dark .neon-card:before{border-radius:16px}.dark .neon-card:hover{transform:translateY(-2px);box-shadow:0 10px 40px #ffffff26!important}.card-footer{letter-spacing:.15em;color:#fff6;text-transform:uppercase;z-index:2;align-items:center;gap:8px;font-size:8px;display:flex;position:absolute;bottom:12px;left:16px}.card-footer .footer-line{background:#fff3;width:24px;height:1px}.dark .card-title{letter-spacing:.05em;color:#fff!important;font-weight:600!important}.dark .big-number{color:#fff!important;text-shadow:0 0 15px #fff3!important}.dark .donut-number{text-shadow:0 0 10px #ffffff4d;color:#fff!important}.dark .donut:after{border:1px solid #ffffff0d;background:#09090b!important}.dark .donut{--accent:#fff!important;--track:#ffffff1a!important;filter:drop-shadow(0 0 12px #ffffffe6)!important}.dark .neon-green .percent-box{border:1px solid #0f83;color:#0f8!important;background:#00ff881a!important}.dark .neon-pink .percent-box{border:1px solid #f0a3;color:#f0a!important;background:#ff00aa1a!important}.dark .neon-blue .percent-box{border:1px solid #00d2ff33;color:#00d2ff!important;background:#00d2ff1a!important}.dark .neon-orange .percent-box{border:1px solid #fa03;color:#fa0!important;background:#ffaa001a!important}.dark .neon-red .percent-box{border:1px solid #f333;color:#f33!important;background:#ff33331a!important}.dark .icon-box{box-shadow:none!important;background:0 0!important;border:none!important}.dark .neon-blue .icon-box{color:#00d2ff;filter:drop-shadow(0 0 5px #00d2ff80)}.dark .neon-green .icon-box{color:#0f8;filter:drop-shadow(0 0 5px #00ff8880)}.dark .neon-pink .icon-box{color:#f0a;filter:drop-shadow(0 0 5px #ff00aa80)}.dark .neon-purple .icon-box{color:#a0f;filter:drop-shadow(0 0 5px #aa00ff80)}.dark .neon-orange .icon-box{color:#fa0;filter:drop-shadow(0 0 5px #ffaa0080)}.dark .neon-red .icon-box{color:#f33;filter:drop-shadow(0 0 5px #ff333380)}.dark .employee-decoration{filter:drop-shadow(0 0 15px #00d2ffcc);opacity:.15!important;color:#00d2ff!important}.dark .birthday-item{-webkit-backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;box-shadow:inset 0 1px 1px #ffffff0d}.dark .birthday-item.active{background:#ffffff1a;border-color:#fff3}
