:root{
  --amic-mobile-header-height:64px;
  --amic-mobile-drawer-width:min(86vw,340px);
  --amic-mobile-backdrop:rgba(6,20,39,.58);
}

.amic-mobile-menu-button{
  display:none;width:42px;height:42px;min-height:42px!important;padding:0!important;
  border:1px solid #8eb2e1!important;border-radius:11px!important;background:#f6f9fe!important;
  color:#143f73!important;align-items:center;justify-content:center;flex:0 0 42px;cursor:pointer;
  box-shadow:0 1px 4px rgba(23,66,118,.08);position:relative;z-index:1201
}
.amic-mobile-menu-button:hover,.amic-mobile-menu-button:focus-visible{background:#eaf2ff!important;border-color:#4e86d4!important;outline:none}
.amic-hamburger{width:21px;height:16px;display:flex;flex-direction:column;justify-content:space-between}
.amic-hamburger span{display:block;width:100%;height:2px;border-radius:999px;background:#153f71;transition:transform .22s ease,opacity .18s ease;transform-origin:center}
body.amic-mobile-nav-open .amic-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.amic-mobile-nav-open .amic-hamburger span:nth-child(2){opacity:0}
body.amic-mobile-nav-open .amic-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.amic-mobile-drawer-head{display:none}
.amic-mobile-close{width:38px;height:38px;min-height:38px!important;padding:0!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:10px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:24px;line-height:1;align-items:center;justify-content:center;cursor:pointer}
.amic-mobile-drawer-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.amic-mobile-drawer-title strong{font-size:14px;color:#fff}
.amic-mobile-drawer-title span{font-size:10px;color:#b9cce2}
.amic-mobile-backdrop{display:none;position:fixed;inset:0;background:var(--amic-mobile-backdrop);z-index:1090;opacity:0;pointer-events:none;transition:opacity .22s ease}
body.amic-mobile-nav-open .amic-mobile-backdrop{opacity:1;pointer-events:auto}

@media (max-width:1100px){
  .metric-grid,.metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .two,.two-col,.panel-grid{grid-template-columns:1fr 1fr!important}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:820px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body.amic-mobile-nav-open{overflow:hidden!important;touch-action:none}

  .topbar,header.topbar,.header,body>header{min-height:var(--amic-mobile-header-height)!important;height:auto!important;padding:10px 12px!important;gap:10px!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;position:sticky!important;top:0!important;z-index:1200!important}
  .amic-mobile-menu-button{display:flex}
  .brand{min-width:0!important;flex:1 1 auto!important;gap:8px!important}
  .brand-mark{width:36px!important;height:36px!important;flex:0 0 36px!important}
  .brand-title{font-size:15px!important;white-space:nowrap}
  .brand-sub{font-size:9px!important;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .search,.topbar .search,header .search{display:none!important}
  .top-actions{margin-left:auto!important;gap:7px!important}
  .top-actions>:not(.badge):not(.avatar){display:none!important}
  .top-actions .avatar{display:none!important}
  .top-actions .badge,.topbar>.badge{font-size:9px!important;padding:5px 8px!important;white-space:nowrap}

  .shell,.layout,.app-shell{display:block!important;grid-template-columns:1fr!important;min-width:0!important}
  .sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:var(--amic-mobile-drawer-width)!important;max-width:340px!important;height:100dvh!important;z-index:1100!important;transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);padding:0 12px 18px!important;overflow-y:auto!important;overflow-x:hidden!important;box-shadow:18px 0 45px rgba(0,17,40,.28)!important;border-right:1px solid #5377a1!important}
  body.amic-mobile-nav-open .sidebar{transform:translateX(0)}
  .amic-mobile-drawer-head{display:flex;position:sticky;top:0;z-index:4;align-items:center;justify-content:space-between;gap:12px;min-height:68px;margin:0 -12px 12px;padding:11px 12px;background:linear-gradient(180deg,#102f56 0%,#143a68 100%);border-bottom:1px solid rgba(255,255,255,.16)}
  .amic-mobile-close{display:flex}
  .side-title,.sidebar .side-title{margin:10px 8px 7px!important;font-size:10px!important}
  .sidebar .nav-item,.sidebar a,.sidebar button:not(.amic-mobile-close){min-height:44px!important;margin:3px 0!important;padding:10px 10px!important;font-size:12px!important;border-radius:9px!important;touch-action:manipulation}
  .nav-num{width:26px!important;flex:0 0 26px!important}
  .side-footer{margin-top:10px!important;padding-top:10px!important}
  .amic-mobile-backdrop{display:block}

  .main,main,.content,.page-content,.app-content{width:100%!important;max-width:100%!important;min-width:0!important;padding:10px!important;margin:0!important}
  .page,.page-title,.hero,.page-hero,.banner{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .page h1,.page-title h1,.hero h1,h1{font-size:21px!important;line-height:1.15!important;margin:0!important;overflow-wrap:anywhere}
  h2{font-size:17px!important} h3{font-size:15px!important}
  .page p,.page-title p,.hero p{font-size:10.5px!important;line-height:1.4!important}
  .hero-meta{width:100%;justify-content:flex-start!important}

  .metric-grid,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:9px!important}
  .metric,.kpi,.stat,.summary-card,.info-card{min-width:0!important;padding:10px 11px!important}
  .metric .value,.metric strong,.big-number,.number{font-size:20px!important}

  .two,.two-col,.three-col,.panel-grid,.grid,.cards,.summary-grid{grid-template-columns:1fr!important;gap:9px!important}
  .pipeline{grid-template-columns:1fr!important;gap:7px!important}
  .phase,.pipeline-item,.step-card,.stage-card,.roadmap-item{min-height:auto!important;padding:10px 11px!important}
  .card,.panel,.tile,.block,.section,.widget,.table-card,.metric-card,.surface,.content-card{min-width:0!important;max-width:100%!important;padding:10px!important;margin-bottom:9px!important;border-radius:11px!important}
  .section{margin-top:9px!important}
  .section-head{gap:8px!important;align-items:flex-start!important}
  .section-head h2{font-size:15px!important}
  .title,.panel-title{font-size:12px!important}
  .row,.status-line{display:grid!important;grid-template-columns:minmax(86px,.65fr) minmax(0,1.35fr)!important;gap:8px!important;align-items:start!important;padding:7px 0!important}
  .row b,.status-line b,.row span,.status-line span{min-width:0;overflow-wrap:anywhere;word-break:break-word}

  .card:has(table),.panel:has(table),.table-card{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{min-width:620px!important;font-size:9.5px!important}
  table th,table td{padding:7px 8px!important;white-space:normal!important;overflow-wrap:anywhere}

  input,select,textarea,button,.btn{max-width:100%!important}
  input,select,textarea{font-size:16px!important}
  .actions,.quick-actions,.button-row{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  button,.btn,a.btn{min-height:42px!important}
  .footer-note{font-size:9px!important;line-height:1.4!important}
}

@media (max-width:430px){
  .metric-grid,.metrics{grid-template-columns:1fr 1fr!important}
  .metric small,.metric .label{font-size:9px!important}
  .metric strong,.metric .value{font-size:18px!important}
  .brand-sub{display:none!important}
  .top-actions .badge{display:none!important}
  .main,main{padding:8px!important}
}

@media (max-width:900px) and (orientation:landscape){
  .sidebar{width:min(72vw,330px)!important}
  .metric-grid,.metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.amic-mobile-backdrop,.amic-hamburger span{transition:none!important}
}
