:root {
  --brand: #2b64f0;
  --brand-dark: #1747c8;
  --brand-deep: #0f1f4d;
  --brand-soft: #eef4ff;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f9fbfe;
  --text: #0f172a;
  --muted: #64748b;
  --border: #dbe3ef;
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 18px 46px rgba(15,23,42,.08);
  --shadow-soft: 0 10px 24px rgba(15,23,42,.05);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --max-content: 1380px;
  --m-header: 64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.app-shell{min-height:100vh}
.sidebar-desktop+.main-area{margin-left:252px}

.login-wrap,
.public-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(circle at top,#dbeafe 0,#eff6ff 40%,#f8fbff 100%);
}
.login-card,
.public-card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;
  padding:32px;
  box-shadow:var(--shadow);
  width:min(100%,520px);
}
.public-card{width:min(100%,1080px)}

.login-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  border-radius:999px;
  font-weight:800;
  margin-bottom:14px;
}

.stack{display:grid;gap:14px}
.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.full{grid-column:1/-1}

label{
  display:grid;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:#334155;
  line-height:1.45;
}

input,select,textarea{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  outline:none;
  transition:.2s border-color,.2s box-shadow;
  font:inherit;
  color:var(--text);
  line-height:1.5;
}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:focus,select:focus,textarea:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
textarea{
  min-height:110px;
  resize:vertical;
  line-height:1.65;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:10px 15px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  min-height:42px;
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset;
  transition:.2s transform,.2s box-shadow,.2s background;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.btn-primary{
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border-color:#2563eb;
  color:#fff;
}
.btn-danger{
  background:linear-gradient(180deg,#f87171,#ef4444);
  border-color:#ef4444;
  color:#fff;
}
.btn-soft{
  background:var(--brand-soft);
  border-color:#bfdbfe;
  color:var(--brand-dark);
}
.btn-inline{width:auto!important}

.alert{
  padding:13px 15px;
  border-radius:14px;
  background:#fee2e2;
  color:#991b1b;
  margin-bottom:14px;
  border:1px solid #fecaca;
  line-height:1.6;
}
.alert.success{
  background:#dcfce7;
  color:#166534;
  border-color:#bbf7d0;
}
.muted{color:var(--muted);line-height:1.6}

.sidebar{
  width:252px;
  background:linear-gradient(180deg,#ffffff 0,#f8fbff 100%);
  border-right:1px solid var(--border);
  padding:24px 18px;
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  overflow:auto;
}
.sidebar .brand{
  font-weight:900;
  color:var(--brand-deep);
  margin-bottom:22px;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.nav-links{display:grid;gap:6px}
.nav-links a{
  display:flex;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  color:#334155;
  font-weight:700;
  line-height:1.35;
}
.nav-links a:hover{
  background:var(--brand-soft);
  color:var(--brand-dark);
}
.nav-links a.active{
  background:linear-gradient(180deg,#dbeafe,#eff6ff);
  color:var(--brand-dark);
  font-weight:900;
  box-shadow:inset 0 0 0 1px #bfdbfe;
}

.main-area{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

.topbar{
  height:74px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.topbar-left,.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar-right{flex-shrink:0}
.topbar-title{
  font-weight:900;
  font-size:22px;
  letter-spacing:-.02em;
  line-height:1.2;
}
.topbar-subtitle{
  font-size:13px;
  line-height:1.45;
}

.hamburger{
  display:none;
  border:1px solid #bfdbfe;
  background:var(--brand-soft);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  color:var(--brand-dark);
  cursor:pointer;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
}
.user-chip{
  background:var(--brand-soft);
  color:var(--brand-dark);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  line-height:1.2;
}

.content{
  padding:28px;
  display:grid;
  gap:22px;
  max-width:var(--max-content);
  width:100%;
  margin:0 auto;
}

.cards-grid,
.cards-grid-3,
.cards-grid-4,
.metric-grid,
.detail-grid,
.filters-grid{
  display:grid;
  gap:18px;
}
.cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-grid-4,.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.filters-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.stat-card,
.panel-card,
.tabs-card,
.task-card,
.detail-box,
.surface-card{
  background:var(--surface);
  border:1px solid rgba(219,229,241,.9);
  border-radius:var(--radius-xl);
  padding:22px;
  box-shadow:var(--shadow-soft);
}

.panel-card > * + *,
.tabs-card > * + *,
.task-card > * + *,
.detail-box > * + *,
.surface-card > * + *{
  margin-top:16px;
}

.stat-card{
  position:relative;
  overflow:hidden;
  min-height:120px;
  background:linear-gradient(180deg,#ffffff 0,#fbfdff 100%);
}
.stat-card::after{
  content:"";
  position:absolute;
  right:-20px;
  top:-20px;
  width:88px;
  height:88px;
  background:radial-gradient(circle,#dbeafe 0,rgba(219,234,254,0) 70%);
}
.stat-label{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  line-height:1.45;
}
.stat-value{
  font-size:34px;
  font-weight:900;
  margin-top:10px;
  color:var(--brand-dark);
  letter-spacing:-.02em;
  line-height:1.1;
}

.section-header,
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.page-head h1,
.section-header h2,
.section-header h3{
  margin:0;
  letter-spacing:-.03em;
  line-height:1.2;
}
.page-head h1{font-size:30px}
.section-header h2{font-size:22px}
.section-header h3{font-size:19px}
.page-head p,
.section-header .muted{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.65;
  max-width:520px;
}

.tabs-row{
  display:flex;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.tab{
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  font-size:13px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
}
.tab.active{
  background:var(--brand-soft);
  color:var(--brand-dark);
  border-color:#bfdbfe;
}

.task-list,
.mini-list,
.timeline,
.form-shell,
.form-block,
.detail-section{
  display:grid;
  gap:14px;
}

.task-card{padding:18px}
.task-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-soft);
  color:var(--brand-dark);
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}
.pill.status-active{background:#dcfce7;color:#166534}
.pill.status-passive{background:#fef3c7;color:#92400e}
.pill.status-archived{background:#e5e7eb;color:#374151}
.status-warn{
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fdba74;
}

.task-actions,
.actions-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.actions-row.compact{gap:8px}
.actions-row .btn{min-width:88px;min-height:40px}
.actions-row.compact .btn{min-width:auto}
.inline-form{
  display:inline-flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:0;
}
.center{text-align:center}

.table-card{
  padding:0;
  overflow:hidden;
}
.table-head{padding:20px 20px 0}
.table-wrap{
  overflow:auto;
  border-top:1px solid var(--border);
  border-radius:0 0 22px 22px;
}
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:860px;
  background:#fff;
}
.data-table th,
.data-table td{
  padding:15px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
  font-size:14px;
  line-height:1.6;
}
.data-table th{
  font-size:12px;
  color:var(--muted);
  background:#f8fbff;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.data-table tbody tr:hover{background:#fbfdff}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td:last-child{width:1%;white-space:nowrap}
.data-table td .actions-row{
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}
.data-table td .actions-row .btn{min-width:92px}

.detail-box h3{margin:0 0 14px}
.detail-box p{
  margin:0 0 10px;
  line-height:1.7;
}
.detail-box p strong{
  display:inline-block;
  min-width:120px;
}

.timeline-item{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:var(--shadow-soft);
}
.timeline-date{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  line-height:1.55;
}
.timeline-body{
  min-width:0;
}
.timeline-body strong{
  display:block;
  line-height:1.5;
}
.timeline-body p{
  margin:.5rem 0 0;
  line-height:1.75;
  word-break:break-word;
}

.checkbox-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:8px 12px 0 0;
  font-weight:700;
}
.tag-group{padding:8px 0}
.quick-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.preview-box{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.preview-box img{
  max-height:52px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  background:#fff;
}
.empty-state{
  padding:18px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:#f8fbff;
  color:var(--muted);
  line-height:1.6;
}

.metric{
  padding:18px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
}
.metric .label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  line-height:1.4;
}
.metric .value{
  font-size:24px;
  font-weight:900;
  color:var(--brand-dark);
  margin-top:6px;
  line-height:1.15;
}

.form-columns{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:20px;
  align-items:start;
}
.sticky-card{
  position:sticky;
  top:92px;
}

.mobile-sidebar-drawer,
#mobileSidebarOverlay{display:none}

@media (max-width:1200px){
  .cards-grid,.cards-grid-4,.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-columns{grid-template-columns:1fr}
}

@media (max-width:1100px){
  .sidebar-desktop{display:none}
  .sidebar-desktop+.main-area{margin-left:0}
  .topbar{height:var(--m-header);padding:0 14px}
  .hamburger{display:inline-flex}
  .content{padding:14px}
  .topbar-title{font-size:18px}
  .user-chip{padding:8px 12px;font-size:13px}
  #mobileSidebarOverlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.46);
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:88;
  }
  .mobile-sidebar-drawer{
    display:block;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(86vw,320px);
    background:#fff;
    transform:translateX(-105%);
    transition:.28s ease;
    z-index:90;
    box-shadow:var(--shadow);
    border-right:1px solid var(--border);
    overflow:auto;
  }
  .mobile-sidebar-drawer .ms-hero{
    background:linear-gradient(180deg,#2563eb,#1d4ed8);
    color:#fff;
    padding:18px 16px;
  }
  .mobile-sidebar-drawer .ms-hero-title{font-weight:900;font-size:18px}
  .mobile-sidebar-drawer .ms-hero-subtitle{opacity:.86;margin-top:4px;font-size:13px}
  .mobile-sidebar-drawer nav{padding:12px}
  body.menu-open #mobileSidebarOverlay{opacity:1;pointer-events:auto}
  body.menu-open .mobile-sidebar-drawer{transform:translateX(0)}
}

@media (max-width:640px){
  .cards-grid,
  .cards-grid-3,
  .cards-grid-4,
  .metric-grid,
  .grid-form,
  .filters-grid,
  .detail-grid,
  .form-columns{grid-template-columns:1fr}
  .panel-card,
  .tabs-card,
  .task-card,
  .detail-box,
  .surface-card,
  .stat-card{
    padding:18px;
    border-radius:18px;
  }
  .content{padding:12px}
  .section-header,.page-head{flex-direction:column;align-items:flex-start}
  .btn:not(.btn-inline){width:100%}
  .actions-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .actions-row .btn,
  .inline-form .btn{
    width:100%;
    min-width:0;
  }
  .inline-form{display:contents}
  .table-wrap{overflow:visible;border-top:0}
  .data-table{
    min-width:0;
    border-collapse:separate;
    border-spacing:0 12px;
    background:transparent;
  }
  .data-table thead{display:none}
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td{
    display:block;
    width:100%;
  }
  .data-table tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
    padding:8px 0;
    margin-bottom:4px;
  }
  .data-table td{
    border:0;
    padding:10px 14px 0;
    font-size:13px;
    line-height:1.6;
  }
  .data-table td:last-child{
    width:100%;
    padding:12px 14px 14px;
    white-space:normal;
  }
  .data-table td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    font-weight:800;
    color:var(--muted);
    margin-bottom:4px;
    line-height:1.35;
  }
  .data-table td[data-label='']::before{display:none}
  .data-table td:last-child .actions-row{grid-template-columns:1fr 1fr}
  .detail-box p strong{
    display:block;
    min-width:0;
    margin-bottom:2px;
  }
  .timeline-item{grid-template-columns:1fr}
}

.page-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.filter-card{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow-soft);
}
.filter-card .filters-grid{align-items:end}
.filter-card .actions-row{justify-content:flex-start}
.table-card .section-header,
.panel-card .section-header{margin-bottom:14px}

.detail-hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}
.detail-hero .panel-card,
.detail-hero .stat-card{height:100%}

.info-list{display:grid;gap:10px}
.info-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:14px;
  padding:12px 0;
  border-bottom:1px dashed #e2e8f0;
}
.info-row:last-child{border-bottom:0}
.info-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.45;
}
.info-value{
  font-weight:700;
  color:var(--text);
  line-height:1.7;
  word-break:break-word;
}

.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segmented .tab{border-radius:12px;padding:10px 12px}
.mobile-sidebar-drawer nav .nav-links{gap:6px}
.mobile-sidebar-drawer nav .nav-links a{padding:13px 14px;border-radius:14px}

.hamburger{
  padding:0;
  width:44px;
  height:44px;
  background:#eef4ff;
  border-color:#c7d7ff;
  border-radius:14px;
}
.hamburger span{
  display:block;
  width:18px;
  height:2px;
  background:#1747c8;
  border-radius:2px;
  margin:3px auto;
}

.form-shell .panel-card,
.detail-section .panel-card{border-radius:20px}

@media (max-width:1100px){
  .topbar-right .user-chip{display:none}
}
@media (max-width:768px){
  .content{padding:12px 12px 20px}
  .page-head h1{font-size:24px}
  .page-head p,.section-header .muted{max-width:none}
  .page-toolbar{width:100%}
  .filter-card,.panel-card,.table-card,.detail-box,.stat-card{border-radius:18px}
  .detail-hero{grid-template-columns:1fr}
  .info-row{grid-template-columns:1fr;gap:4px}
  .info-label{font-size:11px}
  .topbar{padding:0 12px}
  .topbar-right .btn-inline{padding:9px 12px;min-height:40px}
  .mobile-sidebar-drawer{width:min(88vw,320px)}
}
@media (max-width:640px){
  .topbar-title{
    font-size:16px;
    max-width:180px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-subtitle{display:none}
  .topbar-right{gap:8px}
  .topbar-right .btn-inline{
    width:auto!important;
    font-size:12px;
    padding:8px 10px;
  }
  .filter-card .actions-row,
  .panel-card .actions-row,
  .table-card .actions-row{grid-template-columns:1fr}
  .data-table td:last-child .actions-row{grid-template-columns:1fr}
  .data-table td{padding-top:8px}
  .data-table tr{padding:6px 0}
}

/* v17 layout fixes */
#mobileSidebar[hidden],#mobileSidebarOverlay[hidden]{display:none !important}
body{overflow-x:hidden}
.sidebar-desktop{z-index:50}
.mobile-sidebar-drawer{
  display:block;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:min(84vw,320px);
  background:#fff;
  border-right:1px solid var(--border);
  box-shadow:0 20px 60px rgba(15,23,42,.18);
  transform:translateX(-110%);
  transition:transform .28s ease;
  z-index:95;
  overflow:auto;
}
.mobile-sidebar-drawer.open{transform:translateX(0)}
#mobileSidebarOverlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:94;
}
#mobileSidebarOverlay.show{opacity:1;pointer-events:auto}
.mobile-sidebar-drawer .ms-hero{
  padding:20px 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0f1f4d,#1747c8);
  color:#fff;
}
.mobile-sidebar-drawer .ms-hero-title{
  font-size:20px;
  line-height:1.1;
  font-weight:900;
}
.mobile-sidebar-drawer .ms-hero-subtitle{
  font-size:13px;
  opacity:.9;
  margin-top:4px;
  line-height:1.45;
}
.mobile-sidebar-drawer nav{padding:12px}
.mobile-sidebar-drawer .nav-links a{
  padding:14px 14px;
  font-size:15px;
  font-weight:800;
}
@media (min-width:1101px){
  #mobileSidebar,#mobileSidebarOverlay{display:none !important}
}
@media (max-width:1100px){
  .sidebar-desktop{display:none !important}
  .sidebar-desktop + .main-area{margin-left:0}
  .topbar{padding:0 14px;height:66px}
  .hamburger{display:inline-flex !important;align-items:center;justify-content:center}
}
@media (max-width:768px){
  .content{padding:14px}
  .page-head{gap:12px}
  .page-head h1{font-size:22px}
  .cards-grid,.cards-grid-3,.cards-grid-4,.metric-grid,.filters-grid,.detail-grid,.form-columns{grid-template-columns:1fr !important}
  .panel-card,.table-card,.stat-card,.detail-box{padding:18px;border-radius:18px}
  .topbar-right .btn-inline{padding:9px 12px;font-size:13px}
  .topbar-title{font-size:18px}
  .topbar-subtitle{display:none}
}
@media (max-width:640px){
  .topbar{padding:0 12px}
  .topbar-left{gap:10px}
  .topbar-title{
    max-width:180px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-right{gap:8px}
  .topbar-right .btn-inline{min-height:40px;padding:8px 10px}
  .topbar-right .user-chip{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .table-wrap{overflow:visible}
  .data-table thead{display:none}
  .data-table tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
    padding:6px 0;
    margin-bottom:10px;
  }
  .data-table td{border:0;padding:10px 14px 0}
  .data-table td:last-child{padding:12px 14px 14px}
  .data-table td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    font-weight:800;
    color:var(--muted);
    margin-bottom:4px;
  }
  .actions-row{display:grid;grid-template-columns:1fr;gap:8px}
  .actions-row .btn{width:100%;min-width:0}
}

/* v19 dashboard charts */
.chart-section{align-items:stretch}
.chart-card{min-height:340px}
.chart-tall{min-height:380px}
.bar-chart{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:12px;
  align-items:end;
  min-height:260px;
  padding-top:10px;
}
.bar-col{display:grid;gap:8px;align-items:end}
.bar-track{
  height:180px;
  border-radius:16px;
  background:linear-gradient(180deg,#eef4ff,#f8fbff);
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  display:flex;
  align-items:flex-end;
}
.bar-fill{
  width:100%;
  border-radius:14px 14px 10px 10px;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  min-height:8px;
}
.bar-fill.alt{background:linear-gradient(180deg,#8b5cf6,#6d28d9)}
.bar-fill.success{background:linear-gradient(180deg,#34d399,#10b981)}
.bar-value{
  font-size:12px;
  font-weight:800;
  color:var(--brand-dark);
  text-align:center;
  white-space:nowrap;
  line-height:1.35;
}
.bar-value.money{font-size:11px}
.bar-label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  text-align:center;
  line-height:1.45;
}
.hbar-list{display:grid;gap:14px}
.hbar-item{display:grid;gap:8px}
.hbar-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  line-height:1.45;
}
.hbar-meta strong{font-size:14px}
.hbar-track{
  height:12px;
  border-radius:999px;
  background:#eef4ff;
  overflow:hidden;
  border:1px solid #dbe3ef;
}
.hbar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#3b82f6,#2563eb);
}
.hbar-fill.alt{background:linear-gradient(90deg,#8b5cf6,#6d28d9)}
.donut-legend-list{display:grid;gap:12px;padding-top:8px}
.legend-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:#f8fbff;
  border:1px solid var(--border);
  font-size:13px;
  line-height:1.45;
}
.legend-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  display:inline-block;
}
.compact-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:768px){
  .chart-card,.chart-tall{min-height:auto}
  .bar-chart{grid-template-columns:repeat(3,minmax(0,1fr));min-height:auto}
  .bar-track{height:140px}
  .compact-metrics{grid-template-columns:1fr}
  .legend-row{grid-template-columns:auto 1fr auto}
  .legend-row span:last-child{grid-column:2 / -1;justify-self:end}
}

/* family view spacing refinements */
.family-view-page{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.family-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.family-head h1{
  margin:0 0 8px;
  line-height:1.2;
}
.family-head p{
  margin:0;
  line-height:1.7;
  color:var(--muted,#64748b);
}

.family-summary-grid{
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);
}
.family-member-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
}
.family-tabs-card{
  padding:14px 16px;
  margin-bottom:18px;
}

.info-grid{
  display:grid;
  gap:14px;
}
.info-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.info-grid > div{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 16px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:14px;
  background:#fff;
}
.info-grid > div.full{
  grid-column:1 / -1;
}
.info-grid strong{
  font-size:12px;
  color:var(--muted,#64748b);
  font-weight:700;
  line-height:1.45;
  letter-spacing:.2px;
}
.info-grid span{
  color:var(--text,#0f172a);
  line-height:1.65;
  word-break:break-word;
}

.mini-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mini-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:14px;
  background:#fff;
}
.mini-item strong{
  line-height:1.4;
  color:var(--muted,#64748b);
}
.mini-item span{
  line-height:1.6;
  color:var(--text,#0f172a);
  word-break:break-word;
}

.inline-check{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  background:#fff;
}
.inline-check input{
  margin:0;
  flex:0 0 auto;
}

.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.check-chip{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  line-height:1.5;
  background:#fff;
}
.check-chip input{
  margin-top:2px;
  flex:0 0 auto;
}

.check-list{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.check-list li{
  line-height:1.6;
}

.empty-note{
  padding:15px 16px;
  border:1px dashed var(--border,#e5e7eb);
  border-radius:14px;
  color:var(--muted,#64748b);
  background:#f8fafc;
  line-height:1.6;
}

.section-note{
  margin-top:4px;
  line-height:1.65;
}
.form-actions{
  padding-top:4px;
}

@media (max-width:960px){
  .family-head{flex-direction:column}
  .family-summary-grid,
  .family-member-grid,
  .info-grid-2{
    grid-template-columns:1fr;
  }
}