/* ============================================================
     APP SHELL LAYOUT
     ============================================================ */
  #app{min-height:100%;}

  /* ---- Sidebar ---- */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    background:var(--bg-sidebar);
    color:var(--sidebar-text);
    display:flex; flex-direction:column;
    z-index:40;
    transition:width .18s ease, transform .22s ease;
    padding-left:env(safe-area-inset-left,0px);
  }
  body.is-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }
  #app{ margin-left:var(--sidebar-w); transition:margin-left .18s ease; }
  body.is-collapsed #app{ margin-left:var(--sidebar-w-collapsed); }

  .brand{
    display:flex; align-items:center; gap:.75rem;
    padding:1.1rem 1.15rem;
    background-color:var(--accent);
    background-image:var(--dot-texture);
    background-size:9px 9px;
    border-bottom:1px solid var(--sidebar-border);
    min-height:32px;
  }
  body.is-collapsed .brand{ justify-content:center; padding:1.1rem .55rem; }
  .brand-mark{
    flex:none; width:46px; aspect-ratio:1.5625; display:block; overflow:hidden;
  }
  body.is-collapsed .brand-mark{ width:32px; }
  .brand-mark img{ display:block; width:100%; height:100%; object-fit:contain; }
  .brand-text{overflow:hidden; white-space:nowrap;}
  .brand-title{
    font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--accent-contrast);
    line-height:1.28; text-transform:uppercase; letter-spacing:.035em;
  }
  .brand-sub{font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-contrast); opacity:.78; margin-top:3px;}
  body.is-collapsed .brand-text{display:none;}

  .sidebar-scroll{flex:1; overflow-y:auto; padding:.85rem .65rem; }
  .sidebar-scroll::-webkit-scrollbar{width:6px;}
  .sidebar-scroll::-webkit-scrollbar-thumb{background:var(--sidebar-border); border-radius:4px;}

  .nav-group{margin-bottom:.35rem;}
  .nav-group-label{
    font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
    color:var(--sidebar-text-dim); padding:.9rem .65rem .35rem;
  }
  body.is-collapsed .nav-group-label{display:none;}

  .nav-item{
    display:flex; align-items:center; gap:.65rem;
    padding:.56rem .65rem; border-radius:var(--radius-s);
    color:var(--sidebar-text-dim); cursor:pointer;
    font-size:13.6px; font-weight:500;
    white-space:nowrap; overflow:hidden;
    border:none; background:none; width:100%; text-align:left;
  }
  .nav-item .icon{width:17px;height:17px;flex:none;}
  .nav-item:hover{background:rgba(255,255,255,0.05); color:var(--sidebar-text);}
  .nav-item.is-active{background:var(--accent); color:var(--accent-contrast);}
  .nav-item.is-active .icon{stroke:var(--accent-contrast);}
  .nav-item-label{overflow:hidden; text-overflow:ellipsis;}
  body.is-collapsed .nav-item-label{display:none;}
  body.is-collapsed .nav-item{justify-content:center;}

  .nav-sub{padding-left:1.55rem;}
  body.is-collapsed .nav-sub{display:none;}
  .nav-sub .nav-item{font-size:13px; padding:.46rem .65rem;}

  .sidebar-footer{
    border-top:1px solid var(--sidebar-border);
    padding:.75rem .8rem;
    display:flex; align-items:center; gap:.6rem;
  }
  .avatar{
    flex:none; width:32px; height:32px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700; font-family:var(--font-body);
  }
  .user-meta{overflow:hidden; white-space:nowrap;}
  body.is-collapsed .user-meta{display:none;}
  .user-name{font-size:13px; font-weight:600; color:var(--sidebar-text);}
  .user-role{font-size:11px; color:var(--sidebar-text-dim);}
  .collapse-btn{
    margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--sidebar-border); color:var(--sidebar-text-dim);
    cursor:pointer;
  }
  .collapse-btn:hover{color:var(--sidebar-text); border-color:var(--sidebar-text-dim);}
  body.is-collapsed .collapse-btn .icon{transform:rotate(180deg);}
  body.is-collapsed .sidebar-footer{justify-content:center;}
  body.is-collapsed .collapse-btn{margin-left:0;}

  .sidebar-scrim{display:none;}

  @media (max-width:900px){
    .sidebar{ transform:translateX(-100%); width:min(82vw, 300px); box-shadow:var(--shadow-pop); }
    body.drawer-open .sidebar{ transform:translateX(0); }
    #app{ margin-left:0 !important; }
    .collapse-btn{display:none;}
    .sidebar-scrim{
      display:none; position:fixed; inset:0; background:rgba(20,15,9,.45); z-index:39;
    }
    body.drawer-open .sidebar-scrim{display:block;}
  }

  /* ---- Header ---- */
  .topbar{
    position:sticky; top:0; z-index:20;
    height:var(--header-h);
    padding-top:env(safe-area-inset-top,0px);
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-soft);
    display:flex; align-items:center; gap:.9rem;
    padding-left:1.4rem; padding-right:1.4rem;
  }
  .topbar-inner{display:flex; align-items:center; gap:.9rem; width:100%; height:100%;}
  .icon-btn{
    flex:none; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid transparent; color:var(--text-dim); cursor:pointer;
  }
  .icon-btn:hover{background:var(--bg-sunken); color:var(--text);}
  .icon-btn .icon{width:18px;height:18px;}
  .drawer-toggle{display:none;}
  @media (max-width:900px){ .drawer-toggle{display:flex;} }

  .breadcrumbs{display:flex; align-items:center; gap:.4rem; font-size:13px; color:var(--text-faint); overflow:hidden; white-space:nowrap;}
  .breadcrumbs b{color:var(--text); font-weight:600;}
  .breadcrumbs .crumb-sep{color:var(--text-faint); opacity:.6;}
  .breadcrumbs .crumb{cursor:pointer;}
  .breadcrumbs .crumb:hover{color:var(--text);}

  .topbar-spacer{flex:1;}

  .search-wrap{position:relative; width:230px;}
  @media (max-width:720px){ .search-wrap{display:none;} }
  .search-input{
    width:100%; height:34px; border-radius:var(--radius-s);
    border:1px solid var(--border); background:var(--bg-elev); color:var(--text);
    padding:0 .7rem 0 2.1rem; font-size:13px; font-family:inherit;
  }
  .search-input:focus{outline:none; border-color:var(--accent);}
  .search-wrap .icon{position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-faint); pointer-events:none;}
  .search-results{
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-m);
    box-shadow:var(--shadow-pop); overflow:hidden; z-index:30;
  }
  .search-results button{
    display:flex; flex-direction:column; gap:1px; width:100%; text-align:left;
    padding:.55rem .8rem; border:none; background:none; cursor:pointer; color:var(--text);
    border-bottom:1px solid var(--border-soft); font-size:13px;
  }
  .search-results button:last-child{border-bottom:none;}
  .search-results button:hover{background:var(--bg-sunken);}
  .search-results .path{font-size:11px; color:var(--text-faint);}
  .search-empty{padding:.7rem .8rem; font-size:12.5px; color:var(--text-faint);}

  .btn{
    display:inline-flex; align-items:center; gap:.4rem;
    height:34px; padding:0 .85rem; border-radius:var(--radius-s);
    font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent;
    font-family:inherit;
  }
  .btn .icon{width:15px;height:15px;}
  .btn-primary{background:var(--accent); color:var(--accent-contrast);}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-ghost{background:none; border-color:var(--border); color:var(--text-dim);}
  .btn-ghost:hover{color:var(--text); border-color:var(--text-faint);}

  /* ---- Main / content ---- */
  main{padding:1.6rem 1.6rem 3.5rem;}
  @media (max-width:600px){ main{padding:1.15rem 1rem 3rem;} .topbar{padding-left:1rem; padding-right:1rem;} }
  .view{max-width:1180px; margin:0 auto;}

  .page-head{margin-bottom:1.6rem;}
  .page-eyebrow{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:.5rem;}
  .page-title{font-size:26px;}
  .page-desc{color:var(--text-dim); font-size:14px; margin-top:.5rem; max-width:62ch;}

  /* ---- Badges / status system ---- */
  .badge{
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:11px; font-weight:600; letter-spacing:.02em;
    padding:.24rem .55rem; border-radius:var(--radius-s); white-space:nowrap;
  }
  .badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}
  .badge-neutral{background:var(--bg-sunken); color:var(--text-dim);}
  .badge-accent{background:var(--accent-soft); color:var(--accent-dark);}
  .badge-good{background:var(--good-soft); color:var(--good);}
  .badge-warn{background:var(--warn-soft); color:var(--warn);}
  .badge-bad{background:var(--bad-soft); color:var(--bad);}

  /* ---- Cards ---- */
  .card{
    background:var(--bg-elev); border:1px solid var(--border-soft);
    border-radius:var(--radius-l); padding:1.15rem 1.2rem;
  }

  /* Indicator / KPI cards */
  .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.8rem;}
  @media (max-width:900px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .kpi-grid{grid-template-columns:1fr;} }
  .kpi-card{display:flex; flex-direction:column; gap:.6rem;}
  .kpi-top{display:flex; align-items:flex-start; justify-content:space-between;}
  .kpi-icon{
    width:32px; height:32px; border-radius:var(--radius-s); background:var(--bg-sunken);
    display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  }
  .kpi-icon .icon{width:16px;height:16px;}
  .kpi-value{font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--text-faint); font-variant-numeric:tabular-nums;}
  .kpi-label{font-size:12.5px; font-weight:600; color:var(--text);}
  .kpi-caption{font-size:11.5px; color:var(--text-faint);}

  /* Flow diagram */
  .flow-section{margin-bottom:2rem;}
  .flow-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap;}
  .flow-head h2{font-size:17px;}
  .flow-note{font-size:12.5px; color:var(--text-faint);}
  .flow-track{
    display:flex; align-items:center; gap:.4rem;
    overflow-x:auto; padding:.3rem .1rem .8rem;
  }
  .flow-chip{
    flex:none; display:flex; align-items:center; gap:.4rem;
    background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:var(--radius-s);
    padding:.45rem .9rem; font-size:12.5px; font-weight:600; color:var(--text);
    font-family:var(--font-mono);
  }
  .flow-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}
  .flow-arrow{flex:none; color:var(--text-faint); width:16px; height:16px;}

  /* Module cards grid */
  .module-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.4rem;}
  @media (max-width:760px){ .module-grid{grid-template-columns:1fr;} }
  .module-card{
    text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:.7rem;
    transition:border-color .12s ease;
  }
  .module-card:hover{border-color:var(--accent);}
  .module-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem;}
  .module-icon{
    width:38px; height:38px; border-radius:var(--radius-m); background:var(--accent-soft); color:var(--accent-dark);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .module-icon .icon{width:19px;height:19px;}
  .module-card h3{font-size:17px;}
  .module-card p{font-size:13px; color:var(--text-dim);}
  .module-tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.15rem;}
  .module-tag{font-size:11.5px; color:var(--text-dim); background:var(--bg-sunken); padding:.22rem .55rem; border-radius:var(--radius-s);}

  /* Transversal banner */
  .transversal-card{display:flex; flex-direction:column; gap:.85rem;}
  .transversal-top{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
  .transversal-top-left{display:flex; align-items:center; gap:.7rem;}
  .transversal-chips{display:flex; flex-wrap:wrap; gap:.5rem;}
  .transversal-chip{
    display:flex; align-items:center; gap:.4rem; font-size:12.5px; font-weight:500;
    border:1px solid var(--border); border-radius:var(--radius-s); padding:.4rem .65rem; cursor:pointer; color:var(--text);
  }
  .transversal-chip:hover{border-color:var(--accent); color:var(--accent-dark);}
  .transversal-chip .icon{width:14px;height:14px; color:var(--text-faint);}

  /* Sub-nav pills used on group landing pages */
  .subnav{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem;}
  .subnav-pill{
    font-size:12.5px; font-weight:600; padding:.4rem .8rem; border-radius:var(--radius-s);
    border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
  }
  .subnav-pill:hover{color:var(--text); border-color:var(--text-faint);}
  .subnav-pill.is-active{background:var(--text); color:var(--bg-elev); border-color:var(--text);}

  .children-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;}
  @media (max-width:900px){ .children-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .children-grid{grid-template-columns:1fr;} }
  .child-card{display:flex; flex-direction:column; gap:.5rem; cursor:pointer;}
  .child-card:hover{border-color:var(--accent);}
  .child-card-top{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
  .child-card h4{font-size:14.5px;}
  .child-card p{font-size:12px; color:var(--text-faint);}

  /* Empty state (leaf / under construction) */
  .empty-state{
    display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
    padding:2.6rem 2rem; text-align:left;
  }
  .empty-icon{
    width:52px; height:52px; border-radius:var(--radius-m); background:var(--accent-soft); color:var(--accent-dark);
    display:flex; align-items:center; justify-content:center;
  }
  .empty-icon .icon{width:24px;height:24px;}
  .empty-state h2{font-size:20px;}
  .empty-state p{color:var(--text-dim); font-size:13.5px; max-width:56ch;}
  .empty-back{
    display:inline-flex; align-items:center; gap:.4rem; font-size:13px; font-weight:600;
    color:var(--accent-dark); cursor:pointer; margin-top:.2rem;
  }
  .empty-back .icon{width:14px;height:14px; transform:rotate(180deg);}

  /* Table system (defined & ready, not populated yet) */
  .table-wrap{overflow-x:auto; border:1px solid var(--border-soft); border-radius:var(--radius-m);}
  table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
  table.data-table th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-faint); font-weight:600; padding:.6rem .85rem; border-bottom:1px solid var(--border-soft);
    background:var(--bg-sunken);
  }
  table.data-table td{padding:.65rem .85rem; border-bottom:1px solid var(--border-soft); color:var(--text);}
  table.data-table tr:last-child td{border-bottom:none;}

  /* ---- Modal system ---- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(20,15,9,.45); z-index:60;
    display:flex; align-items:center; justify-content:center; padding:1.2rem;
  }
  .modal-backdrop[hidden]{display:none;}
  .modal{
    width:100%; max-width:520px; max-height:min(82vh,640px); overflow-y:auto;
    background:var(--bg-elev); border-radius:var(--radius-l); border:1px solid var(--border-soft);
    box-shadow:var(--shadow-pop); padding:1.5rem;
  }
  .modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem;}
  .modal-head h3{font-size:18px;}
  .modal-body{display:flex; flex-direction:column; gap:1rem; font-size:13.5px; color:var(--text-dim);}
  .modal-body b{color:var(--text);}
  .pillar-row{display:flex; gap:.7rem; align-items:flex-start;}
  .pillar-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:6px; flex:none;}
  .legend-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem;}