.graphics-overlay {
  --graphics-text: #e7eff8; --graphics-muted: #8fa5bc; --graphics-line: #263c53; --graphics-accent: #61d3d5;
  position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: #030a14c9; backdrop-filter: blur(7px); color: var(--graphics-text); color-scheme: dark;
  font-family: "Segoe UI", Tahoma, sans-serif; font-size: 13px; line-height: 1.45;
}
.graphics-overlay *, .graphics-overlay *::before, .graphics-overlay *::after { box-sizing: border-box; }
.graphics-overlay svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.graphics-overlay button, .graphics-overlay input, .graphics-overlay textarea, .graphics-overlay select { font: inherit; }
.graphics-overlay button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 36px; margin: 0; padding: 7px 12px;
  border: 1px solid #304b65; border-radius: 8px; background: #192f46; color: #d6e6f5; font-weight: 600; line-height: 1.3; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; overflow-wrap: anywhere;
}
.graphics-overlay button:hover:not(:disabled) { background: #23415d; border-color: #4e7393; color: #fff; }
.graphics-overlay button:disabled { background: #17283a; border-color: #26394d; color: #71869d; cursor: default; opacity: .65; }
.graphics-overlay button.btn-primary { min-height: 40px; border-color: #eab258; background: #e9ad49; color: #172333; }
.graphics-overlay button.btn-primary:hover:not(:disabled) { border-color: #ffce7d; background: #f5bd5f; color: #0c1722; }
.graphics-overlay button.btn-muted { background: transparent; border-color: var(--graphics-line); color: #a9bdd1; }
.graphics-overlay button.btn-muted:hover:not(:disabled) { background: #1b3147; border-color: #446381; color: #e5f0fa; }
.graphics-overlay button.btn-danger { border-color: #75404d; background: #472834; color: #ffb2bf; }
.graphics-overlay button.btn-danger:hover:not(:disabled) { border-color: #ac596e; background: #623243; }
.graphics-overlay input:not([type="checkbox"]), .graphics-overlay textarea, .graphics-overlay select { width: 100%; min-width: 0; min-height: 38px; padding: 9px 11px; border: 1px solid #30475e; border-radius: 8px; background: #0c1b2b; color: var(--graphics-text); line-height: 1.4; box-shadow: none; }
.graphics-overlay input::placeholder, .graphics-overlay textarea::placeholder { color: #7189a2; opacity: 1; }
.graphics-overlay input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 2px 0 0; flex: 0 0 16px; accent-color: #54c7c9; cursor: pointer; }
.graphics-overlay textarea { resize: vertical; min-height: 80px; max-height: 220px; }
.graphics-overlay :is(button, input, textarea, select, summary, a):focus-visible { outline: 2px solid var(--graphics-accent); outline-offset: 3px; }
.graphics-overlay [hidden] { display: none !important; }
.graphics-dialog { width: min(920px, 100%); max-height: min(830px, calc(100dvh - 32px)); min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #34506a; border-radius: 16px; background: #101e2e; box-shadow: 0 24px 85px #0009, inset 0 1px #ffffff05; outline: none; }
.graphics-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-shrink: 0; padding: 16px 20px 14px; background: #132336; }
.graphics-header-brand, .graphics-header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.graphics-header-brand { gap: 12px; }
.graphics-brand-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #32576b; border-radius: 11px; background: #173b4b; color: #78e0df; }
.graphics-brand-icon svg { width: 21px; height: 21px; }
.graphics-header-copy { min-width: 0; }
.graphics-header h2 { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: -.3px; font-weight: 700; }
.graphics-header p { margin: 4px 0 0; font-size: 11px; color: var(--graphics-muted); }
.graphics-header-actions { flex-shrink: 0; gap: 6px; }
.graphics-header-actions button { width: 36px; height: 36px; padding: 8px; border-color: #2c4157; background: #1a2d41; color: #a8bbce; }
.graphics-header-actions [data-close] svg { width: 18px; height: 18px; }
.graphics-tabs { display: flex; align-items: center; gap: 5px; min-width: 0; }
.graphics-tabs--kinds { flex-shrink: 0; padding: 0 20px 12px; border-bottom: 1px solid var(--graphics-line); background: #132336; }
.graphics-tabs--kinds button { min-height: 38px; border-color: transparent; background: transparent; color: #9bb0c7; padding: 8px 12px; font-size: 12px; }
.graphics-tabs--kinds button[aria-pressed="true"] { background: #1b3c4c; border-color: #2c5b6a; color: #8ce5e2; }
.graphics-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 5px; border-radius: 5px; background: #ffffff0a; color: #8fa7bf; font-size: 10px; font-weight: 600; }
.graphics-tabs--kinds button[aria-pressed="true"] .graphics-count { background: #5fd3d51a; color: #92e5e1; }
.graphics-status { flex-shrink: 0; margin: 10px 20px 0; padding: 9px 12px; border: 1px solid #76613b; border-radius: 8px; background: #4e3f252e; color: #f4d18c; font-size: 12px; overflow-wrap: anywhere; }
.graphics-status:empty { display: none; }
.graphics-body { padding: 16px 20px 18px; overflow: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: #35516c transparent; }
.graphics-toolbar { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.graphics-tabs--scope { padding: 3px; border: 1px solid #263e56; border-radius: 9px; background: #0c1b2a; gap: 2px; }
.graphics-tabs--scope button { min-height: 36px; border-color: transparent; border-radius: 6px; background: transparent; padding: 7px 10px; font-size: 11px; color: #8fa8c0; white-space: nowrap; }
.graphics-tabs--scope button[aria-pressed="true"] { border-color: #36516c; background: #223b54; color: #e4f1ff; box-shadow: 0 1px 4px #0002; }
.graphics-search { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid #2b435c; border-radius: 8px; background: #0c1b2b; color: #819bb5; }
.graphics-search:focus-within { border-color: #65c7ce; box-shadow: 0 0 0 2px #61d3d510; }
.graphics-overlay .graphics-search input { border: 0; outline: 0; padding: 8px 0; min-height: 36px; background: transparent; font-size: 12px; box-shadow: none; }
.graphics-toolbar > .btn-primary { font-size: 12px; white-space: nowrap; }
.graphics-current { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2a4756; border-radius: 9px; background: #122c38; color: #71d4cb; }
.graphics-current > svg { width: 20px; height: 20px; }
.graphics-current > div, .graphics-current-copy { flex: 1; min-width: 0; }
.graphics-current small, .graphics-current > div > span { display: block; color: #8fabba; font-size: 10px; line-height: 1.3; }
.graphics-current strong { display: block; margin-top: 1px; color: #d9efef; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.graphics-current button { flex-shrink: 0; min-height: 36px; padding: 5px 9px; font-size: 11px; }
.graphics-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 10px; }
.graphics-section-head h3, .graphics-section-head h4 { margin: 0; font-size: 13px; font-weight: 600; color: #d9e6f4; }
.graphics-section-head small, .graphics-section-head > span { color: #7d96b0; font-size: 11px; }
.graphics-section-head .graphics-search { max-width: 260px; min-width: 150px; min-height: 36px; }
.graphics-section-head .graphics-search input { min-height: 32px; }
.graphics-hint { margin: 10px 0 12px; color: var(--graphics-muted); font-size: 11px; line-height: 1.55; }
.graphics-section-head .graphics-hint { max-width: 62%; margin: 0; text-align: right; font-size: 10px; }
.graphics-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.graphics-pack { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; border: 1px solid #2b4056; border-radius: 11px; background: #16283c; transition: border-color .15s, background .15s; }
.graphics-pack:hover { border-color: #44637e; background: #192d42; }
.graphics-pack.is-active { border-color: #3a8888; background: #153339; box-shadow: inset 0 1px #72dcd70a; }
.graphics-pack-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.graphics-pack h3 { min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.graphics-badge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 2px 6px; border: 1px solid #35536c; border-radius: 5px; color: #9db8ce; background: #20384c; font-size: 9px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.graphics-badge svg { width: 11px; height: 11px; }
.graphics-badge.is-public { border-color: #2b5f60; background: #1c45473d; color: #7dd1c8; }
.graphics-badge.is-private { border-color: #3d4b67; background: #293850; color: #a8b5d1; }
.graphics-pack-author { color: #8ea5be; font-size: 11px; margin: -3px 0 0; overflow-wrap: anywhere; }
.graphics-pack-preview { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-height: 54px; padding: 4px; border: 1px solid #253f54; border-radius: 7px; background: #0c1c2a; overflow: hidden; }
.graphics-preview { width: 64px; height: 46px; min-width: 0; object-fit: contain; flex: 0 0 auto; background: #0c1b2b; border-radius: 6px; }
.graphics-pack-preview .graphics-preview { width: calc((100% - 15px) / 4); max-width: 64px; flex: 0 1 64px; background: transparent; }
.graphics-preview--empty { display: inline-flex; align-items: center; justify-content: center; color: #627d98; border: 1px dashed #2c445c; font-size: 14px; }
.graphics-preview-empty { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; color: #6f8aa4; font-size: 10px; }
.graphics-preview-empty svg { width: 17px; height: 17px; }
.graphics-description { margin: 10px 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; color: #9cb1c5; line-height: 1.5; font-size: 12px; }
.graphics-pack .graphics-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 32px; max-height: 34px; margin: 0; overflow: hidden; font-size: 11px; }
.graphics-pack-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; padding-top: 9px; border-top: 1px solid #ffffff09; color: #859fb8; font-size: 10px; }
.graphics-pack-footer button { min-height: 36px; padding: 6px 10px; font-size: 11px; }
.graphics-pack-footer .graphics-selected { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
.graphics-selected { color: #79ddd0; font-size: 11px; }
.graphics-selected svg { width: 13px; height: 13px; }
.graphics-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 18px; border: 1px dashed #2c455f; border-radius: 10px; background: #102234; text-align: center; }
.graphics-empty > svg { width: 30px; height: 30px; padding: 6px; box-sizing: content-box; border: 1px solid #2c4a61; border-radius: 12px; background: #183348; color: #78a9c2; margin-bottom: 3px; }
.graphics-empty strong, .graphics-empty h3 { color: #c7d9eb; font-size: 13px; margin: 0; font-weight: 600; }
.graphics-empty p { color: #839eb8; font-size: 11px; max-width: 350px; margin: 0; line-height: 1.55; }
.graphics-overlay .graphics-back { min-height: 36px; padding: 5px 0; margin-bottom: 7px; border-color: transparent; background: transparent; font-size: 11px; color: #8baac6; }
.graphics-overlay .graphics-back:hover:not(:disabled) { border-color: transparent; background: transparent; color: #8ce0df; }
.graphics-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 5px 0 14px; }
.graphics-heading > div { min-width: 0; flex: 1 1 200px; }
.graphics-heading h3 { margin: 0; color: #edf5ff; font-size: 20px; font-weight: 650; letter-spacing: -.3px; overflow-wrap: anywhere; }
.graphics-heading p { margin: 5px 0 0; color: var(--graphics-muted); }
.graphics-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: #8fa8c0; }
.graphics-overlay .graphics-use-btn { font-size: 12px; }
.graphics-overlay .graphics-use-btn.is-active { min-height: 40px; background: #173b42; border-color: #3d767b; color: #83ddd2; }
.graphics-entries { display: grid; gap: 6px; margin-top: 12px; }
.graphics-entry { min-width: 0; padding: 8px 11px; border: 1px solid #283f56; border-radius: 9px; background: #14263a; }
.graphics-entry:has([aria-expanded="true"]) { border-color: #427b8b; background: #163044; }
.graphics-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.graphics-entry-heading > strong { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; }
.graphics-samples { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.graphics-pack-preview.graphics-samples { justify-content: flex-start; }
.graphics-sample-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.graphics-sample-label { color: #7f9bb7; font-size: 9px; line-height: 1.25; }
.graphics-entry-heading .graphics-preview { width: 64px; height: 40px; }
.graphics-overlay .graphics-edit-btn { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 8px; background: #1b354d; border-color: #34536e; color: #9dc5df; }
.graphics-overlay .graphics-edit-btn[aria-expanded="true"] { border-color: #4d9caa; background: #214753; color: #8de1dd; }
.graphics-settings { padding: 0; min-width: 0; border: 1px solid #2b435c; border-radius: 9px; background: #14263a; overflow: hidden; }
.graphics-settings > summary, .graphics-help > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #a7c0d7; padding: 11px 13px; min-height: 40px; }
.graphics-settings[open] > summary { border-bottom: 1px solid #2b435c; background: #192f44; color: #d4e7f7; }
.graphics-settings .graphics-form { margin: 0; padding: 13px; }
.graphics-form, .graphics-upload { display: grid; gap: 12px; margin-top: 14px; min-width: 0; }
.graphics-form label, .graphics-upload label { display: grid; gap: 5px; min-width: 0; color: #a9bfd3; font-size: 11px; }
.graphics-form > button, .graphics-form-actions { justify-self: start; }
.graphics-form-actions, .graphics-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.graphics-check { display: flex !important; flex-direction: row; align-items: flex-start; gap: 8px !important; font-size: 11px; line-height: 1.55; cursor: pointer; }
.graphics-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid #2c4b61; margin-top: 10px; padding-top: 10px; }
.graphics-upload { gap: 10px; margin: 0; padding: 12px; border: 1px solid #2c4b61; border-radius: 8px; background: #102334; }
.graphics-upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.graphics-upload strong { color: #c9dceb; font-size: 11px; font-weight: 600; line-height: 1.45; }
.graphics-upload > .graphics-preview, .graphics-upload-preview .graphics-preview { width: 100%; height: 68px; padding: 8px; background: #0b1b2a; border: 1px solid #263c50; }
.graphics-overlay .graphics-file-field { gap: 7px; }
.graphics-overlay input[type="file"] { min-height: 37px; padding: 4px; color: #8ca5bc; font-size: 10px; overflow: hidden; }
.graphics-overlay input[type="file"]::file-selector-button { min-height: 28px; max-width: 100%; margin-right: 7px; padding: 5px 8px; border: 1px solid #385871; border-radius: 5px; background: #203e56; color: #d8eafa; font: inherit; font-weight: 600; cursor: pointer; }
.graphics-upload .graphics-actions button { min-height: 36px; padding: 6px 9px; font-size: 11px; }
.graphics-publication { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; padding: 13px; border-top: 1px solid #2a4057; }
.graphics-publication .graphics-check { flex-basis: 100%; color: #9fb6ca; }
.graphics-publication button { font-size: 11px; }
.graphics-publication .btn-danger { margin-left: auto; }
.graphics-help { margin-top: 16px; border: 1px solid #243c53; border-radius: 9px; background: #112234; color: #8da7bf; font-size: 11px; line-height: 1.65; overflow: hidden; }
.graphics-help > summary { padding: 10px 12px; font-size: 11px; color: #90aec8; }
.graphics-help[open] > summary { border-bottom: 1px solid #243c53; margin-bottom: 10px; color: #c4dceb; }
.graphics-help ol, .graphics-help ul { margin: 10px 13px 10px 30px; padding: 0; }
.graphics-help li { padding-left: 2px; margin: 6px 0; }
.graphics-help p { margin: 10px 13px; }
.graphics-help a { color: #78cbd8; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .graphics-toolbar { grid-template-columns: 1fr auto; }
  .graphics-toolbar .graphics-tabs--scope { grid-column: 1 / -1; justify-self: start; }
  .graphics-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .graphics-overlay { padding: 8px; }
  .graphics-dialog { max-height: calc(100dvh - 16px); border-radius: 13px; }
  .graphics-header { padding: 13px 12px 12px; gap: 8px; }
  .graphics-header-brand { gap: 9px; }
  .graphics-brand-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
  .graphics-header h2 { font-size: 17px; }
  .graphics-header p { max-width: 170px; font-size: 10px; line-height: 1.35; }
  .graphics-header-actions { gap: 4px; }
  .graphics-header-actions button { width: 36px; padding: 8px; }
  .graphics-tabs--kinds { padding: 0 12px 10px; gap: 4px; }
  .graphics-tabs--kinds button { flex: 1 1 0; gap: 6px; padding: 8px 6px; font-size: 11px; }
  .graphics-tabs--kinds button > svg { width: 15px; height: 15px; }
  .graphics-count { min-width: 17px; padding: 1px 4px; font-size: 9px; }
  .graphics-status { margin: 9px 12px 0; padding: 8px 10px; }
  .graphics-body { padding: 12px; }
  .graphics-toolbar { gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
  .graphics-toolbar .graphics-tabs--scope { justify-self: stretch; }
  .graphics-tabs--scope button { flex: 1; }
  .graphics-toolbar > .btn-primary { padding: 8px 10px; font-size: 11px; }
  .graphics-search { padding: 0 8px; gap: 6px; }
  .graphics-overlay .graphics-search input { font-size: 11px; }
  .graphics-current { padding: 9px 10px; gap: 8px; }
  .graphics-current > svg { width: 17px; height: 17px; }
  .graphics-current button { max-width: 120px; font-size: 10px; }
  .graphics-section-head { margin-top: 14px; gap: 8px; }
  .graphics-section-head .graphics-hint { max-width: 60%; font-size: 9px; }
  .graphics-section-head .graphics-search { min-width: 0; max-width: 58%; }
  .graphics-pack-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .graphics-pack { padding: 12px; gap: 8px; }
  .graphics-pack-preview { gap: 8px; }
  .graphics-pack-preview .graphics-preview { width: calc((100% - 24px) / 4); max-width: 64px; }
  .graphics-pack .graphics-description { min-height: 0; }
  .graphics-heading { gap: 10px; margin-bottom: 12px; }
  .graphics-heading h3 { font-size: 18px; }
  .graphics-heading > div { flex-basis: 100%; }
  .graphics-overlay .graphics-use-btn { width: 100%; }
  .graphics-entry { padding: 8px; }
  .graphics-entry-heading { gap: 8px; }
  .graphics-entry-heading > strong { font-size: 11px; }
  .graphics-entry-heading .graphics-preview { width: 55px; height: 38px; }
  .graphics-samples { gap: 4px; }
  .graphics-sample-label { font-size: 8px; }
  .graphics-upload-grid { grid-template-columns: minmax(0, 1fr); }
  .graphics-form-actions { width: 100%; }
  .graphics-form-actions button { flex: 1; }
  .graphics-publication .btn-danger { margin-left: 0; }
  .graphics-empty { padding: 24px 14px; }
}
@media (max-width: 380px) {
  .graphics-tabs--kinds button { gap: 4px; font-size: 10px; }
  .graphics-tabs--kinds button > svg { width: 13px; height: 13px; }
  .graphics-header p { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .graphics-overlay button, .graphics-pack { transition: none; }
}