:root{
  --dc-red:#890000; /* Demand Civil brand red */
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --text:#121316;
  --muted:#6B7280;
  --muted-2:#9AA0AA;
  --line:#E6E8ED;
  --good:#0FA968;
  --warn:#D98C00;
  --bad:#B42318;

  --shadow: 0 12px 30px rgba(15, 23, 42, .10);
  --shadow-soft: 0 8px 18px rgba(15, 23, 42, .08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;

  --pad:18px;
  --pad-lg:22px;

  --h1:26px;
  --h2:18px;
  --h3:16px;
  --p:14px;
  --small:12px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% -180px, rgba(137,0,0,.14), transparent 55%),
              var(--bg);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

.stage{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px 16px;
}

.device{
  width:min(430px, 100%);
  border-radius:38px;
  overflow:hidden;
  box-shadow: 0 18px 55px rgba(2, 6, 23, .18);
  background: var(--bg);
  border: 1px solid rgba(15,23,42,.08);
}

.statusbar{
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,0));
}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  padding: 10px var(--pad) 12px;
  background: rgba(245,246,248,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(230,232,237,.8);
}

.toprow{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand img{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  padding:6px;
}
.brand .name{
  font-weight:800;
  letter-spacing:.2px;
  font-size: 16px;
  line-height: 1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rightbits{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(230,232,237,.9);
  color: var(--muted);
  font-size: var(--small);
  white-space:nowrap;
}
.dot{
  width:8px; height:8px; border-radius:99px;
  background: var(--good);
}
.dot.warn{background:var(--warn);}
.dot.bad{background:var(--bad);}

.projectline{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.project{
  font-size: var(--p);
  color: var(--muted);
  font-weight:600;
}
.rolechip{
  background: rgba(137,0,0,.08);
  border: 1px solid rgba(137,0,0,.16);
  color: var(--dc-red);
  font-weight:700;
}

.content{
  padding: 18px var(--pad) 110px;
}

.h1{
  font-size: var(--h1);
  font-weight: 900;
  margin: 14px 0 6px;
  letter-spacing: -0.3px;
}
.sub{
  margin:0 0 10px;
  color: var(--muted);
  font-size: var(--p);
}

.section-title{
  margin:18px 0 12px;
  font-size: var(--h2);
  font-weight: 850;
  letter-spacing: -0.2px;
}
.section-sub{
  margin:-6px 0 12px;
  color:var(--muted);
  font-size: var(--p);
}

.card{
  background: var(--card);
  border: 1px solid rgba(230,232,237,.92);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.card.pad{
  padding: 16px 16px;
}

.primary{
  width:100%;
  padding: 16px 16px;
  background: var(--dc-red);
  color:#fff;
  border:none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 30px rgba(137,0,0,.25);
  cursor:pointer;
}
.primary:active{transform: translateY(1px);}

.btn-row{
  display:flex;
  gap:12px;
}
.secondary{
  flex:1;
  padding: 14px 14px;
  background:#fff;
  border: 1px solid rgba(230,232,237,.95);
  border-radius: 18px;
  font-weight: 800;
  cursor:pointer;
}
.secondary:active{transform: translateY(1px);}
.ghost{
  border:none;
  background: transparent;
  color: var(--muted);
  font-weight:800;
  padding: 14px 8px;
  cursor:pointer;
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.action-card{
  padding: 14px 12px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(230,232,237,.95);
  box-shadow: var(--shadow-soft);
  min-height: 86px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.action-card .icon{
  width:32px; height:32px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(137,0,0,.08);
  border: 1px solid rgba(137,0,0,.12);
}
.action-card .label{
  font-size: 13px;
  font-weight: 850;
  color: var(--text);
  letter-spacing: -0.1px;
  margin-top: 10px;
}

.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.item{
  padding: 14px 14px;
  border-radius: 24px;
  background:#fff;
  border: 1px solid rgba(230,232,237,.95);
  box-shadow: var(--shadow-soft);
  display:flex;
  gap:12px;
}
.badge{
  width:40px; height:40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  flex: 0 0 40px;
  border: 1px solid rgba(15,23,42,.08);
}
.badge svg{width:20px;height:20px;}
.badge.good{background: rgba(15,169,104,.12);}
.badge.warn{background: rgba(217,140,0,.14);}
.badge.bad{background: rgba(180,35,24,.12);}
.item .t{
  font-weight: 900;
  font-size: 14px;
  margin: 2px 0 4px;
}
.item .d{
  color: var(--muted);
  font-size: 13px;
  margin:0;
}
.item .meta{
  margin-left:auto;
  text-align:right;
  color: var(--muted-2);
  font-weight: 800;
  font-size: 12px;
  white-space:nowrap;
}

.kpi{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items:stretch;
}
.kpi .left{
  padding: 14px 14px;
}
.kpi .big{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.4px;
  margin: 6px 0 4px;
}
.kpi .small{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.kpi .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(230,232,237,.95);
  background: #fff;
}
.kpi .pill.good{color: var(--good); border-color: rgba(15,169,104,.25); background: rgba(15,169,104,.08);}
.kpi .pill.warn{color: var(--warn); border-color: rgba(217,140,0,.25); background: rgba(217,140,0,.08);}
.kpi .pill.bad{color: var(--bad); border-color: rgba(180,35,24,.25); background: rgba(180,35,24,.08);}
.kpi .right{
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.kpi .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(230,232,237,.95);
  overflow:hidden;
  border: 1px solid rgba(230,232,237,.95);
}
.kpi .bar > div{
  height:100%;
  width: 62%;
  background: linear-gradient(90deg, rgba(15,169,104,1), rgba(217,140,0,1));
  border-radius: 999px;
}
.kpi .kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 10px;
}

.form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.field{
  padding: 14px 14px;
  border-radius: 24px;
  background:#fff;
  border: 1px solid rgba(230,232,237,.95);
  box-shadow: var(--shadow-soft);
}
.field label{
  display:block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 8px;
}
.control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.value{
  font-weight: 900;
  font-size: 14px;
  color: var(--text);
}
.hint{
  color: var(--muted-2);
  font-weight: 800;
  font-size: 12px;
}
.input{
  width:100%;
  border:none;
  outline:none;
  font-size: 14px;
  font-weight: 800;
  padding: 0;
  background: transparent;
  color: var(--text);
}
.input::placeholder{color: rgba(154,160,170,.9); font-weight: 750;}
.textarea{
  min-height: 110px;
  resize:none;
  line-height: 1.45;
}

.toggle{
  display:flex;
  gap:10px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(230,232,237,.85);
  border: 1px solid rgba(230,232,237,.95);
}
.tbtn{
  flex:1;
  padding: 12px 10px;
  border-radius: 999px;
  border:none;
  background: transparent;
  font-weight: 950;
  color: var(--muted);
  cursor:pointer;
}
.tbtn.active{
  background: #fff;
  color: var(--dc-red);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(137,0,0,.12);
}

.sticky-actions{
  position:sticky;
  bottom: 84px;
  z-index: 3;
  margin-top: 14px;
  padding-top: 10px;
}

.bottomnav{
  position:fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display:flex;
  justify-content:center;
  padding: 0 16px 18px;
  pointer-events:none; /* keep device-centered */
}
.navwrap{
  width:min(430px, 100%);
  pointer-events:auto;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(230,232,237,.95);
  border-radius: 26px;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px 10px;
  gap: 4px;
}
.navitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 18px;
  color: var(--muted);
  font-weight: 900;
  font-size: 11px;
}
.navitem svg{width:18px;height:18px;}
.navitem.active{
  background: rgba(137,0,0,.09);
  color: var(--dc-red);
  border: 1px solid rgba(137,0,0,.12);
}

.fab{
  width: 52px; height: 52px;
  border-radius: 18px;
  background: var(--dc-red);
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow: 0 16px 34px rgba(137,0,0,.24);
  margin-top: -26px;
  border: 1px solid rgba(255,255,255,.35);
}
.fab svg{width:22px;height:22px;}

/* Icon button (used for Back) */
.iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(230,232,237,.95);
  color: var(--text);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.iconbtn:active{transform: translateY(1px);}
.iconbtn svg{width:18px;height:18px;}



/* ---------- Additional mobile helpers ---------- */
.inline-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.metric-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.metric-tile{
  padding: 12px;
  border-radius: 20px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  box-shadow: var(--shadow-soft);
}
.metric-tile .k{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.metric-tile .v{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.2px;
}
.metric-tile.good .v{color: var(--good);}
.metric-tile.warn .v{color: var(--warn);}
.metric-tile.bad .v{color: var(--bad);}

.info-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
  border-top: 1px dashed rgba(230,232,237,.95);
}
.info-row:first-child{border-top:none; padding-top:0;}
.info-row .l{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.info-row .r{
  font-size: 13px;
  font-weight: 900;
  text-align:right;
}

.upload-zone{
  border: 1.5px dashed rgba(137,0,0,.22);
  background: rgba(137,0,0,.03);
  border-radius: 22px;
  padding: 18px 14px;
  text-align:center;
}
.upload-zone .up-title{
  font-size:14px;
  font-weight:950;
}
.upload-zone .up-sub{
  color: var(--muted);
  font-size:12px;
  margin-top:6px;
}

.route-card{
  background: linear-gradient(180deg, rgba(137,0,0,.05), rgba(255,255,255,.9));
  border: 1px solid rgba(137,0,0,.12);
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.route-title{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 8px;
}
.route-flow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.route-step{
  padding: 8px 10px;
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  font-size:12px;
  font-weight:900;
}
.route-arrow{
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.table-mini{
  border: 1px solid rgba(230,232,237,.95);
  border-radius: 22px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-soft);
}
.table-mini .tr{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(230,232,237,.95);
}
.table-mini .tr:first-child{border-top:none;}
.table-mini .th{
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.4px;
}
.table-mini .td{
  font-size: 13px;
  font-weight: 900;
  text-align:right;
}

.small-note{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height:1.45;
}

.progress-track{
  height: 12px;
  border-radius: 999px;
  background: rgba(230,232,237,.95);
  overflow:hidden;
  border:1px solid rgba(230,232,237,.95);
}
.progress-fill{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dc-red), rgba(15,169,104,1));
}

.badge-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(230,232,237,.95);
  background:#fff;
}
.badge-tag.good{background: rgba(15,169,104,.08); color: var(--good); border-color: rgba(15,169,104,.18);}
.badge-tag.warn{background: rgba(217,140,0,.08); color: var(--warn); border-color: rgba(217,140,0,.18);}
.badge-tag.bad{background: rgba(180,35,24,.08); color: var(--bad); border-color: rgba(180,35,24,.18);}
.badge-tag.route{background: rgba(137,0,0,.06); color: var(--dc-red); border-color: rgba(137,0,0,.14);}

/* ---------- Desktop / web final design ---------- */
.web-stage{
  min-height:100%;
  padding: 28px 22px;
}
.web-shell{
  width:min(1440px, 100%);
  margin:0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,246,248,.98));
  border:1px solid rgba(230,232,237,.92);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(15,23,42,.14);
  overflow:hidden;
}
.web-topbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 18px 24px;
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(230,232,237,.95);
  backdrop-filter: blur(10px);
}
.web-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.web-brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  background:#fff;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.06);
  padding:8px;
}
.web-brand .name{
  font-weight:950;
  font-size:18px;
  letter-spacing:-0.2px;
}
.web-subtitle{
  color: var(--muted);
  font-size:13px;
  font-weight:700;
}
.web-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.web-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  font-size:12px;
  font-weight:900;
  color: var(--muted);
}
.web-chip.route{color: var(--dc-red); background: rgba(137,0,0,.05); border-color: rgba(137,0,0,.14);}
.web-body{
  display:grid;
  grid-template-columns: 250px 1fr;
  min-height: 880px;
}
.web-sidebar{
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(17,24,39,.92));
  color:#fff;
  padding: 22px 16px;
}
.web-side-title{
  color: rgba(255,255,255,.66);
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:.6px;
  font-weight: 900;
  padding: 8px 12px;
}
.web-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.web-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-radius: 16px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 850;
}
.web-nav a.active{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.web-nav small{
  color: rgba(255,255,255,.60);
  font-weight: 800;
}
.web-main{
  padding: 24px;
}
.web-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.web-head h1{
  margin:0;
  font-size: 30px;
  letter-spacing: -0.5px;
  line-height:1.1;
}
.web-head p{
  margin:8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight:700;
}
.web-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.web-grid-2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
}
.web-grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.web-grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.web-card{
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.web-card h3{
  margin:0 0 6px;
  font-size: 16px;
  letter-spacing:-0.2px;
}
.web-card p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  font-weight:700;
}
.web-kpi{
  background: linear-gradient(180deg, rgba(137,0,0,.05), rgba(255,255,255,.92));
}
.web-kpi .big{
  font-size: 34px;
  line-height:1;
  letter-spacing:-1px;
  font-weight: 950;
  margin-top:8px;
}
.web-kpi .line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}
.web-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  margin-top:10px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
}
.web-pill.good{color: var(--good); background: rgba(15,169,104,.08); border-color: rgba(15,169,104,.18);}
.web-pill.warn{color: var(--warn); background: rgba(217,140,0,.08); border-color: rgba(217,140,0,.18);}
.web-pill.bad{color: var(--bad); background: rgba(180,35,24,.08); border-color: rgba(180,35,24,.18);}
.web-table{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.web-table th{
  text-align:left;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.5px;
  padding: 0 0 10px;
}
.web-table td{
  padding: 12px 0;
  font-size: 13px;
  font-weight: 800;
  border-top: 1px solid rgba(230,232,237,.95);
}
.web-table td:last-child, .web-table th:last-child{text-align:right;}
.web-table .em{
  font-weight: 950;
}
.web-progress{
  height: 12px;
  border-radius:999px;
  background: rgba(230,232,237,.95);
  overflow:hidden;
  margin-top:10px;
  border:1px solid rgba(230,232,237,.95);
}
.web-progress > div{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(137,0,0,1), rgba(15,169,104,1));
}
.web-upload{
  border:1.5px dashed rgba(137,0,0,.22);
  background: rgba(137,0,0,.03);
  border-radius: 22px;
  padding: 20px;
}
.web-upload h4{
  margin:0 0 6px;
  font-size:15px;
}
.web-upload p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  font-weight:700;
}
.web-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(230,232,237,.95);
  background:#fff;
  font-size: 13px;
  font-weight: 900;
  cursor:pointer;
}
.web-btn.primary{
  background: var(--dc-red);
  color:#fff;
  border-color: rgba(137,0,0,.2);
  box-shadow: 0 12px 28px rgba(137,0,0,.22);
}
.web-btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
.web-stat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.web-stat{
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.web-stat .k{
  color: var(--muted);
  font-size:12px;
  font-weight:900;
}
.web-stat .v{
  margin-top:8px;
  font-size:28px;
  font-weight: 950;
  letter-spacing:-0.8px;
}
.web-note{
  color: var(--muted);
  font-size: 12px;
  font-weight:700;
  line-height:1.5;
}
.web-split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}
.web-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}
.web-list .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  background: rgba(245,246,248,.9);
  border:1px solid rgba(230,232,237,.95);
  border-radius: 18px;
}
.web-list .row .meta{
  color: var(--muted);
  font-size:12px;
  font-weight:800;
}
.web-list .row .val{
  font-size:14px;
  font-weight:950;
}
.web-approval-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.web-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  font-size:12px;
  font-weight:900;
}
.web-tag.route{
  color: var(--dc-red);
  background: rgba(137,0,0,.05);
  border-color: rgba(137,0,0,.14);
}
.web-tag.good{
  color: var(--good);
  background: rgba(15,169,104,.08);
  border-color: rgba(15,169,104,.18);
}
.web-tag.warn{
  color: var(--warn);
  background: rgba(217,140,0,.08);
  border-color: rgba(217,140,0,.18);
}



/* ----- Core build flow final design ----- */
body.core-only{
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(137,0,0,.12), transparent 60%),
    linear-gradient(180deg, #f7f7fa, #f3f4f7);
}
.hero-shell{
  width:min(1180px, 100%);
  margin:0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,246,248,.98));
  border:1px solid rgba(230,232,237,.95);
  border-radius:34px;
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
}
.hero-top{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px;
  border-bottom:1px solid rgba(230,232,237,.95);
  background: rgba(255,255,255,.78);
}
.hero-top .brand-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.hero-top .brand-row img{
  width:42px;height:42px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.06);padding:8px;
}
.hero-top .brand-title{
  font-size:18px;font-weight:950;letter-spacing:-.2px;
}
.hero-top .brand-sub{
  font-size:13px;font-weight:700;color:var(--muted);
}
.hero-main{
  padding:32px 28px 30px;
}
.flow-hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:20px;
  align-items:stretch;
}
.flow-copy h1{
  margin:0;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-1.1px;
}
.flow-copy p{
  margin:14px 0 0;
  font-size:15px;
  font-weight:700;
  color:var(--muted);
  line-height:1.6;
}
.flow-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.flow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  font-size:12px;
  font-weight:900;
}
.flow-pill.good{background: rgba(15,169,104,.08); color:var(--good); border-color: rgba(15,169,104,.18);}
.flow-pill.warn{background: rgba(217,140,0,.08); color:var(--warn); border-color: rgba(217,140,0,.18);}
.flow-pill.route{background: rgba(137,0,0,.06); color:var(--dc-red); border-color: rgba(137,0,0,.14);}
.flow-card{
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  border-radius:26px;
  box-shadow: var(--shadow-soft);
  padding:18px;
}
.flow-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.flow-step{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border-radius:22px;
  background: rgba(245,246,248,.9);
  border:1px solid rgba(230,232,237,.95);
}
.flow-step .num{
  width:34px;height:34px;border-radius:14px;background: rgba(137,0,0,.08);color:var(--dc-red);border:1px solid rgba(137,0,0,.14);display:grid;place-items:center;font-size:14px;font-weight:950;flex:0 0 34px;
}
.flow-step .t{font-size:15px;font-weight:950;letter-spacing:-.2px;}
.flow-step .d{font-size:13px;font-weight:700;color:var(--muted);margin-top:4px;line-height:1.45;}
.flow-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;
}
.start-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 18px;border-radius:18px;background:var(--dc-red);color:#fff;border:0;
  font-weight:950;font-size:15px;box-shadow:0 14px 30px rgba(137,0,0,.24);
}
.mini-links{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;
}
.mini-links a{
  padding:8px 10px;border-radius:999px;background:#fff;border:1px solid rgba(230,232,237,.95);font-size:12px;font-weight:900;color:var(--muted);
}
.banner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(230,232,237,.95);
  box-shadow: var(--shadow-soft);
  background:#fff;
}
.banner .bicon{
  width:34px;height:34px;border-radius:14px;display:grid;place-items:center;flex:0 0 34px;
  border:1px solid rgba(230,232,237,.95);
}
.banner .btitle{font-size:14px;font-weight:950;letter-spacing:-.2px;}
.banner .bcopy{font-size:13px;font-weight:700;color:var(--muted);margin-top:4px;line-height:1.45;}
.banner.good{background: rgba(15,169,104,.07); border-color: rgba(15,169,104,.18);}
.banner.good .bicon{background: rgba(15,169,104,.12); color:var(--good); border-color: rgba(15,169,104,.18);}
.banner.warn{background: rgba(217,140,0,.07); border-color: rgba(217,140,0,.18);}
.banner.warn .bicon{background: rgba(217,140,0,.12); color:var(--warn); border-color: rgba(217,140,0,.18);}
.banner.bad{background: rgba(180,35,24,.06); border-color: rgba(180,35,24,.18);}
.banner.bad .bicon{background: rgba(180,35,24,.12); color:var(--bad); border-color: rgba(180,35,24,.18);}
.state-stepper{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
}
.state-step{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(230,232,237,.95);background:#fff;color:var(--muted);
}
.state-step.active{color:var(--dc-red);background: rgba(137,0,0,.06);border-color: rgba(137,0,0,.14);}
.state-step.done{color:var(--good);background: rgba(15,169,104,.08);border-color: rgba(15,169,104,.18);}
.web-main-core{
  padding:24px;
}
.web-stepbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;
}
.web-stepbar .left h1{
  margin:0;font-size:30px;letter-spacing:-.6px;line-height:1.06;
}
.web-stepbar .left p{
  margin:8px 0 0;font-size:14px;font-weight:700;color:var(--muted);
}
.web-body-core{
  padding:0 24px 26px;
}
.web-hero-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:16px;
}
.web-field-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.input-sim{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  box-shadow: var(--shadow-soft);
  font-size:14px;
  font-weight:850;
}
.input-sim .hint{color:var(--muted-2);font-size:12px;font-weight:800;}
.input-sim.multiline{
  align-items:flex-start;
  min-height:86px;
}
.input-sim.error{
  border-color: rgba(180,35,24,.26);
  background: rgba(180,35,24,.03);
}
.field-note{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-top:7px;
}
.field-note.error{color:var(--bad);}
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px 18px;
  border-radius:22px;
  border:1.5px dashed rgba(137,0,0,.18);
  background: rgba(137,0,0,.03);
}
.empty-state .ring{
  width:62px;height:62px;border-radius:24px;
  display:grid;place-items:center;
  background:#fff;border:1px solid rgba(230,232,237,.95);box-shadow: var(--shadow-soft);
}
.empty-state .et{
  margin-top:14px;font-size:16px;font-weight:950;letter-spacing:-.2px;
}
.empty-state .ed{
  margin-top:6px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.5;max-width:420px;
}
.footer-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;
}
.web-footer-actions{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.text-link{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--muted);
}
.kpi-callout{
  padding:16px;border-radius:22px;background: linear-gradient(180deg, rgba(137,0,0,.05), rgba(255,255,255,.92));border:1px solid rgba(137,0,0,.12);
}
.kpi-callout .big{
  margin-top:8px;font-size:34px;line-height:1;font-weight:950;letter-spacing:-1px;
}
.check-list{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;
}
.check-item{
  display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:800;color:var(--text);
}
.check-item .dot{
  width:18px;height:18px;border-radius:99px;flex:0 0 18px;background:rgba(15,169,104,.12);border:1px solid rgba(15,169,104,.18);margin-top:1px;
}
.small-grid{
  display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;
}
.divider{
  height:1px;background:rgba(230,232,237,.95);margin:16px 0;
}
.mobile-state-links{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
}
.mobile-state-links a{
  font-size:11px;font-weight:900;color:var(--muted);
  padding:7px 10px;border-radius:999px;background:#fff;border:1px solid rgba(230,232,237,.95);
}
.sticky-actions .primary,
.sticky-actions .secondary{min-height:52px;}
.summary-box{
  border:1px solid rgba(230,232,237,.95);
  border-radius:22px;
  background:#fff;
  box-shadow: var(--shadow-soft);
  padding:14px;
}
.summary-box .row{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px dashed rgba(230,232,237,.95);
}
.summary-box .row:first-child{border-top:none;padding-top:0;}
.summary-box .k{font-size:12px;font-weight:800;color:var(--muted);}
.summary-box .v{font-size:13px;font-weight:950;text-align:right;}
.web-source-row{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.web-note-list{
  display:flex;flex-direction:column;gap:10px;margin-top:12px;
}
.web-note-list .n{
  display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:rgba(245,246,248,.92);border:1px solid rgba(230,232,237,.95);border-radius:18px;
}
.web-note-list .n .k{font-size:13px;font-weight:900;}
.web-note-list .n .d{font-size:12px;font-weight:800;color:var(--muted);margin-top:4px;}
.web-note-list .n .v{font-size:13px;font-weight:950;white-space:nowrap;text-align:right;}
@media (max-width: 980px){
  .flow-hero,
  .web-hero-grid,
  .web-grid-2,
  .web-split{
    grid-template-columns: 1fr;
  }
  .hero-top,
  .web-topbar{
    flex-wrap:wrap;
  }
  .web-stat-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ----- March 10 final design landing / review pages ----- */
.design-main{
  padding: 34px 28px 34px;
}
.design-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:20px;
  align-items:start;
}
.design-copy h1{
  margin:0;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-1.1px;
}
.design-copy p{
  margin:14px 0 0;
  color: var(--muted);
  font-size:15px;
  font-weight:700;
  line-height:1.65;
}
.device-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  font-size:12px;
  font-weight:900;
}
.device-chip.desktop{color:#274690; background:rgba(39,70,144,.06); border-color:rgba(39,70,144,.14);}
.device-chip.mobile{color:var(--dc-red); background:rgba(137,0,0,.06); border-color:rgba(137,0,0,.14);}
.device-chip.state{color:var(--good); background:rgba(15,169,104,.08); border-color:rgba(15,169,104,.18);}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.journey-shell{
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  border-radius:28px;
  box-shadow: var(--shadow-soft);
  padding:18px;
}
.journey-title{
  font-size:16px;
  font-weight:950;
  letter-spacing:-.2px;
}
.journey-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.journey-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:16px;
}
.journey-step{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  background:rgba(245,246,248,.92);
  border:1px solid rgba(230,232,237,.95);
  border-radius:22px;
}
.journey-num{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  font-size:15px; font-weight:950;
  background:rgba(137,0,0,.08); color:var(--dc-red); border:1px solid rgba(137,0,0,.14);
}
.journey-step .t{font-size:15px; font-weight:950; letter-spacing:-.2px;}
.journey-step .d{font-size:13px; font-weight:700; color:var(--muted); margin-top:4px; line-height:1.45;}
.journey-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 12px; border-radius:16px; background:#fff;
  border:1px solid rgba(230,232,237,.95); font-size:12px; font-weight:950;
}
.review-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:22px;
}
.review-panel{
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  border-radius:24px;
  box-shadow: var(--shadow-soft);
  padding:18px;
}
.review-panel h3{margin:0; font-size:16px; letter-spacing:-.2px;}
.review-panel p{margin:8px 0 0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.55;}
.review-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.review-links a{padding:9px 11px; border-radius:999px; background:#fff; border:1px solid rgba(230,232,237,.95); font-size:12px; font-weight:900; color:var(--muted);}
.review-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;}
.review-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:18px;
}
.review-hero h1{margin:0; font-size:30px; letter-spacing:-.6px; line-height:1.08;}
.review-hero p{margin:8px 0 0; color:var(--muted); font-size:14px; font-weight:700;}
.review-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;
}
.review-card{
  background:#fff; border:1px solid rgba(230,232,237,.95); border-radius:24px; box-shadow:var(--shadow-soft); padding:18px;
}
.review-card h3{margin:0; font-size:16px; letter-spacing:-.2px;}
.review-card p{margin:8px 0 0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.55;}
.review-card .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.handoff-card{
  margin-top:16px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(39,70,144,.16);
  background:linear-gradient(180deg, rgba(39,70,144,.05), rgba(255,255,255,.94));
  box-shadow: var(--shadow-soft);
}
.handoff-card h3{margin:0; font-size:15px; letter-spacing:-.2px;}
.handoff-card p{margin:8px 0 0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.55;}
.handoff-card .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.toprow .device-chip,
.web-actions .device-chip{margin-left:0;}
.web-actions{flex-wrap:wrap; justify-content:flex-end;}
@media (max-width: 980px){
  .design-grid,
  .review-split,
  .review-grid{grid-template-columns:1fr;}
  .journey-step{grid-template-columns:44px 1fr;}
  .journey-link{grid-column:2; width:max-content;}
}


.selector-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.selector-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;background:rgba(245,246,248,.92);border:1px solid rgba(230,232,237,.95);border-radius:20px;}
.selector-item .t{font-size:14px;font-weight:950;letter-spacing:-.2px;}
.selector-item .d{margin-top:4px;font-size:12px;font-weight:800;color:var(--muted);}
.selector-item.active{background:rgba(137,0,0,.05);border-color:rgba(137,0,0,.14);}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.module-card{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:24px;box-shadow:var(--shadow-soft);padding:18px;}
.module-card h3{margin:0 0 6px;font-size:16px;letter-spacing:-.2px;}
.module-card p{margin:0;color:var(--muted);font-size:13px;font-weight:700;line-height:1.55;}
.module-card .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.calendar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px;}
.calendar-day{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:20px;box-shadow:var(--shadow-soft);padding:14px;min-height:122px;}
.calendar-day .num{font-size:22px;font-weight:950;letter-spacing:-.6px;}
.calendar-day .lbl{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.calendar-day .note{margin-top:10px;font-size:12px;font-weight:800;color:var(--text);line-height:1.45;}
.calendar-day .note small{display:block;color:var(--muted);font-size:11px;font-weight:800;margin-top:4px;}
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px;}
.kpi-tile{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:18px;box-shadow:var(--shadow-soft);padding:14px;}
.kpi-tile .k{font-size:12px;font-weight:900;color:var(--muted);} 
.kpi-tile .v{margin-top:6px;font-size:22px;font-weight:950;letter-spacing:-.4px;}
.kpi-tile.good .v{color:var(--good);} .kpi-tile.warn .v{color:var(--warn);} .kpi-tile.bad .v{color:var(--bad);} 
@media (max-width:980px){.module-grid,.calendar-grid,.kpi-strip{grid-template-columns:1fr;}}


/* ----- March 13 dashboard layer ----- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.filter-select{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:150px;padding:11px 12px;border-radius:16px;background:#fff;border:1px solid rgba(230,232,237,.95);box-shadow:var(--shadow-soft);font-size:12px;font-weight:900;color:var(--text);}
.filter-select .muted{color:var(--muted);font-weight:800;}
.filter-select.ghost{background:rgba(245,246,248,.95);}
.widget-grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;}
.widget-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.alert-stack{display:flex;flex-direction:column;gap:10px;}
.state-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.state-panel{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:24px;box-shadow:var(--shadow-soft);padding:18px;}
.state-panel h4{margin:0;font-size:14px;letter-spacing:-.2px;}
.state-panel p{margin:8px 0 0;font-size:12px;color:var(--muted);font-weight:700;line-height:1.5;}
.skeleton-card{border:1px solid rgba(230,232,237,.95);border-radius:22px;background:#fff;padding:14px;box-shadow:var(--shadow-soft);margin-top:14px;}
.skeleton-line{height:12px;border-radius:999px;background:linear-gradient(90deg, rgba(230,232,237,.95), rgba(245,246,248,.95), rgba(230,232,237,.95));background-size:220px 100%;animation:shimmer 1.35s linear infinite;}
.skeleton-line + .skeleton-line{margin-top:10px;}
.skeleton-line.sm{width:36%;}.skeleton-line.md{width:62%;}.skeleton-line.lg{width:100%;}
@keyframes shimmer{0%{background-position:-220px 0;}100%{background-position:220px 0;}}
.no-access-box{border:1.5px dashed rgba(180,35,24,.20);background:rgba(180,35,24,.04);border-radius:22px;padding:18px 16px;margin-top:14px;}
.no-access-box .title{font-size:14px;font-weight:950;letter-spacing:-.2px;}.no-access-box .copy{margin-top:6px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.5;}
.quick-widget{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:20px;padding:14px;box-shadow:var(--shadow-soft);}
.quick-widget .title{font-size:13px;font-weight:950;}.quick-widget .copy{color:var(--muted);font-size:12px;font-weight:700;line-height:1.5;margin-top:5px;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.chart-stack{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.chart-row{display:grid;grid-template-columns:140px 1fr auto;gap:12px;align-items:center;}
.chart-label{font-size:13px;font-weight:900;}.chart-value{font-size:12px;font-weight:900;color:var(--muted);}
.chart-bar{height:12px;border-radius:999px;overflow:hidden;background:rgba(230,232,237,.95);border:1px solid rgba(230,232,237,.95);} .chart-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(137,0,0,1), rgba(15,169,104,1));}
.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px;}
.mini-calendar .cell{min-height:72px;background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:16px;box-shadow:var(--shadow-soft);padding:10px;}
.mini-calendar .day{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;}.mini-calendar .date{margin-top:4px;font-size:18px;font-weight:950;letter-spacing:-.4px;}.mini-calendar .task{margin-top:8px;font-size:11px;font-weight:800;line-height:1.35;}
.mobile-top-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.mobile-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.mobile-card{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:22px;box-shadow:var(--shadow-soft);padding:14px;}
.mobile-card h3{margin:0 0 6px;font-size:15px;letter-spacing:-.2px;}.mobile-card p{margin:0;color:var(--muted);font-size:12px;font-weight:700;line-height:1.5;}
.mobile-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.mobile-list .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:18px;background:rgba(245,246,248,.95);border:1px solid rgba(230,232,237,.95);}
.mobile-list .k{font-size:13px;font-weight:900;}.mobile-list .d{font-size:12px;font-weight:700;color:var(--muted);margin-top:4px;}.mobile-list .v{font-size:12px;font-weight:900;text-align:right;white-space:nowrap;}
@media (max-width: 980px){.widget-grid-2,.widget-grid-3,.state-gallery{grid-template-columns:1fr;}.chart-row{grid-template-columns:1fr;}.mini-calendar{grid-template-columns:repeat(2,1fr);}}


/* ----- Web frontend pack additions ----- */
.auth-shell{
  width:min(1180px, 100%);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,246,248,.98));
  border:1px solid rgba(230,232,237,.95);
  border-radius:34px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
}
.auth-grid{
  display:grid;
  grid-template-columns: .96fr 1.04fr;
  gap:0;
}
.auth-side{
  padding:34px 28px;
  background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(17,24,39,.92));
  color:#fff;
}
.auth-side h1{margin:0;font-size:40px;line-height:1.02;letter-spacing:-1px;}
.auth-side p{margin:14px 0 0;font-size:14px;font-weight:700;color:rgba(255,255,255,.72);line-height:1.6;}
.auth-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.auth-list .row{
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.auth-list .row .k{font-size:13px;font-weight:900;}
.auth-list .row .d{margin-top:4px;font-size:12px;font-weight:700;color:rgba(255,255,255,.68);line-height:1.5;}
.auth-form-wrap{padding:34px 28px;}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.auth-brand{display:flex;align-items:center;gap:12px;}
.auth-brand img{width:42px;height:42px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.06);padding:8px;}
.auth-brand .name{font-size:18px;font-weight:950;letter-spacing:-.2px;}
.auth-brand .sub{margin-top:4px;font-size:12px;font-weight:800;color:var(--muted);}
.auth-card{
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  border-radius:26px;
  box-shadow:var(--shadow-soft);
  padding:22px;
}
.auth-card h2{margin:0;font-size:28px;letter-spacing:-.6px;}
.auth-card p{margin:10px 0 0;color:var(--muted);font-size:14px;font-weight:700;line-height:1.6;}
.form-stack{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.label{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.sim-input{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(230,232,237,.95);
  box-shadow:var(--shadow-soft);
  font-size:14px;
  font-weight:850;
}
.sim-input.error{border-color:rgba(180,35,24,.28);background:rgba(180,35,24,.03);}
.sim-input .hint{color:var(--muted-2);font-size:12px;font-weight:800;}
.helper-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12px;font-weight:800;color:var(--muted);}
.helper-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.helper-links a{padding:8px 10px;border-radius:999px;background:#fff;border:1px solid rgba(230,232,237,.95);font-size:12px;font-weight:900;color:var(--muted);}
.page-section{margin-top:18px;}
.dual-col{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;}
.stat-row{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin-top:12px;}
.metric-card{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:20px;box-shadow:var(--shadow-soft);padding:14px;}
.metric-card .k{font-size:12px;font-weight:900;color:var(--muted);}
.metric-card .v{margin-top:6px;font-size:22px;font-weight:950;letter-spacing:-.4px;}
.metric-card.good .v{color:var(--good);}
.metric-card.warn .v{color:var(--warn);}
.metric-card.bad .v{color:var(--bad);}
.info-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.matrix-wrap{overflow:auto;border:1px solid rgba(230,232,237,.95);border-radius:22px;box-shadow:var(--shadow-soft);background:#fff;}
.matrix{width:100%;border-collapse:collapse;min-width:760px;}
.matrix th,.matrix td{padding:12px 14px;border-top:1px solid rgba(230,232,237,.95);font-size:13px;font-weight:800;text-align:left;}
.matrix th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;background:rgba(245,246,248,.92);}
.matrix tr:first-child th,.matrix tr:first-child td{border-top:none;}
.toggle-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(230,232,237,.95);background:#fff;}
.toggle-chip.yes{color:var(--good);background:rgba(15,169,104,.08);border-color:rgba(15,169,104,.18);}
.toggle-chip.no{color:var(--bad);background:rgba(180,35,24,.06);border-color:rgba(180,35,24,.16);}
.threshold-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px;}
.threshold-box{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:20px;box-shadow:var(--shadow-soft);padding:14px;}
.threshold-box .range{font-size:15px;font-weight:950;letter-spacing:-.2px;}
.threshold-box .role{margin-top:6px;font-size:12px;font-weight:900;color:var(--muted);}
.threshold-box.active{border-color:rgba(137,0,0,.16);background:rgba(137,0,0,.04);}
.notification-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.notification-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px;background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:20px;box-shadow:var(--shadow-soft);}
.notification-item .icon{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:rgba(137,0,0,.08);border:1px solid rgba(137,0,0,.14);color:var(--dc-red);}
.notification-item .title{font-size:14px;font-weight:950;letter-spacing:-.2px;}
.notification-item .desc{margin-top:4px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.5;}
.notification-item .meta{font-size:12px;font-weight:900;color:var(--muted);white-space:nowrap;text-align:right;}
.component-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.component-card{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:24px;box-shadow:var(--shadow-soft);padding:18px;}
.component-card h3{margin:0;font-size:16px;letter-spacing:-.2px;}
.component-card p{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--muted);line-height:1.55;}
.code-block{
  margin-top:12px;
  padding:14px;
  border-radius:20px;
  background:#0f172a;
  color:#e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12px;
  line-height:1.6;
  overflow:auto;
}
.route-map-wrap{overflow:auto;border:1px solid rgba(230,232,237,.95);border-radius:22px;box-shadow:var(--shadow-soft);background:#fff;margin-top:14px;}
.route-map{width:100%;min-width:980px;border-collapse:collapse;}
.route-map th,.route-map td{padding:12px 14px;border-top:1px solid rgba(230,232,237,.95);font-size:12px;font-weight:800;text-align:left;vertical-align:top;}
.route-map th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:rgba(245,246,248,.92);}
.route-map tr:first-child th,.route-map tr:first-child td{border-top:none;}
.route-badge{display:inline-flex;align-items:center;padding:7px 9px;border-radius:999px;font-size:11px;font-weight:900;background:#fff;border:1px solid rgba(230,232,237,.95);}
.route-badge.auth{color:#274690;background:rgba(39,70,144,.06);border-color:rgba(39,70,144,.14);}
.route-badge.admin{color:var(--dc-red);background:rgba(137,0,0,.06);border-color:rgba(137,0,0,.14);}
.route-badge.client{color:var(--good);background:rgba(15,169,104,.08);border-color:rgba(15,169,104,.18);}
.route-badge.shared{color:var(--warn);background:rgba(217,140,0,.08);border-color:rgba(217,140,0,.18);}
.detail-grid{display:grid;grid-template-columns:1fr .95fr;gap:16px;}
.detail-rail{display:flex;flex-direction:column;gap:16px;}
.section-anchor{scroll-margin-top:100px;}
.callout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.mini-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.system-state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.state-box{background:#fff;border:1px solid rgba(230,232,237,.95);border-radius:24px;box-shadow:var(--shadow-soft);padding:18px;}
.state-box h3{margin:0;font-size:15px;}
.state-box p{margin:8px 0 0;color:var(--muted);font-size:12px;font-weight:700;line-height:1.5;}
.anchor-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.anchor-nav a{padding:9px 11px;border-radius:999px;background:#fff;border:1px solid rgba(230,232,237,.95);font-size:12px;font-weight:900;color:var(--muted);}
.info-banner{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:22px;
  border:1px solid rgba(39,70,144,.16);background:rgba(39,70,144,.05);
}
.info-banner .title{font-size:14px;font-weight:950;}
.info-banner .copy{margin-top:4px;font-size:12px;font-weight:700;color:var(--muted);line-height:1.5;}
.section-divider{height:1px;background:rgba(230,232,237,.95);margin:18px 0;}
@media (max-width: 1080px){
  .auth-grid,.dual-col,.info-grid-2,.detail-grid,.callout-grid,.component-grid,.system-state-grid,.stat-row,.threshold-grid{grid-template-columns:1fr;}
  .route-map,.matrix{min-width:720px;}
}


/* ----- Live polish overrides ----- */
:root{
  --dc-red:#9C1117;
  --dc-red-deep:#6E0A10;
  --dc-navy:#0F172A;
  --surface-tint:#FBFBFD;
  --shadow: 0 24px 70px rgba(15, 23, 42, .12);
  --shadow-soft: 0 14px 32px rgba(15, 23, 42, .08);
}

body.core-only{
  background:
    radial-gradient(1100px 520px at 12% -120px, rgba(156,17,23,.18), transparent 58%),
    radial-gradient(1100px 520px at 88% -160px, rgba(15,23,42,.08), transparent 55%),
    linear-gradient(180deg, #f8f9fc, #f2f4f8);
}

.web-shell-polished{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,252,.98));
  border-color: rgba(226,230,238,.95);
  box-shadow: 0 28px 90px rgba(15,23,42,.14);
}
.web-shell-polished::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:170px;
  background: linear-gradient(135deg, rgba(156,17,23,.10), rgba(15,23,42,0) 56%);
  pointer-events:none;
}

.web-topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(18px);
}

.web-sidebar{
  position:relative;
  background:
    radial-gradient(560px 260px at 0% 0%, rgba(156,17,23,.24), transparent 58%),
    linear-gradient(180deg, #111827, #0f172a 72%, #111827);
}
.web-sidebar::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:160px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.04));
  pointer-events:none;
}

.web-nav a{
  transition: all .18s ease;
}
.web-nav a:hover{
  transform: translateX(2px);
  background: rgba(255,255,255,.08);
}
.web-nav a.active{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.web-card,
.kpi-tile,
.filter-select,
.auth-card,
.selector-item,
.banner,
.web-stat,
.web-btn,
.web-chip{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.web-card:hover,
.kpi-tile:hover,
.selector-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15,23,42,.08);
}

.web-card{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(251,251,253,.98));
  border-color: rgba(227,232,240,.95);
}
.web-kpi{
  background: linear-gradient(180deg, rgba(156,17,23,.06), rgba(255,255,255,.98));
}

.web-btn{
  border-radius: 15px;
  border-color: rgba(224,229,238,.95);
}
.web-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
.web-btn.primary{
  background: linear-gradient(180deg, var(--dc-red), var(--dc-red-deep));
  border-color: rgba(156,17,23,.28);
  box-shadow: 0 14px 30px rgba(156,17,23,.24);
}

.web-chip,
.filter-select{
  background: rgba(255,255,255,.92);
}
.web-chip.route,
.web-tag.route{
  background: rgba(156,17,23,.06);
  border-color: rgba(156,17,23,.15);
  color: var(--dc-red);
}

.kpi-strip{
  gap:14px;
}
.kpi-tile{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(251,251,253,.98));
}
.kpi-tile .v{
  font-size:24px;
}

.auth-shell-polished{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,252,.98));
}
.auth-shell-polished::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:160px;
  background: linear-gradient(135deg, rgba(156,17,23,.10), rgba(15,23,42,0) 54%);
  pointer-events:none;
}

.auth-side{
  position:relative;
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(156,17,23,.30), transparent 58%),
    linear-gradient(180deg, #0f172a, #111827 72%, #0f172a);
}
.auth-side::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:180px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.05));
  pointer-events:none;
}
.auth-brand-hero .name{
  font-size:20px;
}
.auth-side h1{
  font-size:42px;
}
.auth-feature-grid{
  gap:12px;
}
.auth-feature{
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.10);
}
.auth-side-footer{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.auth-form-wrap{
  background:
    radial-gradient(320px 180px at 100% 0%, rgba(156,17,23,.06), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,249,252,.98));
}
.auth-card{
  border-radius: 28px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(251,251,253,.98));
  border-color: rgba(227,232,240,.95);
  box-shadow: 0 18px 38px rgba(15,23,42,.08);
}
.auth-card h2{
  font-size:30px;
}
.helper-row{
  color: var(--muted);
}
.info-banner{
  background: linear-gradient(180deg, rgba(39,70,144,.05), rgba(255,255,255,.95));
  border-color: rgba(39,70,144,.16);
}

.selector-item{
  border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(251,251,253,.98));
}
.selector-item.active{
  background: linear-gradient(180deg, rgba(156,17,23,.07), rgba(255,255,255,.98));
  border-color: rgba(156,17,23,.18);
}

.filter-bar{
  margin-top:16px;
}
.tag-row{
  align-items:center;
}

.web-note-list .n{
  display:flex;
  gap:12px;
  justify-content:space-between;
  padding:14px;
  border-radius:18px;
  background: rgba(247,248,251,.95);
  border:1px solid rgba(230,232,237,.95);
}
.web-note-list .n + .n{
  margin-top:10px;
}
.web-note-list .k{
  font-size:14px;
  font-weight:950;
  letter-spacing:-.2px;
}
.web-note-list .d{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color: var(--muted);
  line-height:1.5;
}
.web-note-list .v{
  font-size:12px;
  font-weight:900;
  color: var(--muted);
  white-space:nowrap;
}

@media (max-width: 1180px){
  .web-body{
    grid-template-columns: 1fr;
  }
  .web-sidebar{
    padding-bottom: 10px;
  }
}

@media (max-width: 980px){
  .auth-side h1{
    font-size:34px;
  }
  .web-main{
    padding:18px;
  }
  .web-topbar{
    padding:16px 18px;
  }
}


/* Mobile sign-in: show only the login form, full-bleed and centred */
@media (max-width: 768px){
  .web-stage{ padding:0; }
  .auth-shell, .auth-shell-polished{ border-radius:0; box-shadow:none; min-height:100vh; }
  .auth-shell-polished::before{ display:none; }
  .auth-grid{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
  .auth-form-wrap{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:26px 20px; }
  .auth-top{ justify-content:center; margin-bottom:22px; }
  .auth-top .web-actions{ display:none; }
  .auth-card{ border-radius:20px; padding:22px; box-shadow:0 10px 30px rgba(15,23,42,.10); }
  .auth-form-wrap .input{ font-size:16px; padding:13px 14px; }
  .auth-form-wrap .web-btn{ width:100%; justify-content:center; padding:14px; font-size:16px; }
}

/* QA Step 1 */
.qa-tabbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 10px;
}
.qa-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 16px;
  border:1px solid rgba(230,232,237,.95);
  background:#fff;
  font-weight:800;
  color:var(--muted);
  box-shadow: var(--shadow-soft);
}
.qa-tab.active{
  color:#fff;
  background: linear-gradient(135deg, #890000, #b00000);
  border-color: rgba(137,0,0,.25);
}
.qa-roadmap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0 0 16px;
}
.qa-roadmap-item{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border:1px dashed rgba(15,23,42,.14);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.qa-start-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.qa-start-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(230,232,237,.95);
  background:#fff;
  box-shadow: var(--shadow-soft);
}
.qa-start-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.qa-start-num{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background: rgba(137,0,0,.08);
  color: var(--dc-red);
  font-weight:900;
  font-size: 18px;
}
.qa-start-copy h3{
  margin:0 0 8px;
  font-size:18px;
}
.qa-start-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.qa-start-state{
  align-self:flex-start;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(15,169,104,.10);
  color: var(--good);
  font-weight:800;
  font-size:12px;
}
.ordered-tight{
  margin:0;
  padding-left:18px;
  color:var(--text);
}
.ordered-tight li{
  margin:0 0 10px;
  line-height:1.5;
}
.detail-list{
  display:grid;
  gap:10px;
}
.detail-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 10px 0;
  border-bottom:1px solid rgba(230,232,237,.92);
}
.detail-row:last-child{
  border-bottom:none;
}
.detail-row span{
  color:var(--muted);
  font-weight:700;
}
.detail-row strong{
  text-align:right;
  max-width:56%;
}
.activity-list{
  display:grid;
  gap:10px;
}
.activity-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(230,232,237,.92);
}
.activity-item:last-child{
  border-bottom:none;
}
.activity-meta{
  display:grid;
  gap:4px;
}
.activity-meta span{
  color:var(--muted);
  font-size:13px;
}
.muted-block{
  padding:14px 16px;
  border-radius:16px;
  background: rgba(15,23,42,.04);
  color: var(--muted);
  border:1px solid rgba(230,232,237,.95);
}
.multi-input{
  min-height:140px;
}
.field-help{
  margin-top:6px;
  color: var(--muted);
  font-size:12px;
}
.table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.row-highlight{
  background: rgba(137,0,0,.05);
  box-shadow: inset 3px 0 0 rgba(137,0,0,.85);
}
.photo-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
.photo-card{
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(230,232,237,.95);
  background:#fff;
}
.photo-card img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  border-radius:12px;
}
.photo-card span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.sign-summary{
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(230,232,237,.95);
  margin-bottom:14px;
}
.sign-summary.good{
  background: rgba(15,169,104,.08);
  border-color: rgba(15,169,104,.18);
}
@media (max-width: 980px){
  .qa-start-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .photo-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Tailwind-utility shim — added 2026-05-29
   The app links only this custom styles.css (no Tailwind build),
   so raw Tailwind classes on Correspondence pages (Meeting Minutes,
   Dockets, Daily Reports) had no styling. These definitions back the
   specific utilities those pages use. Scoped to .web-main so the
   styled shell (sidebar/header) is never affected. Ships as a static
   file — no build step required on the server.
   ============================================================ */
.web-main .flex{display:flex}
.web-main .inline-flex{display:inline-flex}
.web-main .grid{display:grid}
.web-main .block{display:block}
.web-main .hidden{display:none}
.web-main .items-center{align-items:center}
.web-main .justify-between{justify-content:space-between}
.web-main .text-center{text-align:center}
.web-main .text-left{text-align:left}
.web-main .overflow-hidden{overflow:hidden}
.web-main .overflow-x-auto{overflow-x:auto}
.web-main .whitespace-nowrap{white-space:nowrap}
.web-main .whitespace-pre-line{white-space:pre-line}
.web-main .uppercase{text-transform:uppercase}
.web-main .tracking-wider{letter-spacing:.05em}
.web-main .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.web-main .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.web-main .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.web-main .gap-3{gap:.75rem}
.web-main .gap-4{gap:1rem}
.web-main .gap-6{gap:1.5rem}
.web-main .w-full{width:100%}
.web-main .min-w-full{min-width:100%}
.web-main .w-5{width:1.25rem}
.web-main .h-5{height:1.25rem}
.web-main .text-xs{font-size:.75rem;line-height:1rem}
.web-main .text-sm{font-size:.875rem;line-height:1.25rem}
.web-main .text-lg{font-size:1.125rem;line-height:1.75rem}
.web-main .text-3xl{font-size:1.875rem;line-height:2.25rem}
.web-main .font-medium{font-weight:500}
.web-main .font-semibold{font-weight:600}
.web-main .font-bold{font-weight:700}
.web-main .text-white{color:#fff}
.web-main .text-gray-500{color:#6b7280}
.web-main .text-gray-600{color:#4b5563}
.web-main .text-gray-700{color:#374151}
.web-main .text-gray-900{color:#111827}
.web-main .text-blue-600{color:#2563eb}
.web-main .text-blue-800{color:#1e40af}
.web-main .text-purple-800{color:#6b21a8}
.web-main .bg-white{background-color:#fff}
.web-main .bg-gray-50{background-color:#f9fafb}
.web-main .bg-blue-100{background-color:#dbeafe}
.web-main .bg-blue-600{background-color:#2563eb}
.web-main .bg-purple-100{background-color:#f3e8ff}
.web-main .border{border:1px solid #e5e7eb}
.web-main .border-gray-300{border-color:#d1d5db}
.web-main .border-t{border-top:1px solid #e5e7eb}
.web-main .rounded{border-radius:.25rem}
.web-main .rounded-lg{border-radius:.5rem}
.web-main .rounded-full{border-radius:9999px}
.web-main .divide-y>*+*{border-top:1px solid #e5e7eb}
.web-main .divide-gray-200>*+*{border-color:#e5e7eb}
.web-main .shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
.web-main .shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.web-main .p-6{padding:1.5rem}
.web-main .px-2{padding-left:.5rem;padding-right:.5rem}
.web-main .px-3{padding-left:.75rem;padding-right:.75rem}
.web-main .px-4{padding-left:1rem;padding-right:1rem}
.web-main .px-6{padding-left:1.5rem;padding-right:1.5rem}
.web-main .py-1{padding-top:.25rem;padding-bottom:.25rem}
.web-main .py-2{padding-top:.5rem;padding-bottom:.5rem}
.web-main .py-3{padding-top:.75rem;padding-bottom:.75rem}
.web-main .py-4{padding-top:1rem;padding-bottom:1rem}
.web-main .py-12{padding-top:3rem;padding-bottom:3rem}
.web-main .pt-3{padding-top:.75rem}
.web-main .pt-4{padding-top:1rem}
.web-main .mb-1{margin-bottom:.25rem}
.web-main .mb-4{margin-bottom:1rem}
.web-main .mt-1{margin-top:.25rem}
.web-main .ml-2{margin-left:.5rem}
.web-main .mr-2{margin-right:.5rem}
.web-main .space-y-2>*+*{margin-top:.5rem}
.web-main .space-y-3>*+*{margin-top:.75rem}
.web-main .space-y-4>*+*{margin-top:1rem}
.web-main .space-y-6>*+*{margin-top:1.5rem}
.web-main .space-x-2>*+*{margin-left:.5rem}
.web-main .hover\:bg-blue-700:hover{background-color:#1d4ed8}
.web-main .hover\:bg-gray-50:hover{background-color:#f9fafb}
.web-main .hover\:text-blue-800:hover{color:#1e40af}
.web-main .hover\:text-gray-800:hover{color:#1f2937}
.web-main .hover\:underline:hover{text-decoration:underline}
.web-main .focus\:ring-2:focus{outline:2px solid transparent;box-shadow:0 0 0 2px #3b82f6}
.web-main .focus\:ring-blue-500:focus{box-shadow:0 0 0 2px #3b82f6}
.web-main .focus\:border-transparent:focus{border-color:transparent}
@media (min-width:768px){
  .web-main .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .web-main .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .web-main .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .web-main .lg\:col-span-1{grid-column:span 1/span 1}
  .web-main .lg\:col-span-2{grid-column:span 2/span 2}
}

/* per-item upload control (added 2026-06-02) */
.web-main .item-upload{margin-top:.4rem;display:flex;flex-direction:column;gap:.25rem}
.web-main .item-upload-label{font-size:.72rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
.web-main .item-upload-file{display:inline-block;font-size:.8rem;color:#2563eb;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-main .item-upload-file:hover{text-decoration:underline}
.web-main .item-upload-empty{font-size:.8rem;color:#9ca3af}
.web-main .item-upload-input{font-size:.78rem;color:#374151;border:1px dashed #cbd5e1;border-radius:.4rem;padding:.3rem .4rem;background:#fafafa;max-width:320px}

/* ===================== Responsive app shell (mobile drawer nav) ===================== */
.web-hamburger{ display:none; }
.web-nav-backdrop{ display:none; }

@media (max-width: 1180px){
  .web-stage{ padding:0; }
  .web-shell, .web-shell-polished{ width:100%; border-radius:0; border:0; box-shadow:none; }

  /* Top bar: hamburger + brand, drop the chip clutter */
  .web-topbar{ position:sticky; top:0; z-index:60; gap:10px; padding:12px 14px; }
  .web-topbar > .iconbtn{ display:none; }
  .web-hamburger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px; flex:0 0 auto;
    border:1px solid rgba(230,232,237,.95); background:#fff; color:var(--dc-navy); cursor:pointer;
  }
  .web-hamburger svg{ width:22px; height:22px; }
  .web-brand .name{ font-size:16px; }
  .web-actions{ margin-left:auto; gap:6px; flex-wrap:nowrap; }
  .web-actions .web-chip{ display:none; }
  .web-actions form .web-btn, .web-actions > .web-btn{ padding:9px 11px; font-size:12px; }

  /* Body: single column; sidebar becomes an off-canvas drawer */
  .web-body{ display:block; grid-template-columns:1fr; min-height:0; }
  .web-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:86%; max-width:330px;
    transform:translateX(-100%); transition:transform .25s ease; z-index:120; overflow-y:auto;
    padding:20px 14px calc(20px + env(safe-area-inset-bottom));
  }
  body.nav-open .web-sidebar{ transform:translateX(0); box-shadow:0 24px 80px rgba(0,0,0,.45); }
  body.nav-open .web-nav-backdrop{ display:block; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:110; }
  body.nav-open{ overflow:hidden; }

  /* Content + tables */
  .web-main{ padding:16px 14px; }
  .web-head{ flex-direction:column; align-items:stretch; }
  .web-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Forms: full-width fields, comfortable touch targets, no iOS zoom */
  .form-grid-2{ grid-template-columns:1fr; }
  .input, select.input, textarea.input{ font-size:16px; }
  .web-btn{ min-height:44px; }
}

/* ======================= MODERN REFRESH — Demand Civil v2 ======================= */
:root{
  --m-line:#e7e9ee; --m-line2:#eef0f4; --m-ink:#0f172a; --m-muted:#6b7280; --m-muted2:#9aa3b2;
  --m-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --m-rcard:16px; --m-rctrl:11px;
}
body.core-only{
  background:#f5f6f8;
}
.web-shell, .web-shell-polished{ border:1px solid #edeef2; border-radius:18px; box-shadow:0 1px 2px rgba(16,24,40,.05),0 18px 50px rgba(16,24,40,.08); }
.web-shell-polished::before{ display:none; }
.web-topbar{ background:rgba(255,255,255,.92); }

/* Light, modern sidebar */
.web-sidebar{ background:#fff; color:var(--m-ink); border-right:1px solid var(--m-line); padding:14px 12px; }
.web-sidebar::after{ display:none; }
.nav-search{ position:relative; margin:2px 6px 12px; }
.nav-search input{ width:100%; border:1px solid var(--m-line); background:#fafbfc; border-radius:10px; padding:9px 10px 9px 32px; font:inherit; font-size:13px; color:var(--m-ink); }
.nav-search input:focus{ outline:none; border-color:var(--dc-red); box-shadow:0 0 0 3px rgba(156,17,23,.10); }
.nav-search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--m-muted2); }
.web-group{ margin-bottom:2px; border:0; }
.web-group > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:9px; color:var(--m-muted2); }
.web-group > summary::-webkit-details-marker{ display:none; }
.web-group > summary:hover{ background:#f4f5f7; }
.web-group > summary .gchev{ width:13px; height:13px; transition:transform .18s; }
.web-group[open] > summary .gchev{ transform:rotate(90deg); }
.web-side-title{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:0; }
.web-nav{ gap:2px; padding:2px 0 8px; }
.web-nav a{ color:#374151; border-radius:10px; padding:9px 12px; font-weight:650; font-size:13.5px; }
.web-nav a small{ color:var(--m-muted2); font-weight:650; }
.web-nav a:hover{ background:#f4f5f7; }
.web-nav a.active{ background:rgba(156,17,23,.08); color:var(--dc-red); border:0; }
.web-nav a.active small{ color:var(--dc-red); opacity:.75; }

/* Page header + cards */
.web-head h1{ letter-spacing:-.6px; }
.web-card{ border:1px solid var(--m-line); border-radius:var(--m-rcard); box-shadow:var(--m-shadow); }

/* Buttons */
.web-btn{ border-radius:var(--m-rctrl); border:1px solid var(--m-line); background:#fff; font-weight:750; }
.web-btn:hover{ background:#f7f8fa; }
.web-btn.primary{ background:var(--dc-red); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(156,17,23,.20); }
.web-btn.primary:hover{ background:#7a0d12; }

/* Inputs + selects */
.input{ border-radius:var(--m-rctrl); border:1px solid var(--m-line); min-height:42px; }
.input:focus{ outline:none; border-color:var(--dc-red); box-shadow:0 0 0 3px rgba(156,17,23,.12); }
select.input{ appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }

/* Tables */
.web-table th{ background:#fafbfc; color:var(--m-muted2); padding:12px 14px; border-bottom:1px solid var(--m-line2); }
.web-table td{ padding:13px 14px; border-top:0; border-bottom:1px solid var(--m-line2); }
.web-table tbody tr:hover{ background:#fafbfc; }

/* Stat tiles */
.kpi-tile{ border:1px solid var(--m-line); border-radius:var(--m-rcard); box-shadow:var(--m-shadow); padding:16px 18px; }
.kpi-tile .v{ font-size:28px; letter-spacing:-1px; }

/* Badges/chips */
.web-tag{ border-radius:999px; font-weight:750; }
.web-chip{ border-radius:999px; }

@media (max-width:1180px){
  .web-shell, .web-shell-polished{ border-radius:0; border:0; }
}