/* tasteskill · macrostructure: Workbench · pre-emit critique: P5 H5 E5 S5 R5 V5 */
:root { --ink:#1e2933; --muted:#73808c; --line:#dfe5e5; --paper:#f7f8f5; --panel:#fff; --accent:#0d766e; --accent-soft:#e3f1ed; --warm:#f0a45d; --radius:14px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans SC",system-ui,sans-serif; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:calc(100dvh - 64px); display:grid; grid-template-columns:224px minmax(0,1fr); }.sidebar { background:#1f2c2b; color:#d8e1dd; padding:24px 18px; display:flex; flex-direction:column; position:sticky; top:64px; height:calc(100dvh - 64px); }.brand { display:flex; gap:10px; align-items:center; color:#fff; font-weight:700; font-size:17px; padding:0 8px 38px; }.brand-mark { display:grid; place-items:center; height:27px; width:36px; border-radius:8px; background:#72b7a6; color:#18302c; font-family:"DM Mono"; font-size:12px; font-weight:700; letter-spacing:-0.04em; flex-shrink:0; }.sidebar nav { display:grid; gap:6px; }.sidebar a { color:#b5c2be; text-decoration:none; padding:10px 12px; border-radius:8px; font-size:14px; }.sidebar a:hover,.sidebar a.active { background:#31433f; color:white; }.sidebar-note { margin-top:auto; padding:17px 14px; border:1px solid #41544f; border-radius:var(--radius); display:grid; gap:5px; }.sidebar-note span,.sidebar-note small { color:#aebdb7; font-size:12px; }.sidebar-note strong { color:#fff; font:500 18px "DM Mono"; }
.content { max-width:1440px; width:100%; margin:auto; padding:50px 54px 80px; }.topbar,.panel-heading,.dialog-head,.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; }.topbar { margin-bottom:34px; }.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; margin:0 0 7px; }.topbar h1 { font-size:30px; letter-spacing:-.04em; margin:0; }.primary { border:0; color:white; background:var(--accent); border-radius:8px; padding:11px 16px; font-weight:700; white-space:nowrap; }.primary:hover { background:#095e57; }.secondary { border:1px solid var(--line); border-radius:8px; padding:10px 16px; background:#fff; color:var(--ink); }.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }.summary-grid article { min-height:135px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; }.summary-grid p { color:var(--muted); font-size:13px; margin:0 0 13px; }.summary-grid strong { font:500 24px "DM Mono"; letter-spacing:-.05em; }.summary-grid span { color:var(--muted); font-size:12px; margin-top:auto; }.budget-card { background:#edf5f1!important; border-color:#cddfd8!important; }.budget-card button { align-self:flex-start; background:transparent; border:0; padding:0; margin-top:auto; color:var(--accent); font-size:12px; font-weight:700; }
.top-actions { display:flex; gap:10px; align-items:center; }
.top-actions a.primary,
.top-actions a.secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-sizing:border-box;
}
.two-column { display:grid; grid-template-columns:1.35fr .9fr; gap:24px; margin-bottom:24px; }.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }.panel h2 { font-size:18px; letter-spacing:-.03em; margin:0; }.panel-heading { margin-bottom:22px; flex-wrap:nowrap; gap:12px; }.panel-heading > div { min-width:0; flex:1 1 auto; }.panel-heading select { width:auto; min-width:6.5em; flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:7px; padding:8px 10px; color:var(--ink); font-size:13px; }.panel-heading a { color:var(--accent); font-size:13px; font-weight:700; text-decoration:none; flex:0 0 auto; white-space:nowrap; }.category-chart { min-height:175px; display:grid; align-content:center; gap:14px; }.chart-row { display:grid; grid-template-columns:88px 1fr 92px; align-items:center; gap:12px; font-size:13px; }.bar { height:9px; background:#eaf0ee; border-radius:999px; overflow:hidden; }.bar i { display:block; height:100%; background:var(--accent); border-radius:999px; }.chart-row strong { font:500 13px "DM Mono"; text-align:right; }.empty-copy { color:var(--muted); text-align:center; font-size:13px; }.investor-list { display:grid; gap:0; }.mini-row { padding:13px 0; display:grid; grid-template-columns:1fr auto; border-bottom:1px solid #edf0ef; }.mini-row:last-child { border-bottom:0; }.mini-row span { font-size:14px; }.mini-row strong { font:500 13px "DM Mono"; }.mini-row small { color:var(--muted); grid-column:1 / -1; font-size:11px; margin-top:3px; }
.records { margin-bottom:24px; }
.filter-bar {
  display:grid;
  grid-template-columns:minmax(180px, 1.4fr) minmax(120px, .8fr) minmax(120px, .8fr) minmax(120px, .8fr) auto;
  gap:12px 14px;
  align-items:end;
  margin-bottom:18px;
  padding:14px 16px;
  background:#f4f7f5;
  border:1px solid #e4ebe8;
  border-radius:10px;
}
.filter-field { display:grid; gap:6px; margin:0; color:var(--muted); font-size:12px; font-weight:600; }
.filter-field span { letter-spacing:.02em; }
.filter-field input,
.filter-field select {
  width:100%;
  min-height:38px;
  border:1px solid #cbd5d3;
  background:#fff;
  border-radius:7px;
  padding:8px 12px;
  color:var(--ink);
  font-size:13px;
  font-weight:400;
}
.filter-field input:focus,
.filter-field select:focus {
  outline:2px solid #b7d8d1;
  outline-offset:1px;
  border-color:var(--accent);
}
.filter-actions { display:flex; align-items:end; }
.filter-actions .secondary {
  min-height:38px;
  padding:8px 14px;
  white-space:nowrap;
  font-size:13px;
}
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { color:var(--muted); font-size:12px; font-weight:500; text-align:left; padding:0 10px 11px; } td { padding:14px 10px; border-top:1px solid #edf0ef; font-size:14px; } td.amount,th.amount { text-align:right; font-family:"DM Mono"; }.tag { background:var(--accent-soft); color:#236158; padding:4px 8px; border-radius:5px; font-size:12px; }.delete { background:transparent; border:0; color:#9aa5aa; font-size:18px; }.delete:hover { color:#b7463f; }.muted { color:var(--muted); font-size:13px; }.summary-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.investor-summary { background:#f8faf8; padding:18px; border-radius:10px; }.investor-summary h3 { margin:0 0 16px; font-size:15px; }.sum-line { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:8px; }.sum-line strong { color:var(--ink); font:500 13px "DM Mono"; }.usage { margin-top:14px; font-size:12px; color:var(--muted); }.usage b { color:var(--accent); font-weight:700; }
dialog { width:min(530px,calc(100% - 32px)); border:0; border-radius:16px; padding:0; box-shadow:0 20px 60px #18201f44; } dialog::backdrop { background:#17252277; } dialog form, dialog .dialog-panel { padding:25px; }.dialog-head { margin-bottom:24px; }.dialog-head h2 { margin:0; font-size:21px; }.icon-button { border:0; background:transparent; font-size:25px; color:var(--muted); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } label { color:#43505a; font-size:13px; font-weight:600; display:grid; gap:7px; } input,select,textarea { width:100%; border:1px solid #cbd5d3; border-radius:7px; padding:10px; color:var(--ink); background:white; font-weight:400; } textarea { resize:vertical; }.field-help { grid-column:1 / -1; margin-top:-10px; color:var(--muted); font-size:11px; font-weight:400; }.full { grid-column:1 / -1; }.dialog-actions { justify-content:flex-end; margin-top:24px; gap:10px; }
.confirm-dialog { width:min(440px,calc(100% - 32px)); }
.danger-eyebrow { color:#b7463f; }
.confirm-copy { margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.5; }
.confirm-preview {
  display:grid;
  gap:10px;
  padding:14px 16px;
  background:#faf6f5;
  border:1px solid #edd9d6;
  border-radius:10px;
}
.confirm-preview .preview-row {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:13px;
}
.confirm-preview .preview-row span { color:var(--muted); }
.confirm-preview .preview-row strong { color:var(--ink); font-weight:600; text-align:right; }
.confirm-preview .preview-amount { font:500 15px "DM Mono"; color:#b7463f; }
.danger {
  border:0;
  color:#fff;
  background:#b7463f;
  border-radius:8px;
  padding:11px 16px;
  font-weight:700;
  white-space:nowrap;
}
.danger:hover { background:#9a3a34; }
.danger:disabled { opacity:.65; cursor:wait; }
@media (max-width:980px) { .app-header-inner { padding:0 18px; gap:12px; }.header-brand small,.header-status { display:none; }.user-meta { max-width:120px; }.app-shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; padding:15px 20px; display:flex; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; }.brand { padding:0; }.sidebar nav { display:flex; gap:2px; }.sidebar-note { display:none; }.content { padding:35px 22px 55px; }.summary-grid { grid-template-columns:repeat(2,1fr); }.two-column { grid-template-columns:1fr; }.summary-list { grid-template-columns:repeat(2,1fr); }.filter-bar { grid-template-columns:1fr 1fr; }.filter-search { grid-column:1 / -1; }.filter-actions { grid-column:1 / -1; justify-content:flex-end; } }
@media (max-width:600px) { .app-header { height:auto; }.app-header-inner { height:auto; padding:12px 16px; flex-wrap:wrap; }.header-user { margin-left:auto; padding-left:0; border-left:0; }.user-account-label { display:none; }.topbar { align-items:flex-start; flex-direction:column; }.topbar .primary { width:100%; }.sidebar { display:block; }.sidebar nav { margin-top:12px; overflow:auto; }.summary-grid,.summary-list { grid-template-columns:1fr; }.filter-bar { grid-template-columns:1fr; padding:12px; }.filter-actions { justify-content:stretch; }.filter-actions .secondary { width:100%; }.form-grid { grid-template-columns:1fr; }.full { grid-column:auto; }.content { padding:26px 16px 45px; }.panel { padding:18px; }.chart-row { grid-template-columns:75px 1fr 80px; gap:7px; } }
.rate-note { display:block; color:var(--muted); font-size:11px; margin-top:3px; }.row-actions { white-space:nowrap; text-align:right; }.edit { border:0; background:transparent; color:var(--accent); font-size:12px; margin-right:8px; }.edit:hover { text-decoration:underline; }
.note-cell { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:13px; }
#budgetLeft.overspend { color:#e8a39a; }
.app-header {
  position:sticky;
  top:0;
  z-index:20;
  height:64px;
  background:#182421;
  border-bottom:1px solid #2d3f3b;
  color:#d8e1dd;
}
.app-header-inner {
  height:100%;
  max-width:1680px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:24px;
}
.header-brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.header-brand strong {
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}
.header-brand small {
  display:block;
  color:#9eb0aa;
  font-size:12px;
  margin-top:2px;
}
.header-status {
  display:flex;
  align-items:center;
  gap:8px;
  color:#aebdb7;
  font-size:13px;
  margin-right:auto;
}
.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72b7a6;
  box-shadow:0 0 0 3px #72b7a633;
}
.header-user {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:8px;
  padding:6px 6px 6px 14px;
  border-left:1px solid #334743;
  min-width:0;
}
.user-avatar {
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, #3d6b63, #2a524c);
  border:1px solid #4f7a71;
  color:#e8f3ef;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
}
.user-meta {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  min-width:0;
  max-width:160px;
  text-align:left;
  line-height:1.2;
}
.user-name {
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-account {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:#9eb0aa;
  font-size:12px;
}
.user-account-label {
  flex-shrink:0;
  padding:1px 5px;
  border-radius:4px;
  background:#243330;
  color:#8fa49d;
  font-size:10px;
  line-height:1.4;
}
.user-account #userName {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"DM Mono", monospace;
  font-size:12px;
  color:#b7c7c1;
}
.header-logout {
  flex-shrink:0;
  border:1px solid #5a6f6a;
  background:transparent;
  color:#d8e1dd;
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  margin-left:4px;
}
.header-logout:hover {
  background:#31433f;
  color:#fff;
  border-color:#6f8680;
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #edf0ef;
}
.pager-summary {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:13px;
}
.pager-summary strong {
  color:var(--ink);
  font-family:"DM Mono", monospace;
  font-weight:500;
}
.pager-range { color:#9aa7b0; }
.pager-controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pager-size {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  margin-right:4px;
}
.pager-size select {
  width:auto;
  min-width:64px;
  min-height:32px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:4px 8px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
}
.pager-pages {
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.pager-btn {
  min-height:32px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  white-space:nowrap;
}
.pager-btn:hover:not(:disabled) {
  border-color:#b7d0cb;
  background:#f4f8f6;
}
.pager-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.pager-num {
  min-width:32px;
  padding-left:0;
  padding-right:0;
  text-align:center;
  font-family:"DM Mono", monospace;
}
.pager-num.active {
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
.pager-ellipsis {
  color:var(--muted);
  padding:0 2px;
  font-size:13px;
}
.pager-empty { color:var(--muted); font-size:13px; padding:0 6px; }
.pager-jump {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
  color:var(--muted);
  font-size:13px;
}
.pager-jump input {
  width:56px;
  min-height:32px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:4px 8px;
  text-align:center;
  font-family:"DM Mono", monospace;
  font-size:13px;
}
@media (max-width:700px) {
  .pagination { align-items:stretch; }
  .pager-controls { justify-content:flex-start; }
  .pager-jump { width:100%; }
}
.login-body {
  min-height:100dvh;
  margin:0;
  background:
    radial-gradient(circle at top left, #d7ebe4 0, transparent 40%),
    linear-gradient(160deg, #f7f8f5 0%, #e8efec 100%);
  display:grid;
  place-items:center;
  padding:24px;
}
.login-shell { width:min(420px, 100%); }
.login-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:36px 32px;
  box-shadow:0 18px 50px #1f2c2b14;
}
.login-brand { padding:0 0 22px; color:var(--ink); }
.login-card h1 { margin:0 0 8px; font-size:26px; letter-spacing:-.04em; }
.login-sub { margin:0 0 24px; color:var(--muted); font-size:14px; }
.login-form { display:grid; gap:14px; }
.login-submit { width:100%; margin-top:8px; }
.login-error { margin:0; color:#b7463f; font-size:13px; }
.manage-hint { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.5; }
.single-col { grid-template-columns:1fr; }
.checkbox-field {
  display:flex !important;
  align-items:center;
  gap:8px;
  font-weight:500;
}
.checkbox-field input { width:auto; }
.status-tag {
  display:inline-block;
  padding:3px 8px;
  border-radius:5px;
  font-size:12px;
}
.status-tag.on { background:#e3f1ed; color:#236158; }
.status-tag.off { background:#f1ecea; color:#8a6b66; }
.investor-manage,
.category-manage { margin-bottom:24px; }