/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── MD3 Tokens ── */
:root {
  --md-primary: #1a73e8;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #0a3d8f;
  --md-secondary: #5c6bc0;
  --md-secondary-container: #e8eaf6;
  --md-on-secondary-container: #1a237e;
  --md-surface: #ffffff;
  --md-surface-variant: #e7e0ec;
  --md-on-surface: #1c1b1f;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-error: #b3261e;
  --md-error-container: #fdecea;
  --md-bg: #f3f4f9;
  /* chip colors */
  --chip-text-bg: #e8f0fe;   --chip-text-fg: #1a5296;
  --chip-img-bg: #e6f4ea;    --chip-img-fg: #137333;
  --chip-color-bg: #fef3e2;  --chip-color-fg: #b06000;
  --chip-link-bg: #e6f9f0;   --chip-link-fg: #0b6e41;
  --chip-bool-bg: #fce8e6;   --chip-bool-fg: #b3261e;
  --chip-list-bg: #f3e5f5;   --chip-list-fg: #7b1fa2;
  --chip-str-bg: #f1f3f4;    --chip-str-fg: #5f6368;
}

/* ── Base ── */
body {
  font-family: 'Roboto', system-ui, sans-serif;
  background: var(--md-bg);
  color: var(--md-on-surface);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Top App Bar ── */
.top-bar {
  background: var(--md-primary);
  color: var(--md-on-primary);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-bar .material-icons-round { font-size: 26px; }
.top-bar h1 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Layout ── */
.content {
  max-width: 1024px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ── Card ── */
.card {
  background: var(--md-surface);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  margin-bottom: 20px;
  overflow: hidden;
}

/* ── Input section ── */
.input-section { padding: 24px; }

.section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 14px;
}

/* MD3 outlined text field */
.text-field { position: relative; }
.floating-label {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--md-surface);
  padding: 0 4px;
  font-size: 11px;
  color: var(--md-on-surface-variant);
  pointer-events: none;
  border-radius: 2px;
}
textarea#html-input {
  width: 100%;
  min-height: 150px;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  line-height: 1.65;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  padding: 16px 14px;
  background: transparent;
  color: var(--md-on-surface);
  resize: vertical;
  transition: border-color .2s;
}
textarea#html-input::placeholder { color: var(--md-on-surface-variant); opacity: .7; }
textarea#html-input:focus {
  outline: none;
  border-color: var(--md-primary);
  border-width: 2px;
}

/* ── Error banner ── */
.error-banner {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--md-error-container);
  color: var(--md-error);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 12px;
}
.error-banner .material-icons-round { font-size: 18px; flex-shrink: 0; }

/* ── Buttons ── */
.btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 22px;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  border: none;
  transition: box-shadow .15s, background .15s, opacity .15s;
}
.btn .material-icons-round { font-size: 18px; }

.btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.btn-filled:hover { background: #1557b0; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.btn-filled:active { opacity: .85; }

.btn-tonal {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.btn-tonal:hover { background: #bdd0fa; }

.btn-text {
  background: transparent;
  color: var(--md-primary);
  padding: 0 14px;
  margin-left: auto;
}
.btn-text:hover { background: #e8f0fe; }

/* ── Stats row ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat-card {
  background: var(--md-surface);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.stat-card .s-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.stat-card .s-value {
  font-size: 32px;
  font-weight: 500;
  color: var(--md-primary);
  line-height: 1;
}

/* ── Module cards ── */
.module-card {
  background: var(--md-surface);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  margin-bottom: 12px;
  overflow: hidden;
}

.module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.module-header:hover { background: #f0f4ff; }

.mod-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mod-icon .material-icons-round {
  font-size: 20px;
  color: var(--md-on-primary-container);
}
.mod-icon-vars {
  background: #fef3e2;
}
.mod-icon-vars .material-icons-round {
  color: #b06000;
}
.mod-icon-shared {
  background: #e8f5e9;
}
.mod-icon-shared .material-icons-round {
  color: #2e7d32;
}

.mod-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Roboto Mono', monospace;
  color: var(--md-on-surface);
}
.mod-name.muted {
  color: var(--md-on-surface-variant);
  font-weight: 400;
}

.field-count-chip {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 500;
}

.expand-icon {
  color: var(--md-on-surface-variant);
  font-size: 22px;
  transition: transform .2s;
}
.expand-icon.open { transform: rotate(180deg); }

/* ── Module body & table ── */
.module-body {
  display: none;
  border-top: 1px solid var(--md-outline-variant);
}
.module-body.open { display: block; }

.field-table { width: 100%; border-collapse: collapse; }
.field-table .th-row td {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 12px 18px 8px;
  border-bottom: 1px solid var(--md-outline-variant);
}
.field-table .td-row td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: top;
}
.field-table .td-row:last-child td { border-bottom: none; }
.field-table .td-row:hover { background: #fafbff; }

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface);
}
.no-label {
  color: var(--md-outline);
  font-weight: 400;
}
.field-id {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  color: var(--md-on-surface-variant);
}
.field-choices { vertical-align: middle; }

.color-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  margin: 2px 3px 2px 0;
  white-space: nowrap;
}
.choice-chip.choice-selected {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  outline: 1.5px solid var(--md-primary);
}

.field-used-in { vertical-align: middle; }

.usage-fraction {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: #e8eaf6;
  color: #1a237e;
  margin-right: 6px;
  white-space: nowrap;
  vertical-align: middle;
}

.module-ref-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: #e8f5e9;
  color: #2e7d32;
  margin: 2px 3px 2px 0;
  white-space: nowrap;
}

.field-default {
  font-size: 12.5px;
  color: var(--md-on-surface-variant);
  line-height: 1.55;
  word-break: break-word;
  vertical-align: middle;
}
.field-default .color-swatch { vertical-align: middle; }

.no-fields {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--md-on-surface-variant);
}

.shared-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-top: 1px solid var(--md-outline-variant);
}
.shared-section-header .material-icons-round { font-size: 14px; }
.shared-section-header strong { font-weight: 700; text-transform: none; letter-spacing: 0; }
.shared-global  { color: #1a5296; background: #e8f0fe; }
.shared-scoped  { color: #5f6368; background: #f1f3f4; }

.linked-vars-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #b06000;
  background: #fef9f0;
  border-top: 1px solid var(--md-outline-variant);
}
.linked-vars-header .material-icons-round { font-size: 14px; }

/* ── Type chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.chip-text    { background: var(--chip-text-bg);  color: var(--chip-text-fg); }
.chip-img     { background: var(--chip-img-bg);   color: var(--chip-img-fg); }
.chip-color   { background: var(--chip-color-bg); color: var(--chip-color-fg); }
.chip-link    { background: var(--chip-link-bg);  color: var(--chip-link-fg); }
.chip-bool    { background: var(--chip-bool-bg);  color: var(--chip-bool-fg); }
.chip-list    { background: var(--chip-list-bg);  color: var(--chip-list-fg); }
.chip-str     { background: var(--chip-str-bg);   color: var(--chip-str-fg); }

/* ── Misc ── */
#results { display: none; }
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--md-on-surface-variant);
  font-size: 14px;
}
.empty-state .material-icons-round {
  font-size: 52px;
  color: var(--md-outline-variant);
  display: block;
  margin-bottom: 14px;
}