.nomi-project-tech-stack-editor{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1e1e1e;background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:24px;max-width:900px}
.nomi-project-tech-stack-editor *{box-sizing:border-box}
.nomi-editor-heading,.nomi-generated-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #e5e5e5;padding-bottom:16px;margin-bottom:22px}
.nomi-editor-title,.nomi-generated-title{font-size:20px;font-weight:600;color:#1e1e1e}
.nomi-editor-subtitle{font-size:13px;color:#646970;margin-top:4px}
.nomi-role-field{margin-bottom:24px}
.nomi-project-tech-stack-editor .components-base-control__label,.nomi-project-tech-stack-editor .components-input-control__label{color:#1e1e1e!important;font-weight:600!important}
.nomi-stack-section{border:1px solid #dcdcde;border-radius:8px;padding:18px;margin-top:16px;background:#fff}
.nomi-section-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.nomi-section-title{font-size:16px;font-weight:600;color:#1e1e1e}
.nomi-section-help{font-size:12px;color:#757575;margin-top:2px}
.nomi-section-header .components-toggle-control{margin:0}
.nomi-tool-picker{position:relative}
.nomi-tool-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.nomi-tool-search-row .components-base-control{margin-bottom:0!important}
.nomi-add-button{height:40px;white-space:nowrap}
.nomi-results{position:absolute;z-index:20;left:0;right:0;top:72px;background:#fff;border:1px solid #c3c4c7;border-radius:6px;box-shadow:0 5px 18px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.nomi-result{width:100%;display:flex;align-items:center;gap:10px;border:0;border-bottom:1px solid #eee;background:#fff;padding:10px 12px;text-align:left;cursor:pointer;color:#1e1e1e}
.nomi-result:hover{background:#f6f7f7}
.nomi-result:disabled{opacity:.55;cursor:default}
.nomi-result-icon,.nomi-chip-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 28px}
.nomi-result-icon svg,.nomi-chip-icon svg,.nomi-inline-icon svg{width:100%;height:100%;display:block}
.nomi-result-label{flex:1;font-size:14px}
.nomi-result-action{font-size:12px;color:#50575e}
.nomi-no-results{padding:14px;color:#646970}
.nomi-selected-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:38px}
.nomi-selected-tool{display:inline-flex;align-items:center;gap:8px;border:1px solid #dcdcde;border-radius:7px;background:#f6f7f7;padding:5px 7px 5px 8px;min-height:38px}
.nomi-chip-name{font-size:13px;color:#1e1e1e;white-space:nowrap}
.nomi-remove-button{min-width:24px!important;width:24px!important;height:24px!important;padding:0!important}
.nomi-empty-tools{font-size:13px;color:#757575;padding:6px 0}
.nomi-icon-fallback{font-size:20px;color:#757575}
.nomi-inline-icon{width:100%;height:100%;display:block}
.nomi-submit-row{display:flex;justify-content:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid #e5e5e5}
.nomi-submit-button{min-width:110px;justify-content:center}
.nomi-generated-card{background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:24px}
.nomi-generated-heading{margin-bottom:18px}
.nomi-edit-button{min-width:72px;justify-content:center}
.nomi-generated-view{padding:6px 0}
.nomi-generated-view .project-role__title,.nomi-generated-view .tech-used__title{color:#1e1e1e}
@media(max-width:700px){.nomi-tool-search-row{grid-template-columns:1fr}.nomi-results{top:110px}.nomi-project-tech-stack-editor{padding:16px}}
/* Front-end icon sizing: hard cap the entire icon item and the SVG. */
.project-tech-stack .tech-img > li.tech-img__container,
.project-tech-stack .tech-img > li.technology__icon,
.project-tech-stack .tech-img > li.tech-img__icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 48px !important;
    overflow: hidden !important;
}
.project-tech-stack .tech-stack-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    overflow: hidden !important;
}
.project-tech-stack .tech-stack-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    flex: 0 0 100% !important;
}

/* Generated editor preview: match the public 48px icon size and remain transparent. */
.nomi-generated-card {
    background: transparent !important;
}
.nomi-generated-view .tech-img > li.tech-img__container,
.nomi-generated-view .tech-img > li.technology__icon,
.nomi-generated-view .tech-img > li.tech-img__icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 48px !important;
    overflow: hidden !important;
}
.nomi-generated-view .tech-img > li > .nomi-inline-icon,
.nomi-generated-view .tech-img > li > .nomi-inline-icon svg {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
}

/* v3.0.5: generated preview mirrors the final project output */
.nomi-generated-preview,
.nomi-generated-card {
    background: transparent !important;
    box-shadow: none !important;
}
.nomi-generated-preview .tech-img,
.nomi-generated-card .tech-img,
.nomi-generated-preview ul.tech-img,
.nomi-generated-card ul.tech-img {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.nomi-generated-preview .tech-img > li,
.nomi-generated-card .tech-img > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nomi-generated-preview .tech-img img,
.nomi-generated-card .tech-img img,
.nomi-generated-preview .tech-img svg,
.nomi-generated-card .tech-img svg,
.nomi-generated-preview .tech-img__icon,
.nomi-generated-card .tech-img__icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    object-fit: contain !important;
}


/* v3.0.6: force generated preview tool icons into one horizontal row */
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img,
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img.tech-img--design,
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img.tech-img--code {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img > li,
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img > li.tech-img__container,
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img > li.technology__icon,
.nomi-project-tech-stack-editor .nomi-generated-card .nomi-generated-view ul.tech-img > li.tech-img__icon {
    display: flex !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}


/* v3.0.10: tighter desktop label column and mobile label spacing */
.project-tech-stack {
    --pts-label-width: 150px;
    --pts-column-gap: 22px;
    --pts-icon-size: 72px;
    --pts-icon-art: 52px;
}
.project-tech-stack .project-tech-row {
    display: grid !important;
    grid-template-columns: var(--pts-label-width) minmax(0, 1fr) !important;
    column-gap: var(--pts-column-gap) !important;
    align-items: center !important;
    margin: 0 0 56px !important;
    padding: 0 !important;
}
.project-tech-stack .project-tech-row:last-child { margin-bottom: 0 !important; }
.project-tech-stack .project-tech-row > .project-role__title,
.project-tech-stack .project-tech-row > .tech-used__title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}
.project-tech-stack .project-role__description { margin: 0 !important; padding: 0 !important; }
.project-tech-stack .project-role__description strong { font-weight: 700 !important; }
.project-tech-stack .tech-used { margin: 0 !important; padding: 0 !important; }
.project-tech-stack .tech-img {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.project-tech-stack .tech-img > li {
    box-sizing: border-box !important;
    width: var(--pts-icon-size) !important;
    height: var(--pts-icon-size) !important;
    min-width: var(--pts-icon-size) !important;
    max-width: var(--pts-icon-size) !important;
    min-height: var(--pts-icon-size) !important;
    max-height: var(--pts-icon-size) !important;
    flex: 0 0 var(--pts-icon-size) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.project-tech-stack .tech-img--design > li {
    background: transparent !important;
}
.project-tech-stack .tech-img--code > li {
    background: rgba(0, 0, 0, 0.035) !important;
}
.project-tech-stack .tech-img--code > li.tech-tool--html5 { background: rgba(227, 76, 38, 0.075) !important; }
.project-tech-stack .tech-img--code > li.tech-tool--css3 { background: rgba(38, 77, 228, 0.075) !important; }
.project-tech-stack .tech-img--code > li.tech-tool--jquery { background: rgba(7, 105, 173, 0.065) !important; }
.project-tech-stack .tech-img > li > .tech-img__icon,
.project-tech-stack .tech-img > li > .tech-stack-icon,
.project-tech-stack .tech-img > li > .nomi-tech-icon-box {
    width: var(--pts-icon-art) !important;
    height: var(--pts-icon-art) !important;
    min-width: var(--pts-icon-art) !important;
    max-width: var(--pts-icon-art) !important;
    min-height: var(--pts-icon-art) !important;
    max-height: var(--pts-icon-art) !important;
    flex: 0 0 var(--pts-icon-art) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.project-tech-stack .tech-img > li > span svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
.project-tech-stack .tech-img--design > li > span svg { width: 58px !important; height: 58px !important; }
.project-tech-stack .tech-img--code > li > span svg { width: 52px !important; height: 52px !important; }

/* Keep the editor's generated preview visually identical to the public block. */
.nomi-generated-view .project-tech-stack { padding: 0 !important; }
.nomi-generated-view .project-tech-row {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    column-gap: 25px !important;
    align-items: center !important;
    margin: 0 0 56px !important;
}
.nomi-generated-view .project-tech-row > .project-role__title,
.nomi-generated-view .project-tech-row > .tech-used__title { margin: 0 !important; }
.nomi-generated-view .project-tech-row .tech-img {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nomi-generated-view .project-tech-row .tech-img > li {
    width: 72px !important; height: 72px !important; min-width: 72px !important; max-width: 72px !important;
    min-height: 72px !important; max-height: 72px !important; flex: 0 0 72px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; border-radius: 14px !important; overflow: hidden !important;
}
.nomi-generated-view .tech-img--code > li.tech-tool--html5 { background: rgba(227,76,38,.075) !important; }
.nomi-generated-view .tech-img--code > li.tech-tool--css3 { background: rgba(38,77,228,.075) !important; }
.nomi-generated-view .tech-img--code > li.tech-tool--jquery { background: rgba(7,105,173,.065) !important; }
.nomi-generated-view .project-tech-row .tech-img > li > .nomi-inline-icon { width: 52px !important; height: 52px !important; }
.nomi-generated-view .project-tech-row .tech-img--design > li > .nomi-inline-icon { width: 58px !important; height: 58px !important; }
.nomi-generated-view .project-tech-row .tech-img > li > .nomi-inline-icon svg { width: 100% !important; height: 100% !important; object-fit: contain !important; }

@media (max-width: 700px) {
    .project-tech-stack { --pts-label-width: 120px; --pts-column-gap: 18px; --pts-icon-size: 64px; }
    .project-tech-stack .project-tech-row,
    .nomi-generated-view .project-tech-row { grid-template-columns: var(--pts-label-width) minmax(0,1fr) !important; column-gap: var(--pts-column-gap) !important; }
    .project-tech-stack .tech-img > li,
    .nomi-generated-view .project-tech-row .tech-img > li { width: 64px !important; height: 64px !important; min-width: 64px !important; max-width: 64px !important; min-height: 64px !important; max-height: 64px !important; flex-basis: 64px !important; }
}
@media (max-width: 480px) {
    .project-tech-stack { --pts-label-width: 1fr; }
    .project-tech-stack .project-tech-row,
    .nomi-generated-view .project-tech-row { grid-template-columns: 1fr !important; row-gap: 16px !important; }
    .project-tech-stack .project-tech-row,
    .nomi-generated-view .project-tech-row { margin-bottom: 34px !important; }
    .project-tech-stack .project-tech-row:last-child,
    .nomi-generated-view .project-tech-row:last-child { margin-bottom: 0 !important; }
    .project-tech-stack .project-tech-row > .project-role__title,
    .project-tech-stack .project-tech-row > .tech-used__title,
    .nomi-generated-view .project-tech-row > .project-role__title,
    .nomi-generated-view .project-tech-row > .tech-used__title { white-space: normal !important; }
}