:root{
  --bg:#f4f5f7;
  --sidebar-bg:#1b2333;
  --sidebar-text:#c7cddb;
  --sidebar-text-active:#ffffff;
  --accent:#3b6ef6;
  --accent-soft:#e8edfd;
  --card-bg:#ffffff;
  --border:#e3e6ec;
  --text:#1c2230;
  --text-muted:#6b7280;
  --danger:#e0554a;
  --danger-soft:#fdeceb;
  --warn:#c9791f;
  --warn-soft:#fbf0e2;
  --ok:#1f9d63;
  --ok-soft:#e6f6ee;
  --logo-bg:#0e1626;
  --logo-green:#33ff7a;
  --logo-green-light:#c8ff6e;
  --logo-green-deep:#00d97e;
  --radius:10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{
  height:100%;
  margin:0;
  overflow:hidden;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:14px;
}

.app{
  display:none;
  height:100vh;
  width:100vw;
  max-width:1680px;
  margin:0 auto;
}
.app.ready{display:flex;}

/* AUTH GATE */
.auth-gate{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.auth-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:32px 30px;width:300px;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.08);
}
.auth-card h1{font-size:18px;margin:4px 0 4px;}
.auth-card .topbar-sub{margin-bottom:0;}
.auth-card form{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.auth-card input{
  border:1px solid var(--border);border-radius:7px;padding:10px 12px;
  font-size:13px;font-family:var(--font);
}
.auth-confirm{display:none;}
.auth-confirm.show{display:block;}
.auth-card .primary-btn{width:100%;}
.auth-error{color:var(--danger);font-size:12px;margin-top:10px;min-height:16px;}
.fingerprint-icon{margin-right:4px;}
#biometricUsePasswordBtn{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;width:100%;text-align:center;}
#biometricUsePasswordBtn:hover{color:var(--accent);}

.biometric-banner{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:90;background:var(--card-bg);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.12);
  padding:14px 18px;display:flex;align-items:center;gap:16px;
  max-width:90vw;
}
.biometric-banner-text{display:flex;flex-direction:column;font-size:12.5px;color:var(--text);}
.biometric-banner-text strong{font-size:13px;}
.biometric-banner-text span{color:var(--text-muted);}
.biometric-banner-actions{display:flex;gap:8px;flex:0 0 auto;}
.biometric-banner-actions .primary-btn{padding:7px 14px;font-size:12.5px;}
.biometric-banner-actions .secondary-btn{padding:7px 14px;}

/* SIDEBAR */
.sidebar{
  width:220px;
  flex:0 0 220px;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  padding:18px 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 6px 22px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:14px;
}
.brand-mark{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 34px;
  filter:drop-shadow(0 0 6px rgba(51,255,122,0.45));
}
.brand-mark svg{width:100%;height:100%;display:block;}
.brand-title{font-weight:700;font-size:15px;color:#fff;}
.brand-sub{font-size:11px;color:var(--sidebar-text);opacity:0.65;}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;
  color:var(--sidebar-text);
  padding:10px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background 0.12s;
}
.nav-item:hover{background:rgba(255,255,255,0.06);}
.nav-item.active{background:var(--accent);color:#fff;}
.nav-icon{font-size:12px;width:14px;text-align:center;opacity:0.9;}

.sidebar-footer{display:flex;flex-direction:column;gap:8px;}
.clock{font-size:11px;color:var(--sidebar-text);opacity:0.6;padding:0 2px 6px;}
.ghost-btn{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--sidebar-text);
  padding:7px 10px;border-radius:7px;
  font-size:11.5px;cursor:pointer;
  display:block;width:100%;
}
.ghost-btn:hover{background:rgba(255,255,255,0.12);}

/* MAIN */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:20px 28px;
  min-width:0;
}
.view{display:none;flex-direction:column;flex:1;min-height:0;}
.view.active{display:flex;}

.topbar{margin-bottom:14px;flex:0 0 auto;}
.topbar h1{margin:0;font-size:20px;font-weight:700;}
.topbar-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;}

/* KPI */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:16px;
  flex:0 0 auto;
}
.kpi-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.kpi-value{font-size:26px;font-weight:700;line-height:1;}
.kpi-label{font-size:11.5px;color:var(--text-muted);margin-top:6px;}
.kpi-warn .kpi-value{color:var(--danger);}

/* DASH GRID */
.dash-grid{
  display:grid;
  grid-template-columns:1fr 1fr 0.8fr;
  gap:14px;
  flex:1;
  min-height:0;
}
.panel{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex;flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;flex:0 0 auto;
}
.panel-head h2{margin:0;font-size:13.5px;font-weight:700;}
.link-btn{
  background:none;border:none;color:var(--accent);
  font-size:11.5px;cursor:pointer;font-weight:600;
}
.mini-list{overflow-y:auto;flex:1;min-height:0;}
.mini-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 4px;border-bottom:1px solid var(--border);
  font-size:12.5px;
}
.mini-row:last-child{border-bottom:none;}
.mini-empty{color:var(--text-muted);font-size:12px;padding:8px 4px;}

/* FORMS */
.quick-form{
  display:flex;gap:8px;margin-bottom:12px;flex:0 0 auto;flex-wrap:nowrap;
}
.quick-form input[type=text],
.quick-form input[type=date],
.quick-form input[type=email],
.quick-form select,
.quick-form textarea{
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 10px;
  font-size:13px;
  font-family:var(--font);
  background:#fff;
}
.quick-form input[type=text]{flex:1;min-width:0;}
#taskTitle{flex:2;}
.note-form{align-items:flex-start;}
.note-form textarea{flex:1;resize:none;}
.primary-btn{
  background:var(--accent);color:#fff;border:none;
  padding:8px 16px;border-radius:7px;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.primary-btn:hover{opacity:0.9;}

.group-input{flex:0 0 150px;}

.finance-form{flex-wrap:wrap;}
.finance-form input[type=text],
.finance-form select{flex:0 0 auto;min-width:130px;}
.finance-form .amount-input-wrap{flex:0 0 140px;}

.bulk-group-row{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;flex:0 0 auto;flex-wrap:wrap;
}
.bulk-group-row input[type=text]{
  border:1px solid var(--border);border-radius:7px;padding:7px 10px;
  font-size:12.5px;font-family:var(--font);flex:0 0 220px;
}
.secondary-btn{
  background:#fff;border:1px solid var(--border);color:var(--text-muted);
  padding:7px 12px;border-radius:7px;font-size:11.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.secondary-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}

.group-block{margin-bottom:6px;}
.group-header, .person-header{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 10px;border-radius:7px;user-select:none;
}
.group-header{background:var(--accent-soft);margin-bottom:4px;}
.person-header{background:#f2f3f6;margin:4px 0 4px 20px;}
.group-chevron{font-size:10px;color:var(--text-muted);width:10px;}
.group-title{font-weight:700;font-size:13px;color:var(--text);flex:1;}
.person-title{font-weight:700;font-size:12px;color:var(--text);flex:1;}
.group-count{font-size:11px;color:var(--text-muted);font-weight:600;}
.person-tasks{margin-left:20px;margin-bottom:4px;}

.search-box{
  border:1px solid var(--border);border-radius:7px;
  padding:8px 10px;font-size:13px;margin-bottom:10px;
  width:280px;flex:0 0 auto;
}

/* TASK TOOLBAR */
.task-toolbar{
  display:flex;justify-content:space-between;
  margin-bottom:10px;flex:0 0 auto;flex-wrap:wrap;gap:8px;
}
.filter-group{display:flex;gap:6px;}
.chip{
  background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;font-size:11.5px;
  cursor:pointer;color:var(--text-muted);font-weight:600;
}
.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}

/* PLANNER */
.period-nav{display:flex;align-items:center;gap:8px;}
.period-label{font-size:13px;font-weight:700;min-width:190px;text-align:center;}
.nav-arrow{border:1px solid var(--border);background:#fff;border-radius:7px;}
.today-btn{
  background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;font-size:11.5px;
  cursor:pointer;font-weight:600;color:var(--text-muted);
}
.today-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}

.budget-row{display:flex;gap:12px;align-items:stretch;margin-bottom:14px;flex:0 0 auto;}
.budget-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 16px;display:flex;flex-direction:column;justify-content:center;
  min-width:130px;
}
.budget-card label{font-size:11px;color:var(--text-muted);margin-top:2px;}
.budget-value{font-size:22px;font-weight:700;}
#remainingCard.over .budget-value{color:var(--danger);}
.budget-input-wrap{display:flex;align-items:center;gap:4px;}
.currency{color:var(--text-muted);font-weight:600;font-size:15px;}
#budgetInput{
  border:none;font-size:22px;font-weight:700;width:100px;padding:0;
  color:var(--text);background:transparent;font-family:var(--font);
}
#budgetInput:focus{outline:none;}
.budget-bar-wrap{
  flex:1;display:flex;align-items:center;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:0 16px;
}
.budget-bar{width:100%;height:10px;background:#eef0f4;border-radius:10px;overflow:hidden;}
.budget-bar-fill{height:100%;width:0;background:var(--ok);border-radius:10px;transition:width .2s;}
.budget-bar-fill.over{background:var(--danger);}

.amount-input-wrap{
  display:flex;align-items:center;gap:4px;
  border:1px solid var(--border);border-radius:7px;
  padding:0 10px;background:#fff;flex:0 0 140px;
}
.amount-input-wrap input{
  border:none;padding:8px 0;width:100%;background:transparent;
  font-family:var(--font);font-size:13px;
}
.amount-input-wrap input:focus{outline:none;}
.item-amount{font-size:12px;font-weight:700;color:var(--text-muted);min-width:70px;text-align:right;white-space:nowrap;}

/* TASK LIST */
.task-list{overflow-y:auto;flex:1;min-height:0;}
.task-row{
  display:flex;align-items:center;gap:12px;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;margin-bottom:6px;
}
.task-row.done{opacity:0.55;}
.task-row.done .task-title{text-decoration:line-through;}
.task-check{
  width:18px;height:18px;flex:0 0 18px;cursor:pointer;accent-color:var(--accent);
}
.task-title{flex:1;font-size:13px;font-weight:500;min-width:0;}
.task-tag{
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;
  background:#eef0f4;color:var(--text-muted);white-space:nowrap;
}
.task-prio-High{background:var(--danger-soft);color:var(--danger);}
.task-prio-Medium{background:var(--warn-soft);color:var(--warn);}
.task-prio-Low{background:#eef0f4;color:var(--text-muted);}
.tag-select{
  border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;font-family:var(--font);font-weight:700;font-size:10.5px;
}
.tag-select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.tag-select:hover{filter:brightness(0.96);}
.task-due{font-size:11.5px;color:var(--text-muted);white-space:nowrap;min-width:70px;text-align:right;}
.task-due.overdue{color:var(--danger);font-weight:700;}
.icon-btn{
  background:none;border:none;cursor:pointer;color:var(--text-muted);
  font-size:14px;padding:4px 6px;border-radius:5px;
}
.icon-btn:hover{background:var(--danger-soft);color:var(--danger);}

/* TABLE */
.table-wrap{flex:1;overflow-y:auto;min-height:0;}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.data-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);
}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--border);background:var(--card-bg);}

.cell-input{
  border:1px solid transparent;background:transparent;
  font:inherit;color:inherit;width:100%;padding:4px 5px;border-radius:5px;
  font-family:var(--font);
}
.cell-input:hover{border-color:var(--border);}
.cell-input:focus{outline:none;border-color:var(--accent);background:#fff;}
select.cell-input{cursor:pointer;appearance:auto;}
.cell-amount{display:flex;align-items:center;gap:3px;}
.cell-amount input{padding-left:2px;}
.data-table tr td:first-child{border-radius:8px 0 0 8px;}
.data-table tr td:last-child{border-radius:0 8px 8px 0;text-align:right;}

/* NOTES */
.note-list{
  overflow-y:auto;flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start;
}
.note-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:12.5px;position:relative;
}
.note-card.pinned{border-color:var(--accent);background:var(--accent-soft);}
.note-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:4px;}
.note-card-title{font-weight:700;font-size:13px;}
.note-card-body{color:var(--text);white-space:pre-wrap;margin-bottom:8px;max-height:90px;overflow-y:auto;}
.note-card-foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--text-muted);}
.pin-btn{background:none;border:none;cursor:pointer;font-size:13px;}
.pin-btn.active{color:var(--accent);}

/* FAMILY / UPLOADS */
.upload-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex:0 0 auto;}
.upload-btn{display:inline-flex;align-items:center;cursor:pointer;}
.upload-status{font-size:12px;color:var(--text-muted);}

.file-grid{
  overflow-y:auto;flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start;
}
.file-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:12.5px;position:relative;
  display:flex;flex-direction:column;gap:4px;
}
.file-card-link{text-decoration:none;color:inherit;display:block;}
.file-thumb{
  width:100%;aspect-ratio:1/1;border-radius:6px;background:#eef0f4;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;overflow:hidden;
}
.file-thumb-fallback{font-size:20px;font-weight:800;color:var(--text-muted);letter-spacing:0.03em;}
.file-name{
  font-weight:700;font-size:13px;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  padding-right:16px;
}
.file-name:hover{color:var(--accent);}
.file-meta{color:var(--text-muted);font-size:11px;}
.file-delete{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.9);}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#d3d7de;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}