:root{--bg:#f4f3ee;--surface:#ffffff;--text:#1b1b19;--muted:#5d5d57;--border:#e2e0d8;--line:#eeede7;--accent:#fc700f;--tint:#ffe4d1;--grey:#eeede7;--score:#b84e00;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#f4f3ee;--surface:#ffffff;--text:#1b1b19;--muted:#5d5d57;--border:#e2e0d8;--line:#eeede7;--accent:#fc700f;--tint:#ffe4d1;--grey:#eeede7;--score:#b84e00}}
:root[data-theme="dark"]{--bg:#f4f3ee;--surface:#ffffff;--text:#1b1b19;--muted:#5d5d57;--border:#e2e0d8;--line:#eeede7;--accent:#fc700f;--tint:#ffe4d1;--grey:#eeede7;--score:#b84e00}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Manrope,'Segoe UI',system-ui,sans-serif;font-size:14px;line-height:1.45}
a{color:var(--score)}
button,input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)}
input,select,textarea{border:1px solid #cfcdc4;border-radius:8px;background:var(--surface);padding:0 12px;height:44px;width:100%}
textarea{padding:10px 12px;height:auto;resize:vertical}
h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-0.01em}
h2{font-size:16px;font-weight:700;margin:0}
h3{font-size:14px;font-weight:700;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--text);font-weight:700;text-decoration:none;cursor:pointer}
.btn2{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:8px;border:1px solid #cfcdc4;background:var(--surface);color:var(--text);font-weight:600;text-decoration:none;cursor:pointer}
.btn.sm,.btn2.sm{height:36px;padding:0 12px;font-size:13px}
.badge{display:inline-block;font-size:12px;font-weight:700;background:var(--tint);color:var(--text);padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge.g{background:var(--grey);color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sb{display:flex;justify-content:space-between;align-items:center;gap:8px}

.app{display:flex;min-height:100%}
.side{width:224px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh}
.side img{width:176px;display:block;margin:4px 8px 28px}
.side a.nav{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:8px;color:var(--text);font-weight:500;font-size:15px;text-decoration:none}
.side a.nav.on{background:var(--accent);font-weight:700}
.side a.nav.disabled{color:var(--muted);pointer-events:none}
.side .user{margin-top:auto;padding:16px 12px 0;border-top:1px solid var(--border)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;border-bottom:1px solid var(--border);position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:2}
.top img{display:none;width:104px}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.clock b{font-size:14px}.clock span{font-size:11px;color:var(--muted)}
.content{padding:24px;display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.page{display:block}
.tabbar{display:none}

table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:10px 12px;background:var(--bg);border-bottom:1px solid var(--border)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
.tbl{overflow-x:auto}
.sc{font-weight:800;color:var(--score)}.sc small{display:block;font-size:10px;color:var(--muted);font-weight:700}
.sc.low{color:var(--muted)}
.hist p{margin:0}.hist .h{font-size:12px;font-weight:700;color:var(--muted)}
.chk{display:flex;align-items:center;gap:8px;height:32px;font-size:13px}.chk input{width:18px;height:18px}
.chk.loc{border:1px solid #cfcdc4;border-radius:8px;padding:0 10px;height:40px;cursor:pointer}.chk.loc.on{border-color:var(--accent);background:var(--tint);font-weight:700}
.list a.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.list a.item:last-child{border-bottom:none}

.login{display:flex;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;padding:24px}
.login .card{width:100%;max-width:420px;padding:32px;gap:16px}
.login img{width:180px}

@media (max-width:899px){
 .side{display:none}
 .top{padding:0 16px;height:60px}
 .top img{display:block}
 .top h1{display:none}
 .content{padding:16px;padding-bottom:88px}
 .grid2,.grid3{grid-template-columns:1fr}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--border);z-index:3}
 .tabbar a{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;border-top:3px solid transparent}
 .tabbar a.on{color:var(--text);font-weight:800;border-top-color:var(--accent)}
 .hide-m{display:none}
}
@media (min-width:900px){.hide-d{display:none}}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.85);opacity:0}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.page{animation:fadeUp .28s ease-out}
.page .card{animation:fadeUp .35s ease-out both}
.page .card:nth-child(2){animation-delay:.05s}.page .card:nth-child(3){animation-delay:.1s}.page .card:nth-child(4){animation-delay:.15s}
.card{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.card:hover{box-shadow:0 6px 18px rgba(27,27,25,.06);border-color:#d6d3c9}
.btn,.btn2{transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn:hover{box-shadow:0 4px 12px rgba(252,112,15,.35);transform:translateY(-1px)}
.btn2:hover{border-color:#b5b2a8;background:#fbfaf7}
.btn:active,.btn2:active{transform:scale(.97)}
.side a.nav{transition:background .2s ease,color .2s ease,padding-left .2s ease}
.side a.nav:hover:not(.on):not(.disabled){background:var(--bg);padding-left:16px}
.tabbar a{transition:color .2s ease,border-color .2s ease}
.badge{transition:transform .15s ease,background .2s ease}
.list a.item{transition:background .15s ease}.list a.item:hover{background:var(--bg)}
tr{transition:background .15s ease}tbody tr:hover td{background:#faf9f5}
input,select,textarea{transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(252,112,15,.18)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);transition:transform .12s ease}
input[type="checkbox"]:active,input[type="radio"]:active{transform:scale(.9)}
.clock b{transition:opacity .3s ease}
.login .card{animation:fadeUp .4s ease-out}
.login .card.err{animation:shake .3s ease}
.top{transition:box-shadow .2s ease}.top.scrolled{box-shadow:0 2px 10px rgba(27,27,25,.06)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
