/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, -apple-system, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --az-bg: #0A0B0E;
    --az-bg-soft: #0F1115;
    --az-card: #13161B;
    --az-card-soft: #1A1E25;
    --az-fg: #E6E8EB;
    --az-fg-muted: #7C8390;
    --az-border: #1F2228;
    --az-border-strong: #2D3138;
    --az-accent: #4FE3A0;
    --az-good: #4FE3A0;
    --az-bad: #FF6B6B;
    --az-warn: #FFB454;
  }

  :root[data-theme='light'] {
    --az-bg: #F5F5F0;
    --az-bg-soft: #FAFAF8;
    --az-card: #FFFFFF;
    --az-card-soft: #EFEEE9;
    --az-fg: #0F1115;
    --az-fg-muted: #5C6573;
    --az-border: #D9D6CE;
    --az-border-strong: #B8B3A6;
    --az-accent: #0067D6;
    --az-good: #0E8A6E;
    --az-bad: #C73027;
    --az-warn: #B57316;
  }

  html, body {
    background: var(--az-bg);
    color: var(--az-fg);
    font-family: var(--font-inter), Inter, -apple-system, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
  }

  code, pre, kbd {
    font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  table { font-variant-numeric: tabular-nums; }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.hidden {
  display: none;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration-line: underline;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animations */
@keyframes cc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes cc-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes cc-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cc-pulse { animation: cc-pulse 2s infinite; }
.cc-blink::before {
  content: '▌';
  display: inline-block;
  width: 0.6em;
  animation: cc-blink 1s steps(1, end) infinite;
}
.cc-row-in {
  animation: cc-row-in 400ms ease-out backwards;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--az-border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--az-fg-muted); }

/* =============================================================================
   Component classes (cc- prefix, reusable across the app).
   =============================================================================
   Defined at ROOT scope (NOT inside @layer components) so they match the
   pre-existing convention of .cc-pulse / .cc-blink / .cc-row-in above and
   side-step Tailwind layer-ordering edge cases (a previous attempt put
   these inside @layer components — children of .cc-banner stopped
   flexing in column on dev HMR; root-scope rules avoid that). */

  /* Button reset — replaces inline `all: 'unset'` which expands to ~300
     property resets in DevTools. Drop-in for any clickable element that
     should inherit color/font from its container. */
  .cc-btn-reset {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
  }
  .cc-btn-reset:disabled { cursor: default; }

  /* Toolbar filter chip — used by /rbac filter row + reusable for any
     URL-driven filter chip group. Active state = accent tint + accent fg.
     Tone via aria-pressed for the active chip. */
  .cc-chip {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: transparent;
    border: 1px solid var(--az-border);
    color: var(--az-fg-muted);
    border-radius: 3px;
    transition: background 120ms, color 120ms;
  }
  .cc-chip:disabled { cursor: default; opacity: 0.6; }
  .cc-chip[aria-pressed='true'] {
    background: color-mix(in oklab, var(--az-accent) 14%, transparent);
    color: var(--az-accent);
  }

  /* Accent inline-link button. For "Explain how to grant..." style CTAs. */
  .cc-link {
    color: var(--az-accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    width: -moz-fit-content;
    width: fit-content;
  }
  .cc-link.cc-link-sm {
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
  }

  /* Modal scaffold — overlay + centered card. Used by every modal in the
     app (graph-consent, sub-findings, tag-edit, etc). */
  .cc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: grid;
    place-items: center;
    z-index: 100;
  }
  .cc-modal-card {
    background: var(--az-card);
    border: 1px solid var(--az-border);
    border-radius: 4px;
    min-width: 480px;
    max-width: 720px;
    padding: 24px;
    font-size: 12px;
    color: var(--az-fg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 85vh;
    overflow-y: auto;
    line-height: 1.55;
  }
  .cc-modal-card.cc-modal-card-wide { max-width: 760px; min-width: 560px; }
  .cc-modal-eyebrow {
    font-size: 11px;
    color: var(--az-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .cc-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 4px 0 0;
  }
  .cc-modal-title.cc-modal-title-sm { font-size: 16px; }
  .cc-modal-section {
    padding-top: 12px;
    border-top: 1px solid var(--az-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
  }

  /* Subscription entry row in SubFindingsModal — clickable with hover
     accent border. Reusable for any modal listing clickable rows. */
  .cc-sub-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--az-border);
    border-radius: 3px;
    transition: border-color 120ms, background 120ms;
    cursor: pointer;
  }
  .cc-sub-entry:hover {
    border-color: var(--az-accent);
    background: color-mix(in oklab, var(--az-accent) 4%, transparent);
  }
  .cc-sub-entry-label { font-size: 12px; color: var(--az-fg); }
  .cc-sub-entry-action { font-size: 11px; color: var(--az-accent); }

  /* 7-up auto-fit grid used by the Findings panel. Same template by
     two consumers OK; keep it generic. */
  .cc-findings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  /* Finding tile — clickable hovers grow an accent border. Empty
     (count=0) tiles are decorative but still clickable when a drill
     exists. */
  .cc-finding-card {
    padding: 14px;
    background: var(--az-card);
    border: 1px solid var(--az-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 90px;
    transition: border-color 120ms;
    text-align: left;
  }
  .cc-finding-card.cc-clickable { cursor: pointer; }
  .cc-finding-card.cc-clickable:hover { border-color: var(--az-accent); }
  .cc-finding-card:disabled { cursor: default; }
  .cc-finding-header {
    font-size: 10px;
    color: var(--az-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cc-finding-cis {
    font-size: 9px;
    color: var(--az-accent);
    opacity: 0.7;
  }
  .cc-finding-count {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--az-fg);
  }
  .cc-finding-count.cc-empty { color: var(--az-fg-muted); }
  .cc-finding-body {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    font-size: 11px;
    color: var(--az-fg-muted);
  }
  .cc-finding-drill {
    font-size: 10px;
    color: var(--az-accent);
    margin-top: 2px;
  }
  .cc-finding-drill.cc-empty {
    color: var(--az-fg-muted);
    opacity: 0.6;
  }

  /* Callout box for permission requirements in modals. */
  .cc-callout-accent {
    padding: 12px;
    background: color-mix(in oklab, var(--az-accent) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--az-accent) 20%, transparent);
    border-radius: 4px;
  }
  .cc-callout-accent strong {
    color: var(--az-accent);
    font-size: 12px;
  }

  /* Generic page-banner styles for /rbac (consent banner + failures). */
  .cc-banner {
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cc-banner-accent {
    background: color-mix(in oklab, var(--az-accent) 6%, var(--az-card));
    border: 1px solid color-mix(in oklab, var(--az-accent) 30%, transparent);
  }
  .cc-banner-accent strong { color: var(--az-accent); }
  .cc-banner-warn {
    background: color-mix(in oklab, var(--az-warn) 6%, var(--az-card));
    border: 1px solid color-mix(in oklab, var(--az-warn) 30%, transparent);
  }
  .cc-banner-warn strong { color: var(--az-warn); }
  .cc-banner-bad {
    background: color-mix(in oklab, var(--az-bad) 10%, var(--az-card));
    border: 1px solid var(--az-bad);
  }

/* =============================================================================
   Layout primitives (cc-* prefix). All at root scope.
   ============================================================================= */

  /* Page-level scaffolding. Most screens wrap content in this. */
  .cc-page { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
  .cc-page-tight { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

  /* Toolbar — flex row with wrap, used above grids. */
  .cc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .cc-chip-group {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  /* Toggle switch — button[role='switch'] driven by aria-checked. The
     track tints accent when on; the thumb slides. Keyboard: focus ring via
     :focus-visible; motion disabled under prefers-reduced-motion. */
  .cc-switch {
    /* Native button reset — Safari/iOS otherwise add inner shadows and
       platform chrome to <button>. */
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    /* Off-state contrast: the switch often sits on a --az-card-soft
       surface. A --az-card-soft track there would be invisible (same
       color), and --az-border is only ~5 RGB points off in the dark
       theme. Track uses the page bg (distinct from every card layer in
       both themes) and the border derives from the foreground so it
       stays visible on every surface. */
    border: 1px solid color-mix(in oklab, var(--az-fg) 30%, transparent);
    background: var(--az-bg);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
  }
  .cc-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--az-fg);
    opacity: 0.55;
    transition: transform 0.15s, opacity 0.15s, background 0.15s;
  }
  .cc-switch[aria-checked='true'] {
    /* Opaque mix over the page bg (not transparent) so the on-color is
       identical on every surface layer, matching the off-state's opacity. */
    background: color-mix(in oklab, var(--az-accent) 30%, var(--az-bg));
    border-color: var(--az-accent);
  }
  .cc-switch[aria-checked='true']::after {
    transform: translateX(18px);
    background: var(--az-accent);
    opacity: 1;
  }
  .cc-switch:disabled {
    cursor: default;
    opacity: 0.5;
  }
  .cc-switch:focus-visible {
    outline: 2px solid var(--az-accent);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .cc-switch,
    .cc-switch::after {
      transition: none;
    }
  }

  /* Route tabs — underline style, aria-current='page' marks the active tab.
     Used by the Settings surface; reusable for any sibling-route tab bar. */
  .cc-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--az-border);
    padding: 0 16px;
  }
  .cc-tab {
    padding: 8px 14px;
    font-size: 12px;
    text-decoration: none;
    color: var(--az-fg);
    opacity: 0.65;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: opacity 0.15s;
  }
  .cc-tab:hover {
    opacity: 1;
  }
  .cc-tab[aria-current='page'] {
    color: var(--az-accent);
    opacity: 1;
    border-bottom-color: var(--az-accent);
    font-weight: 600;
  }

  /* Auto-fit KPI / finding strip. */
  .cc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  /* Two-column form grid for label/control pairs. */
  .cc-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
  }

  /* Stack util — vertical flex with default gap (overrideable via inline). */
  .cc-stack { display: flex; flex-direction: column; gap: 8px; }
  .cc-stack-2 { display: flex; flex-direction: column; gap: 2px; }
  .cc-stack-4 { display: flex; flex-direction: column; gap: 4px; }
  .cc-stack-6 { display: flex; flex-direction: column; gap: 6px; }
  .cc-stack-12 { display: flex; flex-direction: column; gap: 12px; }
  .cc-stack-16 { display: flex; flex-direction: column; gap: 16px; }

  /* Row util — horizontal flex with default gap. */
  .cc-row { display: flex; align-items: center; gap: 8px; }
  .cc-row-4 { display: flex; align-items: center; gap: 4px; }
  .cc-row-6 { display: flex; align-items: center; gap: 6px; }
  .cc-row-12 { display: flex; align-items: center; gap: 12px; }
  .cc-row-between { display: flex; align-items: center; justify-content: space-between; }

  /* Inline-flex versions for inline siblings (info-tooltip, refresh-status,
     anywhere the parent layout must NOT block-line-break). */
  .cc-inline-row { display: inline-flex; align-items: center; }
  .cc-inline-row-4 { display: inline-flex; align-items: center; gap: 4px; }
  .cc-inline-row-6 { display: inline-flex; align-items: center; gap: 6px; }
  .cc-inline-row-8 { display: inline-flex; align-items: center; gap: 8px; }

/* =============================================================================
   Text utilities. Pair with semantic tags (no need for inline color/size).
   ============================================================================= */

  /* Muted secondary text (e.g. subtitles, captions). */
  .cc-muted { color: var(--az-fg-muted); }
  .cc-fg     { color: var(--az-fg); }
  .cc-accent { color: var(--az-accent); }
  .cc-good   { color: var(--az-good); }
  .cc-warn   { color: var(--az-warn); }
  .cc-bad    { color: var(--az-bad); }

  /* Size variants — keep aligned with current inline-style usage. */
  .cc-text-xs   { font-size: 10px; }
  .cc-text-sm   { font-size: 11px; }
  .cc-text-base { font-size: 12px; }
  .cc-text-md   { font-size: 13px; }
  .cc-text-lg   { font-size: 14px; }
  .cc-text-xl   { font-size: 16px; }
  .cc-text-2xl  { font-size: 18px; }
  .cc-text-3xl  { font-size: 22px; }

  /* Mono — pair with .cc-text-* for the JetBrains Mono family used across
     the UI for IDs, scope paths, timestamps. */
  .cc-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .cc-mono-num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }

  /* Eyebrow header — small caps mono label above titles. Used by page
     header, modal eyebrows, card section labels. */
  .cc-eyebrow {
    font-size: 10px;
    color: var(--az-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .cc-eyebrow-md { font-size: 11px; }

  /* Heading levels — pair with semantic tags. */
  .cc-h1 { font-size: 26px; font-weight: 600; margin: 4px 0 0; }
  .cc-h2 { font-size: 18px; font-weight: 600; margin: 4px 0 0; }
  .cc-h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
  .cc-h4 { font-size: 13px; font-weight: 600; margin: 0; }
  .cc-h5 { font-size: 12px; font-weight: 600; margin: 0; }

  /* Wrap classes. */
  .cc-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-ellipsis { overflow: hidden; text-overflow: ellipsis; }
  .cc-break-all { word-break: break-all; }

  /* Weight + cursor utilities. */
  .cc-semibold { font-weight: 600; }
  .cc-bold { font-weight: 700; }
  .cc-cursor-help { cursor: help; }
  .cc-cursor-pointer { cursor: pointer; }

  /* SVG block reset — flag icons + similar. */
  .cc-svg-block { display: block; }

  /* Inline circular spinner (12-16 px). Size set via inline `width` +
     `height` since it varies; class supplies the spin + border. */
  .cc-spinner {
    border: 2px solid var(--az-border-strong);
    border-top-color: var(--az-accent);
    border-radius: 50%;
    animation: cc-spin 0.8s linear infinite;
  }
  @keyframes cc-spin {
    to { transform: rotate(360deg); }
  }

/* =============================================================================
   Card / Panel.
   ============================================================================= */

  /* Generic panel surface. Use for any framed content block.
     Subclass `.cc-card-soft` for the secondary surface tone. */
  .cc-card {
    background: var(--az-card);
    border: 1px solid var(--az-border);
    border-radius: 4px;
    padding: 14px;
  }
  .cc-card-soft {
    background: var(--az-card-soft);
    border: 1px solid var(--az-border);
    border-radius: 4px;
    padding: 14px;
  }
  .cc-card-flush { padding: 0; }
  .cc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--az-border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--az-fg-muted);
    font-weight: 600;
  }
  .cc-card-head-dense { padding: 8px 12px; }
  .cc-card-body { padding: 14px; }
  .cc-card-body-dense { padding: 10px; }

  /* KPI tile — same shell as Card but with tonal top accent applied
     inline (tone is one of 5 dynamic CSS vars). */
  .cc-kpi {
    background: var(--az-card);
    border: 1px solid var(--az-border);
    border-radius: 4px;
    padding: 14px;
    cursor: default;
  }
  .cc-kpi.cc-clickable { cursor: pointer; }
  .cc-kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
  }

/* =============================================================================
   Table / Grid base styles.
   ============================================================================= */

  /* Base table reset matching what the data-grid + ad-hoc tables use. */
  .cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .cc-table-thead-tr {
    text-align: left;
    color: var(--az-fg-muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .cc-table tbody tr { border-top: 1px solid var(--az-border); }
  .cc-table th, .cc-table td { padding: 8px 0; vertical-align: middle; }
  .cc-table-row-zebra:nth-child(even) {
    background: color-mix(in oklab, var(--az-fg) 1%, transparent);
  }

/* =============================================================================
   Pills / badges (small inline indicators outside the <Pill> React component).
   ============================================================================= */

  .cc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
    background: var(--az-card-soft);
    color: var(--az-fg-muted);
    border: 1px solid var(--az-border);
  }

/* =============================================================================
   Loading skeleton block.
   ============================================================================= */

  .cc-skeleton {
    background: linear-gradient(
      90deg,
      var(--az-card) 0%,
      var(--az-card-soft) 50%,
      var(--az-card) 100%
    );
    background-size: 200% 100%;
    animation: cc-skeleton-shimmer 1.6s linear infinite;
    border-radius: 3px;
  }
  @keyframes cc-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

/* =============================================================================
   App shell elements (top-bar / side-nav / page-header chrome).
   ============================================================================= */

  /* Page header (the "$ az finops <pageId>" chrome above each screen). */
  .cc-page-header {
    padding: 14px 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cc-page-header-cmd {
    font-size: 10px;
    color: var(--az-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .cc-page-header-title {
    font-size: 26px;
    font-weight: 600;
    margin: 4px 0 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
  }

/* =============================================================================
   Input controls.
   ============================================================================= */

  .cc-input {
    background: var(--az-card-soft);
    border: 1px solid var(--az-border);
    color: var(--az-fg);
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms;
  }
  .cc-input:focus { border-color: var(--az-accent); }
  .cc-input-sm { padding: 4px 8px; font-size: 11px; }

  .cc-select {
    background: var(--az-card-soft);
    border: 1px solid var(--az-border);
    color: var(--az-fg);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
  }
  /* Larger select used by subscription picker + tweaks preset. */
  .cc-select-md {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 2px;
    min-width: 180px;
  }

  /* Floating dropdown / popover panel — used by tenant picker, user
     menu, and any anchored overlay. The PARENT must be position:
     relative for `top: 100%` to land correctly. */
  .cc-popover {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    background: var(--az-card);
    border: 1px solid var(--az-border);
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 20;
    overflow: hidden;
  }
  .cc-popover-right { right: 0; }
  .cc-popover-left  { left: 0; }
  /* Flip vertically when the row sits near the viewport bottom; the
     trigger's parent dictates which corner anchors. */
  .cc-popover-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
  }

  /* Popover menu item row. Keep tone-driven active background INLINE
     since the active state varies by route prefix. */
  .cc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--az-fg);
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    text-decoration: none;
  }
  .cc-menu-item:hover {
    background: color-mix(in oklab, var(--az-accent) 6%, transparent);
  }
  .cc-menu-item-divider {
    height: 1px;
    background: var(--az-border);
    margin: 4px 0;
  }

  /* Side-nav row (main nav + Settings + Superadmin). Uses CSS variables
     so the warn-toned Superadmin variant can override via
     `--cc-nav-tone: var(--az-warn)` on the element. */
  .cc-nav-item {
    --cc-nav-tone: var(--az-accent);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
    background: transparent;
    color: var(--az-fg);
    font-weight: 400;
    border-left: 2px solid transparent;
  }
  .cc-nav-item-active {
    background: color-mix(in oklab, var(--cc-nav-tone) 14%, transparent);
    color: var(--cc-nav-tone);
    font-weight: 600;
    border-left-color: var(--cc-nav-tone);
  }
  .cc-nav-item-warn { --cc-nav-tone: var(--az-warn); color: var(--az-warn); font-weight: 600; }
  .cc-nav-icon {
    width: 16px;
    text-align: center;
    font-size: 12px;
    opacity: 0.6;
  }
  .cc-nav-item-active .cc-nav-icon { opacity: 1; }
  .cc-nav-label { flex: 1; }

  /* Marketing / fullpage outer wrapper. Used by landing, pricing,
     billing, superadmin layouts. */
  .cc-fullpage {
    min-height: 100vh;
    background: var(--az-bg);
    color: var(--az-fg);
  }

  /* Centered auth-card shell (sign-in / verify / not-invited). */
  .cc-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--az-bg);
    padding: 24px;
  }

  /* Brand-logo glyph: 28×28 accent-bg square that the marketing /
     auth headers use as a logo placeholder. */
  .cc-brand-glyph {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--az-accent);
    color: var(--az-bg);
    border-radius: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
  }

  /* Fixed 3-column grid (sdk/landing/pricing/billing feature rows).
     Different from `cc-kpi-grid` which is auto-fit. */
  .cc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .cc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Tone-driven 28×28 icon tile used in banners + KPI heads. Tone
     color comes from --cc-tone CSS var so the parent sets one of
     `--cc-tone: var(--az-{good|warn|bad|accent})`. */
  .cc-status-icon {
    --cc-tone: var(--az-accent);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: color-mix(in oklab, var(--cc-tone) 18%, transparent);
    color: var(--cc-tone);
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
  }
  .cc-tone-good { --cc-tone: var(--az-good); }
  .cc-tone-warn { --cc-tone: var(--az-warn); }
  .cc-tone-bad { --cc-tone: var(--az-bad); }
  .cc-tone-accent { --cc-tone: var(--az-accent); }

  /* Generic banner-action: a row of {status icon | message | CTA}.
     Tone via --cc-tone (see above). */
  .cc-banner-action {
    --cc-tone: var(--az-accent);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in oklab, var(--cc-tone) 6%, var(--az-card));
    border: 1px solid color-mix(in oklab, var(--cc-tone) 30%, transparent);
    border-radius: 4px;
    font-size: 12px;
  }

  /* Dashed-border placeholder. Used by KPI placeholders, EventStream
     placeholder, banner placeholders before real data is wired. */
  .cc-placeholder {
    background: var(--az-card);
    border: 1px dashed var(--az-border);
    border-radius: 4px;
    padding: 14px;
    opacity: 0.7;
  }
  /* Kebab "⋯" trigger for per-row action popovers. */
  .cc-row-actions-trigger {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--az-fg-muted);
    font-size: 14px;
    line-height: 1;
  }
  .cc-row-actions-trigger:hover {
    color: var(--az-fg);
    background: color-mix(in oklab, var(--az-accent) 6%, transparent);
  }

  .cc-placeholder-tile {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--az-card-soft);
    border: 1px dashed var(--az-border);
    border-radius: 3px;
    color: var(--az-fg-muted);
    font-weight: 700;
    font-size: 14px;
  }

  /* Refresh button — used by every screen's toolbar. */
  .cc-btn-refresh {
    cursor: pointer;
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 4px 10px;
    border: 1px solid var(--az-border-strong);
    border-radius: 3px;
    color: var(--az-fg-muted);
    background: transparent;
  }
  .cc-btn-refresh:disabled,
  .cc-btn-refresh.cc-pending { cursor: wait; opacity: 0.6; }

  /* Mock badge — yellow-tone "MOCK" pill on mock screens. */
  .cc-mock-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 9px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: color-mix(in oklab, var(--az-warn) 20%, transparent);
    color: var(--az-warn);
    border: 1px solid color-mix(in oklab, var(--az-warn) 45%, transparent);
    border-radius: 3px;
  }

  /* Keyboard shortcut chip. */
  .cc-kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-size: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: var(--az-card-soft);
    border: 1px solid var(--az-border);
    border-radius: 3px;
    color: var(--az-fg-muted);
  }