/* //style.css */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow-x:hidden}
#app{height:100%;width:100%;overflow-x:hidden;font-family:system-ui,-apple-system,sans-serif;background:#f9fafb}
input,select,button,textarea{font-family:inherit;font-size:16px}
select{-webkit-appearance:none}
textarea{-webkit-appearance:none;resize:none}
.screen{display:none;height:100%;width:100%;overflow-x:hidden}
.screen.active{display:flex;flex-direction:column}
.wrap{display:flex;flex-direction:column;height:100%;width:100%;max-width:480px;margin:0 auto}
.hdr{background:#15803d;color:white;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.hdr-sub{font-size:11px;color:#86efac;margin:0}
.hdr-name{font-weight:bold;font-size:18px;margin:0}
.main{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;-webkit-overflow-scrolling:touch}
.nav{background:white;border-top:1px solid #f3f4f6;display:flex;flex-shrink:0;width:100%}
.nb{flex:1;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;border:none;background:none;color:#9ca3af;cursor:pointer}
.nb.on{color:#16a34a;font-weight:bold}
.card{background:white;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:16px;margin-bottom:10px}
.inp{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px;font-size:16px;margin-bottom:12px;background:white;outline:none;display:block}
.lbl{font-size:11px;color:#9ca3af;font-weight:bold;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;display:block}
.btn{width:100%;color:white;border:none;border-radius:12px;padding:16px;font-size:18px;font-weight:bold;cursor:pointer;display:block;transition:opacity .2s}
.btn:disabled{opacity:.6;cursor:not-allowed}
.bg{background:#16a34a}
.bb{background:#1d4ed8}
.br{background:#ef4444}
.row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.btn-logout{background:none;border:1px solid #86efac;color:#86efac;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px;white-space:nowrap}
.btn-add{background:#16a34a;color:white;border:none;border-radius:10px;padding:8px 16px;font-weight:bold;font-size:14px;cursor:pointer}
.tag{font-size:12px;padding:4px 10px;border-radius:8px;font-weight:600;border:none;cursor:pointer;white-space:nowrap}
.ton{background:#dcfce7;color:#16a34a}
.toff{background:#f3f4f6;color:#6b7280}
.tb{flex:1;padding:10px;border-radius:12px;border:none;cursor:pointer;font-weight:600;font-size:14px}
.tbon{background:#16a34a;color:white}
.tbonb{background:#1d4ed8;color:white}
.tboff{background:#f3f4f6;color:#6b7280}
.togrow{display:flex;gap:8px;margin-bottom:16px}
.warn{background:#fefce8;border:1px solid #fde68a;border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px;color:#92400e}
.info{background:#1e40af;border-radius:14px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.today{background:#f0fdf4;border-radius:10px;padding:10px 14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.err{color:#ef4444;font-size:13px;margin-bottom:12px;text-align:center}
.empty{color:#9ca3af;text-align:center;padding:32px}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:50}
.modal-bg.open{display:flex}
.modal{background:white;border-radius:20px 20px 0 0;padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.mbtns{display:flex;gap:12px;margin-top:4px}
.mbtn-c{flex:1;border:1px solid #e5e7eb;border-radius:12px;padding:14px;color:#6b7280;background:white;cursor:pointer;font-weight:600;font-size:15px}
.mbtn-s{flex:1;background:#16a34a;color:white;border:none;border-radius:12px;padding:14px;font-weight:600;cursor:pointer;font-size:15px}
.tab-content{display:none}
.tab-content.active{display:block}
.tview{display:none}
.tview.active{display:block}
.dt-grp{margin-bottom:16px}
.dt-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dt-lbl{font-size:11px;font-weight:bold;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin:0}
.dt-sum{font-size:12px;font-weight:600}
.z-row{display:flex;justify-content:space-between;align-items:flex-start}
.z-info{flex:1;margin-right:10px;min-width:0}
.z-time{font-weight:bold;font-size:13px;white-space:nowrap}
.login-wrap{min-height:100%;width:100%;background:#15803d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.login-logo{text-align:center;margin-bottom:32px;color:white}
.login-box{background:white;border-radius:16px;padding:24px;width:100%;max-width:360px;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.trow{display:flex;gap:10px;margin-bottom:12px}
.tcol{flex:1;min-width:0}
.tcol .inp{margin-bottom:0}
.pause-box{border-radius:10px;padding:12px 14px;margin-bottom:12px}
.pause-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pause-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.netto-box{border-radius:10px;padding:10px 14px;margin-bottom:12px;text-align:center}
.cb{width:18px;height:18px;flex-shrink:0;cursor:pointer}
.cblbl{font-size:13px;color:#6b7280;cursor:pointer}
.min-inp{width:70px;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px;font-size:14px;text-align:center;background:white;outline:none}