:root{--nav:#102d4d;--blue:#176be8;--bg:#f3f6fa;--card:#fff;--line:#d8e1eb;--text:#183047;--muted:#738397;--green:#1c9956;--amber:#d89b1b;--red:#d94e58;--shadow:0 5px 16px rgba(17,46,78,.07)}
*{box-sizing:border-box}
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#7f94aa #e9eef4;
}
html::-webkit-scrollbar{width:14px}
html::-webkit-scrollbar-track{background:#e9eef4}
html::-webkit-scrollbar-thumb{
  background:#7f94aa;
  border:3px solid #e9eef4;
  border-radius:10px;
}
html::-webkit-scrollbar-thumb:hover{background:#5f7893}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.top{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 22px;position:sticky;top:0;z-index:20}.mark{width:38px;height:38px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px}.brand{display:flex;gap:10px;align-items:center;min-width:300px}.brand b{display:block}.brand small{color:var(--muted)}.search{flex:1;max-width:560px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fbfdff}.shell{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 64px)}.side{
  background:linear-gradient(#102d4d,#12375d);
  color:#dbe8f5;
  padding:14px 12px;
  position:sticky;
  top:64px;
  height:calc(100vh - 64px);
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#55789b #102d4d;
}
.side::-webkit-scrollbar{width:9px}
.side::-webkit-scrollbar-track{background:#102d4d}
.side::-webkit-scrollbar-thumb{background:#55789b;border-radius:8px}.side-title{font-size:10px;letter-spacing:1px;color:#8ea8c1;margin:9px 9px}.nav{display:flex;gap:9px;align-items:center;padding:9px 10px;border-radius:7px;font-size:12px;margin:2px 0}.nav:hover,.nav.active{background:#214c79;color:#fff}.num{width:20px;color:#9fb6cb;font-size:10px}.main{padding:22px}.hero,.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.hero{padding:20px;display:flex;justify-content:space-between;gap:20px}.hero h1,.page h1{margin:0 0 5px;font-size:22px}.hero p,.page p{margin:0;color:var(--muted);font-size:11px}.badge{display:inline-block;background:#fff1c8;color:#896000;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:14px}.metric{padding:14px}.metric small{color:var(--muted)}.metric strong{display:block;font-size:22px;margin-top:6px}.section{margin-top:14px}.section h2{font-size:14px;margin:0 0 10px}.pipeline{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.phase{padding:11px;border:1px solid var(--line);border-radius:8px}.phase b{display:block;font-size:11px}.phase small{color:var(--muted)}.phase.active{border-color:var(--blue)}.phase.locked{opacity:.58}.two{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{padding:14px}.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #edf1f5;font-size:11px}.row:last-child{border:0}.empty{border:1px dashed #c8d4e0;border-radius:8px;padding:24px;text-align:center;color:var(--muted);font-size:11px;background:#fbfcfe}.page{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.title{font-weight:900;font-size:12px;margin-bottom:9px}.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.field{padding:9px;border:1px solid #e5ebf2;border-radius:7px;background:#fbfcfe}.field b{display:block;font-size:10px}.field span{font-size:9px;color:var(--muted)}table{width:100%;border-collapse:collapse;font-size:9px}th,td{padding:8px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:top}th{background:#f8fafc;color:#697b90}@media(max-width:1100px){.metrics{grid-template-columns:repeat(3,1fr)}.pipeline{grid-template-columns:repeat(3,1fr)}}@media(max-width:780px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}.metrics,.pipeline,.two,.three,.grid{grid-template-columns:1fr}.top{height:auto;flex-wrap:wrap;padding:12px}.search{order:3;max-width:none;width:100%}}

/* ========================================================================== 
   AMIC_VISUAL_REFINEMENT_V1_0_0
   Added to improve visibility, compactness, and color vividness.
   ========================================================================== */

:root{
  --amic-bg: #eef4fb;
  --amic-surface: #ffffff;
  --amic-panel: #f8fbff;
  --amic-panel-2: #f2f7ff;
  --amic-text: #16324f;
  --amic-text-soft: #5f7490;
  --amic-border: #9db7d9;
  --amic-border-strong: #4d79b8;
  --amic-primary: #1565d8;
  --amic-primary-strong: #0d47a1;
  --amic-primary-soft: #dceaff;
  --amic-success: #148a52;
  --amic-warning: #b7791f;
  --amic-danger: #c53d43;
  --amic-shadow: 0 2px 10px rgba(17, 51, 102, 0.08);
}

html{
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges;
}

body{
  background: linear-gradient(180deg, #edf3fa 0%, #f7fbff 100%) !important;
  color: var(--amic-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
main::-webkit-scrollbar,
.layout::-webkit-scrollbar{
  width: 14px;
  height: 14px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
.layout::-webkit-scrollbar-track{
  background: #d8e3f2;
  border-left: 1px solid #afc3df;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
.layout::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #2f74e0 0%, #174ea6 100%);
  border: 2px solid #d8e3f2;
  border-radius: 14px;
}

*{
  scrollbar-width: auto;
  scrollbar-color: #2f74e0 #d8e3f2;
}

.topbar,
header,
.page-header{
  min-height: 64px !important;
}

.topbar,
.header,
header{
  box-shadow: 0 1px 0 rgba(61, 98, 154, 0.18) !important;
}

.layout{
  gap: 14px !important;
}

.sidebar{
  padding: 14px 12px !important;
  border-right: 2px solid #315a91 !important;
  background: linear-gradient(180deg, #123462 0%, #173d72 100%) !important;
}

.sidebar .nav-group-title{
  color: #bcd0ea !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  margin: 12px 0 8px !important;
}

.sidebar .nav-item,
.sidebar a,
.sidebar button{
  border: 1px solid rgba(120, 160, 220, 0.18) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  padding: 10px 12px !important;
}

.sidebar .nav-item.active,
.sidebar a.active,
.sidebar .current,
.sidebar .selected{
  background: linear-gradient(180deg, #2c76f0 0%, #1659cc 100%) !important;
  color: #ffffff !important;
  border-color: #7fb1ff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}

.sidebar .nav-item:hover,
.sidebar a:hover{
  background: rgba(61, 118, 214, 0.24) !important;
  border-color: rgba(136, 179, 242, 0.40) !important;
}

main,
.content,
.page-content,
.app-content{
  padding: 14px !important;
}

h1{
  font-size: 26px !important;
  line-height: 1.15 !important;
  margin-bottom: 6px !important;
  color: #102f57 !important;
}

h2{
  font-size: 20px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  color: #123d73 !important;
}

h3{
  font-size: 17px !important;
  line-height: 1.2 !important;
  color: #17487f !important;
}

p, .muted, .subtext, .subtitle, .helper, .kpi-caption{
  color: var(--amic-text-soft) !important;
}

.card,
.panel,
.tile,
.block,
.section,
.widget,
.table-card,
.metric-card,
.surface,
.content-card{
  background: linear-gradient(180deg, var(--amic-surface) 0%, var(--amic-panel) 100%) !important;
  border: 2px solid var(--amic-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--amic-shadow) !important;
}

.card:hover,
.panel:hover,
.tile:hover,
.block:hover,
.section:hover,
.widget:hover{
  border-color: var(--amic-border-strong) !important;
}

.card-header,
.panel-header,
.section-header{
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #cadef6 !important;
}

.metric,
.kpi,
.stat,
.summary-card,
.info-card{
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
  border: 2px solid #8fb1df !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

.metric .value,
.kpi .value,
.stat .value,
.big-number,
.number{
  color: #0e3f82 !important;
  font-weight: 800 !important;
}

.badge,
.pill,
.tag,
.status,
.chip{
  border: 1px solid #8eb3e8 !important;
  background: #e8f1ff !important;
  color: #0e4aa8 !important;
  font-weight: 700 !important;
}

.pipeline-item,
.step-card,
.stage-card,
.roadmap-item{
  min-height: 82px !important;
  padding: 12px 14px !important;
  border: 2px solid #9ab7dc !important;
  border-radius: 12px !important;
  background: #fbfdff !important;
}

.pipeline-item.active,
.step-card.active,
.stage-card.active,
.roadmap-item.active,
.pipeline-item.authorized{
  background: linear-gradient(180deg, #eef5ff 0%, #dce9ff 100%) !important;
  border-color: #2a6ddd !important;
}

table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

table th{
  background: #e5eefb !important;
  color: #143a67 !important;
  border-top: 1px solid #a9c1e0 !important;
  border-bottom: 1px solid #a9c1e0 !important;
}

table th,
table td{
  padding: 8px 10px !important;
  border-right: 1px solid #d3e0f2 !important;
  border-bottom: 1px solid #dbe7f6 !important;
}

table th:first-child,
table td:first-child{
  border-left: 1px solid #d3e0f2 !important;
}

button,
.btn,
a.btn,
input[type="button"],
input[type="submit"]{
  border-radius: 10px !important;
  border: 1px solid #2567d7 !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
}

button.primary,
.btn-primary,
a.btn-primary,
button.cta{
  background: linear-gradient(180deg, #2d77f2 0%, #1459cb 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(18, 85, 182, 0.20) !important;
}

button.secondary,
.btn-secondary{
  background: #f2f7ff !important;
  color: #1a4c95 !important;
}

input,
select,
textarea{
  border: 1px solid #9ebbe3 !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
}

.grid,
.cards,
.metrics,
.summary-grid{
  gap: 12px !important;
}

section,
.card,
.panel,
.tile,
.block,
.widget{
  margin-bottom: 12px !important;
}

.page-hero,
.hero,
.banner{
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  border: 2px solid #b7cae5 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
}

small,
.caption{
  font-size: 12px !important;
}

.route-shell,
.route-page,
.page-shell{
  gap: 12px !important;
}

hr,
.divider{
  border: none !important;
  border-top: 1px solid #cfdcf0 !important;
}

.outline-strong{
  border: 2px solid #4c79b9 !important;
}

@media (max-width: 1440px){
  body{ font-size: 13px !important; }
  h1{ font-size: 24px !important; }
  h2{ font-size: 18px !important; }
  .card, .panel, .tile, .block, .widget{ padding: 12px !important; }
}

/* ==========================================================================
   AMIC_BORDER_REFINEMENT_V1_0_0
   Reduce heavy frame borders while preserving visible structure.
   ========================================================================== */

:root{
  --amic-border-soft: #bdd0e6;
  --amic-border-medium: #9fb9d8;
  --amic-border-hover: #6f97ca;
}

/* Main cards / frames */
.card,
.panel,
.tile,
.block,
.section,
.widget,
.table-card,
.metric-card,
.surface,
.content-card{
  border-width: 1px !important;
  border-color: var(--amic-border-soft) !important;
  box-shadow: 0 2px 8px rgba(17,51,102,.055) !important;
}

/* KPI cards */
.metric,
.kpi,
.stat,
.summary-card,
.info-card{
  border-width: 1px !important;
  border-color: var(--amic-border-medium) !important;
  box-shadow: 0 1px 6px rgba(17,51,102,.045) !important;
}

/* Hero / page banner */
.page-hero,
.hero,
.banner{
  border-width: 1px !important;
  border-color: #c4d5e8 !important;
  box-shadow: 0 1px 5px rgba(17,51,102,.04) !important;
}

/* Roadmap / pipeline frames */
.pipeline-item,
.step-card,
.stage-card,
.roadmap-item{
  border-width: 1px !important;
  border-color: #b9cce3 !important;
  box-shadow: none !important;
}

.pipeline-item.active,
.step-card.active,
.stage-card.active,
.roadmap-item.active,
.pipeline-item.authorized{
  border-width: 1px !important;
  border-color: #4f82d8 !important;
  box-shadow: 0 0 0 1px rgba(42,109,221,.06) !important;
}

/* Remove doubled visual weight on grouped wrappers */
.card .card,
.panel .panel,
.section .card,
.section .panel,
.widget .card{
  border-color: #cbd9e9 !important;
  box-shadow: none !important;
}

/* Hover remains visible but not heavy */
.card:hover,
.panel:hover,
.tile:hover,
.block:hover,
.section:hover,
.widget:hover{
  border-color: var(--amic-border-hover) !important;
}

/* Tables */
table th,
table td{
  border-color: #dbe6f2 !important;
}

/* Sidebar remains strong enough to separate navigation */
.sidebar{
  border-right-width: 1px !important;
  border-right-color: #496f9e !important;
}