:root{--bg:#f6f3ef;--card:#fff;--text:#252525;--muted:#777;--line:#e8e0d8;--accent:#222;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#faf7f2 0%,var(--bg) 220px);color:var(--text);-webkit-tap-highlight-color:transparent}
.topbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem clamp(1rem,4vw,3rem);background:#ffffffd9;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
h1{margin:0;font-size:clamp(1.55rem,4vw,2.6rem);letter-spacing:-.03em}h2{margin:.2rem 0;font-size:clamp(1.25rem,3vw,1.8rem)}p{margin:.25rem 0;color:var(--muted)}main{max-width:1200px;margin:auto;padding:1rem}.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 30px #0000000d;padding:1rem;margin-bottom:1rem}.controls{display:flex;align-items:center;justify-content:space-between;text-align:center;gap:.75rem}.nav,button{border:0;border-radius:999px;padding:.8rem 1rem;background:#222;color:#fff;text-decoration:none;cursor:pointer;font-weight:800;font-size:1rem;touch-action:manipulation}input{border:1px solid var(--line);border-radius:14px;padding:.8rem;font-size:1rem;min-height:44px}.inline{display:flex;gap:.5rem}.employees{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}.emp{display:flex;align-items:center;gap:.5rem;border:2px solid transparent;background:#fafafa;border-radius:999px;padding:.7rem .95rem;cursor:pointer;font-weight:800;box-shadow:inset 0 0 0 1px #00000008;user-select:none}.emp.selected{border-color:var(--c);background:#fff;box-shadow:0 8px 22px #00000012}.emp input{display:none}.emp span{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--c);display:inline-block;flex:0 0 auto}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.55rem}.weekday{text-align:center;font-weight:900;color:#777;padding:.5rem}.day{min-height:125px;background:#fbfaf8;color:var(--text);border:1px solid var(--line);border-radius:18px;text-align:left;padding:.75rem;display:flex;flex-direction:column;gap:.6rem;position:relative;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.day.empty{background:transparent;border:0;box-shadow:none}.day.editable:hover{outline:3px solid #2222}.day.editable:active{transform:scale(.98)}.day.saving{opacity:.6;pointer-events:none}.num{font-size:1.15rem;font-weight:950}.badges{display:flex;flex-direction:column;gap:.35rem}.badge{display:block;color:#111;border-radius:999px;padding:.3rem .55rem;font-weight:850;font-size:.85rem;box-shadow:inset 0 0 0 1px #0001;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.employee-form{display:grid;grid-template-columns:1fr 76px auto;gap:.5rem;margin:.5rem 0}.logs{max-height:420px;overflow:auto}.logs p{border-bottom:1px solid var(--line);padding:.45rem 0;color:#333}
@media(max-width:760px){body{background:#f7f3ee}.topbar{position:static;align-items:stretch;padding:.85rem}.topbar>div:first-child p{font-size:.9rem}.loginbox form{width:100%}.loginbox button,.loginbox input{width:100%}main{padding:.65rem}.card{border-radius:18px;padding:.75rem;margin-bottom:.7rem}.controls{display:grid;grid-template-columns:1fr;gap:.55rem}.controls h2{order:-1}.nav,button{min-height:44px;padding:.75rem .85rem}.editor{position:sticky;top:0;z-index:9;border-radius:0 0 18px 18px;margin-left:-.65rem;margin-right:-.65rem;border-left:0;border-right:0}.employees{display:grid;grid-template-columns:1fr;gap:.45rem}.emp{justify-content:flex-start;padding:.75rem .9rem}.calendar{gap:.32rem;padding:.5rem}.weekday{font-size:.75rem;padding:.25rem 0}.day{min-height:82px;padding:.4rem;border-radius:14px;gap:.32rem}.num{font-size:.95rem}.badge{font-size:.68rem;padding:.18rem .32rem;max-width:100%}.grid2{grid-template-columns:1fr}.employee-form{grid-template-columns:1fr 64px;align-items:center}.employee-form button{grid-column:1/-1}.inline{flex-direction:column}}
@media(max-width:430px){h1{font-size:1.35rem}.calendar{gap:.24rem;padding:.38rem}.weekday{font-size:.68rem}.day{min-height:74px;border-radius:12px;padding:.32rem}.num{font-size:.88rem}.badge{font-size:.62rem;padding:.16rem .25rem}.badges{gap:.22rem}.day.empty{min-height:30px}.logs{max-height:none;padding-bottom:calc(1rem + var(--safe-bottom))}}