:root{--bg:#f5f7fb;--text:#0f172a;--muted:#64748b;--card:#ffffff;--ring:#e2e8f0;--shadow:0 12px 40px rgba(2,6,23,.07);--primary:#2563eb;--primary-hi:#1d4ed8;--warn:#f59e0b;--danger:#ef4444;--ok:#16a34a}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,SF Pro Display,Segoe UI,Roboto}.container{max-width:900px;margin:0 auto;padding:24px}.header{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px}.title{font-size:22px;font-weight:800;letter-spacing:.2px}.kicker{color:var(--muted);font-size:13px}.card{background:var(--card);border-radius:18px;padding:18px;border:1px solid var(--ring);box-shadow:var(--shadow)}.stack{display:flex;flex-direction:column;gap:16px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3b82f6;border:1px solid #dbeafe}.badge.muted{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}.badge.ok{background:#ecfdf5;color:#16a34a;border-color:#bbf7d0}.badge.warn{background:#fff7ed;color:#f59e0b;border-color:#fed7aa}.badge.err{background:#fef2f2;color:#ef4444;border-color:#fecaca}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:14px;padding:16px 18px;font-weight:800;color:#fff;cursor:pointer;transition:.15s transform ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-hi))}.btn.ghost{background:#e2e8f0;color:#0f172a}.btn.warn{background:linear-gradient(180deg,#f59e0b,#ea580c)}.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626)}.btn.big{font-size:18px;padding:20px 18px}.section-title{font-weight:800;margin:0 0 8px}.divider{height:1px;background:var(--ring);margin:8px 0}.list{margin-top:8px}.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--ring);background:#fff}.item .t{font-weight:700}.helper{font-size:12px;color:var(--muted)}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:#0f172a;color:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px #00000040}.shell{min-height:100vh;background:linear-gradient(180deg,#f7f8fb,#eef2f7,#f7f8fb);display:flex;position:relative}.nav-toggle{display:none}.hamburger{position:fixed;top:14px;left:16px;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px;cursor:pointer;box-shadow:0 10px 24px #0f172a1a;z-index:20}.hamburger span{display:block;height:3px;width:100%;background:#0f172a;border-radius:999px}.side-menu{position:fixed;top:0;right:0;bottom:0;left:0;width:78%;max-width:320px;background:#fff;color:#0f172a;padding:80px 22px 24px;transform:translate(-100%);transition:transform .24s ease;box-shadow:20px 0 40px #00000029;display:flex;flex-direction:column;gap:24px;z-index:15}.nav-toggle:checked~.side-menu{transform:translate(0)}.nav-toggle:checked~.main{filter:blur(0px)}.side-menu .menu-header{display:flex;flex-direction:column;gap:4px}.menu-title{font-size:20px;font-weight:800;letter-spacing:-.01em}.menu-sub{color:#94a3b8;font-size:13px}.menu-section{display:flex;flex-direction:column;gap:14px}.menu-user{display:flex;flex-direction:column;gap:2px}.menu-name{font-weight:700}.menu-role{color:#94a3b8;font-size:13px}.menu-link{all:unset;display:block;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;cursor:pointer;font-weight:600}.menu-link:hover{background:#eef2f7}.menu-link:disabled{cursor:not-allowed;opacity:.55;background:#f1f5f9}.menu-footer{display:flex;flex-direction:column;gap:8px}.pill{font-size:12px;padding:6px 10px;border-radius:999px;display:inline-flex;align-items:center;width:max-content}.pill.ok{background:#ecfdf3;color:#16a34a;border:1px solid #bbf7d0}.pill.warn{background:#fff7ed;color:#d97706;border:1px solid #fed7aa}.pill.muted{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}.main{flex:1;padding:68px 20px 20px;width:100%;max-width:520px;margin:0 auto}.hub-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:18px 16px;box-shadow:0 16px 36px #0f172a1a;margin-bottom:16px}.hub-hero{display:flex;align-items:center;gap:14px;margin-bottom:12px}.hub-clock{width:120px;aspect-ratio:1 / 1;height:auto;border-radius:50%;border:12px solid #edf1f7;background:radial-gradient(circle at 50% 42%,#fdfefe 0,#f3f6fb 70%,#edf1f7);position:relative;box-shadow:inset 0 1px #ffffffe6;flex-shrink:0}.hub-clock .hand{position:absolute;top:50%;left:50%;transform-origin:bottom;background:#0f172a;border-radius:4px}.hub-clock .hand.hour{width:6px;height:26px;transform:translate(-50%,-100%) rotate(18deg)}.hub-clock .hand.min{width:4px;height:34px;transform:translate(-50%,-100%) rotate(128deg);opacity:.8}.hub-clock .dot{position:absolute;width:10px;height:10px;background:#0f172a;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.hub-title{font-size:18px;font-weight:800}.hub-caption{color:#6b7280;font-size:13px}.hub-actions{margin-top:10px}.status-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin-bottom:10px}.planning-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}.planning-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc}.planning-day{font-weight:700}.planning-time{color:#475569;font-size:14px}@media (min-width: 720px){.hamburger{left:22px;top:16px}.side-menu{width:340px;max-width:360px}}.card .list{display:flex;flex-direction:column;gap:14px}.card .list .item{display:grid;grid-template-columns:86px 1fr 110px;align-items:center;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 1px #1118270f inset}.card .list .item .badge{display:inline-flex;align-items:center;justify-content:center;text-align:center}.card .list .item .badge.muted{width:64px;height:64px;border-radius:9999px;font-weight:600}.card .list .item .badge.ok,.card .list .item .badge.warn,.card .list .item .badge.err{min-width:96px;height:40px;border-radius:9999px;font-weight:600}.card{overflow:hidden}.list .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.list .item>div:nth-child(2){min-width:0}.list .item .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list .item .badge{white-space:nowrap;justify-self:end}@media (max-width: 420px){.list .item{gap:8px}.list .item .badge{padding:6px 10px;font-size:12px}}.list .item{padding-left:26px;gap:16px}.list .item .t{white-space:normal}@media (max-width: 420px){.list .item{padding-left:20px;gap:12px}}.list .item{padding-left:32px;gap:18px;align-items:center}.list .item>div:nth-child(2){flex:1 1 auto;min-width:0}.list .item .t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}.list .item>div:last-child{white-space:nowrap;align-self:center}@media (max-width: 520px){.list .item{display:grid;grid-template-columns:88px 1fr;column-gap:14px;row-gap:6px;padding-left:22px}.list .item>div:nth-child(1){grid-column:1;grid-row:1 / span 2}.list .item>div:nth-child(2){grid-column:2;min-width:0}.list .item>div:last-child{grid-column:2;justify-self:start}}.swipe{position:relative;overflow:visible}.swipe-actions{position:absolute;top:12px;right:12px;bottom:12px;width:96px;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.swipe-actions .btn{pointer-events:auto}.swipe-content{position:relative;z-index:2;transform:translateZ(0);backface-visibility:hidden;will-change:transform;transition:transform .18s ease}.list .item{padding-right:108px;background:#fff}.btn.small{padding:6px 10px;font-size:14px;border-radius:1000px}.btn.danger{background:#ffe5e5;border:1px solid #f4c2c2;color:#c33}.btn.danger:hover{background:#ffe8e8}.swipe{position:relative;overflow:hidden}.swipe .swipe-actions{position:absolute;top:0;right:-96px;bottom:0;display:flex;align-items:center;padding-right:12px;transition:right .18s ease}.swipe .swipe-content{position:relative;transition:transform .18s ease}.swipe.open .swipe-content{transform:translate(-96px)}.swipe.open .swipe-actions{right:0}.list{overflow:visible}.orientation-lock{display:none}@media (orientation: landscape) and (pointer: coarse) and (max-width: 950px){.orientation-lock{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:9999}.orientation-lock .box{padding:24px 28px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 32px #00000014;text-align:center}.orientation-lock .box .title{font-weight:700;font-size:18px;margin-bottom:6px}.orientation-lock .box .helper{color:#6b7280}}@media screen{:root{color-scheme:light;--bg:#f2f7fd;--text:#0b1c48;--muted:#526588;--card:#fff;--ring:#dae5f2;--primary:#0755f5;--primary-hi:#0344cc;--shadow:0 4px 18px rgba(30,65,116,.05)}*{min-width:0}body{font-size:16px;line-height:1.5}.shell{background:linear-gradient(140deg,#f8fbff,#eef5fd);display:block;padding-top:80px}.tempo-mobile-header{position:absolute;top:0;left:0;right:0;height:80px;display:flex;gap:20px;align-items:center;padding:16px 28px;background:#fff;border-bottom:1px solid var(--ring)}.tempo-brand{display:block;width:150px;height:42px;flex:none}.tempo-mobile-header>span{color:var(--muted);font-size:14px}.hamburger{top:18px;left:auto;right:24px;width:44px;height:44px;box-shadow:none;border-color:var(--ring);z-index:40}.hamburger span{background:var(--text);height:2px}.nav-toggle{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:fixed;top:18px;right:24px;width:44px;height:44px;margin:0;border:0;background:transparent;z-index:41;cursor:pointer}.nav-toggle:focus-visible+.tempo-mobile-header+.hamburger{outline:3px solid #0755f5;outline-offset:3px}.nav-toggle:checked~.hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-toggle:checked~.hamburger span:nth-child(2){opacity:0}.nav-toggle:checked~.hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.side-menu{inset:0 0 0 auto;width:360px;max-width:100%;padding:90px 26px 28px;background:#edf5ff;transform:translate(100%);visibility:hidden;z-index:35;overflow-y:auto;gap:26px;box-shadow:-12px 0 50px #0b1c481c}.nav-toggle:checked~.side-menu{transform:translate(0);visibility:visible}.menu-title{color:var(--text);font-size:25px;line-height:1.25}.menu-sub,.menu-role{color:var(--muted);font-size:15px}.menu-name{font-size:20px}.menu-section{gap:14px}.menu-user{margin-bottom:12px}.menu-link{display:flex;align-items:center;min-height:60px;padding:16px;font-size:17px;color:var(--text);background:#fff;border:1px solid var(--ring);border-radius:14px}.menu-footer{border-top:1px solid #cadcf2;padding-top:24px}.main{max-width:720px;padding:30px 24px 44px;margin:auto}.tempo-welcome h1{font-size:30px;line-height:1.25;letter-spacing:-.8px;margin:0 0 6px}.tempo-welcome p{color:var(--muted);font-size:17px;margin:0}.tempo-employee-name{color:var(--muted);font-size:13px}.tempo-clock{text-align:center;padding:20px 0 26px}.tempo-clock time{display:block;font-size:76px;line-height:1.15;font-weight:800;letter-spacing:-3px;font-variant-numeric:tabular-nums}.tempo-clock>div{color:#3f557b;font-size:20px;text-transform:capitalize;margin-top:4px}.card,.hub-card{border:1px solid var(--ring);background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:22px;overflow:visible}.status-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:transparent;border:0;box-shadow:none;padding:0;margin-bottom:20px}.status-row .pill{width:100%;border-radius:14px;padding:12px 14px;min-height:52px;background:#eaf2fe;border:1px solid #dce9fa;color:#36537c;font-size:14px}.pill,.badge{max-width:100%;font-size:13px}.pill.ok,.badge.ok{color:#236040;background:#edf7f0;border-color:#cce7d4}.pill.warn,.badge.warn{color:#805008;background:#fff3d8;border-color:#efdcac}.pill.muted,.badge.muted{color:#4e6283;background:#f1f5fb;border-color:var(--ring)}.badge.err{color:#9e2435;background:#fff0f3;border-color:#edc4cc}.hub-card{margin-bottom:20px}.hub-title,.section-title{font-size:23px;line-height:1.3;letter-spacing:-.4px;font-weight:750}.hub-caption,.helper{font-size:14px;line-height:1.5;color:var(--muted)}.hub-caption{margin-top:6px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hub-actions{margin-top:20px}.btn{font-family:inherit;min-height:44px;min-width:44px;border-radius:14px;font-size:16px;line-height:1.4;transition:background .15s}.btn.big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:18px 12px;font-size:20px;font-weight:650}.btn.primary{background:#0755f5;color:#fff;border:1px solid #0755f5}.btn.danger{background:#fff;color:#0b1c48;border:1px solid #173361}.btn.warn{background:#ffdfa0;color:#62400c;border:1px solid #f4d491}.btn.ghost{background:#dceaff;color:#0a3a9d;border:1px solid #c6dcff}.btn:hover:not(:disabled){transform:none;filter:brightness(.96)}.btn:disabled{cursor:not-allowed;opacity:1;color:#62718a;background:#eef2f8;border:1px solid #d8e1ee;transform:none}:is(button,a,input,[tabindex]):focus-visible{outline:3px solid #0755f5;outline-offset:3px}.row{flex-wrap:wrap}.tempo-history{scroll-margin-top:24px}.tempo-history-note{margin:12px 0 18px}.card .list{gap:12px}.card .list .item{display:block;padding:0;background:#f7faff;border:1px solid var(--ring);border-radius:14px}.swipe .swipe-content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;background:#f7faff;padding:16px;border-radius:14px}.card .list .item .badge.muted{width:auto;height:auto;min-width:60px;min-height:44px;border-radius:10px;padding:8px}.swipe-content>.badge:last-child{grid-column:2;justify-self:start;min-width:0!important;height:auto!important;padding:6px 10px;white-space:normal}.list .item .t{font-size:15px;line-height:1.5;white-space:normal}.card .list .item>div{grid-column:auto;grid-row:auto}.swipe .swipe-actions{right:0;position:relative;padding:0 12px 12px;top:auto;bottom:auto;width:auto;justify-content:flex-end;pointer-events:auto}.swipe .swipe-actions .btn{color:#9b293b;border-color:#e5bdc5;background:#fff}.swipe{display:flex!important;flex-direction:column-reverse;overflow:hidden}.swipe .swipe-content{width:100%}.list>.helper{padding:32px 22px;text-align:center;border:1px dashed #c8d8ec;border-radius:14px;background:#f5f9ff}.planning-list{gap:12px}.planning-row{padding:18px;background:#fff;border-color:var(--ring);border-radius:14px}.planning-day{font-size:18px}.planning-time{color:#40577c;font-size:16px}.kicker{color:var(--muted);font-size:16px}.toast{z-index:60;max-width:calc(100% - 32px);width:max-content;padding:16px 20px;font-size:15px;background:#10254e}.orientation-lock{display:none!important}@media (min-width:1024px){.main{max-width:800px;padding-top:40px}.tempo-welcome{text-align:center}.hub-actions{grid-template-columns:repeat(4,minmax(0,1fr))}.btn.big{min-height:124px}}@media (max-width:600px){.shell{padding-top:76px}.tempo-mobile-header{padding:16px 20px;height:76px}.tempo-mobile-header>span{display:none}.hamburger,.nav-toggle{right:18px;top:16px}.main{padding:24px 18px 32px}.tempo-welcome h1{font-size:27px}.tempo-clock time{font-size:70px}.card,.hub-card{padding:18px;border-radius:18px}.grid2{gap:12px}.btn.big{font-size:18px;min-height:106px}.status-row{padding:0}.status-row .pill{font-size:13px;padding:10px}.side-menu{width:100%}.swipe .swipe-content{padding:12px;gap:8px}}@media (orientation:landscape) and (max-height:600px){.main{max-width:820px;padding-top:22px}.tempo-clock{padding:12px 0}.tempo-clock time{font-size:52px}.hub-actions{grid-template-columns:repeat(4,minmax(0,1fr))}.btn.big{min-height:94px}.side-menu{padding-top:76px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}}@media screen{.shell .status-row .pill{background:#edf4fe;border-color:#dce7f7;color:#36537c}}@media screen{.tempo-mobile-header{padding-right:90px}.tempo-mobile-header>span{overflow-wrap:anywhere}.main:has(.hub-card){max-width:560px}.main:has(.hub-card) .tempo-welcome{text-align:left}.main:has(.hub-card) .hub-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.main:has(.hub-card) .hub-caption{display:none}.main:has(.hub-card) .hub-actions{margin-top:18px}.main:has(.hub-card) .btn.big{min-height:106px}.tempo-employee-name{display:block;margin-top:4px}@media (max-width:600px){.tempo-mobile-header>span{display:block;font-size:12px}.tempo-mobile-header{gap:12px;padding-right:76px}.tempo-brand{width:130px}}@media (orientation:landscape) and (max-height:600px){.main:has(.hub-card){max-width:820px}.main:has(.hub-card) .hub-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}}@media screen{.main:has(.hub-card){width:100%;max-width:none;margin:0;padding:36px clamp(16px,3vw,72px) 48px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}.main:has(.hub-card)>.tempo-welcome{grid-column:1 / -1}.main:has(.hub-card)>.card{grid-column:1 / -1;margin:0!important}.tempo-welcome h1{font-size:clamp(28px,2.5vw,46px)}.tempo-welcome p{font-size:clamp(17px,1.3vw,22px)}.tempo-employee-name{font-size:15px}.tempo-employee-overview{align-self:center}.tempo-employee-overview .tempo-clock{padding:20px 0 30px}.tempo-employee-overview .tempo-clock time{font-size:clamp(64px,7vw,120px)}.tempo-employee-overview .tempo-clock>div{font-size:clamp(20px,1.7vw,28px)}.tempo-employee-overview .status-row{margin:0}.main:has(.hub-card) .hub-card{margin:0;padding:28px}.main:has(.hub-card) .hub-caption{display:block}.main:has(.hub-card) .hub-actions{gap:18px}.main:has(.hub-card) .btn.big{min-height:144px;font-size:24px;gap:14px}.main:has(.hub-card) .hub-title{font-size:28px}.main:has(.hub-card) .tempo-history{grid-column:1 / -1}.main:has(.hub-card) .tempo-history .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}.main:has(.hub-card) .tempo-history .list>.helper{grid-column:1 / -1}.tempo-mobile-header{padding-left:clamp(16px,3vw,72px)}.tempo-mobile-header>span{font-size:16px}@media (min-width:1800px){.main:has(.hub-card){grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr);gap:36px}.main:has(.hub-card) .tempo-history{grid-column:auto}.main:has(.hub-card) .tempo-history .card{margin-top:0}.main:has(.hub-card) .tempo-history .list{grid-template-columns:minmax(0,1fr)}.main:has(.hub-card) .btn.big{min-height:180px;font-size:28px}}@media (max-width:900px){.main:has(.hub-card){gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.main:has(.hub-card) .hub-card{padding:20px}.main:has(.hub-card) .btn.big{min-height:116px;font-size:20px}.main:has(.hub-card) .hub-actions{gap:12px}.tempo-employee-overview .status-row{grid-template-columns:minmax(0,1fr)}}@media (max-width:650px){.main:has(.hub-card){display:flex;flex-direction:column;align-items:stretch;gap:20px;padding-top:24px}.tempo-employee-overview{align-self:stretch}.tempo-employee-overview .tempo-clock{padding:8px 0 24px}.tempo-employee-overview .status-row{grid-template-columns:1fr 1fr}.main:has(.hub-card) .btn.big{min-height:110px;font-size:20px}.main:has(.hub-card) .hub-title{font-size:24px}.tempo-mobile-header>span{font-size:12px}.tempo-mobile-header{gap:8px}.tempo-brand{width:120px}}@media (orientation:landscape) and (max-height:600px) and (min-width:651px){.main:has(.hub-card) .hub-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.main:has(.hub-card) .btn.big{min-height:100px}}}@media screen{.main:not(:has(.hub-card)){width:100%;max-width:none;padding:36px clamp(16px,3vw,72px) 48px}.main:not(:has(.hub-card)) .tempo-welcome{text-align:left;margin-bottom:24px}.tempo-planning{min-width:0}.tempo-planning .planning-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px}.tempo-planning .planning-row{display:flex;flex-wrap:wrap;gap:16px;padding:24px;border:1px solid var(--border);border-radius:16px;background:#f5f8ff}.tempo-planning .planning-time{white-space:nowrap}.tempo-history .helper{max-width:72ch}.side-menu{overflow-y:auto;overscroll-behavior:contain}@media (max-width:650px){.main:not(:has(.hub-card)){padding-top:24px}.tempo-planning .planning-list{gap:12px}.tempo-planning .planning-row{padding:18px}}}