:root {
  --maincolor: #BA1424;
  --maincolor-hover: #9a1020;
  --seccolor: #50BBB8;
  --bg: rgb(49, 49, 48);
  --bg-86: rgba(49, 49, 48, .86);
  --surface: rgba(255, 255, 255, 0.05);
  --surface2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.43);
  --muted-65: rgba(255, 255, 255, 0.65);
  --ok: #50BBB8;
  --warn: #f59e0b;
  --danger: #BA1424;
  --shadow: 0 0 20px rgba(0, 0, 0, 0.43);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Barlow', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; font-weight: 400; }

/* SETUP */
#setup-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.setup-box { width:100%; max-width:520px; }
.setup-logo { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.2rem; letter-spacing:-0.02em; text-transform:uppercase; color:var(--maincolor); margin-bottom:0.2rem; }
.setup-subtitle { color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:2.5rem; }
.setup-section { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1.5rem; margin-bottom:1rem; }
.setup-section h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.field-row { display:flex; gap:0.75rem; align-items:center; }
.label-sm { color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; min-width:90px; }
input[type="text"], input[type="number"], input[type="password"] { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:var(--text); font-family:'Barlow',sans-serif; font-size:14px; font-weight:400; padding:0.6rem 0.85rem; outline:none; width:100%; transition:border-color 0.2s; }
input:focus { border-color:var(--maincolor); }
.btn-primary { background:var(--maincolor); border:none; border-radius:4px; color:#fff; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:0.08em; padding:0.7rem 1.5rem; width:100%; margin-top:1rem; text-transform:uppercase; transition:all 0.15s; }
.btn-primary:hover:not(:disabled) { background:var(--maincolor-hover); }
.btn-primary:active:not(:disabled) { transform:scale(0.98); }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
.error-msg { background:rgba(186,20,36,0.1); border:1px solid rgba(186,20,36,0.3); border-radius:4px; color:var(--maincolor); font-size:13px; padding:0.7rem 1rem; margin-top:0.75rem; }
.rate-row { display:grid; grid-template-columns:1fr 120px; gap:0.5rem; align-items:center; margin-bottom:0.5rem; }
.rate-row:last-child { margin-bottom:0; }

/* TOPBAR */
#dashboard { display:none; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-86); backdrop-filter:blur(4px); z-index:100; }
.top-logo { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.25rem; letter-spacing:-0.02em; text-transform:uppercase; color:var(--maincolor); }
.top-status { display:flex; align-items:center; gap:0.5rem; color:var(--muted); font-family:'Barlow',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.04em; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--maincolor); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.75)} }
.btn-sm { background:transparent; border:1px solid rgba(255,255,255,0.3); border-radius:4px; color:var(--muted-65); cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; padding:0.35rem 0.75rem; transition:all 0.15s; letter-spacing:0.08em; text-transform:uppercase; }
.btn-sm:hover { border-color:var(--maincolor); color:var(--maincolor); }
.btn-sm:active { transform:scale(0.96); }

/* MAIN */
.main-content { max-width:1200px; margin:0 auto; padding:2rem; }
.group-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; cursor:default; }
.group-header.collapsible { cursor:pointer; user-select:none; transition:padding-left 0.15s; }
.group-header.collapsible:hover { padding-left:0.25rem; }
.group-header.collapsible:hover .group-title { color:var(--text); }
.collapse-icon { color:var(--muted); font-size:10px; transition:transform 0.2s; }
.collapse-icon.collapsed { transform:rotate(-90deg); }
.group-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); transition:color 0.15s; }
.group-count { background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:2px; color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; padding:0.1rem 0.45rem; letter-spacing:0.06em; }
.group-count.active { background:rgba(186,20,36,0.15); border-color:rgba(186,20,36,0.4); color:var(--maincolor); }
.users-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-bottom:2.5rem; }

/* CARD */
.user-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1.25rem; position:relative; overflow:hidden; transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.user-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.25); }
.user-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:transparent; transition:width 0.2s; }
.user-card:hover::before { width:3px; background:var(--seccolor); }
.user-card.is-active::before { background:var(--maincolor); }
.user-card.is-active:hover::before { background:var(--maincolor); }
.user-card.is-active { background:var(--surface2); }
.card-top { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.9rem; }
.avatar { width:36px; height:36px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:13px; flex-shrink:0; transition:transform 0.2s, box-shadow 0.2s; }
.user-card:hover .avatar { transform:scale(1.08); }
.user-info { flex:1; min-width:0; }
.user-name { font-family:'Barlow',sans-serif; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-rate { color:var(--muted); font-size:12px; font-weight:400; margin-top:1px; }
.status-pill { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:0.15rem 0.5rem; border-radius:2px; flex-shrink:0; transition:transform 0.15s; }
.user-card:hover .status-pill { transform:scale(1.05); }
.status-pill.active { background:rgba(186,20,36,0.15); color:var(--maincolor); border:1px solid rgba(186,20,36,0.4); }
.status-pill.inactive { background:rgba(255,255,255,0.06); color:var(--muted); border:1px solid var(--border); }
.current-box { background:rgba(255,255,255,0.06); border-radius:4px; padding:0.75rem 0.85rem; margin-bottom:0.75rem; }
.box-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:0.25rem; }
.task-name { font-size:13px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-name-pill { font-size:12px; color:var(--seccolor); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:0.15rem; }
.timer-display { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:700; color:var(--seccolor); letter-spacing:0.04em; text-align:right; margin-bottom:0.75rem; }
.recent-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:0.35rem; }
.recent-item { display:flex; justify-content:space-between; align-items:baseline; gap:0.5rem; padding:0.3rem 0.4rem; margin:0 -0.4rem; border-bottom:1px solid var(--border); border-radius:2px; transition:background 0.15s; }
.recent-item:hover { background:rgba(255,255,255,0.04); }
.recent-item:last-child { border-bottom:none; }
.recent-task { font-size:12px; color:var(--muted-65); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.recent-proj { font-size:11px; color:var(--muted); white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.recent-dur { font-size:12px; color:var(--text); font-weight:600; white-space:nowrap; flex-shrink:0; }
.user-today { color:var(--muted); font-size:12px; font-weight:400; margin-top:2px; }
.user-today span { color:var(--seccolor); font-weight:600; }
.no-activity { color:var(--muted); font-size:13px; font-style:italic; }
.empty-state { text-align:center; padding:2rem 1rem; color:var(--muted); font-size:13px; letter-spacing:0.04em; }
.spinner { display:inline-block; width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--maincolor); border-radius:50%; animation:spin 0.7s linear infinite; margin-bottom:0.6rem; }
@keyframes spin { to{transform:rotate(360deg)} }

/* TODAY SUMMARY */
.today-summary { display:flex; align-items:center; gap:2rem; padding:0.5rem 2rem; border-bottom:1px solid var(--border); background:var(--surface); font-size:13px; color:var(--muted); }
.summary-item { display:flex; align-items:center; gap:0.4rem; padding:0.25rem 0.5rem; border-radius:4px; transition:background 0.15s; }
.summary-item:hover { background:rgba(255,255,255,0.05); }
.summary-value { color:var(--text); font-weight:700; font-family:'Barlow Condensed',sans-serif; font-size:14px; letter-spacing:0.02em; }
.summary-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; }

/* USER WEEKLY */
.user-weekly { color:var(--muted); font-size:12px; font-weight:400; margin-top:2px; }
.user-weekly span { color:var(--seccolor); font-weight:600; }

/* THRESHOLD SETTINGS */
.threshold-section { margin-top:1rem; }
.threshold-row { display:flex; gap:0.75rem; align-items:center; margin-bottom:0.5rem; }
.threshold-row input[type="number"] { width:80px; text-align:center; }

/* TIMELINE CHART */
.timeline-toggle { display:flex; align-items:center; gap:0.4rem; cursor:pointer; color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.75rem; border:none; background:none; padding:0.3rem 0; transition:color 0.15s; }
.timeline-toggle:hover { color:var(--text); }
.timeline-toggle .tl-arrow { font-size:8px; transition:transform 0.2s; }
.timeline-toggle .tl-arrow.open { transform:rotate(90deg); }
.timeline-wrap { margin-top:0.5rem; }
.timeline-wrap svg { width:100%; display:block; }
.tl-label { font-family:'Barlow Condensed',sans-serif; font-size:9px; fill:var(--muted); }
.tl-grid { stroke:var(--border); stroke-width:0.5; }

/* FORECAST */
.forecast-line { font-size:12px; color:var(--muted); margin-top:0.25rem; margin-bottom:0.5rem; }
.forecast-line .fc-value { font-weight:600; }
.forecast-line .fc-warn { color:var(--warn); }
.forecast-line .fc-danger { color:var(--danger); }

/* NOTIFICATION TOGGLES */
.notif-toggles { display:flex; flex-direction:column; gap:0.5rem; }
.notif-toggle-row { display:flex; align-items:center; gap:0.6rem; cursor:pointer; font-size:13px; color:var(--muted-65); transition:color 0.15s; }
.notif-toggle-row:hover { color:var(--text); }
.notif-toggle-row input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:16px; height:16px; border:1.5px solid rgba(255,255,255,0.3); border-radius:3px; background:rgba(255,255,255,0.05); cursor:pointer; position:relative; flex-shrink:0; transition:all 0.15s; }
.notif-toggle-row input[type="checkbox"]:checked { background:var(--seccolor); border-color:var(--seccolor); }
.notif-toggle-row input[type="checkbox"]:checked::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }

/* ACTIVITY FEED */
.feed-section { border-top:1px solid var(--border); padding-top:2rem; margin-top:1rem; }
.feed-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; }
.feed-list { display:flex; flex-direction:column; gap:0; max-height:320px; overflow-y:auto; }
.feed-item { display:flex; align-items:flex-start; gap:0.75rem; padding:0.6rem 0.75rem; margin:0 -0.75rem; border-bottom:1px solid var(--border); border-radius:2px; transition:background 0.15s; animation:feedIn 0.3s ease; }
.feed-item:hover { background:rgba(255,255,255,0.04); }
.feed-item:last-child { border-bottom:none; }
@keyframes feedIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.feed-icon { width:28px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; margin-top:1px; }
.feed-icon.start { background:rgba(186,20,36,0.15); color:var(--maincolor); }
.feed-icon.stop { background:rgba(80,187,184,0.15); color:var(--seccolor); }
.feed-icon.entry { background:rgba(255,255,255,0.06); color:var(--muted-65); }
.feed-body { flex:1; min-width:0; }
.feed-user { font-weight:600; font-size:13px; }
.feed-text { font-size:12px; color:var(--muted-65); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-text .feed-proj { color:var(--seccolor); font-weight:500; }
.feed-time { font-size:11px; color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.04em; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.feed-empty { color:var(--muted); font-size:13px; font-style:italic; padding:1rem 0; }

/* BUDGET SECTION */
.budget-section { border-top:1px solid var(--border); padding-top:2rem; margin-top:1rem; }
.budget-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.budget-header-left { display:flex; align-items:center; gap:0.75rem; }
.budget-actions { display:flex; gap:0.5rem; }
.project-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1.25rem; position:relative; overflow:hidden; transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.project-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.25); }
.project-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:transparent; transition:background 0.2s; }
.project-card:hover::before { background:var(--seccolor); }
.proj-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.proj-card-name { font-family:'Barlow',sans-serif; font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.proj-key-badge { background:var(--maincolor); color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; border-radius:2px; border:none; padding:0.2rem 0.5rem; margin-left:0.5rem; flex-shrink:0; }
.proj-remove { background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:0.2rem 0.4rem; border-radius:2px; flex-shrink:0; margin-left:0.5rem; transition:all 0.15s; }
.proj-remove:hover { color:var(--maincolor); background:rgba(186,20,36,0.1); }
.proj-budget-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.5rem; font-size:13px; }
.proj-budget-label { color:var(--muted); font-weight:400; }
.proj-budget-value { font-family:'Barlow',sans-serif; font-weight:700; }
.progress-wrap { background:rgba(255,255,255,0.1); border-radius:0; height:4px; overflow:hidden; margin:0.75rem 0; transition:height 0.2s; }
.project-card:hover .progress-wrap { height:6px; }
.progress-bar { height:100%; border-radius:0; transition:width 0.4s ease, box-shadow 0.2s; min-width:2px; }
.project-card:hover .progress-bar { box-shadow:0 0 8px rgba(80,187,184,0.3); }
.progress-bar.green { background:var(--ok); }
.progress-bar.yellow { background:var(--warn); }
.progress-bar.red { background:var(--danger); }
.proj-hours-row { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:0.75rem; }
.member-breakdown { border-top:1px solid var(--border); padding-top:0.6rem; }
.member-row { display:flex; justify-content:space-between; align-items:baseline; padding:0.3rem 0.4rem; margin:0 -0.4rem; font-size:12px; border-radius:2px; transition:background 0.15s; }
.member-row:hover { background:rgba(255,255,255,0.04); }
.member-name { color:var(--text); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-hours { color:var(--muted); font-weight:400; margin-left:0.75rem; white-space:nowrap; }
.member-cost { color:var(--text); font-weight:700; margin-left:0.75rem; white-space:nowrap; min-width:65px; text-align:right; }
.no-budget { color:var(--muted); font-size:12px; font-style:italic; }

/* SEARCH MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; }
.modal-box { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1.5rem; width:90%; max-width:460px; max-height:70vh; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.modal-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.modal-search-row { display:flex; gap:0.5rem; margin-bottom:1rem; }
.modal-search-row input { flex:1; }
.modal-results { overflow-y:auto; flex:1; }
.modal-result-item { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 0.5rem; border-bottom:1px solid var(--border); cursor:pointer; border-radius:2px; transition:background 0.12s; }
.modal-result-item:hover { background:var(--surface2); }
.modal-result-item.added { opacity:0.4; pointer-events:none; }
.modal-result-name { font-size:14px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-result-key { font-size:10px; color:var(--muted); margin-left:0.5rem; }
.modal-result-add { color:var(--seccolor); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-left:0.5rem; flex-shrink:0; }

/* SPLASH */
#splash { position:fixed; inset:0; background:var(--bg); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; }
#splash .splash-logo { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:3rem; letter-spacing:-0.02em; text-transform:uppercase; color:var(--maincolor); }
#splash .splash-status { color:var(--muted); font-size:13px; letter-spacing:0.04em; display:flex; align-items:center; gap:0.75rem; }
#splash .spinner { margin-bottom:0; }
#splash.fade-out { opacity:0; transition:opacity 0.3s ease; pointer-events:none; }