@media (min-width: 1280px) {
  .nav-item { font-size: 12px; }
  .breadcrumb { font-size: 11px; }
  .global-search input { font-size: 11px; }
  .page-heading p { font-size: 12px; }
  .heading-actions .button,.heading-actions .mode-button { font-size: 11px; }
  .demo-banner b { font-size: 11px; }
  .demo-banner div>span { font-size: 10px; }
  .demo-banner>button { font-size: 10px; }
  .section-intro { font-size: 11px; }
  .section-intro>small { font-size: 10px; }
  .stat-label { font-size: 11px; }
  .stat-value.status-value { font-size: 14px; }
  .stat-detail { font-size: 8px; }
  .stat-source { font-size: 6.5px; }
  .panel-header h2 { font-size: 14px; }
  .panel-header p { font-size: 10px; }
  .text-link { font-size: 10px; }
  .compact .topo-node { width: 122px; }
  .compact .topo-node b { font-size: 11px; }
  .compact .topo-node>small { font-size: 8px; }
  .compact .topo-node>code { font-size: 9px; }
  .compact .node-state { font-size: 7px; }
  .compact .topo-endpoint button { font-size: 8px; }
  .topology-bottom>span:first-child { font-size: 8px; }
  .topology-bottom .badge { font-size: 8px; }
  .chart-legend { font-size: 10px; }
  .segmented button { font-size: 9px; }
  .traffic-totals>div>span { font-size: 9px; }
  .traffic-totals b { font-size: 17px; }
  .traffic-totals b small { font-size: 9px; }
  .traffic-average { font-size: 8px; }
  .badge { font-size: 9px; }
  th { font-size: 10px; }
  td { font-size: 11px; padding-top: 12px; padding-bottom: 12px; }
  .product-name b { font-size: 11px; }
  .product-code { font-size: 10px; }
  .number-cell b { font-size: 12px; }
  .event b { font-size: 11px; }
  .event p { font-size: 8.5px; }
  .event small { font-size: 8px; }
  .event { padding: 17px 0; }
  .panel-bottom { font-size: 9px; }
  .architecture-note { font-size: 9px; }
  .footer { font-size: 8px; }
}
@media (min-width: 1650px) {
  main { padding: 36px 40px 0; }
  .stat-label { font-size: 11px; }
  .stat-value.status-value { font-size: 15px; }
  .stat-detail { font-size: 9px; }
  .stat-source { font-size: 7px; }
  .panel-header h2 { font-size: 14px; }
  .panel-header p { font-size: 10px; }
  .topology.compact { height: 280px; }
  .compact .topo-node { width: 145px; }
  .compact .topo-node b { font-size: 12px; }
  .compact .topo-node>small,.compact .topo-node>code { font-size: 9px; }
  .compact .node-state { font-size: 8px; }
  .traffic-chart { height: 205px; }
  .traffic-totals { padding-top: 15px; padding-bottom: 15px; }
  .event b,.product-name b { font-size: 11px; }
  .event p { font-size: 9px; }
  .event small { font-size: 8px; }
  td { padding-top: 15px; padding-bottom: 15px; }
  .event { padding: 20px 0; }
}
@media (max-width: 1270px) {
  :root { --sidebar-width: 218px; }
  main { padding: 25px 24px 0; }
  .topbar { padding: 0 24px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { font-size: 6.5px; }
  .workspace-selector b { font-size: 9px; }
  .nav-item { font-size: 10px; }
  .global-search input { width: 126px; }
  .topbar-actions { gap: 9px; }
  .page-heading { align-items: flex-start; }
  .page-heading p { max-width: 350px; font-size: 9px; }
  .heading-actions { padding-top: 20px; gap: 6px; }
  .button,.mode-button { padding: 8px 10px; font-size: 9px; }
  .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .stat-card { padding: 15px; }
  .stat-top { margin-bottom: 8px; }
  .stat-value { margin-bottom: 5px; height: 32px; }
  .stat-value.status-value { font-size: 15px; }
  .stat-label { font-size: 10px; }
  .stat-detail { font-size: 8px; }
  .stat-source { font-size: 7px; }
  .dashboard-middle { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dashboard-bottom { grid-template-columns: 1.4fr 1fr; gap: 14px; }
  .panel-header { padding: 17px 16px 0; }
  .panel-header h2 { font-size: 11px; }
  .panel-header p { font-size: 7px; }
  .text-link { font-size: 7px; }
  .compact .topo-node { width: 93px; }
  .compact .topo-node b { font-size: 8px; }
  .compact .topo-node>small { font-size: 6px; }
  .compact .topo-node>code { font-size: 7px; }
  .compact .node-state { font-size: 5px; }
  .topology.compact { margin: 0 8px; }
  .compact .topo-endpoint button { font-size: 6px; gap: 3px; }
  .compact .topo-endpoint { width: 115px; }
  .topology-bottom { padding-left: 12px; padding-right: 12px; }
  .topology-bottom>span:first-child { font-size: 6px; }
  .topology-bottom .badge { font-size: 6px; }
  .traffic-toolbar { padding: 18px 14px 5px; }
  .chart-legend { gap: 8px; font-size: 7px; }
  .segmented button { font-size: 6px; padding: 4px; }
  .traffic-totals { gap: 15px; padding-left: 16px; padding-right: 16px; }
  .traffic-average { font-size: 6px; }
  .technical-grid { grid-template-columns: 1fr 1fr; }
  .technical-grid>.panel:last-child { grid-column: 1 / -1; }
  .technical-grid>.panel:last-child .detail-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .inventory-summary { gap: 12px; }
  .inventory-summary .stat-card { padding: 15px; }
  .inventory-summary .stat-value.status-value { font-size: 13px; }
  .inventory-controls { flex-wrap: wrap; }
  .search-field { max-width: none; }
  .filter-group { width: 100%; }
  .filter-group>label { flex: 1; }
  .filter-group select { width: 100%; max-width: none; }
  .inventory-charts { grid-template-columns: 1fr 1fr; }
  .flow-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .flow-caption { flex-wrap: wrap; }
  .simulation-only { width: 100%; margin-left: 23px; }
  .footer>span:last-child { display: none; }
}
@media (max-width: 1000px) {
  .sidebar { width: 76px; padding-left: 12px; padding-right: 12px; }
  .sidebar .brand { padding-left: 8px; }
  .sidebar .brand-copy,.sidebar .nav-text,.sidebar .nav-section-label,.sidebar .workspace-selector>svg,.sidebar .environment-panel,.sidebar .nav-dot,.sidebar .trailing-icon { display: none; }
  .sidebar .workspace-selector { justify-content: center; padding: 10px 0; }
  .sidebar .nav-item,.sidebar .collapse-button { justify-content: center; }
  .sidebar .collapse-button { display: none; }
  .workspace { margin-left: 76px; }
  .breadcrumb { font-size: 9px; gap: 8px; }
  .demo-banner div>span { max-width: 370px; }
  .demo-banner>button { font-size: 8px; }
  .inventory-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .two-col { gap: 15px; }
  .topology-full .panel-header h2 { font-size: 14px; }
  .integration-callout { flex-wrap: wrap; }
  .integration-callout .button { margin-left: 48px; }
}
@media (max-width: 760px) {
  .topbar { height: 62px; padding: 0 20px; }
  main { padding: 23px 20px 0; }
  .breadcrumb>span:not(.breadcrumb-icon),.breadcrumb>svg { display: none; }
  .global-search input { width: 125px; }
  .page-heading { flex-direction: column; gap: 15px; margin-bottom: 18px; }
  h1 { font-size: 24px; }
  .page-heading p { max-width: none; font-size: 10px; }
  .heading-actions { padding: 0; width: 100%; justify-content: space-between; }
  .heading-actions .button,.heading-actions .mode-button { font-size: 10px; padding: 8px 13px; }
  .demo-banner { gap: 10px; padding: 12px; }
  .demo-banner b { font-size: 9px; }
  .demo-banner div>span { font-size: 8px; max-width: none; }
  .demo-banner>button { display: none; }
  .section-intro { font-size: 9px; }
  .section-intro>span .subtle-dot { display: none; }
  .section-intro>small { font-size: 7px; }
  .stats-grid { gap: 10px; }
  .stat-value.status-value { font-size: 11px; }
  .stat-label { font-size: 8px; }
  .stat-detail { font-size: 6px; }
  .stat-source { font-size: 5px; }
  .dashboard-middle,.dashboard-bottom { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .panel-header { padding: 18px 18px 0; }
  .panel-header h2 { font-size: 13px; }
  .panel-header p { font-size: 9px; }
  .text-link { font-size: 8px; }
  .topology.compact { height: 265px; margin: 0 20px; }
  .compact .topo-node { width: 115px; }
  .compact .topo-node b { font-size: 10px; }
  .compact .topo-node>small,.compact .topo-node>code { font-size: 7px; }
  .compact .node-state { font-size: 6px; }
  .compact .topo-endpoint button { font-size: 7px; }
  .topology-bottom>span:first-child,.topology-bottom .badge { font-size: 7px; }
  .traffic-toolbar { padding: 20px 18px 10px; }
  .chart-legend { font-size: 9px; }
  .segmented button { font-size: 8px; padding: 4px 7px; }
  .traffic-chart { height: 185px; }
  .traffic-totals { padding: 15px 20px; }
  .traffic-average,.traffic-totals>div>span { font-size: 8px; }
  .event { padding: 15px 0; }
  .event b { font-size: 11px; }
  .event p { font-size: 9px; }
  .event small { font-size: 8px; }
  .architecture-note { font-size: 8px; padding: 12px; align-items: flex-start; }
  .note-brand { display: none; }
  .footer { font-size: 7px; line-height: 2; }
  .technical-grid,.two-col { grid-template-columns: 1fr; }
  .technical-grid>.panel:last-child .detail-rows { display: block; }
  .detail-rows>div { font-size: 11px; }
  .cloud-hero { flex-wrap: wrap; padding: 22px; gap: 14px; }
  .cloud-hero>.badge { margin-left: 0; }
  .cloud-hero-icon { width: 50px; height: 50px; }
  .cloud-hero h2 { font-size: 19px; }
  .cloud-hero p { font-size: 8px; }
  .topology-legend { gap: 12px; font-size: 7px; padding: 10px 18px; }
  .topology-legend>.badge { margin-left: 0; font-size: 7px; }
  .topology-full .panel-header { flex-wrap: wrap; padding: 20px 18px 10px; }
  .topology-full .panel-header .button { margin-top: 8px; }
  .topology.expanded { height: 375px; margin-left: 8px; margin-right: 8px; }
  .expanded .topo-node { width: 115px; padding: 12px 6px 10px; }
  .expanded .topo-node b { font-size: 9px; }
  .expanded .topo-node>small { font-size: 7px; }
  .expanded .topo-node>code { font-size: 8px; }
  .expanded .node-state { font-size: 6px; }
  .expanded .topo-endpoint { width: 135px; }
  .expanded .topo-endpoint button { font-size: 7px; }
  .expanded .endpoint-status { font-size: 6px; }
  .expanded .connection-label { top: 75%; font-size: 6px; }
  .flow-caption { font-size: 8px; padding: 14px 18px; }
  .flow-steps { gap: 8px; }
  .flow-step { padding: 12px; }
  .flow-step b { font-size: 9px; }
  .flow-step small { font-size: 7px; }
  .monitor-metrics { grid-template-columns: 1fr; gap: 12px; }
  .monitor-card { min-height: 210px; }
  .monitoring-events .event-list { grid-template-columns: 1fr; }
  .security-rule { flex-wrap: wrap; gap: 10px; padding: 18px; }
  .security-rule>div { flex: 1; min-width: 200px; }
  .security-rule>.badge { margin-left: 30px; }
  .toast { left: calc(50% + 25px); max-width: calc(100vw - 95px); }
}
@media (max-width: 520px) {
  .sidebar,.sidebar.collapsed { width: 242px; padding: 23px 15px 15px; transform: translateX(-100%); }
  .sidebar .brand { padding-left: 10px; }
  .sidebar .brand-copy { display: flex; }
  .sidebar .nav-text,.sidebar .nav-section-label,.sidebar .workspace-selector>svg,.sidebar .environment-panel,.sidebar .nav-dot { display: block; }
  .sidebar .nav-item { justify-content: flex-start; font-size: 11px; }
  .sidebar .workspace-selector { padding: 11px 10px; }
  .sidebar .workspace-selector b { font-size: 10px; }
  .sidebar .trailing-icon { display: block; }
  .sidebar-bottom { padding-top: 18px; }
  .environment-panel { margin-bottom: 8px; padding: 10px 12px; }
  .environment-panel>b { margin-top: 5px; }
  .environment-line { margin-top: 7px; }
  .workspace,.workspace.sidebar-is-collapsed { margin-left: 0; }
  .menu-open .sidebar { transform: translateX(0); }
  .menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: #03050bc9; z-index: 39; backdrop-filter: blur(3px); }
  .mobile-menu { display: inline-flex; }
  .breadcrumb { gap: 6px; }
  .breadcrumb-icon { display: none; }
  .breadcrumb b { font-size: 9px; }
  .topbar { padding: 0 13px; gap: 8px; }
  .topbar-actions { gap: 4px; }
  .global-search { display: none; }
  .topbar-divider { margin: 0 5px; }
  main { padding: 22px 16px 0; }
  .eyebrow { font-size: 7px; }
  h1 { font-size: 23px; }
  .page-heading p { font-size: 9px; line-height: 1.9; }
  .heading-actions .button,.heading-actions .mode-button { font-size: 9px; }
  .demo-banner { margin-bottom: 20px; }
  .demo-banner b { font-size: 8px; }
  .demo-banner div>span { font-size: 7px; line-height: 1.9; }
  .section-intro>span { font-size: 8px; }
  .section-intro>small { font-size: 6px; gap: 4px; }
  .section-intro>small svg { width: 10px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
  .stat-card { padding: 13px; }
  .stat-source { font-size: 5.5px; }
  .stat-label { font-size: 9px; }
  .stat-value.status-value { font-size: 12px; }
  .stat-detail { font-size: 6px; }
  .stat-value { font-size: 25px; }
  .stat-value>small { font-size: 8px; }
  .metric-icon { width: 28px; height: 28px; border-radius: 7px; }
  .panel-header { padding: 16px 14px 0; gap: 8px; }
  .panel-header h2 { font-size: 11px; }
  .panel-header p { font-size: 7px; }
  .text-link { font-size: 6px; gap: 3px; }
  .text-link svg { width: 10px; }
  .topology.compact { height: 245px; margin: 0 6px; }
  .compact .topo-node { width: 96px; padding-left: 3px; padding-right: 3px; }
  .compact .topo-node b { font-size: 8px; }
  .compact .topo-node>small { font-size: 6px; }
  .compact .topo-node>code { font-size: 7px; }
  .compact .topo-endpoint { width: 113px; }
  .compact .topo-endpoint button { font-size: 6px; gap: 3px; padding-left: 3px; padding-right: 3px; }
  .compact .node-state { font-size: 5px; }
  .topology-bottom>span:first-child { font-size: 6px; gap: 3px; }
  .topology-bottom .badge { font-size: 6px; }
  .traffic-toolbar { padding: 17px 14px 5px; }
  .chart-legend { font-size: 7px; gap: 9px; }
  .segmented button { font-size: 7px; padding: 4px 5px; }
  .traffic-chart { height: 160px; }
  .traffic-totals { padding: 12px 15px; gap: 20px; }
  .traffic-average { font-size: 6px; }
  .traffic-totals>div>span { font-size: 7px; }
  .inventory-panel table { min-width: 515px; }
  .panel-bottom { padding-left: 14px; padding-right: 14px; font-size: 7px; }
  .event-list { padding-left: 15px; padding-right: 15px; }
  .event b { font-size: 10px; }
  .event p { font-size: 7px; }
  .event small { font-size: 7px; }
  .footer { padding-top: 20px; font-size: 6px; }
  .inventory-summary { gap: 10px; }
  .inventory-summary .stat-card { padding: 14px; }
  .inventory-summary .stat-label { font-size: 9px; }
  .inventory-summary .stat-source { font-size: 6px; }
  .inventory-summary .stat-detail { font-size: 7px; }
  .inventory-summary .stat-value.status-value { font-size: 12px; }
  .inventory-full .panel-header { padding-bottom: 15px; }
  .inventory-controls { padding: 0 14px 15px; }
  .search-field { min-width: 0; }
  .filter-group { flex-wrap: wrap; gap: 8px; }
  .filter-group>label { min-width: calc(50% - 8px); }
  .filter-group>label:last-child { flex: 1; }
  .inventory-full table { min-width: 720px; }
  .pagination { font-size: 7px; gap: 6px; }
  .pagination>div { gap: 7px; }
  .pagination .icon-button { width: 25px; height: 25px; }
  .bar-row>span { width: 95px; font-size: 9px; }
  .detail-rows { margin-left: 16px; margin-right: 16px; }
  .detail-rows>div { font-size: 10px; gap: 12px; }
  .detail-rows dt { max-width: 45%; }
  .detail-rows dd { min-width: 0; }
  .detail-rows dd code { font-size: 9px; }
  .cloud-hero { padding: 20px 16px; }
  .cloud-hero h2 { font-size: 17px; }
  .cloud-hero .eyebrow { font-size: 7px; }
  .cloud-hero p { font-size: 7px; }
  .cloud-hero-icon { width: 42px; height: 42px; border-radius: 10px; }
  .cloud-hero-icon svg { width: 25px; height: 25px; }
  .integration-callout { padding: 18px; gap: 12px; }
  .integration-callout>div { flex: 1; }
  .integration-callout h2 { font-size: 11px; }
  .integration-callout p { font-size: 9px; }
  .integration-callout .button { margin-left: 42px; }
  .topology-full .panel-header h2 { font-size: 13px; }
  .topology-full .panel-header p { font-size: 8px; }
  .topology-legend { gap: 9px; font-size: 6px; padding-left: 16px; padding-right: 16px; }
  .topology-legend>.badge { font-size: 6px; }
  .expanded .topo-node { width: 96px; padding: 12px 3px 8px; }
  .expanded .topo-icon { width: 29px; height: 29px; border-radius: 7px; }
  .expanded .topo-icon svg { width: 18px; height: 18px; }
  .expanded .topo-node b { font-size: 8px; }
  .expanded .topo-node>small { font-size: 6px; }
  .expanded .topo-node>code { font-size: 7px; }
  .expanded .node-state { font-size: 5px; }
  .expanded .topo-endpoint { width: 115px; }
  .expanded .topo-endpoint button { font-size: 6px; padding: 6px; gap: 4px; }
  .expanded .endpoint-status { font-size: 6px; }
  .expanded .topo-endpoint svg { width: 11px; height: 11px; }
  .flow-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-step b { font-size: 10px; }
  .flow-step small { font-size: 8px; }
  .security-rule>div { min-width: 160px; }
  .security-rule b { font-size: 10px; }
  .security-rule p { font-size: 9px; }
  .security-rule>.badge { font-size: 7px; }
  .monitoring-note { align-items: flex-start; font-size: 9px; }
  .monitoring-note svg { margin-top: 3px; }
  .toast { left: 50%; max-width: calc(100vw - 32px); bottom: 16px; padding: 12px 16px; font-size: 10px; }
  .error-banner { flex-wrap: wrap; }
  .error-banner>div { flex: 1; }
  .error-banner .button { margin-left: 32px; }
  .dialog-body { padding: 18px; }
  .dialog-heading { padding: 15px 18px; }
  .dialog-heading h2 { font-size: 13px; }
  .dialog-body .detail-rows>div { font-size: 10px; }
  .dialog-body .detail-rows>div>.badge { font-size: 7px; }
}
@media (max-width: 359px) {
  main { padding-left: 11px; padding-right: 11px; }
  .stat-card { padding: 11px; }
  .compact .topo-node,.expanded .topo-node { width: 86px; }
  .topology.compact { margin-left: 2px; margin-right: 2px; }
  .topology-bottom>span:first-child { font-size: 5px; }
}