/* WORKZONE desktop and login styles v1.0.2 */
:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#eef8f7;background:#07141e;font-synthesis:none;text-rendering:optimizeLegibility;font-optical-sizing:auto;--ink:#eef8f7;--muted:#8da6ad;--teal:#5bd3c1;--line:rgba(159,205,208,.13)}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 78% 6%,rgba(22,135,145,.17),transparent 34%),radial-gradient(ellipse at 13% 86%,rgba(23,83,111,.19),transparent 40%),linear-gradient(145deg,#07141e,#091923 58%,#08151e);color:var(--ink)}
button,input{font:inherit}
.shell{position:relative;width:min(1440px,100%);min-height:100vh;margin:auto;padding:clamp(18px,4vw,48px);display:grid;grid-template-rows:auto 1fr auto;gap:32px}
.topbar{z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:52px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-mark,.dock-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(91,211,193,.35);border-radius:14px;background:linear-gradient(145deg,rgba(91,211,193,.2),rgba(27,93,112,.16));color:#91eadb;font-size:1.1rem;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.brand-copy{display:grid;gap:2px}.brand-copy strong{font-size:.82rem;letter-spacing:.16em}.brand-copy small{color:var(--muted);font-size:.72rem}
.quiet{display:flex;align-items:center;gap:8px;width:auto;min-height:40px;margin:0;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:rgba(14,34,44,.68);color:#c8dada;cursor:pointer}
.panel{width:min(480px,100%);align-self:center;justify-self:center;border:1px solid rgba(153,203,208,.15);border-radius:25px;background:linear-gradient(145deg,rgba(15,36,47,.94),rgba(10,28,39,.93));box-shadow:0 32px 100px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04);padding:clamp(24px,6vw,42px);backdrop-filter:blur(18px)}
.gate{text-align:center}.gate-symbol{position:relative;display:grid;place-items:center;width:68px;height:68px;margin:0 auto 20px;border:1px solid rgba(91,211,193,.32);border-radius:21px;background:linear-gradient(145deg,rgba(91,211,193,.17),rgba(22,81,99,.2));color:#a1f0e4;font-size:1.5rem;font-weight:900}.gate-symbol i{position:absolute;width:8px;height:8px;right:-3px;bottom:2px;border:2px solid #0b202a;border-radius:50%;background:#5bd3c1;box-shadow:0 0 16px #5bd3c1}
.eyebrow{margin:0 0 9px;color:#75d8c9;font-size:.78rem;font-weight:800;letter-spacing:.1em}h1{margin:0;font-size:clamp(2rem,5vw,2.75rem);line-height:1.18;letter-spacing:-.035em}.intro{margin:12px 0 22px;color:#a9bec2;line-height:1.75;font-size:.95rem}
form{text-align:right;margin-top:19px}label{display:block;margin:0 0 8px;color:#dcebea;font-size:.9rem;font-weight:700}input{width:100%;height:50px;border:1px solid rgba(155,200,203,.19);border-radius:12px;background:#071720;color:#fff;padding:0 14px;text-align:left;outline:none}input:focus-visible,button:focus-visible{outline:3px solid #64dcca;outline-offset:3px}
button:not(.quiet):not(.dock-logout){width:100%;min-height:49px;margin-top:12px;border:1px solid rgba(105,227,210,.24);border-radius:12px;background:linear-gradient(105deg,#67d9c7,#8cdbca);color:#082128;font-weight:850;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.hint{color:#91a8ac;font-size:.82rem;line-height:1.55}.setup-state{margin:20px 0 10px;padding:12px;border:1px solid rgba(237,180,107,.22);border-radius:12px;color:#efd19d;background:rgba(180,122,44,.07);font-size:.86rem;line-height:1.55}.setup-state.ready{border-color:rgba(91,211,193,.22);color:#9ee2d6;background:rgba(48,151,136,.08)}.message{min-height:1.4em;margin:14px 0 0;color:#ffc1b2;font-size:.88rem;line-height:1.5}.gate-foot{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:#7f999f;font-size:.75rem}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#61d5bd;box-shadow:0 0 12px rgba(97,213,189,.6)}
footer{text-align:center;color:#6e878d;font-size:.75rem;letter-spacing:.08em}footer span{color:#4fcbb8;margin:0 4px}
.desktop{position:relative;isolation:isolate;min-height:min(760px,calc(100vh - 145px));overflow:hidden;display:flex;flex-direction:column;padding:clamp(20px,4vw,50px);border:1px solid rgba(143,202,203,.13);border-radius:30px;background:linear-gradient(145deg,rgba(12,35,47,.92),rgba(8,26,38,.88));box-shadow:0 28px 100px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04)}
.desktop::before,.desktop::after{position:absolute;z-index:-1;content:"";border-radius:50%;pointer-events:none}.desktop::before{width:560px;height:560px;top:-300px;left:-130px;background:radial-gradient(circle,rgba(36,175,163,.12),transparent 68%)}.desktop::after{width:700px;height:700px;right:-320px;bottom:-430px;background:radial-gradient(circle,rgba(37,115,160,.13),transparent 68%)}
.desktop-meta{display:flex;justify-content:space-between;align-items:center;color:#91a9ae;font-size:.82rem}.live-label{display:flex;align-items:center;gap:9px}.date-label{text-transform:capitalize}.welcome{margin-top:clamp(46px,8vh,88px)}.welcome h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:730}.welcome h1 span{color:#5bd3c1}.desktop-subtitle{margin:14px 0 0;color:#99b2b6;font-size:clamp(.95rem,2vw,1.1rem)}.clock-card{position:absolute;top:clamp(24px,5vw,56px);left:clamp(24px,5vw,56px);min-width:175px;padding:17px 20px;border:1px solid rgba(143,202,203,.14);border-radius:18px;background:rgba(8,27,38,.56);box-shadow:inset 0 1px rgba(255,255,255,.03)}.clock-label,.clock-zone{display:block;color:#819ba1;font-size:.74rem}.clock-time{display:block;margin:3px 0;color:#e2f5f1;font-size:2.25rem;font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:.04em;direction:ltr;text-align:left}.clock-zone{font-size:.68rem}
.canvas{position:relative;flex:1;min-height:185px;margin-top:22px}.canvas-line{position:absolute;height:1px;left:0;right:0;background:linear-gradient(90deg,transparent,rgba(129,190,193,.1) 20%,rgba(129,190,193,.1) 80%,transparent)}.canvas-line-one{top:20%}.canvas-line-two{bottom:18%}.canvas-center{position:absolute;inset:20% 0 18%;display:grid;place-items:center}.canvas-plus{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(133,195,195,.12);border-radius:50%;color:rgba(136,200,195,.36);font-size:1.3rem;font-weight:300}
.dock{display:flex;align-items:center;gap:16px;min-height:66px;padding:10px 14px;border:1px solid rgba(150,205,207,.16);border-radius:19px;background:rgba(6,22,32,.78);box-shadow:0 12px 35px rgba(0,0,0,.2);backdrop-filter:blur(20px)}.dock-brand{display:flex;align-items:center;gap:10px;color:#c1d4d5;font-size:.72rem;font-weight:800;letter-spacing:.11em}.dock-mark{width:36px;height:36px;border-radius:12px;font-size:.9rem}.dock-divider{width:1px;height:27px;background:var(--line)}.dock-caption{display:flex;align-items:center;gap:8px;color:#8da6aa;font-size:.78rem}.dock-logout{display:flex;align-items:center;gap:8px;width:auto;min-height:40px;margin-right:auto;padding:0 13px;border:1px solid rgba(151,197,199,.13);border-radius:11px;background:rgba(142,177,180,.06);color:#b2c6c7;cursor:pointer;font-size:.8rem}
[hidden]{display:none!important}
@media(max-width:700px){.shell{gap:20px;padding:16px;grid-template-rows:auto 1fr auto}.panel{border-radius:21px}.desktop{min-height:calc(100svh - 116px);border-radius:23px;padding:22px 18px 16px}.desktop-meta{align-items:flex-start;gap:14px;font-size:.72rem}.date-label{text-align:left}.welcome{margin-top:clamp(125px,20vh,190px)}.welcome h1{font-size:clamp(2.35rem,11vw,3.5rem)}.desktop-subtitle{max-width:280px;font-size:.9rem}.clock-card{top:68px;right:18px;left:auto;min-width:145px;padding:12px 15px}.clock-time{font-size:1.9rem}.canvas{min-height:130px;margin-top:16px}.dock{gap:10px;min-height:60px;padding:8px 10px}.dock-brand{gap:7px;font-size:.62rem}.dock-mark{width:32px;height:32px}.dock-divider{height:23px}.dock-caption{font-size:.68rem}.dock-logout{min-height:37px;padding:0 10px;font-size:.72rem}}
@media(max-width:390px){.dock-caption{display:none}.dock-divider{display:none}.dock-logout{font-size:.7rem}.desktop-meta{font-size:.68rem}}
@media(prefers-reduced-motion:no-preference){button{transition:filter .16s ease,transform .16s ease,border-color .16s ease}button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.desktop{animation:desk-in .38s ease-out both}@keyframes desk-in{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}