/* ------------------------------------------------------------------
   Design tokens - taken from the supplied Angular Material theme
   (Styles.css): primary #152245, accent #607d8b, warn #f44336, Roboto.
   ------------------------------------------------------------------ */
:root {
  --primary: #152245;
  --primary-contrast: #ffffff;
  --accent: #607d8b;
  --accent-light: #cfd8dc;
  --warn: #f44336;
  --success: #51a351;
  --toolbar-bg: #f5f5f5;
  --app-bg: #fafafa;
  --surface: #ffffff;
  --text: rgba(0, 0, 0, .87);
  --text-secondary: rgba(0, 0, 0, .6);
  --text-hint: rgba(0, 0, 0, .38);
  --divider: rgba(0, 0, 0, .12);
  --field-bg: #f5f5f5;
  --field-bg-hover: #ececec;
  --field-underline: rgba(0, 0, 0, .42);
  --scroll-track: #e3e4e9;
  --scroll-thumb: #b0bec5;
  --level1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --level2: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
  --level4: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  --level8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  --level16: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
  --toolbar-height: 64px;
  --right-panel-width: 320px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: .0178571429em;
  color: var(--text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }

[hidden] { display: none !important; }

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ------------------------------------------------------------------ App shell */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mat-toolbar {
  display: flex;
  align-items: center;
  height: var(--toolbar-height);
  min-height: var(--toolbar-height);
  padding: 0 16px;
  background: var(--toolbar-bg);
  color: var(--text);
  flex-shrink: 0;
}

.mat-toolbar.mat-primary {
  background: var(--primary);
  color: var(--primary-contrast);
}

.mat-toolbar .spacer { flex: 1 1 auto; }

.mat-toolbar .toolbar-title {
  font: 500 20px/32px Roboto, sans-serif;
  letter-spacing: .0125em;
  margin: 0 8px;
}

.app-logo {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-right: 8px;
}
.app-logo img { height: 34px; width: auto; display: block; }
.app-logo[aria-label="GlobalSearch"] { height: 53px; }
.app-logo[aria-label="GlobalSearch"] img { height: 53px; }

/* Material icon button (40px state layer, 24px glyph) */
.mat-icon-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  outline: none;
  flex-shrink: 0;
}
.mat-icon-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms;
}
.mat-icon-button:hover::before { opacity: .08; }
.mat-icon-button:active::before { opacity: .16; }
.mat-icon-button:disabled { color: var(--text-hint); cursor: default; }
.mat-icon-button:disabled::before { display: none; }
.mat-toolbar.mat-primary .mat-icon-button:disabled { color: rgba(255,255,255,.4); }
.mat-icon-button.small { width: 40px; height: 40px; padding: 8px; }
.mat-icon-button.small .material-icons { font-size: 20px; }
.mat-icon-button.tiny { width: 32px; height: 32px; padding: 4px; }
.mat-icon-button.tiny .material-icons { font-size: 20px; }
.mat-icon-button.accent { color: var(--accent); }
.mat-icon-button.warn { color: var(--warn); }

.avatar-button {
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 8px;
}
.avatar-button .material-icons { font-size: 40px; }

/* Material buttons */
.mat-button, .mat-raised-button, .mat-stroked-button, .mat-flat-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 14px/36px Roboto, sans-serif;
  letter-spacing: .0892857143em;
  text-transform: uppercase;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  outline: none;
  white-space: nowrap;
}
.mat-button::before, .mat-raised-button::before, .mat-stroked-button::before, .mat-flat-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms;
}
.mat-button:hover::before, .mat-raised-button:hover::before, .mat-stroked-button:hover::before, .mat-flat-button:hover::before { opacity: .08; }
.mat-button:disabled, .mat-raised-button:disabled, .mat-stroked-button:disabled, .mat-flat-button:disabled {
  color: var(--text-hint);
  background: rgba(0,0,0,.12);
  box-shadow: none;
  cursor: default;
}
.mat-button:disabled { background: transparent; }
.mat-stroked-button:disabled { background: transparent; }
.mat-button.primary, .mat-stroked-button.primary { color: var(--primary); }
.mat-button.accent, .mat-stroked-button.accent { color: var(--accent); }
.mat-button.warn, .mat-stroked-button.warn { color: var(--warn); }
.mat-raised-button { box-shadow: var(--level2); background: var(--surface); }
.mat-raised-button:active { box-shadow: var(--level8); }
.mat-raised-button.primary, .mat-flat-button.primary { background: var(--primary); color: #fff; }
.mat-raised-button.accent, .mat-flat-button.accent { background: var(--accent); color: #fff; }
.mat-raised-button.warn, .mat-flat-button.warn { background: var(--warn); color: #fff; }
.mat-stroked-button { border: 1px solid rgba(0,0,0,.12); }
.mat-button .material-icons, .mat-raised-button .material-icons, .mat-stroked-button .material-icons, .mat-flat-button .material-icons {
  font-size: 18px;
  margin-left: -4px;
}

/* Material filled form field */
.mat-form-field {
  position: relative;
  display: block;
  margin-bottom: 14px;
}
.mat-form-field .field-wrapper {
  position: relative;
  background: var(--field-bg);
  border-radius: 4px 4px 0 0;
  padding: 24px 16px 8px 16px;
  min-height: 56px;
  transition: background 150ms;
}
.mat-form-field .field-wrapper:hover { background: var(--field-bg-hover); }
.mat-form-field .field-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--field-underline);
}
.mat-form-field:focus-within .field-wrapper::after {
  height: 2px;
  background: var(--primary);
}
.mat-form-field label {
  position: absolute;
  top: 8px;
  left: 16px;
  font: 400 12px/16px Roboto, sans-serif;
  letter-spacing: .0333em;
  color: var(--text-secondary);
  pointer-events: none;
  transition: all 150ms;
}
.mat-form-field.empty:not(:focus-within) label {
  top: 18px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .03125em;
}
.mat-form-field:focus-within label { color: var(--primary); }
.mat-form-field input, .mat-form-field textarea, .mat-form-field select {
  width: 100%;
  border: 0;
  background: transparent;
  font: 400 16px/24px Roboto, sans-serif;
  letter-spacing: .03125em;
  color: var(--text);
  padding: 0;
  outline: none;
  resize: none;
}
.mat-form-field select { appearance: none; padding-right: 24px; cursor: pointer; }
.mat-form-field textarea { min-height: 24px; display: block; }
.mat-form-field .select-arrow {
  position: absolute;
  right: 14px;
  top: 24px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-secondary);
  pointer-events: none;
}
.mat-form-field .resize-handle {
  position: absolute;
  right: 4px; bottom: 4px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--text-hint);
  border-bottom: 1px solid var(--text-hint);
  pointer-events: none;
}
.mat-form-field .hint {
  font: 400 12px/16px Roboto, sans-serif;
  color: var(--text-secondary);
  padding: 4px 16px 0;
}

/* Checkbox (MDC look) */
.mat-checkbox {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(0,0,0,.54);
  border-radius: 2px;
  margin: 0;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  background: transparent;
  flex-shrink: 0;
}
.mat-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.mat-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 0px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mat-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
}

/* Radio (MDC look) */
.mat-radio {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(0,0,0,.54);
  border-radius: 50%;
  margin: 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.mat-radio:checked { border-color: var(--primary); }
.mat-radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}
.mat-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 8px 0;
}

/* Tabs */
.mat-tab-header {
  display: flex;
  border-bottom: 1px solid var(--divider);
  height: 48px;
  flex-shrink: 0;
}
.mat-tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  outline: none;
}
.mat-tab:hover { background: rgba(0,0,0,.04); }
.mat-tab.active { color: var(--accent); }
.mat-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
}

/* Progress bar */
.mat-progress-bar {
  height: 4px;
  background: rgba(21, 34, 69, .25);
  overflow: hidden;
  position: relative;
  border-radius: 2px;
}
.mat-progress-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: var(--primary);
  animation: indeterminate 1.8s infinite cubic-bezier(.65,.815,.735,.395);
}
@keyframes indeterminate {
  0% { left: -40%; }
  100% { left: 100%; }
}

.mat-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(21,34,69,.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mat-card {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--level1);
  padding: 16px;
}

.mat-divider { border: 0; border-top: 1px solid var(--divider); margin: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: #e0e0e0;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.chip.primary { background: var(--primary); color: #fff; }
.chip.accent { background: var(--accent); color: #fff; }
.chip .material-icons { font-size: 18px; }

/* ------------------------------------------------------------------ Views */
.view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Upload */
.upload-view {
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.upload-card {
  width: 100%;
  max-width: 640px;
  padding: 24px;
}
.upload-card h1 {
  font: 400 24px/32px Roboto, sans-serif;
  margin: 0 0 4px;
}
.upload-card .subtitle {
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.dropzone {
  border: 2px dashed rgba(0,0,0,.24);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  margin-bottom: 24px;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: rgba(21,34,69,.04); }
.dropzone .material-icons { font-size: 56px; color: var(--accent); }
.dropzone .primary-text { font-size: 16px; color: var(--text); margin: 8px 0 4px; }
.dropzone .file-name { color: var(--primary); font-weight: 500; }
.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.error-text { color: var(--warn); font-size: 13px; margin-top: 8px; }

/* Separation */
.separate-view { overflow: hidden; }
.separate-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.separate-pages {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px;
}
.separate-side {
  width: 360px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--divider);
  overflow: auto;
  padding: 16px;
}
.separate-side h3 {
  font: 500 14px/22px Roboto, sans-serif;
  margin: 8px 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.page-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}
.page-card {
  width: 190px;
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--level1);
  padding: 8px;
  border-top: 4px solid var(--doc-color, var(--primary));
  margin-bottom: 16px;
}
.page-card .thumb-wrap {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eceff1;
  border-radius: 2px;
  overflow: hidden;
}
.page-card img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 200ms;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  background: #fff;
}
.page-card .page-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.page-card .page-meta .page-label { font-weight: 500; color: var(--text); }
.break-slot {
  width: 40px;
  height: 236px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.break-toggle {
  width: 32px; height: 32px;
  padding: 4px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--text-hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.break-toggle .material-icons { font-size: 18px; }
.break-toggle:hover { color: var(--accent); border-color: var(--accent); }
.break-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--level2);
}
.break-slot.active { position: relative; }
.break-slot.active::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  left: 50%;
  border-left: 2px dashed var(--accent);
}
.doc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.doc-legend .chip {
  background: var(--doc-color);
  color: #fff;
}
.prompt-card {
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}
.prompt-card .prompt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin-bottom: 8px;
}
.prompt-card .prompt-title .material-icons { color: var(--accent); }
.prompt-card textarea {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 8px;
  font: 400 13px/18px Roboto, sans-serif;
  resize: vertical;
}
.side-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Processing */
.processing-view { align-items: center; justify-content: center; padding: 24px; }
.processing-card { width: 100%; max-width: 560px; padding: 24px; text-align: center; }
.processing-card h2 { font: 400 20px/32px Roboto, sans-serif; margin: 16px 0 4px; }
.processing-card .subtitle { color: var(--text-secondary); margin-bottom: 24px; }
.status-list { text-align: left; list-style: none; padding: 0; margin: 16px 0 0; }
.status-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-top: 1px solid var(--divider);
}
.status-list li .name { flex: 1 1 auto; }
.status-list li .status { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.status-list li .material-icons { color: var(--text-hint); }
.status-list li.completed .material-icons { color: var(--success); }
.status-list li.failed .material-icons { color: var(--warn); }
.status-list li.processing .material-icons { color: var(--accent); animation: spin 1.2s linear infinite; }

/* ------------------------------------------------------------------ Result / viewer */
.result-view { flex-direction: row; overflow: hidden; }
.result-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--divider);
}
.viewer-frame-wrap {
  flex: 0 0 var(--viewer-height, 46%);
  min-height: 160px;
  background: #d4d4d7;
  position: relative;
}
.result-main.items-collapsed .viewer-frame-wrap { flex: 1 1 auto; }
.viewer-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.splitter {
  height: 6px;
  cursor: row-resize;
  background: var(--toolbar-bg);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

.items-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
/* "Collapsed" = the items panel is not shown at all; the Items button in the fields pane brings it back. */
.result-main.items-collapsed .items-panel, .result-main.items-collapsed .splitter { display: none; }
.items-header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 8px 0 16px;
  flex-shrink: 0;
  background: var(--toolbar-bg);
}
.items-header h2 {
  font: 400 20px/32px Roboto, sans-serif;
  margin: 0;
  flex: 1 1 auto;
}
.items-header .mat-icon-button { width: 48px; height: 48px; }

/* ag-grid inspired table */
.items-grid {
  flex: 1 1 auto;
  overflow: auto;
  font-size: 13px;
}
.items-grid table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
}
.items-grid th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  text-align: left;
  font-weight: 700;
  color: #181d1f;
  font-size: 12px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid #dde2eb;
  white-space: nowrap;
}
.items-grid td {
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #dde2eb;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.items-grid tbody tr:nth-child(even) td { background: #f5f5f5; }
.items-grid tr:hover td { background: rgba(33, 150, 243, .06); }
.items-grid tr.selected td { background: rgba(21, 34, 69, .08); }
.items-grid .col-check { width: 56px; padding: 0 16px; }
.items-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.items-grid td[contenteditable] { cursor: text; }
.items-grid td[contenteditable]:focus { outline: 2px solid var(--primary); outline-offset: -2px; background: #fff; white-space: normal; }
.items-grid .empty-row td { color: var(--text-hint); }
.items-grid .page-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--text-secondary);
  background: #eceff1;
  border-radius: 10px;
  padding: 1px 8px;
}

.result-side {
  width: var(--right-panel-width);
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-tab-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px 12px 24px;
}
.side-tab-body .section-title {
  font: 500 12px/16px Roboto, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 8px 4px 12px;
}
.kv-list { list-style: none; padding: 0; margin: 0; }
.kv-list li {
  padding: 8px 4px;
  border-bottom: 1px solid var(--divider);
}
.kv-list .k { font-size: 12px; color: var(--text-secondary); }
.kv-list .v { font-size: 14px; word-break: break-word; }
.usage-box {
  background: var(--field-bg);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 20px;
}

/* Document navigation: centred in the secondary toolbar (reference UI) */
#view-result .mat-toolbar { position: relative; }
.doc-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-secondary);
}
.doc-nav .mat-icon-button { width: 40px; height: 40px; padding: 8px; color: var(--text-secondary); }
.doc-nav .mat-icon-button:not(:disabled) { color: var(--text); }
.doc-nav-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: #e0e0e0;
  color: var(--text);
  font: 400 13px/28px Roboto, sans-serif;
  white-space: nowrap;
}

/* Sidenav drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 40;
}
.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 320px;
  background: var(--surface);
  z-index: 41;
  box-shadow: var(--level16);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 200ms cubic-bezier(.25,.8,.25,1);
}
.drawer.open { transform: none; }
.drawer .drawer-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 16px;
  background: var(--primary);
  color: #fff;
  font: 500 20px/32px Roboto, sans-serif;
}
.drawer .drawer-header .spacer { flex: 1; }
.drawer-list { list-style: none; margin: 0; padding: 8px 0; overflow: auto; }
.drawer-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 56px;
  cursor: pointer;
}
.drawer-list li:hover { background: rgba(0,0,0,.04); }
.drawer-list li.active { background: rgba(96,125,139,.16); }
.drawer-list li .material-icons { color: var(--text-secondary); }
.drawer-list li .text { flex: 1; min-width: 0; }
.drawer-list li .text .primary-line { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-list li .text .secondary-line { font-size: 14px; color: var(--text-secondary); }
.drawer-list li.completed .material-icons.status { color: var(--success); }
.drawer-list li.failed .material-icons.status { color: var(--warn); }
.drawer-footer { padding: 8px 16px 16px; border-top: 1px solid var(--divider); }

/* Snackbar */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(calc(100% + 32px));
  background: #323232;
  color: #fff;
  padding: 14px 16px;
  border-radius: 4px;
  box-shadow: var(--level4);
  min-width: 344px;
  max-width: 640px;
  font-size: 14px;
  z-index: 100;
  transition: transform 200ms;
  display: flex;
  align-items: center;
  gap: 16px;
}
.snackbar.show { transform: translateX(-50%) translateY(0); }
.snackbar.error { background: #b71c1c; }
.snackbar .mat-button { color: #a8dab5; margin-left: auto; }

/* Dialog */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--level16);
  width: 100%;
  max-width: 480px;
  padding: 24px;
}
.dialog h2 { font: 500 20px/32px Roboto, sans-serif; margin: 0 0 16px; }
.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Tooltip-ish title */
[data-tip] { position: relative; }

/* ------------------------------------------------------------------ Mobile / narrow screens */
@media (max-width: 900px) {
  :root { --toolbar-height: 56px; }
  body { overflow: auto; }
  .app { min-height: 100%; height: auto; }
  .mat-toolbar { padding: 0 4px; }
  .mat-toolbar .toolbar-title { font-size: 16px; margin: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
  .separate-view .mat-toolbar .spacer { flex: 0 0 0; }
  .mat-raised-button, .mat-button { padding: 0 10px; min-width: 0; }
  .hide-mobile, .btn-text { display: none !important; }
  .mat-toolbar .show-mobile { display: inline-flex !important; }
  .mat-icon-button { width: 40px; height: 40px; padding: 8px; }
  .avatar-button { width: 36px; height: 36px; margin-left: 4px; }
  .avatar-button .material-icons { font-size: 36px; }

  .upload-view { padding: 12px; align-items: stretch; justify-content: flex-start; }
  .upload-card { max-width: none; padding: 16px; }
  .dropzone { padding: 24px 12px; }
  .upload-actions .mat-raised-button { width: 100%; justify-content: center; }

  /* Separation: pages first, prompt/type panel underneath, everything scrolls as one page. */
  .separate-view { overflow: visible; }
  .separate-body { flex-direction: column; }
  .separate-pages { padding: 12px; overflow: visible; }
  .separate-side { width: 100%; border-left: 0; border-top: 1px solid var(--divider); overflow: visible; }
  .page-card { width: calc(50% - 22px); }
  .page-card .thumb-wrap { height: 160px; }
  .break-slot { width: 28px; height: 176px; }
  .break-toggle { width: 28px; height: 28px; }

  /* Result: viewer on top, then header fields, then line items - stacked and scrollable. */
  #view-result { overflow: visible; }
  .result-view { flex-direction: column; overflow: visible; }
  .result-main { border-right: 0; flex: none; order: 1; display: contents; }
  .viewer-frame-wrap { flex: none; height: 55vh; min-height: 300px; order: 1; }
  .splitter { display: none; }
  .result-side { width: 100%; order: 2; border-top: 1px solid var(--divider); }
  .side-tab-body { padding: 16px 12px; }
  .items-panel { order: 3; min-height: 0; border-top: 1px solid var(--divider); }
  .items-grid { max-height: 60vh; -webkit-overflow-scrolling: touch; }
  .items-grid table { min-width: 720px; }
  .items-header { height: 56px; }
  .drawer { width: min(320px, 85vw); }
  .snackbar { min-width: 0; width: calc(100% - 32px); }
  .dialog { margin: 0 16px; }
}

/* ------------------------------------------------------------------ Multi-file upload list */
.file-list { list-style: none; margin: -12px 0 16px; padding: 0; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--divider); font-size: 14px; }
.file-list li .material-icons { color: var(--accent); }
.file-list li .file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list li .file-size { color: var(--text-secondary); font-size: 12px; }

/* ------------------------------------------------------------------ Setup panel (before running InquireAI) */
.setup-hint {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(96,125,139,.12); border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 12px; margin: 0 0 16px; font-size: 13px; line-height: 18px;
}
.setup-hint .material-icons { color: var(--accent); }
.setup-hint .material-icons.spin { animation: spin 1.2s linear infinite; }
.planned-list li { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.planned-list li:hover { background: rgba(0,0,0,.04); }
.doc-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* Progress bar directly under the toolbar while InquireAI runs */
.toolbar-progress { border-radius: 0; flex-shrink: 0; }

/* Lightning bolt + "Run InquireAI" callout */
.run-anchor { position: relative; display: inline-flex; }
.run-button:not(:disabled) { color: var(--primary); }
.run-button.pulse .material-icons { animation: pulse 1.6s ease-in-out infinite; color: #ef6c00; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
/* The call to action that starts an extraction: centred across the bottom of the viewer, and itself the
   button that runs InquireAI. */
.run-callout {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 24px; padding: 10px 24px;
  background: var(--primary); color: #fff;
  font: 500 15px/24px Roboto, sans-serif; white-space: nowrap; cursor: pointer;
  box-shadow: var(--level8);
  transition: background 150ms, box-shadow 150ms, transform 150ms;
}
.run-callout:hover { background: #1e3a6b; }
.run-callout:active { transform: translateX(-50%) scale(.98); }
.run-callout:disabled { opacity: .6; cursor: default; }
.run-callout .material-icons { font-size: 20px; color: #ffb74d; }

.show-mobile { display: none !important; }

/* Right-click page menu */
.context-menu {
  position: fixed; z-index: 90; min-width: 260px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--surface); border-radius: 4px; box-shadow: var(--level8); padding: 8px 0;
}
.context-menu .menu-title { font: 500 12px/16px Roboto, sans-serif; color: var(--text-secondary); padding: 4px 16px 8px; text-transform: uppercase; letter-spacing: .05em; }
.context-menu button {
  display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: transparent;
  padding: 0 16px; height: 44px; font: 400 14px/20px Roboto, sans-serif; color: var(--text); cursor: pointer; text-align: left;
}
.context-menu button:hover { background: rgba(0,0,0,.04); }
.context-menu button .material-icons { color: var(--text-secondary); }
.context-menu hr { margin: 8px 0; }

/* Floating hint over the viewer: how to separate documents */
.burst-callout {
  /* flush with the left edge of the viewer, lining up with the Modify Document panel beside it */
  position: absolute; left: 12px; top: 44px; z-index: 20;
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100% - 32px));
  background: var(--primary); color: #fff; border-radius: 4px; padding: 8px 8px 8px 14px;
  font: 400 14px/20px Roboto, sans-serif; box-shadow: var(--level4);
}
.burst-callout .material-icons { font-size: 20px; color: #ffb74d; flex-shrink: 0; }
.burst-callout .mat-icon-button { color: rgba(255,255,255,.8); flex-shrink: 0; }
@media (max-width: 900px) { .burst-callout { left: 8px; top: 8px; font-size: 13px; } }

/* Brief attention flash when a highlight on the page is clicked */
.flash { animation: flash 1.2s ease-out; }
tr.flash td, .mat-form-field.flash .field-wrapper { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background-color: rgba(255,152,0,.45); } 100% { background-color: transparent; } }

/* Fields pane slides in when InquireAI runs; hidden while the user is bursting pages. */
.result-side { transition: width 250ms cubic-bezier(.25,.8,.25,1); overflow: hidden; }
.result-side.collapsed { width: 0; min-width: 0; }
.result-main.items-hidden .items-panel, .result-main.items-hidden .splitter { display: none; }
.result-main.items-hidden .viewer-frame-wrap { flex: 1 1 auto; }
@media (max-width: 900px) {
  .result-side.collapsed { display: none; }
  .result-main.items-hidden .viewer-frame-wrap { height: calc(100vh - 120px); }
}

/* The line-item table as a collapsible entry in the fields pane */
.table-field .field-wrapper { cursor: pointer; padding-right: 44px; }
.table-field .table-summary { font: 400 14px/20px Roboto, sans-serif; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-field .expand-icon { position: absolute; right: 10px; top: 16px; color: var(--text-secondary); }
.table-field label { color: var(--primary); }

/* "Items" table-field button at the end of the fields pane (reference UI) */
.table-field-button {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 4px 16px;
  border: 0; background: transparent; color: var(--primary); cursor: pointer;
  font: 500 14px/20px Roboto, sans-serif; padding: 6px 8px; border-radius: 4px;
}
.table-field-button:hover { background: rgba(21,34,69,.06); }
.table-field-button.active { background: rgba(21,34,69,.1); }
.table-field-button .material-icons { font-size: 20px; }

/* Centred "Running InquireAI" status */
.run-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 70; display: flex; align-items: center; justify-content: center; }
.run-dialog {
  background: var(--surface); border-radius: 4px; box-shadow: var(--level16); padding: 32px 40px; min-width: 280px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.run-dialog .run-title { font: 500 20px/28px Roboto, sans-serif; }
.run-dialog .run-sub { color: var(--text-secondary); font-size: 14px; }
.context-menu button.danger, .context-menu button.danger .material-icons { color: var(--warn); }

/* Items grid: every value left-aligned, columns resizable, long header fields resizable vertically */
.items-grid .num { text-align: left; }
.items-grid th { position: sticky; }
.items-grid th .col-resizer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; user-select: none;
}
.items-grid th .col-resizer:hover, .items-grid th .col-resizer:active { background: rgba(21,34,69,.15); }
.items-grid th, .items-grid td { overflow: hidden; text-overflow: ellipsis; }
.mat-form-field textarea { resize: vertical; min-height: 24px; }
.mat-form-field .resize-handle { display: none; }

/* Edit toggle in the viewer toolbar */
#btn-edit.active { color: var(--primary); background: rgba(21,34,69,.12); }
.mat-form-field input:read-only, .mat-form-field textarea:read-only { cursor: default; }
.run-dialog .run-progress { width: 260px; }

/* Sortable column headings */
.items-grid th[data-col] { cursor: pointer; padding-right: 28px; user-select: none; }
.items-grid th[data-col] .sort-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-hint); }
.items-grid th.sorted-asc .sort-icon, .items-grid th.sorted-desc .sort-icon { color: var(--primary); }
.items-grid th[data-col]:hover .sort-icon { color: var(--text-secondary); }

/* First-page preview next to each picked file */
.file-list li .file-thumb {
  width: 44px; height: 56px; flex-shrink: 0; border: 1px solid var(--divider); border-radius: 2px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.file-list li .file-thumb img { max-width: 100%; max-height: 100%; }
.file-list li .file-thumb .material-icons { color: var(--accent); font-size: 22px; }
.file-list li { padding: 8px 4px; }
.run-dialog .run-bar { width: 280px; height: 6px; border-radius: 3px; background: rgba(21,34,69,.2); overflow: hidden; }
.run-dialog .run-bar-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 400ms ease; }

/* Audit trail (folder tab) */
.audit-filter .field-wrapper { background: #f5f5f5; }
.audit-list { list-style: none; margin: 8px 0 0; padding: 0; }
.audit-list li { display: flex; gap: 16px; padding: 14px 8px; border-bottom: 1px solid var(--divider); font-size: 14px; line-height: 24px; }
.audit-list li .material-icons { color: var(--text-secondary); margin-top: 2px; }
.audit-list .audit-text { min-width: 0; color: var(--text); }
.audit-list .audit-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-list .audit-empty { color: var(--text-hint); justify-content: center; }
.audit-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--text); }
/* The pager sits at the bottom of the tab however few history rows there are. */
#tab-document:not([hidden]) { display: flex; flex-direction: column; }

/* Sample documents on the upload screen */
.sample-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(96,125,139,.1); border-radius: 4px; padding: 10px 12px; margin: -8px 0 20px; font-size: 14px; }
.sample-box .material-icons { color: var(--accent); }
.sample-box .sample-select { flex: 1 1 200px; min-width: 0; height: 36px; border: 1px solid var(--divider); border-radius: 4px; background: #fff; font: 400 14px Roboto, sans-serif; padding: 0 8px; }

/* Annotation menu: the chevron on "Stamp" sits at the far edge, the armed tool stays marked. */
.context-menu button .menu-more { margin-left: auto; color: var(--text-hint); }
.context-menu button.active { background: rgba(21, 34, 69, .1); }
.context-menu button.active .material-icons { color: var(--primary); }

/* "Modify Document": the page-management column shown during separation, left of the viewer. Thumbnails are
   rendered from the working PDF by the host page, so the viewer's own sidebar stays closed in setup. */
.modify-panel {
  flex: 0 0 216px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f4f4f6;
  border-right: 1px solid var(--divider);
}
.mp-header { font: 400 17px/24px Roboto, sans-serif; color: var(--text); padding: 18px 16px 10px; }
.mp-toolbar { display: flex; align-items: center; gap: 2px; padding: 0 8px 6px; border-bottom: 1px solid var(--divider); }
.mp-thumbs {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 16px 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.modify-panel.two-up .mp-thumbs { flex-flow: row wrap; align-items: flex-start; justify-content: center; gap: 10px; }

.mp-thumb {
  position: relative; width: 124px; flex: 0 0 auto;
  background: #fff; border: 3px solid transparent; border-radius: 2px;
  box-shadow: var(--level1); cursor: pointer;
}
.modify-panel.two-up .mp-thumb { width: 86px; }
.mp-thumb canvas { display: block; width: 100%; height: auto; }
.mp-thumb.selected { border-color: #00796b; }
.mp-thumb.cut { opacity: .45; }
.mp-thumb .mp-num {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  min-width: 24px; padding: 1px 8px; border-radius: 10px;
  background: rgba(96, 125, 139, .88); color: #fff;
  font: 500 12px/16px Roboto, sans-serif; text-align: center;
}
/* Placeholder height until the page has been rasterised, so the strip does not jump. */
.mp-thumb.pending { height: 160px; }
.modify-panel.two-up .mp-thumb.pending { height: 112px; }

/* Drop position while dragging thumbnails to reorder. */
.mp-thumb.drop-before { box-shadow: 0 -3px 0 0 var(--primary), var(--level1); }
.mp-thumb.drop-after { box-shadow: 0 3px 0 0 var(--primary), var(--level1); }
.modify-panel.two-up .mp-thumb.drop-before { box-shadow: -3px 0 0 0 var(--primary), var(--level1); }
.modify-panel.two-up .mp-thumb.drop-after { box-shadow: 3px 0 0 0 var(--primary), var(--level1); }

/* Menu entries that exist in the product but have nothing behind them here (the scan sources). */
.context-menu button[disabled] { color: var(--text-hint); cursor: default; }
.context-menu button[disabled] .material-icons { color: var(--text-hint); }
.context-menu button[disabled]:hover { background: transparent; }

/* Hints about what InquireAI did, shown beside the fields pane when the results land. They fade by
   themselves after a few seconds, or when the user closes them. */
.result-main { position: relative; }
.ai-hint {
  position: absolute; right: 16px; z-index: 25;
  display: flex; align-items: center; gap: 10px; max-width: min(360px, 60%);
  background: var(--primary); color: #fff; border-radius: 4px; padding: 8px 8px 8px 14px;
  font: 400 14px/20px Roboto, sans-serif; box-shadow: var(--level4);
  opacity: 1; transition: opacity 400ms ease;
}
.ai-hint.fading { opacity: 0; }
.ai-hint .material-icons { font-size: 20px; color: #ffb74d; flex-shrink: 0; }
.ai-hint .mat-icon-button { color: rgba(255, 255, 255, .8); flex-shrink: 0; }
.ai-hint .mat-icon-button:hover { color: #fff; }
#hint-fields { top: 16px; }
#hint-items { bottom: 16px; }
@media (max-width: 900px) { .ai-hint { right: 8px; font-size: 13px; max-width: calc(100% - 16px); } }

/* Where one document ends and the next begins, in the Modify Document thumbnails. */
.mp-thumb.doc-start::after {
  content: ""; position: absolute; left: -8px; right: -8px; top: -12px; height: 4px;
  background: #c1c6d0; border-radius: 2px;
}
.modify-panel.two-up .mp-thumb.doc-start::after { left: -7px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }


/* ------------------------------------------------------------------ Workflow
   What the user does with a document once InquireAI has read it: the current step's buttons sit under the
   fields in the right-hand pane. The steps themselves are defined per document type in the admin area. */
.workflow-panel {
  /* Sticks to the bottom of the fields pane: the buttons stay reachable however long the field list is. */
  position: sticky;
  bottom: -24px;
  margin: 16px -12px -24px;
  padding: 12px 20px 24px;
  background: #fff;
  box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, .18);
}
/* One action per line: a bold label, no button chrome and no colour - the toast carries the meaning. */
.workflow-buttons { display: flex; flex-direction: column; gap: 2px; }
.workflow-button {
  appearance: none; border: 0; background: transparent; box-shadow: none; cursor: pointer;
  display: block; width: 100%; padding: 0 8px; height: 36px; border-radius: 4px;
  font: 700 14px/36px Roboto, sans-serif; color: var(--text); text-align: center;
  transition: background 150ms;
}
.workflow-button:hover { background: rgba(0, 0, 0, .06); }
.workflow-button:active { background: rgba(0, 0, 0, .12); }

/* Toast themes raised by the workflow buttons. */
.snackbar.success { background: #2e7d32; }
.snackbar.danger { background: #b71c1c; }
.snackbar.warning { background: #ef6c00; }
.snackbar.info { background: var(--primary); }

/* An enforced list field whose extracted value was not one of the allowed values. */
.mat-form-field.invalid .field-wrapper::after { height: 2px; background: var(--warn); }
.mat-form-field.invalid label { color: var(--warn); }
.mat-form-field .field-hint { color: var(--warn); }

/* The field KeyFree will fill next: filled light yellow so it reads at a glance. */
.keyfree-target .field-wrapper,
.keyfree-target .field-wrapper:hover { background: #fff59d; }
td.keyfree-target { background: #fff59d; }

/* ------------------------------------------------------------------ Import step
   Modelled on the product's navigation: a rail of Favorites / Inboxes / Archives with the archive the
   documents are being filed into, and an empty canvas behind it. */
.import-view { flex-direction: row; overflow: hidden; }
.gs-rail-nav { background: #dde3ea; }
.gs-rail {
  flex: 0 0 224px;
  background: var(--surface);
  border-right: 1px solid var(--divider);
  padding-top: 0;
  overflow-y: auto;
}
.gs-rail-item {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px;
  font: 400 14px/20px Roboto, sans-serif; color: var(--text); cursor: default;
}
.gs-rail-item .material-icons { font-size: 20px; color: var(--text-secondary); }
.gs-rail-item .gs-rail-text { flex: 1; }
.gs-rail-item .gs-chev, .gs-rail-item .gs-search { font-size: 20px; }
.gs-rail-item.open { background: #ccd5df; }
.gs-archive {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 16px; height: 40px;
  font: 400 13px/18px Roboto, sans-serif; color: var(--text);
}
.gs-archive-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-canvas {
  flex: 1 1 auto; position: relative;
  background: var(--app-bg);
  display: flex; align-items: center; justify-content: center;
}
/* The supplied mark already sits on the canvas colour, so it needs no opacity trickery. */
.gs-watermark { width: 230px; height: auto; user-select: none; }
.gs-canvas-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; border-radius: 4px; padding: 10px 16px;
  font: 400 14px/20px Roboto, sans-serif; box-shadow: var(--level4); max-width: min(560px, calc(100% - 32px));
}
/* The archive's saved searches, under the import options. */
#import-menu .search-item { height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
#import-menu .search-item .material-icons { font-size: 20px; }
#import-menu .search-item .menu-text { white-space: normal; line-height: 18px; }

/* ------------------------------------------------------------------ Open dialog
   The file picker the Import option opens. Deliberately styled like the operating system's dialog rather
   than the Material surfaces around it, because that is what it stands in for. */
.fd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 95; display: flex; align-items: center; justify-content: center; }
.fd {
  width: min(760px, calc(100vw - 32px)); height: min(500px, calc(100vh - 32px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #a0a0a0; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.4);
  font: 400 13px/18px "Segoe UI", Roboto, sans-serif; color: #1b1b1b; overflow: hidden;
}
.fd-title { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; background: #f3f3f3; border-bottom: 1px solid #e0e0e0; }
.fd-title .material-icons { font-size: 18px; color: #c9a227; }
.fd-title-text { flex: 1; font-weight: 600; }
.fd-x { width: 36px; height: 30px; border: 0; background: transparent; cursor: pointer; font-size: 13px; color: #444; border-radius: 4px; }
.fd-x:hover { background: #e81123; color: #fff; }
.fd-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #e6e6e6; }
.fd-nav-icon { font-size: 18px; color: #6b6b6b; }
.fd-path, .fd-find { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid #d6d6d6; border-radius: 3px; background: #fff; color: #3c3c3c; }
.fd-path { flex: 1; min-width: 0; }
.fd-path .material-icons, .fd-find .material-icons { font-size: 16px; color: #c9a227; }
.fd-find { width: 150px; color: #8a8a8a; }
.fd-find .material-icons { color: #8a8a8a; }
.fd-body { flex: 1 1 auto; display: flex; min-height: 0; }
.fd-places { flex: 0 0 170px; border-right: 1px solid #e6e6e6; padding: 6px 0; overflow-y: auto; background: #fbfbfb; }
.fd-place { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; cursor: default; }
.fd-place.indent { padding-left: 26px; }
.fd-place .material-icons { font-size: 17px; color: #c9a227; }
.fd-place.selected { background: #cce8ff; }
.fd-files { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.fd-head, .fd-row { display: grid; grid-template-columns: 1fr 140px 110px 80px; align-items: center; gap: 8px; padding: 0 10px; }
.fd-head { height: 26px; border-bottom: 1px solid #e6e6e6; color: #444; font-size: 12px; background: #fafafa; }
.fd-head .num, .fd-row .num { text-align: right; }
.fd-list { flex: 1 1 auto; overflow-y: auto; padding: 2px 0; }
.fd-row { height: 30px; cursor: default; }
.fd-row .fd-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fd-row .fd-file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row .material-icons { font-size: 18px; color: #d64545; }
.fd-row.image .material-icons { color: #3a7bd5; }
.fd-row:hover { background: #f0f7ff; }
.fd-row.selected { background: #cce8ff; }
.fd-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #e6e6e6; background: #f9f9f9; flex-wrap: wrap; }
.fd-foot label { color: #3c3c3c; }
.fd-foot #fd-name { flex: 1 1 200px; min-width: 120px; height: 26px; padding: 0 8px; border: 1px solid #d6d6d6; border-radius: 3px; font: inherit; background: #fff; }
.fd-foot #fd-filter { height: 26px; border: 1px solid #d6d6d6; border-radius: 3px; font: inherit; background: #fff; max-width: 260px; }
.fd-button {
  height: 28px; min-width: 86px; padding: 0 14px; cursor: pointer;
  border: 1px solid #d0d0d0; border-radius: 3px; background: #fdfdfd; font: inherit; color: #1b1b1b;
}
.fd-button:hover { background: #f0f0f0; }
.fd-button.primary { background: #0067c0; border-color: #0067c0; color: #fff; }
.fd-button.primary:hover { background: #005fb0; }
.fd-button:disabled { color: #9a9a9a; background: #f5f5f5; border-color: #e0e0e0; cursor: default; }
@media (max-width: 720px) {
  .fd-places { display: none; }
  .fd-head, .fd-row { grid-template-columns: 1fr 80px; }
  .fd-head span:nth-child(2), .fd-row span:nth-child(2), .fd-head span:nth-child(3), .fd-row span:nth-child(3) { display: none; }
}