/* =====================================================================
   Azure portal (simulated) - prefix az-
   Light theme, Segoe UI 13px, #0078d4 accents
   ===================================================================== */
.edge-page.az-host { overflow: hidden; }
.az-portal {
  --az-blue: #0078d4; --az-blue-d: #106ebe; --az-text: #323130; --az-muted: #605e5c; --az-line: #edebe9; --az-line2: #e1dfdd;
  --az-hover: #f3f2f1; --az-sel: #deecf9; --az-err: #a4262c; --az-ok: #57a300;
  position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; color: var(--az-text);
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, Roboto, 'Helvetica Neue', sans-serif; font-size: 13px; line-height: 1.4;
  overflow: hidden; user-select: none;
}
.az-portal input, .az-portal textarea { user-select: text; }
.az-portal button { font-family: inherit; }
.az-i { display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; vertical-align: middle; }
.az-i svg { width: 100%; height: 100%; }
.az-link { color: var(--az-blue); cursor: pointer; text-decoration: none; }
.az-link:hover { text-decoration: underline; color: #004578; }
.az-muted { color: var(--az-muted); }
.az-muted.sm, .az-portal .sm.az-muted { font-size: 12px; }
.az-num { text-align: right; }
.az-pad { padding: 12px 24px 28px; }
.az-ul { margin: 4px 0 12px; padding-left: 20px; }
.az-ul li { margin: 3px 0; }
.az-code { background: #f3f2f1; border: 1px solid var(--az-line2); padding: 10px 12px; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 12px; white-space: pre-wrap; user-select: text; }

/* ---------- spinner ---------- */
.az-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c7e0f4; border-top-color: var(--az-blue); animation: spin .8s linear infinite; flex: none; vertical-align: middle; }
.az-spin.sm { width: 14px; height: 14px; border-width: 2px; }
.az-spin.inv { border-color: rgba(255,255,255,.25); border-top-color: #fff; }

/* ---------- top bar ---------- */
.az-top { flex: none; height: 40px; display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--az-line2); padding-right: 4px; position: relative; z-index: 3; }
.az-topbtn { position: relative; width: 40px; height: 40px; border: none; background: none; color: #323130; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.az-topbtn .az-i { width: 16px; height: 16px; }
.az-topbtn:hover { background: var(--az-hover); }
.az-burger .az-i { width: 18px; height: 18px; }
.az-brand { font-size: 15px; font-weight: 600; color: #323130; padding: 0 16px 0 6px; cursor: pointer; white-space: nowrap; letter-spacing: .1px; }
.az-top-mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.az-gsearch { flex: 0 1 560px; min-width: 160px; height: 30px; display: flex; align-items: center; gap: 8px; border: 1px solid #8a8886; border-radius: 4px; padding: 0 10px; background: #fff; }
.az-gsearch:hover { border-color: #323130; }
.az-gsearch.open, .az-gsearch:focus-within { border-color: var(--az-blue); box-shadow: 0 0 0 1px var(--az-blue); }
.az-gsearch-i { width: 14px; height: 14px; display: inline-flex; color: var(--az-muted); }
.az-gsearch-in { flex: 1; min-width: 0; border: none; outline: none; font-size: 13px; background: none; }
.az-gsearch-in::placeholder { color: #605e5c; }
.az-copilot { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #c8c6c4; border-radius: 4px; background: #fff; font-size: 13px; cursor: pointer; flex: none; }
.az-copilot .az-i { width: 18px; height: 18px; }
.az-copilot:hover { background: var(--az-hover); }
.az-top-right { display: flex; align-items: center; flex: none; }
.az-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--az-blue); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.az-account { display: flex; align-items: center; gap: 8px; height: 40px; border: none; background: none; padding: 0 6px 0 10px; cursor: pointer; text-align: right; max-width: 280px; }
.az-account:hover { background: var(--az-hover); }
.az-acct-t { min-width: 0; line-height: 1.15; }
.az-acct-mail { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-acct-dir { font-size: 10px; color: var(--az-muted); letter-spacing: .3px; }
.az-avatar { width: 28px; height: 28px; border-radius: 50%; background: #8764b8; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: none; }
.az-avatar.lg { width: 56px; height: 56px; font-size: 22px; }

/* global search dropdown */
.az-gsearch-pop { position: absolute; top: 36px; z-index: 60; background: #fff; border: 1px solid var(--az-line2); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-height: 70%; overflow: auto; padding: 4px 0 0; }
.az-gs-gt { font-size: 12px; font-weight: 600; padding: 10px 14px 4px; color: #323130; }
.az-gs-i { display: flex; align-items: center; gap: 10px; padding: 6px 14px; cursor: pointer; }
.az-gs-i:hover { background: var(--az-hover); }
.az-gs-n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-gs-s { color: var(--az-muted); font-size: 12px; }
.az-gs-none { padding: 14px; color: var(--az-muted); }
.az-gs-foot { display: flex; padding: 8px 14px; border-top: 1px solid var(--az-line); margin-top: 6px; color: var(--az-muted); font-size: 12px; }
.az-gs-fr { margin-left: auto; }

/* ---------- main / blades ---------- */
.az-main { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: #fff; }
.az-scroll { flex: 1; min-height: 0; overflow: auto; }
.az-blade { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.az-crumbs { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 8px 24px 0; font-size: 13px; min-height: 26px; }
.az-crumb-sep { display: inline-flex; width: 12px; height: 12px; color: var(--az-muted); margin: 0 4px; }
.az-crumb-sep svg { width: 100%; height: 100%; }
.az-bhead { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 4px 16px 10px 24px; }
.az-bhead-i { width: 32px; height: 32px; display: inline-flex; flex: none; margin-top: 2px; }
.az-bhead-i svg { width: 100%; height: 100%; }
.az-bhead-tt { flex: 1; min-width: 0; }
.az-bhead-row { display: flex; align-items: center; gap: 4px; }
.az-btitle { font-size: 20px; font-weight: 600; margin: 0; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #323130; }
.az-bsub { font-size: 12px; color: var(--az-muted); }
.az-hbtn { width: 28px; height: 28px; border: none; background: none; color: #323130; display: inline-flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; flex: none; border-radius: 2px; }
.az-hbtn svg { width: 100%; height: 100%; }
.az-hbtn:hover { background: var(--az-hover); }
.az-hbtn.sm { width: 22px; height: 22px; padding: 4px; }
.az-hbtn.inv { color: #fff; }
.az-hbtn.inv:hover { background: rgba(255,255,255,.12); }
.az-bclose { margin-left: auto; width: 32px; height: 32px; padding: 8px; }
.az-bcontent { flex: 1; min-height: 0; display: flex; }
.az-bmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- left resource menu ---------- */
.az-rmenu { width: 236px; flex: none; border-right: 1px solid var(--az-line); display: flex; flex-direction: column; min-height: 0; }
.az-rmenu-top { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 12px; }
.az-rmenu-si { width: 14px; height: 14px; display: inline-flex; color: var(--az-muted); flex: none; position: absolute; margin-left: 8px; }
.az-rmenu-search { flex: 1; min-width: 0; height: 28px; border: 1px solid #8a8886; border-radius: 2px; padding: 0 8px 0 28px; font-size: 13px; outline: none; }
.az-rmenu-search:focus { border-color: var(--az-blue); }
.az-rmenu-list { flex: 1; overflow: auto; padding-bottom: 16px; }
.az-rm-i { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px 0 16px; cursor: pointer; white-space: nowrap; position: relative; }
.az-rm-i span:last-child { overflow: hidden; text-overflow: ellipsis; }
.az-rm-i.in { padding-left: 34px; }
.az-rm-i:hover { background: var(--az-hover); }
.az-rm-i.sel { background: #e1effa; font-weight: 600; }
.az-rm-i.sel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--az-blue); }
.az-rm-g { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; cursor: pointer; font-weight: 400; color: #323130; }
.az-rm-g:hover { background: var(--az-hover); }
.az-rm-chev { width: 12px; height: 12px; color: var(--az-muted); }

/* ---------- command bar ---------- */
.az-cmdbar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0; min-height: 40px; padding: 2px 16px; border-bottom: 1px solid var(--az-line); }
.az-cmd { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: none; background: none; color: #323130; font-size: 13px; cursor: pointer; white-space: nowrap; border-radius: 2px; }
.az-cmd:hover:not(:disabled) { background: var(--az-hover); }
.az-cmd .az-cmd-i { color: var(--az-blue); }
.az-cmd:disabled { color: #a19f9d; cursor: default; }
.az-cmd:disabled .az-cmd-i { color: #a19f9d; }
.az-cmd-caret { width: 10px; height: 10px; color: var(--az-muted); }
.az-cmd-sep { width: 1px; height: 20px; background: var(--az-line2); margin: 0 6px; }

/* ---------- buttons, inputs ---------- */
.az-btn { height: 32px; min-width: 80px; padding: 0 16px; border: 1px solid #8a8886; border-radius: 2px; background: #fff; color: #323130; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.az-btn:hover:not(:disabled) { background: var(--az-hover); }
.az-btn.primary { background: var(--az-blue); border-color: var(--az-blue); color: #fff; }
.az-btn.primary:hover:not(:disabled) { background: var(--az-blue-d); border-color: var(--az-blue-d); }
.az-btn.danger { background: var(--az-err); border-color: var(--az-err); color: #fff; }
.az-btn.danger:hover:not(:disabled) { background: #8a1f25; }
.az-btn:disabled { background: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; cursor: default; }
.az-btn .az-i { width: 14px; height: 14px; }
.az-row-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.az-input { height: 30px; width: 100%; border: 1px solid #8a8886; border-radius: 2px; padding: 0 8px; font-size: 13px; color: #323130; background: #fff; outline: none; }
.az-input:hover { border-color: #323130; }
.az-input:focus { border-color: var(--az-blue); box-shadow: inset 0 0 0 1px var(--az-blue); }
.az-input:disabled { background: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; }
.az-ta { height: auto; padding: 6px 8px; resize: vertical; font-family: inherit; }
.az-filterrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.az-filter-in { width: 240px; }
.az-filter-in.wide { width: 420px; }
.az-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.az-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px; background: #f3f2f1; font-size: 12px; cursor: pointer; white-space: nowrap; }
.az-chip .az-i { width: 12px; height: 12px; }
.az-chip:hover { background: #edebe9; }
.az-chip.add { background: none; color: var(--az-blue); }
.az-chip.add .az-i { color: var(--az-blue); }
.az-chip.plain { background: none; border: 1px solid transparent; }
.az-chip.plain:hover { border-color: var(--az-line2); }
.az-listinfo { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--az-muted); font-size: 12px; margin: 4px 0 6px; }
.az-listinfo-r { display: flex; align-items: center; gap: 12px; }
.az-pill { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--az-line2); background: #fff; font-size: 12px; cursor: pointer; }
.az-pill:hover { background: var(--az-hover); }
.az-pill .az-i { width: 10px; height: 10px; }
.az-pill.add { color: var(--az-blue); border-color: transparent; }

/* checkbox / radio */
.az-chk { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 18px; position: relative; }
.az-chk input, .az-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.az-chk-box { width: 16px; height: 16px; flex: none; border: 1px solid #323130; border-radius: 2px; background: #fff; display: inline-block; position: relative; margin-top: 1px; vertical-align: middle; }
.az-chk-box.on, .az-chk input:checked + .az-chk-box { background: var(--az-blue); border-color: var(--az-blue); }
.az-chk-box.on::after, .az-chk input:checked + .az-chk-box::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.az-chk input:focus-visible + .az-chk-box { outline: 1px solid #000; outline-offset: 2px; }
.az-chk.disabled { cursor: default; color: #a19f9d; }
.az-chk.disabled .az-chk-box { border-color: #c8c6c4; background: #f3f2f1; }
.az-chk-l { max-width: 640px; }
.az-chk .az-tip { margin-top: 1px; }
.az-radios { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.az-radios.horiz { flex-direction: row; gap: 20px; }
.az-radio { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; position: relative; line-height: 20px; }
.az-radio-dot { width: 20px; height: 20px; flex: none; border: 1px solid #323130; border-radius: 50%; background: #fff; position: relative; display: inline-block; vertical-align: middle; }
.az-radio input:checked + .az-radio-dot, .az-radio-dot.on { border-color: var(--az-blue); }
.az-radio input:checked + .az-radio-dot::after, .az-radio-dot.on::after { content: ''; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--az-blue); }
.az-radio-dot.sm { width: 16px; height: 16px; }
.az-radio-dot.sm.on::after { left: 3px; top: 3px; width: 8px; height: 8px; }
.az-radio.disabled { color: #a19f9d; cursor: default; }
.az-radio.disabled .az-radio-dot { border-color: #c8c6c4; background: #f3f2f1; }
.az-sub { font-size: 12px; color: var(--az-muted); line-height: 1.35; }
.az-seg { display: inline-flex; border: 1px solid #8a8886; border-radius: 2px; overflow: hidden; }
.az-seg-b { height: 28px; min-width: 64px; padding: 0 14px; border: none; background: #fff; font-size: 13px; cursor: pointer; border-right: 1px solid #c8c6c4; }
.az-seg-b:last-child { border-right: none; }
.az-seg-b:hover { background: var(--az-hover); }
.az-seg-b.on { background: var(--az-blue); color: #fff; }

/* dropdown */
.az-dd { position: relative; height: 30px; width: 100%; display: flex; align-items: center; border: 1px solid #8a8886; border-radius: 2px; background: #fff; padding: 0 30px 0 8px; cursor: pointer; outline: none; }
.az-dd:hover { border-color: #323130; }
.az-dd:focus, .az-dd.open { border-color: var(--az-blue); box-shadow: inset 0 0 0 1px var(--az-blue); }
.az-dd.disabled { background: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; cursor: default; box-shadow: none; }
.az-dd-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-dd-t.ph { color: var(--az-muted); }
.az-dd-chev { position: absolute; right: 8px; top: 50%; margin-top: -6px; width: 12px; height: 12px; color: #323130; }
.az-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.az-layer > * { pointer-events: auto; }
.az-pop { position: absolute; background: #fff; border: 1px solid var(--az-line2); box-shadow: 0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.11); z-index: 70; }
.az-dd-pop { max-width: 640px; }
.az-dd-list { max-height: 300px; overflow: auto; padding: 2px 0; }
.az-dd-filter { margin: 6px; width: calc(100% - 12px); }
.az-dd-g { font-size: 12px; font-weight: 600; color: var(--az-blue); padding: 8px 10px 4px; }
.az-dd-o { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; min-height: 32px; }
.az-dd-o:hover { background: var(--az-hover); }
.az-dd-o.sel { background: #edebe9; }
.az-dd-o.disabled { color: #a19f9d; cursor: default; background: none; }
.az-dd-o .az-chk-box { margin-top: 0; }
.az-dd-ol { flex: 1; min-width: 0; }
.az-dd-empty { padding: 10px; color: var(--az-muted); }
.az-dd-foot { border-top: 1px solid var(--az-line); padding: 8px 10px; font-size: 13px; }
.az-menu { min-width: 200px; padding: 4px 0; }
.az-menu-i { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.az-menu-i .az-i { color: var(--az-blue); }
.az-menu-i:hover { background: var(--az-hover); }
.az-menu-i.disabled { color: #a19f9d; cursor: default; background: none; white-space: normal; max-width: 360px; padding: 6px 12px; }
.az-menu-sep { height: 1px; background: var(--az-line); margin: 4px 0; }
.az-menu-sub { color: var(--az-muted); font-size: 12px; margin-left: auto; }
.az-callout { width: 340px; padding: 14px 16px; }
.az-callout p { margin: 0 0 10px; }
.az-callout-l { display: block; margin-bottom: 4px; }
.az-callout .az-row-btns { margin-top: 12px; }

/* tooltip */
.az-tip { display: inline-flex; width: 14px; height: 14px; margin-left: 4px; color: var(--az-muted); cursor: help; flex: none; vertical-align: -2px; outline: none; }
.az-tip svg { width: 100%; height: 100%; }
.az-tip:hover, .az-tip:focus { color: var(--az-blue); }
.az-tipbox { position: absolute; z-index: 90; max-width: 320px; background: #fff; border: 1px solid var(--az-line2); box-shadow: 0 6.4px 14.4px rgba(0,0,0,.13); padding: 10px 12px; font-size: 12px; line-height: 1.45; color: #323130; pointer-events: none; }

/* message bars */
.az-msg { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; margin: 8px 0; font-size: 13px; background: #ebf3fc; border-radius: 2px; }
.az-msg.warning { background: #fff4ce; }
.az-msg.error { background: #fde7e9; }
.az-msg.success { background: #dff6dd; }
.az-msg-i { margin-top: 1px; }
.az-msg-t { flex: 1; min-width: 0; }
.az-running { align-items: center; }
.az-val-list { margin: 6px 0 2px; padding-left: 18px; }
.az-val-list li { margin: 2px 0; }

/* tables */
.az-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.az-table th { text-align: left; font-weight: 600; color: #323130; padding: 8px 10px; border-bottom: 1px solid var(--az-line2); white-space: nowrap; font-size: 12px; }
.az-table td { padding: 7px 10px; border-bottom: 1px solid var(--az-line); vertical-align: middle; }
.az-table tbody tr:hover td { background: #faf9f8; }
.az-table tbody tr.sel td { background: var(--az-sel); }
.az-table .az-tsel { width: 34px; padding-right: 0; cursor: pointer; }
.az-sort { display: inline-flex; margin-left: 4px; color: #a19f9d; vertical-align: -1px; }
.az-namecell { display: inline-flex; align-items: center; gap: 8px; }
.az-status { display: inline-flex; align-items: center; gap: 6px; }
.az-status .az-i { width: 14px; height: 14px; }
.az-muted-row td { color: var(--az-muted); }
.az-rules td { white-space: nowrap; }
.az-empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.az-empty-i .az-i { width: 48px; height: 48px; }
.az-empty-t { font-size: 18px; font-weight: 600; }
.az-empty-x { color: var(--az-muted); max-width: 560px; }
.az-bigempty { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.az-bigempty-art { width: 96px; height: 96px; opacity: .9; margin-bottom: 6px; }
.az-bigempty-art svg { width: 100%; height: 100%; }

/* pivots */
.az-pivot { display: flex; gap: 4px; border-bottom: 1px solid var(--az-line); flex: none; margin: 4px 0 10px; }
.az-pv { position: relative; height: 40px; padding: 0 10px; border: none; background: none; font-size: 14px; color: #323130; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.az-pv:hover { background: var(--az-hover); }
.az-pv.sel { font-weight: 600; }
.az-pv.sel::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--az-blue); }
.az-pv-dot { width: 7px; height: 7px; border-radius: 50%; background: #e00b1c; }
.az-wiz-tabs { margin: 0; padding: 0 16px; }

/* ---------- forms / wizard ---------- */
.az-wizard .az-bhead { padding-bottom: 4px; }
.az-wiz-body { padding: 16px 24px 48px; max-width: 1080px; }
.az-wiz-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--az-line); background: #fff; }
.az-wiz-foot.sticky { position: sticky; bottom: 0; }
.az-wiz-foot-link { margin-left: 8px; }
.az-wiz-foot-fb { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.az-wiz-foot-fb .az-i { color: var(--az-blue); }
.az-intro { margin: 0 0 12px; max-width: 900px; line-height: 1.5; }
.az-sec { margin: 22px 0 6px; }
.az-sec-h { font-size: 15px; font-weight: 600; margin: 20px 0 6px; display: flex; align-items: center; }
.az-sec .az-sec-h { margin: 0 0 4px; }
.az-sec-d { color: #323130; margin: 0 0 8px; max-width: 900px; line-height: 1.5; }
.az-sec-more { margin-left: auto; font-size: 13px; font-weight: 400; }
.az-frow { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 560px); gap: 16px; padding: 7px 0; align-items: start; }
.az-frow.indent > .az-flabel { padding-left: 24px; }
.az-flabel { display: flex; align-items: flex-start; flex-wrap: wrap; padding-top: 6px; line-height: 18px; }
.az-req { color: var(--az-err); margin-left: 2px; }
.az-fctl { min-width: 0; }
.az-fhelp { font-size: 12px; color: var(--az-muted); margin-top: 4px; line-height: 1.45; display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; }
.az-fhelp .az-i { width: 14px; height: 14px; }
.az-fhelp.az-indent { margin: 0 0 6px 316px; }
.az-ferr { color: var(--az-err); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.az-ferr:empty { display: none; }
.az-frow.invalid .az-input, .az-frow.invalid .az-dd { border-color: var(--az-err); }
.az-under { margin-top: 4px; font-size: 13px; }
.az-form > .az-msg, .az-form > div > .az-msg { max-width: 876px; }
.az-form-stack .az-frow { grid-template-columns: 1fr; gap: 4px; padding: 5px 0; }
.az-form-stack .az-flabel { padding-top: 0; }
.az-indent-box { margin: 4px 0 8px 316px; padding: 8px 12px; background: #faf9f8; border: 1px solid var(--az-line); max-width: 560px; }
.az-adv { margin: 18px 0 6px; }
.az-adv > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; color: #323130; }
.az-adv > summary::marker { color: var(--az-muted); }
.az-taggrid { max-width: 900px; margin: 8px 0; }
.az-tg-head, .az-tg-row { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.az-tg-head.res, .az-tg-row.res { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) minmax(0, 1fr) 32px; }
.az-tg-head { font-weight: 600; padding: 4px 0; }
.az-tg-row { margin-bottom: 6px; }
.az-tg-colon { text-align: center; color: var(--az-muted); }
.az-review { max-width: 1000px; }
.az-valbar { font-size: 14px; }
.az-rv { margin-bottom: 6px; }
.az-rv-h { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }
.az-rv-row { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 16px; padding: 4px 0; }
.az-rv-k { color: #323130; }
.az-rv-v { color: #323130; word-break: break-word; }
.az-price { display: flex; justify-content: space-between; gap: 24px; padding: 12px 16px; border: 1px solid var(--az-line2); max-width: 760px; }
.az-price-n { font-weight: 600; }
.az-price-r { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.az-price-credit { color: #107c10; display: inline-flex; align-items: center; }
.az-price-v { font-size: 16px; font-weight: 600; }
.az-terms { max-width: 900px; line-height: 1.5; color: #323130; }
.az-dd-table { max-width: 900px; margin-bottom: 4px; }
.az-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.az-img-card { border: 1px solid var(--az-line2); padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 170px; }
.az-img-card.sel { border-color: var(--az-blue); box-shadow: 0 0 0 1px var(--az-blue); }
.az-img-top { display: flex; gap: 10px; align-items: flex-start; }
.az-img-top .az-i { width: 32px; height: 32px; }
.az-img-n { font-weight: 600; }
.az-img-desc { flex: 1; font-size: 12px; color: var(--az-muted); }
.az-size-table td, .az-size-table th { white-space: nowrap; }
.az-size-table tbody tr:not(.az-size-fam) { cursor: pointer; }
.az-size-fam td { background: #faf9f8 !important; font-weight: 600; cursor: default; }
.az-size-fam .az-i { width: 10px; height: 10px; }
.az-size-fam .az-muted { font-weight: 400; }
.az-cur { display: inline-block; margin-left: 8px; font-size: 11px; padding: 1px 6px; border-radius: 2px; background: #deecf9; color: #004578; font-weight: 600; }
.az-size-page { display: flex; flex-direction: column; min-height: 100%; }
.az-size-page > .az-pad { flex: 1; }

/* ---------- panes, dialogs, toasts ---------- */
.az-pane-mask { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; background: rgba(0,0,0,.2); }
.az-pane-mask.clear { background: transparent; }
.az-pane { position: absolute; top: 40px; right: 0; bottom: 0; max-width: 100%; background: #fff; box-shadow: -4px 0 18px rgba(0,0,0,.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s cubic-bezier(.1,.9,.2,1); }
.az-pane.in { transform: none; }
.az-pane-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 10px 24px; }
.az-pane-head h2 { font-size: 20px; font-weight: 600; margin: 0; }
.az-pane-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 24px 24px; }
.az-pane-foot { flex: none; padding: 14px 24px; border-top: 1px solid var(--az-line); }
.az-side { width: 380px; }
.az-side-body { padding-top: 4px; }
.az-side-body h3 { font-size: 14px; margin: 16px 0 6px; }
.az-side-link { padding: 5px 0; }
.az-kv > div { padding: 3px 0; }
.az-faces { display: flex; gap: 10px; margin: 6px 0 12px; }
.az-face { width: 44px; height: 44px; font-size: 24px; border: 1px solid var(--az-line2); background: #fff; border-radius: 50%; cursor: pointer; }
.az-face:hover { background: var(--az-hover); }
.az-acct-panel { top: 40px; bottom: auto; width: 340px; transform: none; opacity: 0; transition: opacity .12s; }
.az-acct-panel.in { opacity: 1; }
.az-acct-panel .az-pane-body { padding: 0; }
.az-acct-body { padding: 0; }
.az-acct-top { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 13px; }
.az-acct-org { font-weight: 600; }
.az-acct-me { display: flex; gap: 14px; padding: 8px 14px 16px; align-items: flex-start; }
.az-acct-name { font-size: 18px; font-weight: 600; }
.az-acct-other { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f3f2f1; cursor: pointer; }
.az-pmenu { position: absolute; left: 0; top: 0; bottom: 0; width: 290px; background: #fff; box-shadow: 4px 0 18px rgba(0,0,0,.2); transform: translateX(-100%); transition: transform .18s cubic-bezier(.1,.9,.2,1); overflow: auto; z-index: 2; }
.az-pmenu.in { transform: none; }
.az-pm-head { height: 40px; display: flex; align-items: center; }
.az-pm-i { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 16px; cursor: pointer; }
.az-pm-i:hover { background: var(--az-hover); }
.az-pm-g { font-size: 11px; font-weight: 600; color: var(--az-muted); padding: 14px 16px 6px; border-top: 1px solid var(--az-line); margin-top: 6px; letter-spacing: .5px; }
.az-dlg-mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 95; }
.az-dlg { width: 480px; max-width: calc(100% - 40px); background: #fff; box-shadow: 0 25.6px 57.6px rgba(0,0,0,.22), 0 4.8px 14.4px rgba(0,0,0,.18); }
.az-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 16px 6px 24px; }
.az-dlg-head h2 { font-size: 20px; font-weight: 600; margin: 0; }
.az-dlg-body { padding: 4px 24px 18px; line-height: 1.5; }
.az-dlg-body p { margin: 4px 0 8px; }
.az-dlg-foot { display: flex; gap: 8px; padding: 0 24px 22px; flex-wrap: wrap; }
.az-toasts { position: absolute; top: 48px; right: 16px; width: 360px; display: flex; flex-direction: column; gap: 8px; z-index: 92; pointer-events: none; }
.az-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--az-line2); box-shadow: 0 6.4px 14.4px rgba(0,0,0,.16); padding: 12px 8px 12px 14px; cursor: pointer; animation: aztoast .25s ease-out; transition: opacity .3s; }
.az-toast.out { opacity: 0; }
@keyframes aztoast { from { transform: translateX(30px); opacity: 0; } }
.az-toast-t { flex: 1; min-width: 0; }
.az-toast-h { font-weight: 600; margin-bottom: 2px; }
.az-toast-x { font-size: 12px; color: #323130; line-height: 1.4; }

/* notifications panel */
.az-notif-panel { width: 400px; }
.az-notif-panel .az-pane-body { padding: 0; }
.az-np-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px 6px 20px; }
.az-np-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.az-np-bar { display: flex; justify-content: space-between; padding: 4px 20px 10px; font-size: 13px; border-bottom: 1px solid var(--az-line); }
.az-np-dismiss { display: inline-flex; align-items: center; gap: 4px; }
.az-np-dismiss .az-i { width: 10px; height: 10px; color: var(--az-blue); }
.az-np-empty { padding: 30px 20px; color: var(--az-muted); text-align: center; }
.az-np-i { display: flex; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--az-line); }
.az-np-i > .az-i, .az-np-i > .az-spin { margin-top: 2px; }
.az-np-t { flex: 1; min-width: 0; }
.az-np-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.az-np-title { font-weight: 600; }
.az-np-text { font-size: 12px; margin-top: 2px; line-height: 1.45; word-break: break-word; }
.az-np-time { font-size: 11px; color: var(--az-muted); margin-top: 6px; text-align: right; }
.az-np-acts { display: flex; gap: 8px; margin-top: 10px; }
.az-np-acts .az-btn { height: 26px; min-width: 0; padding: 0 10px; font-weight: 400; }
.az-np-prog { height: 2px; background: #c7e0f4; margin-top: 8px; overflow: hidden; position: relative; }
.az-np-prog > div { position: absolute; top: 0; bottom: 0; width: 30%; background: var(--az-blue); animation: indet 1.4s linear infinite; }

/* cloud shell */
.az-shell { flex: none; height: 0; display: none; flex-direction: column; background: #000; color: #e6e6e6; border-top: 4px solid #1f1f1f; }
.az-shell.open { display: flex; height: 260px; }
.az-shell-bar { flex: none; height: 32px; display: flex; align-items: center; gap: 2px; background: #1f1f1f; color: #fff; font-size: 12px; padding: 0 4px 0 8px; }
.az-shell-sw { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; height: 24px; border: 1px solid #555; }
.az-shell-sw .az-i { width: 10px; height: 10px; }
.az-shell-sep { width: 1px; height: 18px; background: #555; margin: 0 6px; }
.az-shell-b { padding: 4px 8px; color: #ddd; cursor: pointer; }
.az-shell-b:hover { background: #333; }
.az-shell-gap { flex: 1; }
.az-shell-out { flex: 1; overflow: auto; padding: 8px 12px; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 13px; line-height: 1.5; user-select: text; }
.az-shell-ok { color: #5ad35a; margin-left: 6px; }
.az-shell-err { color: #ff6b6b; }
.az-shell-spin { margin-top: 6px; }
.az-shell-caret { display: inline-block; width: 8px; height: 15px; background: #e6e6e6; vertical-align: -2px; animation: azblink 1s steps(1) infinite; }
@keyframes azblink { 50% { opacity: 0; } }

/* ---------- home ---------- */
.az-home-scroll { background: #fff; }
.az-home { padding: 8px 40px 40px; max-width: 1360px; }
.az-home-h { font-size: 16px; font-weight: 600; margin: 22px 0 12px; }
.az-home-svcs { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.az-home-svc { width: 104px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-align: center; border-radius: 2px; }
.az-home-svc:hover { background: var(--az-hover); }
.az-home-svc-i { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.az-home-svc-i .az-i { width: 40px; height: 40px; }
.az-home-svc.plain .az-home-svc-i { border-radius: 50%; background: #f3f2f1; }
.az-home-svc.plain .az-home-svc-i .az-i { width: 26px; height: 26px; }
.az-home-svc-l { font-size: 12px; line-height: 1.3; color: #323130; }
.az-home-card { border: 1px solid var(--az-line2); padding: 4px 16px 12px; max-width: 1240px; }
.az-home-pv { margin-bottom: 4px; }
.az-home-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 20px; }
.az-home-empty-art { width: 64px; height: 64px; opacity: .55; }
.az-home-empty-art svg { width: 100%; height: 100%; }
.az-home-empty-t { font-size: 15px; font-weight: 600; }
.az-home-seeall { padding: 8px 0 0; }
.az-home-navs { display: flex; gap: 48px; flex-wrap: wrap; }
.az-home-nav { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.az-home-nav .az-i { width: 24px; height: 24px; }
.az-home-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; max-width: 1240px; }
.az-home-tool { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.az-home-tool-i { width: 32px !important; height: 32px !important; }
.az-home-tool-x { font-size: 12px; color: var(--az-muted); margin-top: 2px; }
.az-home-links { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 6px 24px; }
.az-home-links > div { display: flex; flex-direction: column; gap: 6px; }

/* all services / marketplace / dashboard */
.az-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 12px; }
.az-svc-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--az-line); cursor: pointer; }
.az-svc-tile:hover { background: var(--az-hover); }
.az-svc-tile .az-i { width: 28px; height: 28px; }
.az-svc-n { font-weight: 600; }
.az-svc-feat { display: flex; flex-wrap: wrap; gap: 4px; }
.az-mk-top { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.az-mk-search { max-width: 520px; }
.az-mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 20px; margin: 8px 0 18px; }
.az-mk-item { display: flex; gap: 12px; align-items: center; }
.az-mk-i { width: 52px; height: 52px; flex: none; border: 1px solid var(--az-line2); display: flex; align-items: center; justify-content: center; }
.az-mk-i .az-i { width: 32px; height: 32px; }
.az-mk-n { font-weight: 600; margin-bottom: 2px; }
.az-mk-links { font-size: 13px; color: var(--az-muted); }
.az-dash-bg { background: #f3f2f1; }
.az-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 16px 24px; }
.az-dash-tile { background: #fff; border: 1px solid var(--az-line2); padding: 12px 14px; min-height: 150px; }
.az-dash-tile.wide { grid-column: span 2; }
.az-dash-h { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.az-dash-links { display: flex; flex-direction: column; gap: 6px; }
.az-dash-ok { display: flex; gap: 8px; align-items: center; }
.az-avd-hero { display: flex; gap: 20px; align-items: center; padding: 18px 20px; background: #f3f8fd; border: 1px solid #deecf9; margin-bottom: 16px; }
.az-avd-hero h2 { margin: 0 0 6px; font-size: 18px; }
.az-avd-hero p { margin: 0; max-width: 760px; line-height: 1.5; }
.az-avd-art { width: 72px; height: 72px; flex: none; }
.az-avd-art svg { width: 100%; height: 100%; }
.az-avd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.az-avd-card { border: 1px solid var(--az-line2); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.az-avd-ct { font-weight: 600; font-size: 14px; }
.az-subcost { display: flex; align-items: flex-end; gap: 24px; margin-top: 14px; }

/* ---------- essentials ---------- */
.az-ess { border-bottom: 1px solid var(--az-line); margin-bottom: 8px; }
.az-ess-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.az-ess-tg { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 2px; color: #323130; }
.az-ess-chev { width: 12px; height: 12px; }
.az-ess-right { font-size: 13px; }
.az-ess-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 2px 0 6px 20px; }
.az-ess-body.hidden { display: none; }
.az-ess-row, .az-ess-tags { display: grid; grid-template-columns: 180px minmax(0, 1fr); padding: 3px 0; }
.az-ess-tags { padding: 2px 0 10px 20px; grid-template-columns: 180px minmax(0, 1fr); }
.az-ess-k { color: #323130; }
.az-ess-v { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; word-break: break-word; }
.az-ess-colon { margin-right: 6px; }
.az-tagpill { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #f3f2f1; font-size: 12px; }

/* ---------- RG delete / deployment ---------- */
.az-del { display: flex; flex-direction: column; gap: 6px; }
.az-del-warn { display: flex; gap: 10px; padding: 10px 12px; background: #fde7e9; line-height: 1.5; align-items: flex-start; }
.az-del-lbl { font-weight: 600; margin-top: 12px; }
.az-del-rg { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.az-del-table { margin: 4px 0 6px; }
.az-del .az-input { max-width: 520px; }
.az-dep-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.az-dep-hd { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.az-dep-hd h2 { margin: 0; font-size: 20px; font-weight: 600; }
.az-dep-big { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.az-dep-big svg { width: 100%; height: 100%; }
.az-dep-big .az-spin { width: 26px; height: 26px; border-width: 3px; }
.az-dep-details, .az-dep-next { margin-top: 16px; }
.az-dep-table { margin-top: 6px; }
.az-dep-step { display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 20px; }
.az-badge-rec { display: inline-block; font-size: 11px; padding: 1px 6px; background: #dff6dd; color: #107c10; border-radius: 2px; margin-left: 6px; font-weight: 600; }
.az-dep-fb { margin-top: 24px; color: var(--az-muted); font-size: 12px; }
.az-dep-side { display: flex; flex-direction: column; gap: 12px; }
.az-dep-card { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--az-line2); align-items: flex-start; }
.az-dep-card .az-i { width: 28px; height: 28px; }
.az-dep-card > div { display: flex; flex-direction: column; gap: 4px; }

/* ---------- VM overview ---------- */
.az-vm-pv { margin-top: 8px; }
.az-vm-tabc { padding-top: 4px; }
.az-props { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.az-prop-g { margin-bottom: 16px; }
.az-prop-h { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--az-line); margin-bottom: 4px; }
.az-prop-r { display: grid; grid-template-columns: 220px minmax(0, 1fr); padding: 3px 0 3px 24px; }
.az-prop-v { word-break: break-word; }
.az-mcharts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.az-mchart { border: 1px solid var(--az-line2); padding: 10px 12px; }
.az-mchart-t { font-weight: 600; margin-bottom: 6px; }
.az-mchart-v { display: flex; flex-direction: column; margin-top: 4px; }
.az-mchart-v b { font-size: 18px; }
.az-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.az-cap { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--az-line2); cursor: pointer; align-items: flex-start; }
.az-cap:hover { background: var(--az-hover); }
.az-cap .az-i { width: 24px; height: 24px; color: var(--az-blue); }
.az-cap-t { font-weight: 600; }
.az-rec { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--az-line2); max-width: 760px; }
.az-rec > div { display: flex; flex-direction: column; gap: 4px; }

/* connect */
.az-conn-info { display: flex; gap: 40px; flex-wrap: wrap; padding: 10px 14px; background: #faf9f8; border: 1px solid var(--az-line); margin-bottom: 8px; }
.az-conn-info > div { display: flex; flex-direction: column; gap: 2px; }
.az-conn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 340px)); gap: 14px; margin: 8px 0; }
.az-conn-card { border: 1px solid var(--az-line2); padding: 14px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; box-shadow: 0 1.6px 3.6px rgba(0,0,0,.08); }
.az-conn-top { display: flex; gap: 12px; align-items: flex-start; }
.az-conn-top .az-i { width: 32px; height: 32px; color: var(--az-blue); }
.az-conn-t { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.az-rdp p { margin: 0 0 8px; line-height: 1.5; }
.az-pre-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--az-line); align-items: center; }
.az-pre-l { font-weight: 600; }
.az-pre-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.az-pre-fix { margin-left: auto; }

/* networking */
.az-net-nic { border: 1px solid var(--az-line2); padding: 12px 14px; margin-bottom: 8px; }
.az-net-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.az-net-nsg { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0 4px; }

/* boot diagnostics */
.az-bd-screen { width: 640px; max-width: 100%; height: 360px; margin-top: 6px; border: 1px solid #333; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.az-bd-screen.off { background: #111; color: #ddd; }
.az-bd-screen.win { background: radial-gradient(ellipse at 60% 60%, #3c7fd8 0%, #12407f 60%, #0a2550 100%); color: #fff; align-items: flex-start; justify-content: flex-end; padding: 0 0 40px 40px; }
.az-bd-time { font-size: 64px; font-weight: 300; line-height: 1; }
.az-bd-date { font-size: 20px; }
.az-bd-hint { font-size: 13px; opacity: .85; margin-top: 18px; }
.az-bd-screen.linux { background: #000; color: #ccc; font-family: Consolas, monospace; font-size: 13px; align-items: flex-start; justify-content: flex-start; padding: 12px; margin: 6px 0 0; white-space: pre; }

/* ---------- cost analysis ---------- */
.az-cost-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.az-kpis { display: flex; gap: 36px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.az-kpi-l { font-size: 11px; font-weight: 600; color: var(--az-muted); letter-spacing: .4px; }
.az-kpi-v { font-size: 26px; font-weight: 600; line-height: 1.2; }
.az-kpi-v.muted { color: #a19f9d; }
.az-kpi-note { max-width: 320px; margin-left: auto; }
.az-cost-chart { border: 1px solid var(--az-line); padding: 10px 12px 4px; margin-bottom: 16px; }
.az-cost-legend { display: flex; gap: 18px; font-size: 12px; margin-bottom: 4px; align-items: center; }
.az-cost-legend .sw { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.az-cost-legend .sw.solid { background: rgba(0,120,212,.55); border-top: 2px solid #0078d4; }
.az-cost-legend .sw.dash { border-top: 2px dashed #0078d4; background: rgba(0,120,212,.08); }
.az-cost-gran { margin-left: auto; color: var(--az-muted); }
.az-donuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.az-donut-card { border: 1px solid var(--az-line); padding: 10px 12px; }
.az-donut-h { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; margin-bottom: 8px; padding: 2px 8px; border-radius: 12px; background: #f3f2f1; font-size: 12px; }
.az-donut-h .az-i { width: 10px; height: 10px; }
.az-donut-body { display: flex; gap: 12px; align-items: center; }
.az-donut { flex: none; }
.az-donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.az-dl-row { display: flex; align-items: center; gap: 6px; }
.az-dl-sw { width: 10px; height: 10px; flex: none; }
.az-dl-k { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-dl-v { font-weight: 600; }

@media (max-width: 1100px) {
  .az-frow { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
  .az-fhelp.az-indent, .az-indent-box { margin-left: 0; }
  .az-props, .az-ess-body { grid-template-columns: 1fr; }
  .az-dep-cols { grid-template-columns: 1fr; }
  .az-donuts { grid-template-columns: 1fr; }
  .az-acct-t { display: none; }
}