*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f8f8f6;color:#1a1a1a;font-size:15px;}
.wrap{max-width:960px;margin:0 auto;padding:1.5rem 1rem;}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;}
/* ── Login ── */
.login-wrap{max-width:440px;margin:2rem auto;}
.login-wrap h2{font-size:20px;font-weight:600;margin-bottom:4px;}
.login-sub{font-size:13px;color:#666;margin-bottom:1.5rem;}
.member-list{display:flex;flex-direction:column;gap:5px;}
.member-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e8e8e4;border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;text-align:left;width:100%;transition:border-color .15s,background .15s;}
.member-btn:hover{border-color:#ccc;background:#fafaf8;}
.member-name{font-size:14px;font-weight:500;color:#1a1a1a;}
.member-dept{font-size:12px;color:#888;}
.sa-pill{font-size:10px;padding:2px 8px;border-radius:20px;background:#1a1a1a;color:#fff;font-weight:600;margin-left:auto;}
.admin-pill{font-size:10px;padding:2px 8px;border-radius:20px;background:#dbeafe;color:#1d4ed8;font-weight:600;margin-left:auto;}
/* ── PIN ── */
.pin-wrap{max-width:300px;margin:3rem auto;text-align:center;}
.pin-who{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.5rem;}
.pin-who .pname{font-size:17px;font-weight:600;}
.pin-who .pdept{font-size:12px;color:#888;}
.pin-label{font-size:13px;color:#666;margin-bottom:12px;}
.pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:1rem;}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid #ddd;background:#fff;transition:all .15s;}
.pin-dot.filled{background:#1a1a1a;border-color:#1a1a1a;}
.pin-dot.error{background:#ef4444;border-color:#ef4444;}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:210px;margin:0 auto 1rem;}
.pin-key{padding:13px;font-size:20px;font-weight:500;border:1px solid #e0e0da;border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;transition:background .1s,transform .1s;}
.pin-key:hover{background:#f4f4f0;}
.pin-key:active{transform:scale(.95);}
.pin-key.del{font-size:15px;color:#888;}
.pin-error{font-size:12px;color:#ef4444;min-height:18px;margin-bottom:6px;}
.back-link{font-size:13px;color:#aaa;background:none;border:none;cursor:pointer;font-family:inherit;}
.back-link:hover{color:#1a1a1a;}
/* ── Change PIN ── */
.cp-wrap{max-width:300px;margin:2rem auto;text-align:center;}
.cp-wrap h3{font-size:17px;font-weight:600;margin-bottom:6px;}
.cp-wrap p{font-size:13px;color:#888;margin-bottom:1.25rem;}
.step-lbl{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
/* ── Topbar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px;}
.ghost-btn{font-size:12px;color:#666;background:#fff;border:1px solid #e0e0da;border-radius:8px;padding:5px 12px;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap;}
.ghost-btn:hover{background:#f4f4f0;}
.primary-btn{font-size:12px;background:#1a1a1a;color:#fff;border:none;border-radius:8px;padding:5px 12px;cursor:pointer;font-family:inherit;white-space:nowrap;}
/* ── Period selector ── */
.period-area{margin-bottom:1.25rem;}
.month-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.mchip{font-size:12px;padding:4px 12px;border:1px solid #e0e0da;border-radius:20px;background:#fff;cursor:pointer;font-family:inherit;color:#666;transition:all .15s;}
.mchip.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;font-weight:500;}
.mchip.has-weeks{border-radius:20px 4px 4px 20px;}
.week-row{display:flex;gap:5px;flex-wrap:wrap;padding:6px 0 2px 4px;}
.wchip{font-size:11px;padding:3px 10px;border:1px solid #e0e0da;border-radius:20px;background:#fff;cursor:pointer;font-family:inherit;color:#888;transition:all .15s;}
.wchip.active{background:#444;color:#fff;border-color:#444;}
.period-mode-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.mode-btn{font-size:11px;padding:3px 10px;border:1px solid #e0e0da;border-radius:20px;background:#fff;cursor:pointer;font-family:inherit;color:#888;}
.mode-btn.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
/* ── KPI cards ── */
.dept-section{margin-bottom:1.5rem;}
.dept-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.dept-tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}
.dept-line{flex:1;height:1px;background:#eee;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;}
.kpi-card{background:#fff;border:1px solid #e8e8e4;border-radius:12px;padding:.9rem 1rem;transition:border-color .15s;}
.kpi-card:hover{border-color:#ccc;}
.kpi-card.editing{border-color:#1a1a1a;}
.kpi-name{font-size:12px;color:#888;margin-bottom:4px;line-height:1.4;}
.kpi-val{font-size:24px;font-weight:600;margin-bottom:2px;}
.kpi-val.empty{font-size:18px;color:#ccc;}
.kpi-tgt{font-size:11px;color:#bbb;margin-bottom:6px;}
.bar-bg{height:4px;background:#eee;border-radius:2px;}
.bar-fill{height:4px;border-radius:2px;transition:width .4s;}
.status-badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500;margin:2px 0 5px;}
.sd{background:#dcfce7;color:#166534;}.sp{background:#fef9c3;color:#854d0e;}.sn{background:#f3f4f6;color:#6b7280;}
.edit-toggle{font-size:11px;color:#bbb;background:none;border:none;cursor:pointer;font-family:inherit;margin-top:7px;padding:0;display:block;}
.edit-toggle:hover{color:#1a1a1a;}
.edit-row{display:flex;gap:5px;margin-top:7px;}
.edit-row input{flex:1;font-size:13px;padding:5px 8px;border:1px solid #ddd;border-radius:7px;font-family:inherit;min-width:0;}
.edit-row input:focus{outline:none;border-color:#1a1a1a;}
.save-btn{font-size:12px;padding:5px 10px;background:#1a1a1a;color:#fff;border:none;border-radius:7px;cursor:pointer;font-family:inherit;}
.saving-dot{width:6px;height:6px;border-radius:50%;background:#f59e0b;display:inline-block;margin-right:4px;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.saved-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:4px;}
/* ── History ── */
.hist-section{margin-top:1.5rem;}
.hist-title{font-size:12px;font-weight:600;color:#888;margin-bottom:8px;}
.hist-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f0f0ec;}
.hist-row:last-child{border-bottom:none;}
.hist-lbl{width:90px;color:#888;flex-shrink:0;font-size:12px;}
.hist-bar-bg{flex:1;height:4px;background:#eee;border-radius:2px;}
.hist-bar-fill{height:4px;border-radius:2px;}
.hist-pct{width:36px;text-align:right;font-weight:600;font-size:13px;}
/* ── Manager view ── */
.mv-filters{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap;}
.mv-filter{font-size:12px;padding:4px 12px;border:1px solid #e0e0da;border-radius:20px;background:#fff;cursor:pointer;font-family:inherit;color:#666;}
.mv-filter.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
.mv-table{width:100%;border-collapse:collapse;font-size:13px;}
.mv-table th{text-align:left;font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.05em;padding:8px;border-bottom:2px solid #eee;white-space:nowrap;}
.mv-table td{padding:9px 8px;border-bottom:1px solid #f4f4f0;vertical-align:middle;}
.mv-table tr:last-child td{border-bottom:none;}
.mv-table tr:hover td{background:#fafaf8;}
.mv-bar-bg{height:5px;background:#eee;border-radius:3px;min-width:60px;}
.mv-bar-fill{height:5px;border-radius:3px;}
.mv-pct{font-size:12px;font-weight:600;white-space:nowrap;}
.mv-dept-tag{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;white-space:nowrap;}
.mv-empty{text-align:center;padding:2rem;color:#bbb;font-size:13px;}
/* ── Admin ── */
.admin-wrap{padding:1rem 0;}
.atabs{display:flex;gap:6px;margin-bottom:1.25rem;flex-wrap:wrap;}
.atab{font-size:13px;padding:6px 14px;border-radius:8px;border:1px solid #ddd;background:#fff;color:#666;cursor:pointer;font-family:inherit;}
.atab.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;font-weight:500;}
.panel{background:#fafaf8;border:1px solid #eee;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;}
.panel h3{font-size:14px;font-weight:600;margin-bottom:10px;}
.krow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #eee;font-size:13px;}
.krow:last-of-type{border-bottom:none;}
.krow-name{flex:1;}
.krow-meta{font-size:11px;color:#999;margin-right:4px;}
.krow-tgt{font-size:12px;font-weight:600;color:#1a1a1a;min-width:60px;text-align:right;}
.edit-tgt-btn{font-size:11px;padding:2px 8px;background:#fff;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-family:inherit;color:#666;}
.edit-tgt-btn:hover{background:#f4f4f0;}
.del{background:none;border:none;cursor:pointer;font-size:15px;color:#ccc;padding:0 3px;line-height:1;}
.del:hover{color:#ef4444;}
.add-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.add-row input,.add-row select{font-size:13px;padding:6px 9px;border:1px solid #ddd;border-radius:7px;font-family:inherit;}
.add-row input{flex:1;min-width:90px;}
.add-btn{font-size:13px;padding:6px 14px;background:#1a1a1a;color:#fff;border:none;border-radius:7px;cursor:pointer;font-family:inherit;}
.tgt-inline{display:flex;gap:5px;align-items:center;}
.tgt-inline input{font-size:13px;padding:4px 7px;border:1px solid #1a1a1a;border-radius:6px;font-family:inherit;width:80px;}
.notice{background:#fef9c3;border:1px solid #fde047;border-radius:8px;padding:9px 13px;font-size:12px;color:#854d0e;margin-bottom:1rem;line-height:1.5;}
.pin-table{width:100%;border-collapse:collapse;font-size:13px;}
.pin-table th{text-align:left;font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.05em;padding:7px 8px;border-bottom:1px solid #eee;}
.pin-table td{padding:8px;border-bottom:1px solid #f4f0;vertical-align:middle;}
.pin-table tr:last-child td{border-bottom:none;}
.pin-display{font-family:monospace;font-size:13px;letter-spacing:.1em;}
.reset-btn{font-size:11px;padding:3px 9px;background:#fff;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-family:inherit;color:#666;}
.reset-btn:hover{background:#f4f4f0;}
.months-grid{display:flex;flex-wrap:wrap;gap:8px;}
.month-card{background:#fff;border:1px solid #eee;border-radius:8px;padding:8px 14px;font-size:13px;display:flex;align-items:center;gap:8px;}
.del-month{background:none;border:none;cursor:pointer;font-size:14px;color:#ccc;padding:0;}
.del-month:hover{color:#ef4444;}
@media(max-width:500px){.kpi-grid{grid-template-columns:1fr 1fr;}.kpi-val{font-size:20px;}.mv-table{font-size:12px;}}