:root {
  color-scheme: dark;
  --page: #1c1c1c;
  --top: #202020;
  --surface: #232323;
  --surface-raised: #292929;
  --card: #1b1b1b;
  --control: #181818;
  --border: #3a3a3a;
  --border-strong: #515151;
  --text: #f2f2f2;
  --muted: #aaa;
  --dimmed: #818181;
  --accent: #1784cf;
  --accent-hover: #2798e5;
  --focus: #56b0eb;
  font: 14px/1.45 'Segoe UI', 'Segoe UI Variable', Arial, sans-serif;
  background: var(--page);
  color: var(--text);
}
* {box-sizing: border-box}
html {scrollbar-color: #545454 #202020}
body {margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--page)}
a {color:#68bafa;text-decoration:none}
a:hover {color:#92ceff;text-decoration:underline}
button, input, select {font:inherit}
button {cursor:pointer}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {outline:2px solid var(--focus);outline-offset:2px}
[hidden] {display:none!important}

/* Single identity at the top, without an extra navigation header. */
.brand-mark {display:grid;place-items:center;width:34px;height:34px;flex:none;background:#1685d2;border:1px solid #ffffff21;border-radius:4px}
.brand-mark img {display:block;width:27px;height:27px}

/* Workspace */
.main {max-width:1160px;width:100%;flex:1;margin:0 auto;padding:38px 28px 48px}
.page-heading {display:flex;align-items:center;justify-content:space-between;gap:18px 30px;margin:0 0 25px}
.page-heading-copy {min-width:0}
.page-title-row {display:flex;align-items:center;gap:13px;min-width:0;margin-bottom:10px}
.page-logo {width:47px;height:47px;border-radius:7px}
.page-logo img {width:36px;height:36px}
.page-heading h1 {font-size:29px;letter-spacing:-.65px;line-height:1.2;font-weight:600;margin:0}
.page-heading p {font-size:13px;color:#b7b7b7;max-width:690px;margin:0}
.page-heading-meta {display:flex;flex-direction:column;align-items:flex-end;align-self:flex-end;gap:7px;flex-shrink:0}
.page-links {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px 20px}
.page-links a {display:inline-flex;align-items:center;gap:5px;color:#8bc5eb;font-size:12px;font-weight:500;line-height:20px}
.page-links a:hover {color:#c3e5fb;text-decoration:underline}
.page-links a span {color:#7c98a9;font-size:12px}
.catalog-summary {padding:0 0 3px;color:#a7a7a7;font-size:12px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Panels have one level of nesting, instead of decorative layers. */
.panel {background:var(--surface);border:1px solid var(--border);padding:23px 26px;border-radius:4px;margin-bottom:17px}
.panel-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.section-kicker {display:block;color:#818b93;font-size:10px;font-weight:600;letter-spacing:1.15px;line-height:1.3;margin:0 0 5px}
.panel h2 {font-size:18px;font-weight:600;letter-spacing:-.2px;margin:0;line-height:1.25}
.panel-heading-note {font-size:12px;color:#959595}
.editor-grid {display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:24px;align-items:start}
.field label,.field-label {font-size:12px;font-weight:600;display:block;color:#e1e1e1;margin:0 0 9px}
.search-wrap {position:relative}
#search {height:40px;width:100%;border:1px solid #515151;background:var(--control);border-radius:3px;color:var(--text);padding:0 12px;outline:none;appearance:none}
#search:focus {border-color:var(--focus);box-shadow:0 0 0 1px #2378b44f}
#search::placeholder {color:#868686}
#search::-webkit-search-cancel-button {cursor:pointer}
.results {position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;border:1px solid #545454;border-radius:3px;background:#292929;box-shadow:0 8px 22px #0008;max-height:285px;overflow:auto}
.result-item {width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;text-align:left;background:none;color:#e6e6e6;border:0;border-bottom:1px solid #373737;min-height:42px}
.result-item:last-child {border-bottom:0}
.result-item:hover,.result-item:focus-visible {background:#343434;outline:none}
.result-item span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-item small {font-size:11px;color:#a0a0a0;white-space:nowrap}
.empty-search {color:#bbb;padding:12px}
.selected-mod {display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px;font-size:12px}
.selected-details {min-width:0;display:flex;flex-direction:column;gap:1px}
.selected-details strong {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.selected-details span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#989898}
.selected-mod a {font-size:12px;white-space:nowrap}
.color-header {display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.color-name {font-size:11px;color:#929292}
.swatches {display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
.swatch {width:27px;height:27px;border:1px solid #ffffff44;border-radius:3px;outline-offset:3px;padding:0;transition:border-color .12s}
.swatch:hover {border-color:#fff}
.swatch[aria-pressed=true] {outline:2px solid #ededed;outline-offset:2px}

.editor-section-title {display:flex;justify-content:space-between;gap:12px;align-items:center;margin:23px 0 12px;padding-top:18px;border-top:1px solid #383838;color:#e2e2e2;font-size:12px;font-weight:600}
.field-help {font-weight:400;color:#8b8b8b;font:11px Consolas,monospace}
.hex-customization {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hex-item {min-width:0}
.hex-item label {display:block;font-weight:400;color:#bababa;font-size:11px;white-space:nowrap;margin:0 0 6px}
.hex-row {display:flex;align-items:center;gap:6px;min-width:0}
.hex-row input[type=color] {width:29px;height:30px;flex:none;padding:3px;border:1px solid #555;background:#171717;border-radius:3px;cursor:pointer}
.hex-row input[type=text] {width:100%;min-width:0;height:30px;padding:4px 6px;background:#171717;color:#ebebeb;border:1px solid #505050;border-radius:3px;font:11px Consolas,'Cascadia Mono',monospace}
.hex-row input[type=text]:focus {outline:1px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.hex-row input:disabled {opacity:.4;cursor:not-allowed}
.appearance-section-label {margin-top:21px}
.appearance-controls {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.select-field {min-width:0}
.select-field label {display:block;margin:0 0 6px;font-size:11px;color:#bababa}
.appearance-controls select {width:100%;height:38px;min-width:0;padding:0 10px;border:1px solid #505050;background:#171717;color:#f0f0f0;border-radius:3px;cursor:pointer}
.appearance-controls select:hover {border-color:#6a6a6a}

/* Badges are utility rows, not giant marketing cards. */
.output-header {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.output-header h2 {margin:0 0 4px}
.output-header p {font-size:12px;color:#9c9c9c;margin:0}
.button {min-height:30px;padding:6px 11px;border-radius:3px;border:1px solid #555;background:#2f2f2f;color:#f0f0f0;font-size:12px;font-weight:500;white-space:nowrap;transition:background .12s,border-color .12s}
.button:hover:not(:disabled) {background:#383838;border-color:#717171}
.button-primary {background:#147ec2;color:#fff;border-color:#1684ca}
.button-primary:hover:not(:disabled) {background:#258ed1;border-color:#258ed1}
.button:disabled {opacity:.46;cursor:default}
.badge-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.badge-card {background:var(--card);border:1px solid #363636;border-radius:3px;min-height:88px;padding:12px 14px;display:flex;flex-direction:column;gap:11px;min-width:0}
.badge-heading {font-size:12px;font-weight:600;color:#dedede}
.badge-row {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;min-width:0}
.badge-preview-link {display:inline-flex;max-width:100%;min-width:0;align-items:center}
.badge-preview-link:hover {opacity:.85}
.badge-image {display:block;max-width:100%;max-height:22px;height:auto;width:auto}
.badge-actions {margin-left:auto;display:flex;gap:5px;flex:none}
.badge-actions .button {min-height:28px;padding:5px 9px;font-size:11px}
.status {font-size:12px;color:#b5b5b5;margin:12px 0 0}
.status:empty {display:none}
.custom-unavailable {color:#aaa;font-size:11px}
.source-note {color:#858585;font-size:11px;margin:17px 0 0}
.source-note a {color:#a4cbea}

/* Footer remains secondary, with the catalog status repeated here. */
.footer {border-top:1px solid #333;background:#191919}
.footer-inner {max-width:1160px;margin:0 auto;padding:42px 28px 30px}
.footer-main {display:flex;align-items:center;justify-content:space-between;gap:26px}
.footer-brand {display:flex;align-items:center;gap:13px}
.footer-brand .brand-mark {width:40px;height:40px;border-radius:6px}
.footer-brand .brand-mark img {width:31px;height:31px}
.footer-brand strong {font-size:14px;font-weight:600;color:#e2e2e2}
.footer-brand p {font-size:12px;color:#a4a4a4;margin:4px 0 0}
.footer-links {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px 23px}
.footer-links a {font-size:12px;color:#bcbcbc}
.footer-bottom {display:flex;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:36px;padding-top:19px;border-top:1px solid #343434;color:#9a9a9a;font-size:11px}
.footer-bottom a {color:#aeb6bc}
.footer-updated {font-variant-numeric:tabular-nums;white-space:nowrap}

@media(max-width:1050px) {
  .hex-customization {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
}
@media(max-width:800px) {
  .main {padding:29px 20px 38px}
  .footer-inner {padding-left:20px;padding-right:20px}
  .editor-grid {grid-template-columns:1fr;gap:17px}
  .editor-section-title {margin-top:20px}
  .page-heading {align-items:flex-start;flex-direction:column;gap:12px}
  .page-heading-meta {align-self:flex-end;align-items:flex-end;gap:6px}
  .badge-grid {grid-template-columns:1fr}
}
@media(max-width:600px) {
  .main {padding:26px 16px 32px}
  .page-title-row {gap:10px;margin-bottom:9px}
  .page-logo {width:39px;height:39px;border-radius:5px}
  .page-logo img {width:31px;height:31px}
  .page-heading h1 {font-size:25px}
  .page-heading p {font-size:12px}
  .panel {padding:18px 15px}
  .panel-heading {margin-bottom:19px;align-items:flex-start}
  .panel-heading-note {display:none}
  .hex-customization {grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 14px}
  .appearance-controls {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .output-header {align-items:flex-start;flex-wrap:wrap}
  .footer-inner {padding:32px 16px 26px}
  .footer-main,.footer-bottom {align-items:flex-start;flex-direction:column;gap:14px}
  .footer-links {justify-content:flex-start;gap:9px 16px}
  .footer-bottom {margin-top:26px;padding-top:18px}
}
@media(max-width:390px) {
  .badge-row {flex-wrap:wrap;gap:9px}
  .badge-actions {margin-left:0;width:100%}
  .hex-row input[type=color] {width:27px}
  .hex-row input[type=text] {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {* {transition:none!important;scroll-behavior:auto!important}}