.design-frame-page { background-color: #eef3f8; }
.design-frame-page [hidden] { display: none !important; }
.design-frame-main { max-width: 1600px; padding: 20px; }
.design-frame-workspace { grid-template-columns: minmax(280px,360px) minmax(0,1fr); align-items: start; }
.design-frame-panel { border-radius: 8px; background: #fff; box-shadow: none; }
.design-frame-library-panel { grid-row: span 2; max-height: calc(100vh - 135px); overflow: auto; position: sticky; top: 100px; scrollbar-gutter: stable; }
.design-frame-editor-panel,.design-frame-result-panel { grid-column: 2; }
.design-frame-page .design-tool-section { border: 0; border-top: 1px solid #dbe5f0; border-radius: 0; background: transparent; padding: 14px 0 0; }
.design-frame-page .design-tool-title { flex-wrap: wrap; gap: 8px; }
.design-frame-page .design-tool-title h2,.design-community-section h2 { font-size: 1rem; }
.design-frame-page button { min-height: 40px; border-radius: 8px; }
.design-frame-page input:not([type=checkbox]):not([type=range]):not([type=color]),.design-frame-page select,.design-frame-page textarea { min-width: 0; max-width: 100%; border: 1px solid #cbd7e6; border-radius: 8px; padding: 9px; background: #fff; color: #172238; }
.design-frame-page label { min-width: 0; }
.design-frame-page select.design-font-select-native { width: 1px; height: 1px; padding: 0; border: 0; left: 0; top: 0; }
.design-frame-page button:focus-visible,.design-frame-page input:focus-visible,.design-frame-page canvas:focus-visible,.design-frame-page select:focus-visible,.design-frame-page summary:focus-visible { outline: 3px solid #8eb8f2; outline-offset: 2px; }
.design-frame-page input[type=checkbox] { width: 18px; height: 18px; accent-color: #256fd9; vertical-align: middle; }
.design-frame-page .design-frame-library-grid,.design-frame-page .design-icon-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.design-frame-page .design-frame-template,.design-frame-page .design-icon-template { padding: 5px; border-radius: 8px; box-shadow: none; }
.design-frame-page .design-frame-template span,.design-frame-page .design-icon-template span { font-size: .76rem; overflow-wrap: anywhere; }
.design-community-section { display: grid; gap: 10px; min-width: 0; }
.design-community-section p,.design-editor-hint,.design-frame-result-panel>p { margin: 0; color: #526277; font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
.design-community-section button,.design-editor-settings button,.design-object-settings button,.design-layer-row button { border: 1px solid #cbd9ea; background: #f5f8fd; color: #1959ac; padding: 7px 10px; font: inherit; cursor: pointer; }
.design-community-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.design-community-filters label,.design-editor-settings>label,.design-object-settings>label { display: grid; gap: 5px; font-size: .83rem; font-weight: 650; }
.design-community-search-row { grid-column: 1/-1; display: flex; gap: 8px; align-items: end; min-width: 0; }
.design-community-query { flex: 1; }
.design-community-query input { width: 100%; height: 40px; box-sizing: border-box; }
.design-community-search-row button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; width: auto; height: 40px; padding: 0 12px; font-size: .83rem; font-weight: 600; white-space: nowrap; box-shadow: none; }
.design-community-search-row button svg { flex: 0 0 16px; }
.design-community-search-row button:hover { background: #eaf2ff; border-color: #8eb8f2; }
.design-community-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.design-community-card { min-width: 0; display: grid; align-content: start; gap: 5px; overflow-wrap: anywhere; }
.design-community-card>button { display: grid; gap: 5px; text-align: left; background: #fff; padding: 7px; }
.design-community-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: repeating-conic-gradient(#f0f3f7 0% 25%,#fff 0% 50%) 50%/16px 16px; }
.design-community-card strong { font-size: .8rem; color: #172238; }
.design-community-card small,.design-community-card p { font-size: .74rem; line-height: 1.4; margin: 0; }
.design-community-status { color: #1959ac; font-weight: 700; }
.design-community-card-actions,.design-community-pages { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.design-editor-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.design-editor-toolbar button { width: auto; flex: 1 1 100px; }
.design-editor-jump { display: none; }
.design-editor-settings { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #dbe5f0; }
.design-editor-settings>label:has(input[type=checkbox]) { display: block; }
.design-avatar-field { display: grid; gap: 6px; flex: 1 1 300px; min-width: 0; }
.design-avatar-label { font-size: .83rem; font-weight: 650; }
.design-avatar-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.design-avatar-row .design-avatar-picker { width: auto; min-width: 0; flex: 1; min-height: 52px; border-color: #cbd7e6; border-radius: 8px; gap: 10px; }
.design-avatar-picker:hover { border-color: #256fd9; background: #f8fbff; }
.design-avatar-picker .file-picker-icon { align-self: stretch; min-height: 52px; }
.design-avatar-copy { display: grid; gap: 3px; min-width: 0; padding: 8px 12px 8px 0; line-height: 1.3; }
.design-avatar-action { color: #1959ac; font-size: .85rem; font-weight: 650; }
.design-avatar-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #526277; font-size: .75rem; }
.design-frame-page .design-avatar-picker input[type=file] { width: 100%; max-width: none; height: 100%; border: 0; border-radius: 0; padding: 0; }
.design-avatar-row #designClearAvatar { width: auto; flex: 0 0 auto; font-size: .8rem; white-space: nowrap; box-shadow: none; }
.design-avatar-row #designClearAvatar:disabled { opacity: .5; cursor: not-allowed; }
.design-avatar-status { margin: 0; color: #526277; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.design-avatar-status[data-state=error] { color: #b42318; }
.design-avatar-picker:has(input[aria-invalid=true]) { border-color: #b42318; }
.design-frame-page .design-canvas-shell { width: min(100%,650px); margin: 0 auto; border-radius: 8px; }
.design-frame-page canvas { touch-action: none; }
.design-object-settings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.design-object-settings>label { grid-column: span 2; grid-template-columns: auto minmax(60px,1fr) 42px; align-items: center; }
.design-layers { border-top: 1px solid #dbe5f0; padding-top: 12px; }
.design-layers summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
#designLayers { display: grid; gap: 5px; max-height: 240px; overflow: auto; font-size: .85rem; }
.design-layer-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 5px; align-items: center; border-radius: 8px; padding: 3px; }
.design-layer-row.is-selected { background: #e4efff; }
.design-layer-row>button:first-child,.design-layer-row>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.design-frame-result-panel { grid-template-columns: minmax(180px,.7fr) minmax(0,1fr); }
.design-frame-result-panel .design-frame-panel-head,.design-frame-result-panel .design-result-actions,.design-frame-result-panel>p { grid-column: 1/-1; }
.design-frame-result-panel .design-result-wrap { min-height: 0; align-self: start; border-radius: 8px; }
.design-frame-result-panel .design-result-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.design-contribution-dialog { width: min(560px,calc(100vw - 24px)); max-height: 90dvh; padding: 20px; overflow-y: auto; border: 1px solid #cbd9ea; border-radius: 8px; color: #172238; }
.design-contribution-dialog::backdrop { background: #15243b99; }
.design-contribution-dialog form { display: grid; gap: 12px; }
.design-contribution-dialog p,.design-contribution-dialog small { margin: 0; line-height: 1.5; }
.design-contribution-dialog label:not(:has(input[type=checkbox])) { display: grid; gap: 5px; font-weight: 650; }
#designContributionPreview { width: 140px; height: 140px; object-fit: contain; background: repeating-conic-gradient(#eef3f8 0% 25%,#fff 0% 50%) 50%/16px 16px; }
.admin-design-community { padding: 16px 0; border-top: 1px solid #dbe5f0; border-bottom: 1px solid #dbe5f0; margin-bottom: 20px; }
.admin-design-community h2 small { font: inherit; font-size: .8em; }
.admin-design-community-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 14px 0; }
.admin-design-community-filters label { flex: 1 1 160px; }
.admin-design-community-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.admin-design-community-grid article { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid #dbe5f0; border-radius: 8px; overflow-wrap: anywhere; }
.admin-design-community-grid img { width: 100%; height: 140px; object-fit: contain; background: repeating-conic-gradient(#eef3f8 0% 25%,#fff 0% 50%) 50%/16px 16px; }
.admin-design-community-grid form { display: grid; gap: 10px; margin-top: 10px; }
.admin-design-community-grid input,.admin-design-community-grid select,.admin-design-community-grid textarea { min-width: 0; width: 100%; }
.admin-design-community-pages { display: flex; gap: 15px; justify-content: center; align-items: center; margin-top: 15px; }
@media(max-width:1100px) {
    .design-frame-workspace { grid-template-columns: minmax(260px,310px) minmax(0,1fr); }
    .design-object-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .design-frame-result-panel { grid-template-columns: minmax(0,1fr); }
    .design-frame-result-panel .design-result-wrap { max-width: 240px; width: 100%; margin: auto; }
    .design-frame-result-panel .design-result-actions { grid-template-columns: 1fr; }
    .admin-design-community-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
    .design-frame-main { padding: 12px; }
    .design-editor-jump { display: inline-block; padding-top: 8px; color: #1959ac; }
    .design-frame-editor-panel,#designFrameCanvas { scroll-margin-top: 160px; }
    .design-frame-workspace { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .design-frame-library-panel { grid-row: auto; position: static; max-height: 65vh; }
    .design-frame-editor-panel,.design-frame-result-panel { grid-column: 1; padding: 12px; }
    .design-editor-settings { gap: 10px; }
    .design-avatar-field { flex-basis: 100%; }
    .design-avatar-row { flex-wrap: wrap; }
    .design-avatar-row .design-avatar-picker { flex-basis: 100%; }
    .design-object-settings button { font-size: .8rem; padding: 6px; }
    .design-contribution-dialog { padding: 14px; }
    .admin-design-community-grid { grid-template-columns: minmax(0,1fr); }
}