/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0f1117;--bg2:#16181f;--bg3:#1c1e27;--bg4:#24262f;
  --bdr:#2b2d38;--bdr2:#363845;
  --txt:#e4e5ea;--txt2:#9b9da7;--txt3:#62646e;
  --pri:#6366f1;--pri2:#818cf8;--pri-a:rgba(99,102,241,.2);
  --ok:#22c55e;--ok-a:rgba(34,197,94,.12);
  --err:#ef4444;--err-a:rgba(239,68,68,.12);
  --warn:#f59e0b;
  --r:10px;--r2:8px;--r3:14px;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease:.18s cubic-bezier(.4,0,.2,1);
}

html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--txt);min-height:100vh;line-height:1.5}
a{color:var(--pri);text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;outline:none}
input,select,textarea{font-family:var(--font);outline:none}

/* ===== PAGES ===== */
.page{display:none;min-height:100vh}
.page.active{display:flex;flex-direction:column}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1.1rem;border-radius:var(--r2);font-size:.85rem;font-weight:500;
  transition:all var(--ease);white-space:nowrap}
.btn-block{width:100%}
.btn-primary{background:var(--pri);color:#fff}
.btn-primary:hover{background:var(--pri2);box-shadow:0 0 0 3px var(--pri-a)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-ghost{background:transparent;color:var(--txt2);padding:.45rem .75rem}
.btn-ghost:hover{color:var(--txt);background:var(--bg3)}
.btn-sm{padding:.35rem .7rem;font-size:.78rem}

/* ===== FIELDS ===== */
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.field label{font-size:.8rem;font-weight:500;color:var(--txt2)}
.field input,.field select{background:var(--bg4);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:.6rem .85rem;font-size:.9rem;color:var(--txt);transition:border-color var(--ease)}
.field input::placeholder{color:var(--txt3)}
.field input:focus,.field select:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-a)}
.field input[type="color"]{height:38px;padding:2px 4px;cursor:pointer}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239b9da7' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center}
.form-error{color:var(--err);font-size:.82rem;text-align:center;min-height:1.2em;margin-top:.5rem}

/* ===== LOGIN ===== */
.login-wrapper{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login-card{width:100%;max-width:380px}
.login-brand{display:flex;align-items:center;gap:.4rem;margin-bottom:2rem}
.brand-icon{font-size:1.5rem}
.brand-name{font-size:1.15rem;font-weight:700;color:var(--pri2)}
.login-card h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.login-sub{color:var(--txt2);font-size:.88rem;margin-bottom:1.75rem}
.login-form .field:last-of-type{margin-bottom:1.5rem}
.login-demo{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--bdr)}
.demo-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);font-weight:600}
.demo-row{display:flex;gap:.5rem;margin-top:.5rem}
.demo-btn{flex:1;padding:.5rem;font-size:.8rem;font-weight:600;color:var(--pri);background:var(--pri-a);
  border-radius:var(--r2);transition:all var(--ease)}
.demo-btn:hover{background:var(--pri);color:#fff}

/* ===== TOPBAR ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1.5rem;background:var(--bg2);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:50}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:.6rem}
.brand-icon-sm{font-size:1.1rem}
.brand-name-sm{font-size:.95rem;font-weight:700;color:var(--pri2)}
.badge{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  background:var(--pri-a);color:var(--pri);padding:.15rem .45rem;border-radius:4px}
.topbar-user{display:flex;align-items:center;gap:.5rem;min-width:0}
.avatar-sm{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;color:#fff;flex-shrink:0}
#navName{font-size:.85rem;font-weight:500;min-width:0;max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== TABS ===== */
.tab-bar{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;padding:.25rem;background:var(--bg2);border-radius:var(--r2);
  width:fit-content;max-width:100%;margin:0 auto 1.5rem}
.tab{padding:.45rem 1.25rem;border-radius:6px;font-size:.82rem;font-weight:500;color:var(--txt2);
  background:transparent;transition:all var(--ease)}
.tab:hover{color:var(--txt)}
.tab.active{background:var(--pri);color:#fff}
.tab-content{display:none}
.tab-content.active{display:block}

/* ===== USER BODY ===== */
.user-body{max-width:600px;margin:0 auto;padding:1.5rem 1.25rem 3rem;width:100%}
.clock-hero{text-align:center;margin-bottom:1.5rem}
.live-time{font-size:2.5rem;font-weight:700;font-family:var(--mono);letter-spacing:.03em}
.live-date{font-size:.82rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem}

/* ===== CLOCK CARD ===== */
.clock-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);
  padding:1.75rem;text-align:center;margin-bottom:1.25rem}
.status-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .85rem;
  border-radius:999px;font-size:.76rem;font-weight:500;background:var(--bg3);
  border:1px solid var(--bdr);color:var(--txt2);margin-bottom:1.25rem}
.status-pill.on{background:var(--ok-a);border-color:rgba(34,197,94,.3);color:var(--ok)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--txt3)}
.status-pill.on .status-dot{background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.timer{font-size:3.25rem;font-weight:700;font-family:var(--mono);letter-spacing:.04em;margin-bottom:.25rem}
.clock-meta{font-size:.82rem;color:var(--txt3);min-height:1.2em;margin-bottom:1.25rem}
.project-row{display:flex;align-items:center;gap:.6rem;margin-bottom:1.25rem;text-align:left}
.project-row label{font-size:.78rem;font-weight:500;color:var(--txt3);flex-shrink:0}
.project-row select{flex:1;background:var(--bg4);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:.45rem .75rem;font-size:.82rem;color:var(--txt);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239b9da7' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .65rem center}
.proj-tab-hint{font-size:.8rem;color:var(--txt3);padding:0 1.1rem .75rem;border-bottom:1px solid var(--bdr)}
.proj-manage{padding:1rem 1.1rem 1.25rem}
.proj-add-inline{display:flex;gap:.5rem;margin-bottom:1rem}
.proj-add-inline input{flex:1;background:var(--bg4);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:.55rem .75rem;font-size:.85rem;color:var(--txt)}
.proj-list{display:flex;flex-direction:column;gap:.35rem}
.proj-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .65rem;
  background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r2);font-size:.84rem}
.proj-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-item-del{background:transparent;color:var(--txt3);padding:.25rem .45rem;font-size:.75rem;border-radius:4px}
.proj-item-del:hover{color:var(--err);background:var(--err-a)}
.proj-list-compact{margin-bottom:.75rem}
.admin-projects-block{border-top:1px solid var(--bdr);padding-top:1rem;margin-top:.25rem}
.field-heading{font-size:.8rem;font-weight:600;color:var(--txt2);margin-bottom:.25rem}
.field-hint{font-size:.72rem;color:var(--txt3);margin-bottom:.65rem;line-height:1.4}
.btn-clock{padding:.75rem 2.25rem;border-radius:var(--r);font-size:.95rem;font-weight:600}
.btn-clock-in{background:var(--pri);color:#fff}
.btn-clock-in:hover{background:var(--pri2);box-shadow:0 0 0 4px var(--pri-a)}
.btn-clock-out{background:var(--err);color:#fff}
.btn-clock-out:hover{background:#dc2626;box-shadow:0 0 0 4px var(--err-a)}
.btn-clock:disabled{opacity:.45;cursor:not-allowed}
.clock-btn-icon{font-size:.8rem}

/* ===== CARDS ===== */
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);overflow:hidden}
.card-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--bdr)}
.team-header-actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.card-header h2{font-size:.9rem;font-weight:600}
.mono{font-family:var(--mono);font-weight:600;color:var(--pri);font-size:.85rem}

/* ===== ENTRY LIST ===== */
.entry-list{padding:.5rem}
.entry-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem .65rem;
  border-radius:var(--r2);transition:background var(--ease)}
.entry-row:hover{background:var(--bg3)}
.entry-left{display:flex;flex-direction:column;gap:.15rem}
.entry-times{font-family:var(--mono);font-size:.78rem;color:var(--txt2)}
.entry-proj{font-size:.7rem;color:var(--txt3);background:var(--bg4);padding:.1rem .4rem;
  border-radius:3px;display:inline-block;width:fit-content;margin-top:.15rem}
.entry-hrs{font-family:var(--mono);font-weight:600;color:var(--pri);font-size:.82rem}
.entry-date{font-size:.72rem;color:var(--txt3);margin-top:.1rem}
.empty{text-align:center;padding:2rem 1rem;color:var(--txt3);font-size:.88rem}

/* ===== ADMIN ===== */
.admin-body{max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem 3rem}
.admin-proj-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;padding:.85rem 1.1rem;margin-bottom:1.25rem;
  background:var(--pri-a);border:1px solid rgba(99,102,241,.35);border-radius:var(--r3)}
.admin-proj-banner strong{color:var(--pri2);font-size:.9rem}
.admin-proj-banner .banner-text{font-size:.8rem;color:var(--txt2);max-width:36rem;line-height:1.4}
.user-tab-hint{font-size:.78rem;color:var(--txt3);text-align:center;line-height:1.45;padding:0 .5rem .9rem;max-width:32rem;margin:0 auto}
.user-tab-hint strong{color:var(--txt2)}
.filter-bar{margin-bottom:1.25rem}
.filter-pills{display:flex;gap:.3rem;background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);padding:.2rem;width:fit-content}
.pill{padding:.4rem .9rem;border-radius:6px;font-size:.78rem;font-weight:500;
  color:var(--txt2);background:transparent;transition:all var(--ease)}
.pill:hover{color:var(--txt);background:var(--bg3)}
.pill.active{background:var(--pri);color:#fff}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-bottom:1.25rem}
.stat{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);
  padding:1rem 1.1rem;text-align:center}
.stat-val{font-size:1.4rem;font-weight:700;font-family:var(--mono);letter-spacing:-.02em}
.stat-lbl{font-size:.7rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}

.live-clock-card{margin-bottom:1.25rem}
.live-clock-header h2{display:flex;align-items:center;gap:.5rem}
.live-pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:livePulse 2s ease-in-out infinite}
.live-pulse.off{background:var(--txt3);animation:none;box-shadow:none}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.35)}50%{opacity:.85;box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.live-clock-list{padding:.35rem .65rem .85rem}
.live-empty{padding:1rem 1rem 1.25rem!important;font-size:.85rem!important}
.live-row{display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;border-radius:var(--r2);transition:background var(--ease)}
.live-row:hover{background:var(--bg3)}
.live-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0}
.live-info{flex:1;min-width:0}
.live-name{font-size:.86rem;font-weight:600}
.live-meta{font-size:.72rem;color:var(--txt3);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-elapsed{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--ok);flex-shrink:0;min-width:5.5rem;text-align:right}

.admin-grid{display:grid;grid-template-columns:260px 1fr;gap:1.1rem}
.team-card .card-header{position:sticky;top:0;z-index:2;background:var(--bg2)}
.team-card-hint{font-size:.72rem;color:var(--txt3);line-height:1.45;padding:.35rem .85rem .65rem;margin:0;border-bottom:1px solid var(--bdr)}
.team-card-hint strong{color:var(--txt2);font-weight:600}
.table-card .card-header{flex-wrap:wrap;gap:.35rem}
.table-card-hint{font-size:.68rem;font-weight:400;color:var(--txt3);max-width:14rem;line-height:1.35}
.team-list{padding:.35rem}
.team-act.team-proj{font-size:.65rem;font-weight:600;letter-spacing:.02em;color:var(--pri)}
.team-act.team-proj:hover{color:var(--pri2)}
.team-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:var(--r2);
  cursor:pointer;transition:background var(--ease)}
.team-item:hover{background:var(--bg3)}
.team-item.sel{background:var(--pri-a)}
.team-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;color:#fff;flex-shrink:0}
.team-info{flex:1;min-width:0}
.team-name{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-role{font-size:.68rem;color:var(--txt3)}
.team-hrs{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--pri);flex-shrink:0}
.team-actions{display:flex;gap:.15rem;flex-shrink:0;opacity:1}
.team-act{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;background:transparent;color:var(--txt3);transition:all var(--ease)}
.team-act:hover{background:var(--bg4);color:var(--txt)}
.team-act.del:hover{color:var(--err);background:var(--err-a)}

/* ===== TABLE ===== */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:.65rem .85rem;font-size:.68rem;font-weight:600;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--bdr);white-space:nowrap}
.tbl td{padding:.6rem .85rem;font-size:.82rem;border-bottom:1px solid var(--bdr);white-space:nowrap}
.tbl tbody tr{transition:background var(--ease)}
.tbl tbody tr:hover{background:var(--bg3)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl-member{display:flex;align-items:center;gap:.5rem}
.tbl-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.55rem;font-weight:700;color:#fff;flex-shrink:0}
.tbl-name{font-weight:500}
.tbl-time{font-family:var(--mono);font-size:.76rem;color:var(--txt2)}
.tbl-hrs{font-family:var(--mono);font-weight:600;color:var(--pri)}
.tbl-proj{font-size:.7rem;color:var(--txt2);background:var(--bg4);padding:.12rem .45rem;
  border-radius:3px;display:inline-block}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;
  justify-content:center;z-index:100;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);width:100%;max-width:420px}
.modal-sm{max-width:360px}
.modal-header{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.25rem;border-bottom:1px solid var(--bdr)}
.modal-header h2{font-size:1rem;font-weight:600}
.modal-close{font-size:1.3rem;line-height:1;padding:.25rem .4rem}
.modal-body{padding:1.25rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}

/* ===== TOAST ===== */
/* Bottom-right: avoids overlap with sticky topbar (avatar / name / logout live top-right) */
.toast-container{
  position:fixed;z-index:200;pointer-events:none;
  bottom:max(1.25rem,env(safe-area-inset-bottom,0px));
  right:max(1rem,env(safe-area-inset-right,0px));
  left:auto;top:auto;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;
  max-width:min(360px,calc(100vw - 2rem))}
.toast{
  pointer-events:auto;padding:.65rem 1rem;border-radius:var(--r2);font-size:.82rem;font-weight:500;
  background:var(--bg3);border:1px solid var(--bdr);color:var(--txt);
  box-shadow:0 8px 24px rgba(0,0,0,.35);animation:toastIn .28s ease;
  width:100%;text-align:left;word-wrap:break-word}
.toast.ok{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1);color:var(--ok)}
.toast.err{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:var(--err)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .admin-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .stats-row{grid-template-columns:1fr 1fr}
  .topbar{padding:.55rem 1rem}
  .admin-body{padding:1rem 1rem 2rem}
  .live-time{font-size:2rem}
  .timer{font-size:2.5rem}
}
@media(max-width:420px){
  .stats-row{grid-template-columns:1fr}
}