/* DELGIS: one quiet, consistent workspace. */
:root {
  color-scheme: light;
  --ink: #25384a;
  --text: #465360;
  --muted: #64747f;
  --teal: #405c70;
  --line: #e0e4e6;
  --paper: #f5f4f0;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f2f4f4;
  --surface-soft: #f5f6f5;
  --input: #fbfcfb;
  --soft: #eef2f3;
  --orange: #9b7b44;
  --orange-dark: #856536;
  --gold: #9b7b44;
  --gold-soft: #f2ede3;
  --navy: #162b3d;
  --sidebar: 236px;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  background: var(--paper);
  color: var(--text);
}

html, body { background: var(--paper); color: var(--text); }
body { font-size: 14px; }
.app-shell { min-height: 100vh; background: var(--paper); background-image: none; }
main { max-width: 1480px; padding: 36px 40px 25px; }
.contours { display: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.sidebar { background: var(--navy); color: #dce4eb; padding: 30px 22px 24px; border-right: 1px solid #102437; }
.sidebar .brand { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 38px; }
.brand-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; border: 1px solid #ffffff4d; box-shadow: none; background: #fff; }
.brand-name, .brand-wordmark { display: block; color: #f2f4f6; font-size: 23px; letter-spacing: 1.6px; font-weight: 650; line-height: 1.2; }
.brand-caption { display: block; color: #a9b6c2; font-size: 9px; letter-spacing: 1.7px; font-weight: 450; line-height: 1.8; margin-top: 5px; }
.nav-label { color: #94a5b4; font-size: 10px; font-weight: 500; letter-spacing: 1.6px; padding-left: 12px; margin-bottom: 13px; }
.main-menu { gap: 7px; }
.main-menu .nav-item { color: #c3ced7; min-height: 47px; padding: 12px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 500; }
.main-menu .nav-item.active, .main-menu .nav-item.active:hover { background: #263d50; border-color: #344b5f; color: #f3f5f7; }
.main-menu .nav-item:hover { background: #ffffff08; color: #f3f5f7; }
.main-menu .nav-item .icon { width: 18px; height: 18px; }
.nav-dot { background: #c6ab73; width: 4px; height: 4px; }
.sidebar-note { margin-top: auto; margin-bottom: 30px; padding-top: 40px; }
.sidebar-note .small-eyebrow { color: #aeb5b3; font-size: 9px; letter-spacing: 1.5px; font-weight: 500; }
.sidebar-note h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 22px; line-height: 1.45; color: #e8e6df; margin: 13px 0 10px; }
.sidebar-note p { color: #a3b1bd; font-size: 11px; line-height: 1.9; }
.local-status { color: #c4cfd8; border-color: #34495b; font-size: 10px; padding-top: 20px; }
.local-status small { color: #94a6b5; font-size: 10px; }
.local-status>span { background: #a5af8c; }
.sidebar-footer { color: #aab8c2; }
.workspace-note { margin-top: auto; padding-top: 38px; padding-bottom: 28px; }
.workspace-note>span { display: block; color: #a4b3bf; font-size: 9px; letter-spacing: 1.8px; font-weight: 450; }
.workspace-note>strong { display: block; color: #e3dfd3; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; letter-spacing: 1px; margin-top: 11px; }
.workspace-note>p { color: #a3b3bf; font-size: 11px; line-height: 1.9; margin-top: 9px; }
.author-credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #34495b; }
.author-credit span { color: #9caebc; font-size: 10px; letter-spacing: .4px; font-weight: 400; }
.author-credit strong { color: #d9c18d; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 550; letter-spacing: .2px; }

.topbar { min-height: 72px; padding: 0 40px; background: #fbfbf9; border-color: var(--line); }
.breadcrumb { font-size: 12px; color: #7c8a94; }
.breadcrumb span { color: #bec5c9; padding: 0 11px; }
.breadcrumb strong { color: #435765; font-weight: 500; }
.system-author { display: flex; align-items: center; gap: 13px; border-left: 1px solid #dce1e3; padding-left: 21px; }
.system-author span { color: #879198; font-size: 11px; font-weight: 400; }
.system-author strong { font-size: 13px; font-weight: 600; letter-spacing: .15px; color: #4c5b66; }
.local-badge { color: #70807a; font-size: 9px; letter-spacing: .8px; }
.local-badge>span { background: #91a08b; }
.page-heading { align-items: center; margin-bottom: 30px; padding-top: 5px; }
.page-heading>.heading-number { display: none; }
.page-heading .eyebrow { color: #8f754b; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; }
.page-heading h1 { font-family: Georgia, "Nirmala UI", "Times New Roman", serif; color: #273b4d; font-size: clamp(27px, 2.6vw, 38px); font-weight: 400; line-height: 1.5; letter-spacing: 0; max-width: 900px; margin: 13px 0 11px; }
.page-heading p.motto-translation { font-size: 13px; line-height: 1.8; color: #7a8385; font-weight: 400; max-width: 680px; }
.eyebrow { color: #82918e; font-size: 10px; letter-spacing: 1.3px; }
h2, h3 { color: var(--ink); }

.card, .stats { background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 1px 2px #20344902; }
.stats { margin-bottom: 25px; }
.stat { padding: 22px 24px; gap: 15px; }
.stat+.stat:before { background: #e6e9eb; }
.stat-icon { background: #f5f3ee; color: #8a7c5f; border-radius: 9px; width: 41px; height: 41px; }
.stat-label { color: #7b8790; font-size: 12px; margin-bottom: 5px; }
.stat strong { font-size: 26px; font-weight: 550; color: #304654; letter-spacing: -.4px; }
.stat .stat-text { font-size: 17px; font-weight: 550; }
.stat strong small { color: #8c969b; font-size: 10px; letter-spacing: .3px; margin-top: 5px; }
.card-heading { padding: 23px 25px 21px; gap: 12px; }
.card-heading h2, .layers-card h2, .export-title h2 { color: #2d4354; font-size: 18px; font-weight: 600; letter-spacing: -.25px; }
.card-heading p, .layers-card .card-heading p { color: #809098; font-size: 12px; line-height: 1.65; margin-top: 4px; }
.step-badge { color: #8b7757; background: #f6f3ec; border-color: #e8e2d6; width: 28px; height: 28px; font-size: 11px; font-weight: 500; }
.tag { color: #929b9d; background: #f7f8f6; border-color: #e6e9e4; font-size: 9px; font-weight: 500; letter-spacing: 1px; }
.dropzone { border: 1px dashed #bec8c9; background: #fcfcfa; border-radius: 9px; padding: 29px 15px 24px; }
.dropzone.drag-over { border-color: #8b9da8; background: #f1f5f6; }
.upload-symbol { background: #eeefea; color: #7b897b; width: 48px; height: 48px; border-radius: 11px; }
.dropzone h3 { font-size: 16px; font-weight: 550; color: #344b58; }
.dropzone p { color: #8c989d; font-size: 12px; margin-top: 2px; }
.dropzone-foot { color: #98a19d; font-size: 11px; margin-top: 21px; }
.import-buttons { gap: 10px; margin-top: 20px; }
.button { border-radius: 6px; min-height: 40px; font-size: 12px; font-weight: 550; padding: 10px 16px; }
.button .icon { width: 16px; height: 16px; }
.button.primary { background: #263e50; border-color: #263e50; color: #fff; }
.button.primary:hover:not(:disabled) { background: #1c3142; border-color: #1c3142; }
.button.secondary { background: #fff; border-color: #dce2e3; color: #536a77; }
.button.secondary:hover:not(:disabled) { background: #f5f7f6; border-color: #b8c5cb; }
.button.compact { min-height: 35px; padding: 8px 12px; font-size: 12px; }
.device-notice { color: #8a969a; font-size: 12px; line-height: 1.75; padding: 20px 25px 18px; }
.device-notice strong { color: #677b85; font-weight: 550; }
.device-notice .icon { color: #84968e; }
.crs-options { color: #81919b; border-color: #e9edef; font-size: 12px; }
.crs-options summary { color: #7b8b92; font-size: 12px; font-weight: 500; }
.crs-options summary span { color: #a0a8ab; font-size: 11px; }
.crs-options label { color: #71848f; font-size: 12px; }
.crs-options input { font-size: 13px; }
.crs-options small { color: #8d999e; font-size: 11px; }
.how-card { background: #f1f0e9; border-color: #e4e3d8; padding: 29px 27px 0; }
.how-card>.eyebrow { color: #93917a; font-size: 9px; }
.how-card>h2 { font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; color: #4f5c55; letter-spacing: -.3px; line-height: 1.28; margin: 16px 0 26px; }
.how-steps { gap: 23px; }
.how-steps li>span { color: #a39b80; font-size: 11px; }
.how-steps h3 { color: #52645d; font-size: 13px; font-weight: 550; }
.how-steps p { color: #8a9488; font-size: 12px; line-height: 1.7; }
.how-footer { border-color: #ddded2; color: #8a957f; font-size: 11px; gap: 8px; }

input[type="text"], input[type="search"], select { color: #42596a; background: #fcfdfc; border-color: #dfe5e7; border-radius: 6px; font-size: 13px; }
input::placeholder { color: #a1abad; }
input:focus, select:focus { border-color: #92a4af; }
input[type="checkbox"], input[type="radio"] { accent-color: #526e7c; }
.source-banner { background: #eef2f3; border-color: #dce4e7; border-radius: 10px; padding: 18px 20px; }
.source-icon { color: #758c98; background: #ffffffb3; }
.source-info>span { color: #8b9aa2; font-size: 9px; letter-spacing: 1.1px; }
.source-info strong { color: #4b6576; font-size: 13px; font-weight: 550; }
.source-info small { color: #8b9ba4; font-size: 12px; line-height: 1.6; }
.workspace-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; }
.layers-card .card-heading { padding: 22px 20px 18px; }
.layer-toolbar { padding: 0 20px 18px; gap: 12px; flex-wrap: wrap; }
.search-field { border-color: #e2e7e9; background: #fafcfc; max-width: 270px; }
.search-field>.icon { color: #95a3a8; }
.search-field input { background: transparent; font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
.toggle-label { color: #8d9aa1; font-size: 12px; }
.toggle { background: #dbe2e3; }
.toggle-label>input:checked+.toggle { background: #718b96; }
.layer-table { min-width: 550px; }
.layer-table thead { background: #f6f8f8; }
.layer-table th { color: #86969f; border-color: #e7ebec; font-size: 11px; font-weight: 500; padding-top: 13px; padding-bottom: 13px; }
.layer-table td { border-color: #edf0f1; font-size: 12px; padding-top: 14px; padding-bottom: 14px; }
.layer-table input[type="checkbox"] { width: 15px; height: 15px; }
.layer-table tr.selected { background: #f0f5f6; }
.layer-table tr:not(.selected):hover { background: #fafcfc; }
.layer-table tr.disabled-row .layer-name { color: #95a2a9; }
.layer-name { font-size: 12px; color: #496170; font-weight: 550; }
.layer-description { font-size: 11px; color: #99a5aa; margin-top: 2px; }
.geometry-badge { font-size: 10px; background: #edf2f3; color: #8c9fa4; padding: 2px 6px; }
.selected .geometry-badge { background: #e4edef; }
.layer-count-cell { font-size: 12px !important; color: #81939e; }
.layer-icon-select { font-size: 12px; max-width: 108px; color: #81949f !important; }
.layer-icon-preview { width: 21px; height: 21px; }
.table-footer { background: #fcfdfc; color: #9aa7ab; font-size: 11px; padding: 14px 19px; }
.table-footer>span:last-child { font-size: 10px; }
.tiny-dot { background: #adb9b4; }
.table-empty { font-size: 13px; }
.detail-card { padding: 22px; }
.detail-header .eyebrow { font-size: 9px; color: #8c9a9e; }
.detail-header h2 { font-size: 14px; color: #48616d; font-weight: 600; line-height: 1.6; }
.detail-symbol { background: #f1f5f4; color: #82998f; }
.detail-meta { gap: 8px; }
.detail-meta span { font-size: 11px; color: #87999c; background: #f2f6f5; }
.field-group label { font-size: 12px; color: #7d919b; margin-bottom: 7px; }
.field-group select { font-size: 12px; color: #5c7582; background: #fcfdfc; padding: 10px 11px; }
.detail-crs { border-color: #e8edee; color: #8fa1a3; padding: 15px 0; }
.detail-crs span { font-size: 11px; color: #94a3a6; }
.detail-crs strong { font-size: 12px; color: #7a939c; line-height: 1.6; }
.detail-crs .button { font-size: 11px; padding: 5px 9px; }
.preview-heading h3 { font-size: 12px; color: #7a949b; }
.preview-heading span { font-size: 9px; color: #a0adae; }
.attribute-preview { background: #f8faf9; border-color: #e8eeee; }
.attribute-row { border-color: #e8eeee; font-size: 11px; line-height: 1.65; padding: 9px; }
.attribute-key { color: #92a2a6; }
.attribute-value { color: #698792; }
.preview-note, .detail-empty { font-size: 11px; color: #98a8ac; line-height: 1.8; }
.icon-note { font-size: 11px; color: #8d9fa6; padding: 16px 3px; line-height: 1.8; }

.package-picker { padding: 25px; border-color: var(--line); }
.package-picker h2 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.package-picker .package-description { font-size: 13px; color: #83939d; }
.package-picker .package-step { color: #9a865f; font-size: 11px; font-weight: 500; }
.package-picker .package-actions { gap: 9px; }
.package-picker .package-actions .button { font-size: 12px; font-weight: 550; }
.package-picker .package-actions .package-quick { background: #f4f1e9; border-color: #e5decd; color: #8c7856; }
.package-picker .package-actions .package-quick:hover:not(:disabled) { background: #eee9dc; border-color: #cdbf9d; }
.package-picker .package-status { background: #f7f9f9; border-color: #e5eaec; border-radius: 8px; }
.package-picker .package-status strong { font-size: 13px; font-weight: 550; color: #586f7d; }
.package-picker .package-status span { color: #8b9ba2; font-size: 12px; }
.package-grid { gap: 11px; }
.package-group { border-color: #e2e8eb; background: #fff; border-radius: 9px; padding: 16px 14px 13px; }
.package-group.is-selected { border-color: #8da0ac; background: #f3f6f7; box-shadow: none; }
.package-group.is-partial { border-color: #aebdc6; background: #f7f9fa; }
.package-group.is-empty { background: #fafbf9; border-color: #e8ece9; }
.package-group .package-group-toggle { color: #536c7b; font-size: 13px; font-weight: 600; }
.package-group .package-group-hint { color: #8f9da4; font-size: 12px; }
.package-group .package-group-count { color: #4c6577; font-size: 23px; font-weight: 550; letter-spacing: -.4px; }
.package-group .package-group-count small { color: #92a0a7; font-size: 12px; }
.package-group .package-group-selected { font-size: 12px; color: #95a2a8; }
.package-group.is-selected .package-group-selected, .package-group.is-partial .package-group-selected { color: #7e949d; }
.package-group .package-only { font-size: 12px; font-weight: 550; border-radius: 5px; background: #fff; border-color: #dfe6e9; color: #6f8795; }
.package-group .package-only:hover:not(:disabled) { background: #f4f7f8; border-color: #adbec7; }
.package-filter-bar { border-color: #e8edef; }
.package-filter-bar label { color: #788f9b; font-size: 12px; font-weight: 550; }
.package-filter-bar select { font-size: 12px; }
.package-filter-bar p { color: #96a4ab; font-size: 12px; }

.export-card { padding: 24px 25px; }
.export-title p { color: #8a9aa2; font-size: 12px; line-height: 1.6; }
.export-settings { gap: 23px; flex-wrap: wrap; align-items: flex-end; }
.format-choices { flex-wrap: wrap; gap: 9px; }
.format-choices legend, .export-name>label { font-size: 12px; color: #80949f; margin-bottom: 9px; }
.format-option { padding: 12px 11px; border-color: #e3e9eb; border-radius: 7px; min-width: 160px; }
.format-option:has(input:checked) { background: #f1f5f6; border-color: #a6b7c0; }
.format-option strong { font-size: 12px; color: #597787; font-weight: 550; }
.format-option em { color: #9b895f; background: #f1ecdf; font-size: 8px; font-weight: 450; }
.format-option small { font-size: 10px; line-height: 1.6; color: #9aa9b0; }
.format-option input { margin-top: 3px; }
.name-input { background: #fcfdfc; border-color: #dfe7ea; }
.name-input input { font-size: 12px; color: #678593; }
.name-input>span { color: #9eafb6; font-size: 12px; }
.export-name>p { color: #9aabb3; font-size: 11px; line-height: 1.6; white-space: normal; }
.export-button { min-height: 42px; height: auto; margin-bottom: 20px; min-width: 145px; }
.success-card { background: #eff5f1; border-color: #d1e1d7; border-radius: 10px; }
.success-check { background: #dfece2; color: #6a8d71; }
.success-card h2 { font-size: 17px; color: #587562; font-weight: 550; }
.success-card p { font-size: 12px; color: #8da192; }
.alert { background: #fffaf0; border-color: #e8ddc4; color: #9f8454; font-size: 13px; }
.dataset-warnings, .layer-warnings { background: #fffaf0; border-color: #e8ddc4; color: #9f8454; font-size: 12px; }
.export-warnings { color: #9f8454; font-size: 12px; }
.progress-card h2 { font-size: 16px; }
.progress-top p { font-size: 12px; color: #80949e; }
.progress-track { background: #e8eef0; }
.progress-track>div { background: #8aa3af; }
.spinner { border-color: #e0e8eb; border-top-color: #8aa3af; }
.progress-top>strong { color: #7b929e; font-weight: 500; }
.toast { background: #263e50; color: #f0f3f5; border-radius: 7px; box-shadow: 0 3px 12px #172d4217; font-size: 12px; }
.install-card { background: #f0f2ef; border-color: #dfe6e1; border-radius: 10px; padding: 20px 23px; }
.install-symbol { background: #e4ebe5; color: #8c9e89; }
.install-copy h3 { color: #6c8376; font-size: 13px; font-weight: 550; }
.install-copy p { color: #97a69b; font-size: 12px; line-height: 1.75; }
.install-help { font-size: 12px; color: #889b8e; border-color: #dce4de; }
.guide-panel { border-radius: 11px; }
.guide-panel>summary { padding: 23px 25px; }
.settings-heading strong { font-size: 16px; color: #526b7a; font-weight: 550; }
.settings-heading small { color: #94a3ac; font-size: 12px; }
.settings-heading>.icon { color: #8ba1ad; }
.settings-chevron { color: #a4b0b5; }
.guide-content { color: #7e939f; font-size: 13px; line-height: 1.85; }
.guide-content strong { color: #577586; font-weight: 550; }
.guide-content p { border-color: #e5ebee; color: #94a5ae; font-size: 12px; }
.compatibility-guide { background: #f7f9f9; border-color: #e4eaec; border-radius: 9px; }
.compatibility-guide h3 { color: #6b8796; font-size: 15px; font-weight: 550; }
.compatibility-guide dt { color: #7a929f; font-weight: 550; }
.compatibility-guide dd { color: #96a6af; }
.compatibility-guide a { color: #7f98a6; font-size: 12px; }
.page-footer { color: #a0aaa8; font-size: 11px; padding-top: 26px; }
.page-footer>span:last-child { font-size: 10px; font-weight: 450; }

/* Secondary information remains readable; hierarchy comes from size and spacing. */
.breadcrumb, .system-author span, .page-heading p.motto-translation,
.stat-label, .stat strong small, .card-heading p, .layers-card .card-heading p,
.tag, .dropzone p, .dropzone-foot, .device-notice,
.crs-options, .crs-options summary, .crs-options summary span, .crs-options label,
.crs-options small, .source-info>span, .source-info small,
.toggle-label, .layer-table th, .layer-description, .geometry-badge,
.layer-count-cell, .table-footer, .detail-header .eyebrow, .detail-meta span,
.field-group label, .detail-crs span, .detail-crs strong, .preview-heading h3,
.preview-heading span, .attribute-key, .attribute-value, .preview-note, .detail-empty,
.icon-note, .package-picker .package-description, .package-picker .package-status span,
.package-group .package-group-hint, .package-group .package-group-count small,
.package-group .package-group-selected, .package-group.is-selected .package-group-selected,
.package-group.is-partial .package-group-selected, .package-filter-bar label,
.package-filter-bar p, .export-title p, .format-choices legend, .export-name>label,
.format-option small, .name-input>span, .export-name>p, .install-copy p,
.install-help, .settings-heading small, .guide-content, .guide-content p,
.compatibility-guide dd, .compatibility-guide a, .page-footer { color: #64747f; }
.layer-icon-select { color: #64747f !important; }
.how-steps p, .how-footer { color: #67735f; }
.how-card>.eyebrow, .how-steps li>span { color: #7d745b; }
.format-option em, .package-picker .package-actions .package-quick { color: #806a43; }
.success-card p { color: #637b69; }
.alert, .dataset-warnings, .layer-warnings, .export-warnings { color: #866b39; }

@media(min-width: 1550px) {
  :root { --sidebar: 248px; }
  main { padding: 42px 48px 28px; }
  .topbar { padding: 0 48px; }
  .sidebar { padding-left: 26px; padding-right: 26px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 310px; }
  .dropzone { padding-top: 39px; padding-bottom: 31px; }
}
@media(max-width: 1200px) {
  :root { --sidebar: 214px; }
  .sidebar { padding: 27px 16px 22px; }
  .brand-logo { width: 62px; height: 62px; }
  .brand-name, .brand-wordmark { font-size: 22px; }
  .brand-caption { font-size: 8px; letter-spacing: 1.3px; }
  .sidebar .brand { gap: 10px; }
  main { padding: 30px 27px 24px; }
  .topbar { padding: 0 27px; }
  .stat { padding: 20px 17px; gap: 11px; }
  .stat-label { font-size: 11px; }
  .export-settings { gap: 19px; }
  .format-choices { flex-basis: 100%; }
  .export-name { width: auto; flex: 1; }
  .export-button { margin-bottom: 20px; }
}
@media(max-width: 1120px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .detail-column { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; }
  #detail-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .detail-meta, .detail-crs, .layer-warnings, .preview-heading, .attribute-preview, .preview-note { grid-column: 1 / -1; }
  .detail-crs { margin-top: 0; }
  .icon-note { padding-top: 22px; }
  .search-field { max-width: 320px; }
}
@media(max-width: 960px) {
  :root { --sidebar: 194px; }
  .sidebar { padding: 25px 14px 20px; }
  .sidebar .brand { gap: 9px; }
  .brand-logo { width: 56px; height: 56px; }
  .brand-name, .brand-wordmark { font-size: 20px; letter-spacing: 1.1px; }
  .brand-caption { font-size: 7px; letter-spacing: 1px; }
  .main-menu .nav-item { font-size: 12px; gap: 9px; padding: 12px 10px; }
  main { padding: 28px 24px 22px; }
  .topbar { padding: 0 24px; }
  .system-author { flex-direction: column; gap: 2px; align-items: flex-end; padding-left: 15px; }
  .system-author span { font-size: 10px; }
  .system-author strong { font-size: 12px; }
  .page-heading h1 { font-size: 30px; line-height: 1.5; }
  .intro-grid { grid-template-columns: 1fr; }
  .how-card { padding: 25px; }
  .how-card>h2 { font-size: 27px; margin-bottom: 22px; }
  .how-steps { gap: 18px; }
  .how-steps h3 { font-size: 12px; }
  .how-steps p { font-size: 12px; }
  .stat { padding: 17px 13px; gap: 9px; }
  .stat-icon { width: 30px; height: 30px; }
  .stat-icon .icon { width: 16px; height: 16px; }
  .stat-label { font-size: 10px; }
  .stat .stat-text { font-size: 14px; }
  .stat strong small { font-size: 9px; }
  .source-info small { font-size: 11px; }
  .detail-column { grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; }
  .table-footer>span:last-child { display: none; }
}
@media(max-width: 700px) {
  :root { --sidebar: 0px; }
  .sidebar { padding: 17px 18px 12px; gap: 13px; border-right: 0; }
  .sidebar .brand { gap: 11px; margin: 0; }
  .brand-logo { width: 57px; height: 57px; border-radius: 8px; }
  .brand-name, .brand-wordmark { font-size: 23px; letter-spacing: 1.6px; }
  .brand-caption { font-size: 8px; letter-spacing: 1.5px; }
  .sidebar .main-menu { margin: 0; padding: 3px 0 4px; gap: 7px; scrollbar-color: #5d7485 transparent; }
  .main-menu .nav-item { font-size: 11px; min-height: 37px; padding: 8px 10px; gap: 6px; }
  .main-menu .nav-item .icon { width: 15px; height: 15px; }
  .author-credit, .workspace-note { display: none; }
  .topbar { min-height: 54px; height: 54px; padding: 0 19px; }
  .breadcrumb { font-size: 10px; }
  .breadcrumb span { padding: 0 7px; }
  .system-author { border: 0; padding-left: 10px; gap: 1px; }
  .system-author span { font-size: 9px; }
  .system-author strong { font-size: 12px; }
  main { padding: 26px 18px 22px; }
  .page-heading { margin-bottom: 24px; padding-top: 2px; }
  .page-heading .eyebrow { font-size: 9px; letter-spacing: 1.9px; }
  .page-heading h1 { font-size: 27px; line-height: 1.5; margin: 13px 0 11px; max-width: none; }
  .page-heading p.motto-translation { font-size: 12px; line-height: 1.85; max-width: none; }
  .stats { grid-template-columns: 1fr 1fr 1.2fr; margin-bottom: 22px; }
  .stat { padding: 16px 12px; }
  .stat-icon { display: none; }
  .stat-label { font-size: 10px; margin-bottom: 6px; }
  .stat strong { font-size: 24px; }
  .stat .stat-text { font-size: 14px; }
  .stat strong small { font-size: 9px; }
  .card-heading { padding: 21px 19px; gap: 10px; }
  .card-heading h2, .layers-card h2, .export-title h2 { font-size: 17px; }
  .card-heading p, .layers-card .card-heading p { font-size: 12px; }
  .tag { font-size: 8px; padding: 4px 6px; letter-spacing: .7px; }
  .dropzone { margin: 0 19px; padding: 26px 12px 23px; }
  .dropzone h3 { font-size: 14px; }
  .dropzone p { font-size: 12px; }
  .dropzone-foot { font-size: 10px; }
  .button { min-height: 41px; font-size: 12px; padding: 10px 14px; }
  .device-notice { padding: 19px; font-size: 12px; }
  .crs-options { margin: 0 19px; padding: 15px 0 18px; }
  .crs-options summary { font-size: 11px; }
  .crs-options summary span { font-size: 10px; }
  .how-card { padding: 24px; }
  .how-card>h2 { font-size: 27px; }
  .how-steps { gap: 21px; }
  .how-steps h3 { font-size: 13px; }
  .how-steps p { font-size: 12px; }
  .how-footer { font-size: 11px; }
  .source-banner { padding: 14px 13px; gap: 10px; align-items: flex-start; }
  .source-info { flex: 1; }
  .source-info strong { font-size: 12px; }
  .source-info small { font-size: 11px; }
  .source-banner .button { font-size: 10px; padding: 7px 8px; min-height: 32px; }
  .source-icon { width: 31px; height: 31px; }
  .source-info>span { font-size: 8px; }
  .package-picker { padding: 21px 16px; }
  .package-picker h2 { font-size: 19px; }
  .package-picker .package-description { font-size: 12px; }
  .package-group { padding: 14px 11px 11px; }
  .package-group .package-group-toggle { font-size: 12px; }
  .package-group .package-group-count { font-size: 22px; }
  .package-group .package-only { font-size: 12px; }
  .layers-card .card-heading { padding: 20px 16px 17px; }
  .layer-toolbar { padding: 0 16px 17px; }
  .search-field { flex-basis: 100%; max-width: none; }
  .toggle-label { font-size: 11px; }
  .layer-table { min-width: 535px; }
  .layer-table td { padding-top: 14px; padding-bottom: 14px; }
  .layer-name { font-size: 12px; }
  .layer-icon-select { font-size: 11px; max-width: 100px; }
  .table-footer { padding: 13px 16px; font-size: 11px; }
  .detail-column { grid-template-columns: 1fr; gap: 0; }
  .detail-card { padding: 21px; }
  #detail-content { gap: 0 15px; }
  .detail-header h2 { font-size: 14px; }
  .detail-meta span { font-size: 11px; }
  .field-group label { font-size: 11px; }
  .field-group select { font-size: 12px; }
  .detail-crs strong { font-size: 12px; }
  .attribute-row { font-size: 11px; }
  .icon-note { padding: 14px 3px 0; font-size: 11px; }
  .export-card { padding: 22px 19px; }
  .export-settings { gap: 19px; }
  .format-choices { gap: 8px; }
  .format-option { min-width: 130px; padding: 12px 8px; }
  .format-option strong { font-size: 12px; gap: 6px; }
  .format-option small { font-size: 10px; }
  .format-option em { font-size: 7px; }
  .format-choices legend, .export-name>label { font-size: 12px; }
  .export-name { flex-basis: 100%; }
  .export-button { width: 100%; min-height: 44px; margin-bottom: 0; }
  .install-card { padding: 20px 18px; }
  .install-copy h3 { font-size: 13px; }
  .install-copy p { font-size: 12px; }
  .install-help { font-size: 12px; }
  .guide-panel>summary { padding: 21px 18px; }
  .settings-heading strong { font-size: 15px; }
  .settings-heading small { font-size: 11px; }
  .guide-content { padding: 0 19px 23px; font-size: 12px; }
  .guide-content p { font-size: 12px; }
  .compatibility-guide { padding: 18px 15px; }
  .page-footer { font-size: 10px; padding-top: 23px; }
  .page-footer>span:last-child { font-size: 9px; }
}
@media(min-width: 701px) and (max-height: 760px) {
  .workspace-note { display: none; }
  .local-status { margin-top: auto; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Keep all four primary destinations visible on narrow screens. */
@media (max-width: 700px) {
  .sidebar .main-menu { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; gap:4px; padding:0; width:100%; }
  .sidebar .main-menu .nav-item { flex-direction:column; justify-content:center; gap:6px; padding:10px 2px; min-height:62px; font-size:11px; line-height:1.35; text-align:center; white-space:normal; }
  .sidebar .main-menu .icon { width:17px; height:17px; }
}

/* Profile controls keep phone and desktop exports understandable. */
.profile-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; border:0; margin:24px 0 0; padding:0; min-width:0; }
.profile-choices legend { font-size:12px; font-weight:600; color:#51616e; margin-bottom:10px; padding:0; }
.profile-option { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; padding:16px; border:1px solid #dce2e5; border-radius:8px; cursor:pointer; background:#fff; min-width:0; }
.profile-option:has(input:checked) { background:#f4f6f7; border-color:#8d9eaa; box-shadow:inset 3px 0 0 #a38a58; }
.profile-option:has(input:focus-visible) { outline:2px solid #a38a58; outline-offset:3px; }
.profile-option input { width:15px; height:15px; margin:2px 0 0; accent-color:#304b60; flex-shrink:0; }
.profile-option>span:not(.profile-badge) { flex:1; min-width:130px; }
.profile-option strong { display:block; color:#304658; font-size:13px; line-height:1.6; font-weight:600; }
.profile-option small { display:block; font-size:12px; line-height:1.6; color:#677681; margin-top:3px; }
.profile-badge { align-self:center; padding:3px 6px; background:#eee9dc; border-radius:4px; color:#786743; font-size:10px; line-height:1.5; }
.profile-note { font-size:12px; line-height:1.85; color:#60707c; padding:13px 0 0; max-width:900px; }
.full-profile-note { color:#806531; }
.export-card .export-settings { align-items:flex-start; gap:23px; }
.export-card .format-choices { flex:1; min-width:0; }
.export-card .export-name { flex:1; min-width:200px; width:auto; }
.export-card .format-choices legend, .export-card .export-name>label { color:#536674; }
.export-card .format-option small, .export-card .export-name>p { color:#687b86; }
.export-parts-panel { margin-top:22px; padding:18px; border:1px solid #dbe2e6; border-radius:8px; background:#f7f8f8; min-width:0; }
.parts-heading { display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.parts-heading .eyebrow { color:#887449; font-size:10px; }
.parts-heading strong { color:#526976; font-size:12px; line-height:1.7; font-weight:500; }
.export-parts-panel>label { font-size:12px; font-weight:600; color:#3e5565; margin-bottom:8px; }
#export-part { display:block; width:100%; max-width:100%; min-width:0; min-height:44px; padding:10px 30px 10px 12px; border:1px solid #cbd6dd; border-radius:6px; background:#fff; color:#304a5a; font-size:13px; text-overflow:ellipsis; }
#part-summary { color:#617581; font-size:12px; line-height:1.8; margin-top:10px; overflow-wrap:anywhere; }
#part-summary.oversized-part { color:#7e6132; }
.part-caution { margin-top:10px; color:#795b28; background:#f4eddf; border-left:3px solid #b3955c; padding:11px 13px; font-size:12px; line-height:1.8; border-radius:3px; }
.export-parts-panel .export-warnings { font-size:12px; line-height:1.8; margin-top:12px; color:#7a673f; overflow-wrap:anywhere; }
.export-parts-panel .export-warnings>div+div { margin-top:6px; }
.export-actions { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-top:22px; }
.export-actions>p { flex:1; max-width:650px; color:#617481; font-size:12px; line-height:1.8; }
.export-actions .export-button { flex-shrink:0; min-height:45px; height:auto; margin:0; white-space:normal; line-height:1.6; }
.export-actions .export-button:disabled { opacity:.5; cursor:not-allowed; }
.memory-guide h3 { color:#556b7a; }
.memory-guide p { color:#657884; }
.preview-note { color:#687d88; }
.success-card p { color:#566f5e; }
@media(max-width:960px) {
  .profile-badge { margin-left:25px; }
  .profile-option { padding:14px; gap:8px; }
  .export-actions { align-items:flex-end; }
  .export-actions .export-button { max-width:230px; }
}
@media(max-width:700px) {
  .profile-choices { grid-template-columns:1fr; gap:10px; margin-top:22px; }
  .profile-option>span:not(.profile-badge) { min-width:160px; }
  .profile-badge { margin-left:23px; }
  .export-card .export-settings { gap:17px; }
  .export-card .format-choices, .export-card .export-name { flex-basis:100%; width:100%; min-width:0; }
  .export-card .format-option { min-width:0; }
  .export-parts-panel { padding:15px 12px; }
  .parts-heading { gap:6px; align-items:flex-start; flex-direction:column; }
  #export-part { font-size:12px; }
  .export-actions { flex-direction:column; gap:15px; align-items:stretch; }
  .export-actions .export-button { max-width:none; width:100%; }
  .export-actions>p { max-width:none; }
}

/* Complete packages are primary; a single part remains an explicit option. */
.layer-style { display:grid; gap:8px; min-width:154px; }
.layer-icon-control { display:flex; gap:6px; align-items:center; }
.layer-icon-control .layer-icon-select { max-width:125px; font-size:12px; }
.layer-color-control { display:grid; grid-template-columns:23px minmax(0,1fr); align-items:center; gap:5px 7px; }
.layer-color-control input[type=color] { width:23px; height:25px; padding:1px; cursor:pointer; }
.color-auto-reset { justify-self:start; font:inherit; font-size:11px; line-height:1.5; color:#506b7a; background:#fff; border:1px solid #ccd7dd; border-radius:4px; padding:4px 7px; white-space:nowrap; }
.color-auto-reset[aria-pressed=true] { color:#6e5d37; border-color:#c4b58e; background:#f7f3e9; }
.color-auto-reset:focus-visible { outline:2px solid #9e8756; outline-offset:2px; }
.color-auto-reset:disabled { opacity:.5; cursor:not-allowed; }
.color-mode-label { grid-column:1/-1; color:#667b87; font-size:11px; line-height:1.5; }
.plan-coverage { color:#355567; font-size:13px; font-weight:600; line-height:1.9; padding:12px 14px; border:1px solid #d9e2e6; border-radius:6px; background:#fff; }
.plan-coverage.has-missing { color:#805c28; background:#fffaf0; border-color:#e5d7bb; }
.package-explanation { color:#617581; font-size:12px; line-height:1.85; margin-top:12px; }
.single-part-options { margin-top:18px; padding-top:16px; border-top:1px solid #dce4e8; }
.single-part-options>summary { font-size:12px; font-weight:600; color:#506d7f; cursor:pointer; line-height:1.8; }
.single-part-options[open]>summary { margin-bottom:16px; }
.single-part-options>label { display:block; font-size:12px; color:#4e6575; margin-bottom:8px; }
.part-coverage { margin-top:8px; color:#806132; font-size:12px; line-height:1.85; }
.single-part-options>.button { margin-top:14px; font-size:12px; min-height:40px; }
.single-part-options>.button:disabled { opacity:.5; cursor:not-allowed; }
.export-actions>p>strong { color:#425c6b; font-weight:600; }
.success-card { align-items:flex-start; }
.success-content { flex:1; min-width:0; }
.success-card .success-next { margin-top:12px; color:#506a5b; line-height:1.8; }
.success-card>.button { margin-top:3px; }
.success-card.partial-success { background:#fff9ee; border-color:#ddc99e; }
.partial-success h2 { color:#805c25; }
.partial-success .success-check { background:#f1e3c5; color:#927035; }
.partial-success p, .partial-success .success-next { color:#79633e; }
.export-report { margin-top:16px; padding-top:13px; border-top:1px solid #cfddd1; }
.export-report>summary { font-size:12px; color:#4c6755; font-weight:600; cursor:pointer; line-height:1.8; }
.partial-success .export-report { border-color:#e1d2b8; }
.partial-success .export-report>summary { color:#7a5a2c; }
#export-report-rows { max-height:320px; overflow:auto; margin-top:12px; padding-right:5px; }
.export-report-row { display:flex; flex-direction:column; gap:4px; font-size:12px; line-height:1.65; color:#526f5e; border-bottom:1px solid #d9e4db; padding:11px 0; overflow-wrap:anywhere; }
.export-report-row:first-child { padding-top:0; }
.export-report-row:last-child { border-bottom:0; }
.export-report-row strong { font-size:12px; font-weight:600; }
.export-report-row small { font-size:11px; color:#60786a; }
.export-report-row.report-missing, .export-report-row.report-missing small { color:#85622c; }
@media(max-width:700px) {
  .plan-coverage { font-size:12px; padding:11px; }
  .export-actions .export-button { min-height:48px; }
  .success-card>.button { margin-top:10px; }
  .success-card .success-content { min-width:0; flex-basis:calc(100% - 53px); }
  .single-part-options>.button { width:100%; }
}

/* Detailed map symbols and a compact layer workspace. */
:root { --paper:#f3f5f6; --ink:#21384a; --muted:#566b79; }
.card { box-shadow:0 4px 20px #21384a04; border-color:#dde4e8; border-radius:14px; }
.card-heading h2, .export-title h2 { letter-spacing:-.35px; }
.intro-icon-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 0 17px; border-top:1px solid #dce0d6; margin-top:22px; }
.intro-icon-preview figure { margin:0; text-align:center; }
.intro-icon-preview img { width:66px; height:66px; object-fit:contain; }
.intro-icon-preview figcaption { color:#4d625a; font-size:11px; margin-top:4px; }
.how-card .how-footer { padding-top:15px; padding-bottom:18px; }
.package-picker .package-grid { gap:12px; }
.package-group { border-radius:10px; box-shadow:none; }
.package-group .package-group-toggle { color:#2d4759; }
.package-group.is-selected { background:#f1f6f7; border-color:#87a4af; box-shadow:inset 0 0 0 1px #87a4af; }
.package-group.is-empty { opacity:.55; }
.package-group-count { font-variant-numeric:tabular-nums; }
.layer-table-wrap { max-height:565px; overflow:auto; scrollbar-color:#c5d0d7 #f6f8f9; scrollbar-width:thin; border-top:1px solid #e8edf0; }
.layer-table { min-width:0; width:100%; }
.layer-table thead { position:sticky; top:0; z-index:1; background:#f5f8fa; }
.layer-table th { color:#576f7e; font-size:11px; text-transform:uppercase; letter-spacing:.7px; }
.layer-table td { padding-top:10px; padding-bottom:10px; }
.layer-name { color:#2c485a; font-size:12px; overflow-wrap:anywhere; }
.layer-table tr.disabled-row .layer-name { color:#697d89; }
.layer-table tr.selected { background:#eef5f8; box-shadow:inset 3px 0 #427791; }
.layer-count-cell { color:#3d586b; font-variant-numeric:tabular-nums; }
.layer-appearance { border:1px solid transparent; border-radius:9px; background:transparent; display:flex; align-items:center; gap:9px; padding:3px 6px 3px 0; min-width:141px; cursor:pointer; text-align:left; color:#3c5768; }
.layer-appearance:hover { background:#fff; border-color:#d9e4ea; }
.layer-appearance:disabled { cursor:wait; opacity:.5; }
.layer-icon-preview { width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.appearance-copy { display:flex; flex-direction:column; gap:3px; }
.appearance-copy strong { font-size:12px; font-weight:550; }
.appearance-copy small { color:#6a7e8b; font-size:10px; white-space:nowrap; }
.appearance-copy small[style]::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--layer-color); margin-right:5px; }
.appearance-arrow { margin-left:auto; font-size:21px; font-weight:300; color:#869aa7; }
.detail-header { align-items:center; gap:10px; }
.detail-header h2 { color:#2d485b; font-size:15px; overflow-wrap:anywhere; }
.detail-symbol { width:76px; height:76px; background:transparent; flex-shrink:0; }
.detail-symbol img { width:76px; height:76px; object-fit:contain; }
.detail-appearance-settings { margin:5px 0 18px; background:#f5f8fa; padding:15px; border:1px solid #e0e8ed; border-radius:9px; }
.color-setting-heading { display:flex; flex-direction:column; gap:5px; }
.color-setting-heading label { font-size:12px; font-weight:600; color:#324f62; }
.color-setting-heading span { color:#708593; font-size:8px; letter-spacing:.85px; }
.color-setting-controls { display:flex; gap:9px; align-items:center; margin-top:12px; }
.color-setting-controls input[type=color] { width:40px; height:38px; padding:3px; border:1px solid #ccd9e2; border-radius:7px; background:white; cursor:pointer; }
.color-setting-controls .button { font-size:11px; padding:8px 10px; min-height:37px; flex:1; }
#detail-color-auto[aria-pressed=true] { border-color:#83a8ad; background:#eaf3f2; color:#35676d; }
.detail-appearance-settings p { margin:10px 0 4px; font-size:11px; color:#425f73; line-height:1.6; }
.detail-appearance-settings small { font-size:10px; color:#70818c; line-height:1.6; display:block; }
.icon-catalog { margin-bottom:19px; }
.icon-catalog>summary, .attribute-disclosure>summary { display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; padding:12px 0; font-size:12px; color:#3d5c70; font-weight:600; border-bottom:1px solid #e0e8ec; list-style:none; }
.icon-catalog>summary::before, .attribute-disclosure>summary::before { content:'+'; font-size:18px; font-weight:400; }
.icon-catalog[open]>summary::before, .attribute-disclosure[open]>summary::before { content:'−'; }
.icon-catalog>summary span, #preview-index { margin-left:auto; font-size:9px; color:#788e9b; font-weight:400; }
#icon-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-top:12px; }
.catalog-icon { min-width:0; border:1px solid #e3e9ed; border-radius:8px; background:#fff; cursor:pointer; padding:7px 2px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.catalog-icon:hover, .catalog-icon[aria-pressed=true] { border-color:#7c9dac; background:#eff5f7; }
.catalog-icon img { width:56px; height:56px; object-fit:contain; }
.catalog-icon span { font-size:9px; color:#405f73; line-height:1.4; }
.attribute-disclosure { margin-top:14px; }
.attribute-disclosure .attribute-preview { max-height:255px; overflow:auto; border:0; padding-top:8px; }
.attribute-key { color:#546d7c; }
.attribute-value { color:#2c4b5e; }
.field-group label { color:#4c6677; font-size:12px; }
.field-group select { min-height:40px; }
@media(min-width:1121px) { .detail-card { position:sticky; top:20px; } .detail-column { min-width:0; } }
@media(max-width:1120px) { .detail-appearance-settings,.icon-catalog,.attribute-disclosure { grid-column:1/-1; } #icon-catalog-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:700px) {
  main { padding-left:14px; padding-right:14px; }
  .card { border-radius:12px; }
  .page-heading { margin-bottom:20px; }
  .intro-icon-preview img { width:72px; height:72px; }
  .layer-table,.layer-table tbody { display:block; width:100%; min-width:0; }
  .layer-table thead { display:block; }
  .layer-table thead tr { display:block; }
  .layer-table th { display:none; }
  .layer-table th:first-child { display:flex; align-items:center; gap:10px; width:100%; padding:12px 16px; }
  .layer-table th:first-child::after { content:'Pilih semua yang tampil'; text-transform:none; letter-spacing:0; font-size:11px; font-weight:400; }
  .layer-table tbody tr { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:0 8px; padding:11px 14px; border-bottom:1px solid #e3ebef; }
  .layer-table td { display:block; border:0; padding:0; min-width:0; }
  .layer-table td:first-child { padding-top:9px; }
  .layer-table td:nth-child(3) { padding-top:6px; font-size:12px; }
  .layer-table td:nth-child(4) { grid-column:2/4; }
  .layer-table .layer-select { width:100%; }
  .layer-name { font-size:12px; }
  .layer-appearance { width:100%; padding:6px 5px 1px 0; gap:8px; }
  .layer-icon-preview { width:40px; height:40px; }
  .appearance-copy { flex-direction:row; gap:8px; align-items:center; }
  .appearance-copy strong { font-size:11px; }
  .appearance-copy small { font-size:10px; }
  .layer-table-wrap { max-height:510px; }
  .detail-card { padding:20px; }
  .detail-symbol,.detail-symbol img { width:82px; height:82px; }
  #icon-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .catalog-icon img { width:66px; height:66px; }
  .catalog-icon span { font-size:10px; }
  .package-group { padding:12px; }
  .package-group .package-group-toggle { font-size:12px; }
  .package-group .package-group-hint { min-height:0; font-size:10px; line-height:1.5; }
  .package-group .package-group-count { font-size:23px; }
}
.icon-catalog-trigger { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:14px 0; margin-bottom:17px; background:transparent; border:0; border-bottom:1px solid #dce6ec; color:#34586e; cursor:pointer; text-align:left; font:inherit; font-size:12px; }
.icon-catalog-trigger span { font-size:10px; color:#778f9f; }
.icon-dialog { width:min(640px,calc(100vw - 32px)); max-height:88vh; margin:auto; border:1px solid #d9e3e9; border-radius:18px; padding:26px; background:#f8fafb; color:#2c485b; box-shadow:0 20px 100px #081d3d40; }
.icon-dialog::backdrop { background:#152d4466; backdrop-filter:blur(4px); }
.icon-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.icon-dialog-header h2 { font-size:22px; margin:8px 0 0; font-weight:600; }
.icon-dialog-header button { border:1px solid #d6e1e7; background:#fff; color:#4d6777; border-radius:50%; width:34px; height:34px; font-size:24px; cursor:pointer; }
.icon-dialog-note { font-size:12px; line-height:1.8; color:#607989; margin:14px 0 10px; }
.icon-dialog #icon-catalog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.icon-dialog .catalog-icon { padding:12px 5px; border-radius:11px; }
.icon-dialog .catalog-icon img { width:80px; height:80px; }
.icon-dialog .catalog-icon span { font-size:11px; font-weight:500; }
@media(max-width:1120px) { .icon-catalog-trigger { grid-column:1/-1; } }
@media(max-width:700px) { .icon-dialog { padding:18px; } .icon-dialog-header h2 { font-size:19px; } .icon-dialog #icon-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .icon-dialog .catalog-icon img { width:66px; height:66px; } .icon-dialog .catalog-icon { padding:9px 2px; } .icon-dialog .catalog-icon span { font-size:10px; } }

.mobile-batch-settings { margin-top:19px; padding:17px; background:#f7f9fa; border:1px solid #dfe7eb; border-radius:9px; }
.batch-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; border:0; min-width:0; }
.batch-choices legend { padding:0; margin-bottom:11px; color:#435e70; font-size:12px; font-weight:600; }
.batch-option { display:flex; align-items:flex-start; gap:9px; min-width:0; padding:13px; background:#fff; border:1px solid #dce5ea; border-radius:7px; cursor:pointer; }
.batch-option:has(input:checked) { border-color:#8ba7b7; background:#eef4f7; }
.batch-option:has(input:focus-visible) { outline:2px solid #9d8759; outline-offset:2px; }
.batch-option input { width:14px; height:14px; margin:3px 0 0; accent-color:#3f6b82; flex-shrink:0; }
.batch-option strong { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#35556b; font-size:12px; font-weight:600; line-height:1.6; }
.batch-option em { font-style:normal; font-size:9px; font-weight:500; color:#7b6742; background:#eee8da; border-radius:3px; padding:1px 5px; }
.batch-option small { display:block; margin-top:4px; color:#667d8a; font-size:11px; line-height:1.65; }
.batch-mode-note { margin-top:12px; color:#617784; font-size:12px; line-height:1.8; }
.app-version { display:inline-block; margin-left:6px; font-size:10px; color:#5f7583; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media(max-width:700px) {
  .mobile-batch-settings { padding:14px; }
  .batch-choices { grid-template-columns:1fr; gap:8px; }
  .batch-option { padding:12px; }
}

.folder-preview { margin-top:19px; padding:16px; border:1px solid #dce5ea; border-radius:9px; background:#fafcfd; }
.folder-preview>summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#35556b; font-size:13px; cursor:pointer; list-style:none; }
.folder-preview>summary::-webkit-details-marker,.folder-group>summary::-webkit-details-marker { display:none; }
.folder-preview>summary::before,.folder-group>summary::before { content:'›'; width:12px; flex-shrink:0; font-size:18px; font-weight:400; line-height:1; }
.folder-preview[open]>summary::before,.folder-group[open]>summary::before { transform:rotate(90deg); }
.folder-preview>summary span { margin-left:auto; color:#617787; font-size:11px; font-weight:400; }
#folder-preview-mode,.folder-preview-help,#folder-preview-empty { margin:12px 0; color:#5b7282; font-size:12px; line-height:1.8; }
.folder-preview-help { margin-bottom:0; padding-top:10px; border-top:1px solid #e2e9ed; }
.folder-preview-tree { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px; max-height:390px; overflow:auto; scrollbar-gutter:stable; }
.folder-group { min-width:0; border:1px solid #e0e8ed; border-radius:7px; background:#fff; }
.folder-group:only-child { grid-column:1/-1; }
.folder-group>summary { display:flex; align-items:center; gap:7px; min-height:43px; padding:10px; color:#37566b; cursor:pointer; list-style:none; }
.folder-group>summary strong { font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.folder-group>summary span { margin-left:auto; font-size:11px; color:#647b89; text-align:right; flex-shrink:0; }
.folder-group[open]>summary { border-bottom:1px solid #e6ecef; }
.folder-geometry { margin:11px 12px 13px 23px; padding-left:11px; border-left:1px solid #d8e3e9; }
.folder-geometry-label { display:block; color:#496b7e; font-size:12px; font-weight:600; }
.folder-layer-list { margin:6px 0 0; padding:0; list-style:none; }
.folder-layer-list li { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:4px 0; color:#5a7181; font-size:11px; line-height:1.6; }
.folder-layer-list li span { min-width:0; overflow-wrap:anywhere; }
.folder-layer-list small { flex-shrink:0; color:#6a7f8d; font-size:11px; }
.folder-preview summary:focus-visible { outline:2px solid #9d8759; outline-offset:3px; border-radius:3px; }
@media(max-width:700px) {
  .folder-preview { padding:13px; }
  .folder-preview>summary span { width:100%; margin-left:20px; }
  .folder-preview-tree { grid-template-columns:1fr; }
  .folder-group>summary { flex-wrap:wrap; }
  .folder-group>summary span { font-size:11px; }
  .folder-geometry { margin-left:19px; }
}