/* Wiki — visual no estilo do portal Azure / admin center do Microsoft 365 (Fluent):
   fonte Segoe UI, cantos retos, azul Microsoft (#0078d4), barra superior azul, menu lateral com grupos que abrem e fecham.
   Carregado depois do app.css: só sobrescreve. */
:root {
  --bg: 0 0% 100%; --fg: 30 3% 20%; --card: 0 0% 100%; --muted: 30 9% 95%; --muted-fg: 30 2% 37%;
  --border: 30 8% 92%; --primary: 207 100% 42%; --primary-glow: 207 100% 42%; --sidebar: 0 0% 100%;
  --sidebar-accent: 30 9% 95%; --success: 120 77% 26%; --warning: 33 100% 36%; --danger: 355 75% 41%;
  --info: 196 100% 32%; --violet: 266 52% 47%; --orange: 22 90% 44%;
  --radius: 2px; --radius-sm: 2px; --input-bg: 0 0% 100%;
  --shadow: 0 1.6px 3.6px rgba(0, 0, 0, .1), 0 .3px .9px rgba(0, 0, 0, .08);
  --top: 207 100% 42%; --top-fg: 0 0% 100%; --nav-hover: 30 9% 95%; --nav-active: 207 100% 96%;
  --font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.dark {
  --bg: 0 0% 11%; --fg: 30 9% 95%; --card: 30 2% 14%; --muted: 30 2% 18%; --muted-fg: 30 5% 72%;
  --border: 30 2% 24%; --primary: 207 85% 62%; --primary-glow: 207 85% 62%; --sidebar: 0 0% 13%;
  --sidebar-accent: 0 0% 18%; --success: 122 39% 56%; --warning: 40 96% 58%; --danger: 355 80% 66%;
  --info: 196 80% 60%; --violet: 266 60% 72%; --orange: 25 95% 64%;
  --shadow: 0 1.6px 3.6px rgba(0, 0, 0, .4), 0 .3px .9px rgba(0, 0, 0, .3);
  --input-bg: 0 0% 12%; --top: 0 0% 8%; --nav-hover: 0 0% 20%; --nav-active: 0 0% 22%;
}
body, .dark body, body.dark { font-family: var(--font); font-size: 14px; background: hsl(var(--bg)); color: hsl(var(--fg)); }
.dark body { background-attachment: initial; }
svg.lucide { stroke-width: 1.6; }
h1, h2, h3, h4 { letter-spacing: 0; }

/* ------------------------------------------------------------------ cantos retos em tudo que não é círculo */
.card, .hero, .hero .stat, .kpi-ic, .btn, .btn.sm, input, select, textarea, .search-box input, .chips-input, .md pre, .md code, .md img,
.md-editor, .md-editor .bar, .md-editor .bar .btn, .md-editor .md-block, .md-editor .seg, .md-pop, .att-drop, .att-item .att-ic, .client-logo,
.client-card .nums div, .topo-legend, .drawer.center, .toast, .cal-ev, .login-card, .login-card input, .login-btn, .cab-cand, .diff-box,
.seg-tabs, .seg-tabs button, .evid-tile, .pop-chip, .pop-res, .pop-item, .ico-row, .topo-selbar, .ins-note, .ins-db, .ins-db-ic, .ins-inst,
.ttip, .sql-pre, .pa-drop, .pa-shot, .pa-img, .pa-num, .pa-canvas, .co-ai-item, .na-box, .aia-ic, .aia-drop, .aia-review, .aia-row, .aia-miss,
.co-code, .co-hli, .co-n, .co-msg, .lh-ic, .md-visual .toastui-editor-defaultUI, .palette .box, .palette .box input, .tabs a, .badge, .count,
.tabs a .n, .chips-input label, .btn.outline-primary, .co-sug .chip, .pill, .user-chip, .list-item { border-radius: 2px; }
.btn.outline-primary, .co-sug .chip { border-radius: 2px; }

/* ------------------------------------------------------------------ casca: barra superior + menu + conteúdo */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); min-height: 100vh; }
.app.collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.az-top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0;
  background: hsl(var(--top)); color: hsl(var(--top-fg)); }
.dark .az-top { border-bottom: 1px solid hsl(var(--border)); }
.az-btn { position: relative; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; flex-shrink: 0; }
.az-btn:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.az-btn svg { width: 18px; height: 18px; }
.az-dot { position: absolute; right: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #6bb700; box-shadow: 0 0 0 1.5px hsl(var(--top)); }
.az-dot.off { background: #c4c4c4; }
.az-brand { display: flex; align-items: center; gap: 10px; color: inherit; padding: 0 12px 0 4px; height: 48px; flex-shrink: 0; }
.az-brand:hover { text-decoration: none; }
.az-brand svg { width: 18px; height: 18px; opacity: .9; }
.az-brand b { font-size: 16px; font-weight: 600; }
.az-brand span { font-size: 13px; opacity: .85; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .35); }
.az-search { flex: 0 1 560px; margin: 0 auto; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 2px;
  background: #fff; color: #605e5c; font: inherit; font-size: 13.5px; cursor: text; text-align: left; min-width: 0; }
.az-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-search svg { width: 16px; height: 16px; color: #0078d4; }
.az-search kbd { font-family: var(--font); font-size: 11px; color: #8a8886; border: 1px solid #e1dfdd; border-radius: 2px; padding: 0 5px; }
.dark .az-search { background: #2b2b2b; color: #c8c6c4; }
.dark .az-search kbd { border-color: #484644; }
.az-right { display: flex; align-items: center; margin-left: auto; }
.az-user { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 12px; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: right; }
.az-user:hover { background: rgba(255, 255, 255, .14); }
.az-un b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.az-un small { display: block; font-size: 11px; opacity: .85; text-transform: capitalize; }
.az-user .avatar { width: 30px; height: 30px; font-size: 12px; background: rgba(255, 255, 255, .22); border: 0; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; background: hsl(var(--primary)); border: 0; color: #fff; }

/* menu lateral (admin center do M365) */
.sidebar { grid-row: 2; position: sticky; top: 48px; height: calc(100vh - 48px); background: hsl(var(--sidebar)); border-right: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding-top: 6px; }
.nav { display: flex; flex-direction: column; }
.nav a, .nav-gh { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 12px 0 16px; min-height: 40px; border: 0; border-radius: 0;
  background: transparent; color: hsl(var(--fg)); font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; width: 100%; white-space: normal; line-height: 1.25; box-shadow: none; }
.nav a:hover, .nav-gh:hover { background: hsl(var(--nav-hover)); text-decoration: none; }
.nav a svg, .nav-gh > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; color: hsl(var(--fg)); }
.nav a span:not(.badge), .nav-gh span:not(.badge) { flex: 1; padding: 9px 0; }
.nav-gh .chev { width: 16px; height: 16px; margin-left: auto; transition: transform .15s; color: hsl(var(--muted-fg)); }
.nav-group.open .nav-gh .chev { transform: rotate(180deg); }
.nav-sub { display: none; }
.nav-group.open .nav-sub { display: block; }
.nav a.nav-si { padding-left: 48px; min-height: 36px; }
.nav a.active { background: hsl(var(--nav-active)); color: hsl(var(--fg)); font-weight: 600; box-shadow: none; }
.nav a.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: hsl(var(--primary)); border-radius: 0 2px 2px 0; }
.nav-group.has-active:not(.open) .nav-gh::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: hsl(var(--primary)); }
.nav .badge.count { margin-left: auto; background: hsl(var(--primary)); color: #fff; font-size: 11px; min-width: 20px; padding: 0 6px; height: 18px; line-height: 18px; text-align: center; }
.side-foot { margin-top: auto; padding: 10px 16px; font-size: 11px; color: hsl(var(--muted-fg)); border-top: 1px solid hsl(var(--border)); }
.collapsed .nav a span, .collapsed .nav-gh span, .collapsed .nav-gh .chev, .collapsed .nav-sub, .collapsed .side-foot, .collapsed .nav .badge { display: none !important; }
.collapsed .nav a, .collapsed .nav-gh { padding: 0; justify-content: center; }
@media (max-width: 900px) { .az-brand span, .az-un, .az-search kbd { display: none; } }
@media (max-width: 800px) { .app, .app.collapsed { grid-template-columns: 1fr; } .sidebar { display: none; } .app:not(.collapsed) .sidebar { display: flex; position: fixed; left: 0; top: 48px; width: 260px; z-index: 25; box-shadow: var(--shadow); } }

.content { grid-column: 2; padding: 20px 32px 60px; max-width: 1680px; width: 100%; }
.collapsed .content { grid-column: 2; }
@media (max-width: 800px) { .content { grid-column: 1; padding: 16px; } }

/* ------------------------------------------------------------------ cabeçalho da página (blade do portal) */
.crumbs { font-size: 13px; color: hsl(var(--muted-fg)); margin-bottom: 6px; }
.crumbs a { color: hsl(var(--primary)); }
.page-head { margin: 2px 0 18px; align-items: center; }
.page-head h1 { font-size: 24px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.page-head .sub { margin-top: 2px; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.section-label, .kpi small, .hero .stat small, .kpi-s small { letter-spacing: .02em; text-transform: none; font-size: 12px; font-weight: 600; }

/* barra de comandos (Azure) */
.az-cmd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 0 12px; margin-bottom: 12px; border-bottom: 1px solid hsl(var(--border)); }
.az-cmd .btn { font-weight: 400; }
.az-cmd .grow { flex: 1; min-width: 260px; }
.az-sep { width: 1px; height: 22px; background: hsl(var(--border)); margin: 0 6px; }
.az-filter { display: flex; align-items: center; gap: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--input-bg)); padding: 0 10px; height: 32px; border-radius: 2px; min-width: 240px; }
.az-filter svg { width: 16px; height: 16px; color: hsl(var(--muted-fg)); }
.az-filter input { border: 0 !important; padding: 0 !important; height: 30px; background: transparent !important; box-shadow: none !important; }
.az-pager { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid hsl(var(--border)); }
.az-pager .muted { margin-right: auto; font-size: 13px; }

/* ------------------------------------------------------------------ componentes planos */
.card, .dark .card { background: hsl(var(--card)); backdrop-filter: none; box-shadow: var(--shadow); border: 1px solid hsl(var(--border)); }
.card-head { padding: 12px 16px; }
.card-head h3 { font-size: 15px; font-weight: 600; }
.card-pad { padding: 16px 18px; }
.btn { font-weight: 600; font-size: 14px; padding: 5px 14px; min-height: 32px; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / 1); border-color: #8a8886; }
.dark .btn { border-color: #605e5c; }
.btn:hover { background: hsl(var(--muted)); border-color: #8a8886; }
.btn.primary, .btn.primary:hover { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; box-shadow: none; }
.btn.primary:hover { filter: brightness(.92); }
.dark .btn.primary { color: #111; }
.btn.ghost, .btn.ghost:hover { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: hsl(var(--muted)); }
.btn.sm { font-size: 13px; padding: 3px 10px; min-height: 28px; }
.btn.icon { padding: 5px; min-height: 32px; }
.btn.outline-primary { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
input, select, textarea { border-radius: 2px; border-color: #8a8886; font-family: var(--font); font-size: 14px; }
.dark input, .dark select, .dark textarea { border-color: #605e5c; }
input:focus, select:focus, textarea:focus { border-color: hsl(var(--primary)); box-shadow: inset 0 -2px 0 hsl(var(--primary)); outline: none; }
.badge { font-weight: 600; font-size: 12px; padding: 1px 8px; }
.tabs { gap: 0; border-bottom: 1px solid hsl(var(--border)); }
.tabs a { border-radius: 0; background: transparent !important; border: 0; border-bottom: 2px solid transparent; color: hsl(var(--fg)); font-weight: 400; padding: 10px 14px; }
.tabs a.active { border-bottom-color: hsl(var(--primary)); font-weight: 600; color: hsl(var(--fg)); box-shadow: none; }
.tbl th { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: hsl(var(--fg)); }
.tbl td, .tbl th { padding: 9px 12px; }
.tbl tbody tr:hover { background: hsl(var(--muted)); }
.drawer { border-radius: 0; box-shadow: 0 25.6px 57.6px rgba(0, 0, 0, .22), 0 4.8px 14.4px rgba(0, 0, 0, .18); }
.drawer .dh h3 { font-size: 20px; font-weight: 600; }
.overlay { background: rgba(0, 0, 0, .4); backdrop-filter: none; }
.toast { box-shadow: var(--shadow); }
.kpi-s b, .kpi b, .hero .stat b { font-weight: 600; }
.empty svg { stroke-width: 1.4; }

/* painel inicial no estilo "Bem-vindo(a) ao Azure" */
.hero { background: hsl(var(--card)); color: hsl(var(--fg)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow); }
.hero::after { display: none; }
.hero h2 { font-size: 20px; font-weight: 600; }
.hero .stat { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); color: hsl(var(--fg)); }
.hero .stat:hover { background: hsl(var(--nav-active)); }
.hero .stat svg { color: hsl(var(--primary)); }
.az-welcome h1 { font-size: 24px; font-weight: 600; margin: 6px 0 2px; }
.az-welcome p { margin: 0 0 18px; color: hsl(var(--muted-fg)); }
.az-sec { font-size: 18px; font-weight: 600; margin: 26px 0 10px; }
.az-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px; }
.az-svc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; color: hsl(var(--fg)); text-align: center; font-size: 13px; line-height: 1.3; border-radius: 2px; }
.az-svc:hover { background: hsl(var(--muted)); text-decoration: none; }
.az-svc .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; color: #fff; }
.az-svc .ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
.az-svc.add { color: hsl(var(--primary)); }
.az-svc.add .ic { background: transparent; color: hsl(var(--primary)); }
.az-svc.add .ic svg { width: 30px; height: 30px; stroke-width: 1.4; }

/* chamado do GLPI */
.tk-text { white-space: pre-wrap; font-size: 13.5px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); padding: 10px 12px; border-radius: 2px; }
.tk-fu { margin-bottom: 10px; }
.tk-fu .tk-text { margin-top: 4px; }

/* login no estilo da tela de entrada da Microsoft */
.login-az { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px;
  background: linear-gradient(160deg, #f3f2f1 0%, #e1dfdd 100%); font-family: var(--font); }
.dark .login-az { background: linear-gradient(160deg, #1b1a19 0%, #11100f 100%); }
.login-az .login-card { width: 440px; max-width: 100%; background: hsl(var(--card)); padding: 44px; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); border: 0; text-align: left; }
.login-brand { display: flex; align-items: center; gap: 8px; color: hsl(var(--fg)); margin-bottom: 18px; }
.login-brand svg { color: #0078d4; }
.login-brand b { font-size: 17px; font-weight: 600; }
.login-brand span { font-size: 13px; color: hsl(var(--muted-fg)); padding-left: 8px; border-left: 1px solid hsl(var(--border)); }
.login-az h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.login-az .login-hint { margin: 0 0 18px; color: hsl(var(--muted-fg)); font-size: 13px; }
.login-az input { width: 100%; border: 0; border-bottom: 1px solid #605e5c; border-radius: 0; padding: 8px 0; margin-bottom: 14px; background: transparent; font-size: 15px; }
.login-az input:focus { border-bottom-color: #0078d4; box-shadow: none; }
.login-az .login-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.login-az .login-btn { width: auto; min-width: 108px; border-radius: 0; padding: 6px 12px; font-size: 15px; }
.login-az .login-err { color: hsl(var(--danger)); font-size: 13px; min-height: 18px; margin: 0; }
.login-az .login-foot { font-size: 12px; color: #605e5c; }
.nav-group.has-active .nav-gh, .nav-group.fly .nav-gh, .nav-gh[aria-expanded="true"] { background: transparent; color: hsl(var(--fg)); box-shadow: none; }
.nav-group.has-active .nav-gh:hover, .nav-gh:hover { background: hsl(var(--nav-hover)); }
.nav-group.has-active .nav-gh > svg:first-child { color: hsl(var(--primary)); }
.az-cmd input, .az-cmd select { height: 32px; padding-top: 0; padding-bottom: 0; }
.login-az h1 { color: hsl(var(--fg)); -webkit-text-fill-color: currentColor; background: none; text-transform: none; letter-spacing: 0; }
.nav a.active .badge.count, .nav a .badge.count { flex: 0 0 auto; padding: 0 6px; }

/* ------------------------------------------------------------------ recurso (cliente) no estilo do portal Azure: título "nome | blade" + menu vertical */
.az-res-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.az-res-head .client-logo { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
.az-res-head .grow { min-width: 0; flex: 1; }
.az-res-head h1 { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-res-head h1 .sep { color: hsl(var(--muted-fg)); font-weight: 300; margin: 0 4px; }
.az-res-head h1 .blade { font-weight: 600; }
.az-res-head .sub { font-size: 13px; color: hsl(var(--muted-fg)); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.az-res-head .sub svg { width: 13px; height: 13px; }

.az-res { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; border-top: 1px solid hsl(var(--border)); transition: grid-template-columns .18s ease; }
.az-res.rm-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
.az-rm { position: sticky; top: 48px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; border-right: 1px solid hsl(var(--border)); background: hsl(var(--card)); min-width: 0; }
.az-rm-top { display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 8px; }
.az-rm-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid #8a8886; border-radius: 2px; background: hsl(var(--input-bg)); }
.dark .az-rm-search { border-color: #605e5c; }
.az-rm-search:focus-within { border-color: hsl(var(--primary)); box-shadow: inset 0 -2px 0 hsl(var(--primary)); }
.az-rm-search svg { width: 14px; height: 14px; color: hsl(var(--muted-fg)); flex-shrink: 0; }
.az-rm-search input { border: 0 !important; padding: 0 !important; height: 28px; background: transparent !important; box-shadow: none !important; font-size: 13px; min-width: 0; }
.az-rm-collapse { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: hsl(var(--fg)); cursor: pointer; border-radius: 2px; flex-shrink: 0; }
.az-rm-collapse:hover { background: hsl(var(--nav-hover)); }
.az-rm-collapse svg { width: 16px; height: 16px; }
.az-rm-list { overflow-y: auto; overflow-x: hidden; padding-bottom: 10px; }
.az-rm-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px 0 14px; color: hsl(var(--fg)); font-size: 13.5px; line-height: 1.2; }
.az-rm-item:hover { background: hsl(var(--nav-hover)); text-decoration: none; }
.az-rm-item svg { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--primary)); }
.az-rm-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 0; }
.az-rm-item .n { font-size: 11px; color: hsl(var(--muted-fg)); background: hsl(var(--muted)); border-radius: 2px; padding: 0 6px; line-height: 17px; }
.az-rm-item.active { background: hsl(var(--nav-active)); font-weight: 600; }
.az-rm-item.active::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: hsl(var(--primary)); }
.az-rm-item.hidden, .az-rm-grp.hidden { display: none; }
.az-rm-gh { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 0 10px; margin-top: 4px; border: 0; background: transparent; color: hsl(var(--fg)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.az-rm-gh:hover { background: hsl(var(--nav-hover)); }
.az-rm-gh svg { width: 14px; height: 14px; transition: transform .15s; flex-shrink: 0; }
.az-rm-gh span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-rm-grp.closed .az-rm-gh svg { transform: rotate(-90deg); }
.az-rm-grp.closed:not(.searching) .az-rm-gb { display: none; }
.az-rm-gb .az-rm-item { padding-left: 30px; }
.az-rm-none { padding: 10px 14px; font-size: 13px; color: hsl(var(--muted-fg)); }
/* menu recolhido: só ícones */
.rm-collapsed .az-rm-top { padding: 8px 8px; justify-content: center; }
.rm-collapsed .az-rm-search, .rm-collapsed .az-rm-item .t, .rm-collapsed .az-rm-item .n, .rm-collapsed .az-rm-gh, .rm-collapsed .az-rm-none { display: none; }
.rm-collapsed .az-rm-grp.closed .az-rm-gb { display: block; }
.rm-collapsed .az-rm-item, .rm-collapsed .az-rm-gb .az-rm-item { padding: 0; justify-content: center; }
.rm-collapsed .az-rm-grp + .az-rm-grp, .rm-collapsed .az-rm-list > .az-rm-item + .az-rm-grp { border-top: 1px solid hsl(var(--border)); margin-top: 4px; padding-top: 4px; }
.rm-collapsed .az-rm-item.hidden, .rm-collapsed .az-rm-grp.hidden { display: flex; }
.az-blade { min-width: 0; padding: 0 0 0 20px; }
.az-res-cmd { padding: 6px 0 8px; margin-bottom: 14px; gap: 2px; }
.az-res-cmd .btn { font-weight: 400; font-size: 13.5px; }
.az-res-cmd .btn svg { color: hsl(var(--primary)); width: 16px; height: 16px; }
.az-blade .topo-wrap { height: calc(100vh - 300px); }
@media (max-width: 900px) {
  .az-res, .az-res.rm-collapsed { grid-template-columns: 1fr; }
  .az-rm { position: static; max-height: none; border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
  .az-rm-collapse { display: none; }
  .az-rm-list { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .az-rm-gh { display: none; }
  .az-rm-grp, .az-rm-gb, .az-rm-grp.closed:not(.searching) .az-rm-gb { display: flex; }
  .az-rm-item, .az-rm-gb .az-rm-item { padding: 0 12px; white-space: nowrap; }
  .az-rm-item .t { overflow: visible; }
  .az-blade { padding: 12px 0 0; }
}

/* ------------------------------------------------------------------ topologia: galeria de ícones (menu vertical à esquerda do diagrama) */
.topo-wrap { --gal-w: 0px; }
.topo-wrap.with-gal { --gal-w: 40px; }
.topo-wrap.with-gal.gal-open { --gal-w: 214px; }
.topo-wrap #topo, .topo-wrap .topo-overlay { left: var(--gal-w); }
.topo-wrap .topo-legend { left: calc(var(--gal-w) + 14px); }
.topo-wrap .topo-selbar { left: calc(50% + var(--gal-w) / 2); }
.topo-gal { position: absolute; left: 0; top: 0; bottom: 0; width: var(--gal-w); z-index: 4; display: flex; flex-direction: column; background: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); }
.tg-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-bottom: 1px solid hsl(var(--border)); min-height: 40px; }
.tg-head b { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.tg-head b svg { width: 16px; height: 16px; color: hsl(var(--primary)); flex-shrink: 0; }
.tg-body { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.tg-search { min-width: 0; height: 30px; }
.tg-hint { font-size: 11.5px; color: hsl(var(--muted-fg)); margin: 6px 2px 4px; line-height: 1.35; }
.tg-grp { font-size: 12px; font-weight: 600; color: hsl(var(--fg)); margin: 12px 2px 6px; padding-bottom: 4px; border-bottom: 1px solid hsl(var(--border)); }
.tg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.tg-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: hsl(var(--fg)); font: inherit; font-size: 10.5px; line-height: 1.2; text-align: center; cursor: grab; }
.tg-item:hover { background: hsl(var(--nav-hover)); border-color: hsl(var(--border)); }
.tg-item:active { cursor: grabbing; }
.tg-item img { width: 34px; height: 34px; pointer-events: none; }
.tg-item span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.topo-gal.closed .tg-body { display: none; }
.topo-gal.closed .tg-head { padding: 6px 4px; justify-content: center; border-bottom: 0; }
.topo-gal.closed .tg-head b { display: none; }
.topo-wrap.drop-on #topo { outline: 2px dashed hsl(var(--primary)); outline-offset: -6px; }
.az-blade .card-head { flex-wrap: wrap; row-gap: 8px; }
.az-blade .card-head h3 { white-space: nowrap; }
.az-blade .card-head .right { flex-wrap: wrap; justify-content: flex-end; }