.namecards-topbar { margin-bottom: 12px; }
.namecards-workspace { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(430px, 520px); }
.namecards-main-panel,
.namecards-side-panel { min-width: 0; }
.namecards-side-panel { display: grid; gap: 12px; max-width: none; min-width: 0; position: sticky; top: 72px; width: 100%; }
.namecards-section-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.namecards-section-head h2 { font-size: 19px; margin: 0; }
.namecards-section-head.compact { margin-bottom: 8px; }
.namecards-profile-search { margin: 0; }
.namecards-profile-search input { min-width: min(340px, 100%); }

.namecards-create-list { align-items: end; background: #f7fafc; border: 1px solid #dfe7ef; border-radius: 12px; display: grid; gap: 10px; grid-template-columns: auto minmax(180px, 1fr) auto; margin-bottom: 12px; padding: 10px; }
.namecards-create-list label { color: #52606d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.namecards-worklist-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.namecards-worklist-tile { align-items: center; background: #ffffff; border: 1px solid #d7dde3; border-radius: 14px; color: #172a3d; display: grid; gap: 10px; grid-template-columns: 42px minmax(0, 1fr); min-height: 68px; padding: 12px; text-decoration: none; }
.namecards-worklist-tile:hover { border-color: #1769aa; box-shadow: 0 10px 26px rgba(23, 105, 170, .12); text-decoration: none; transform: translateY(-1px); }
.namecards-worklist-tile strong,
.namecards-worklist-tile small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.namecards-worklist-tile small { color: #697586; margin-top: 2px; }

.namecard-job-strip { background: #ffffff; border: 1px solid #d7dde3; border-radius: 12px; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; padding: 10px; }
.namecard-job-strip label { color: #52606d; display: grid; font-size: 12px; font-weight: 800; gap: 4px; text-transform: uppercase; }
.namecard-job-strip input { min-width: 0; width: 100%; }

.namecard-actions { align-items: center; background: #ffffff; border: 1px solid #d7dde3; border-radius: 12px; display: grid; gap: 10px; grid-template-columns: auto 1fr auto auto; margin-bottom: 10px; padding: 10px; position: sticky; top: 62px; z-index: 8; }
.namecard-actions label { color: #384655; font-size: 13px; font-weight: 800; }
.namecard-actions span { color: #697586; font-size: 13px; }
.namecard-profile-list { border: 1px solid #d7dde3; border-radius: 12px; overflow: hidden; }
.namecard-profile-row { align-items: center; background: #ffffff; border-bottom: 1px solid #e1e7ec; display: grid; gap: 14px; grid-template-columns: 24px minmax(220px, 1.2fr) minmax(120px, .7fr) minmax(140px, .8fr) 28px; padding: 10px 12px; }
.namecard-profile-row:last-child { border-bottom: 0; }
.namecard-profile-row:hover { background: #f7fafc; }
.namecard-profile-name { display: grid; gap: 3px; }
.namecard-profile-name small { color: #697586; }
.namecard-profile-row > span:not(.namecard-profile-name) { color: #52606d; font-size: 13px; }

.namecards-watermark-panel,
.namecard-editor-panel,
.namecards-upload-panel { background: #ffffff; border: 1px solid #d7dde3; border-radius: 14px; padding: 12px; }
.namecards-watermark-grid { border: 1px solid #e1e7ec; border-radius: 12px; display: grid; max-height: 230px; overflow: auto; }
.namecards-watermark-tile { align-items: center; background: #ffffff; border-bottom: 1px solid #e1e7ec; display: grid; gap: 8px; grid-template-columns: 1fr 30px; min-width: 0; padding: 6px 8px; position: relative; }
.namecards-watermark-tile:not(:has(.watermark-actions)) { grid-template-columns: 1fr; }
.namecards-watermark-tile:last-child { border-bottom: 0; }
.namecards-watermark-tile label { align-items: center; cursor: pointer; display: grid; gap: 8px; grid-template-columns: 44px minmax(0, 1fr) auto; min-width: 0; }
.namecards-watermark-tile input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.namecards-watermark-tile:has(input:checked) { background: #eaf5ff; border-color: #1769aa; box-shadow: inset 0 0 0 1px #1769aa; }
.watermark-thumb { align-items: center; background: #ffffff; border: 1px dashed #cbd5df; border-radius: 8px; color: #697586; display: flex; font-size: 11px; font-weight: 800; height: 32px; justify-content: center; overflow: hidden; width: 44px; }
.watermark-thumb img { height: 100%; object-fit: contain; width: 100%; }
.namecards-watermark-tile strong { color: #263747; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.namecards-watermark-tile small { background: #dff1ff; border-radius: 999px; color: #1769aa; font-size: 10px; font-weight: 900; padding: 2px 6px; text-transform: uppercase; }
.watermark-actions { justify-self: end; position: relative; right: auto; top: auto; }
.watermark-actions summary { background: rgba(255, 255, 255, .92); border: 1px solid #d7dde3; box-shadow: 0 4px 10px rgba(23, 42, 61, .08); height: 26px; width: 26px; }
.watermark-actions[open] { grid-column: 1 / -1; justify-self: stretch; }
.watermark-actions[open] summary { position: absolute; right: 8px; top: 8px; }
.watermark-actions .menu-panel { min-width: 210px; }
.watermark-actions[open] .menu-panel { box-shadow: none; margin-top: 6px; min-width: 0; position: static; width: auto; }
.watermark-actions .menu-panel form { display: grid; gap: 6px; }
.watermark-actions .menu-panel input[type="text"],
.watermark-actions .menu-panel input[type="file"] { min-width: 0; width: 100%; }

.namecards-main-panel .row-actions .menu-panel { box-shadow: none; margin-top: 6px; min-width: 0; position: static; width: auto; }
.namecards-main-panel .row-actions[open] { grid-column: 2 / -1; justify-self: stretch; text-align: left; }

.namecard-editor-panel { display: grid; gap: 10px; }
.namecard-editor-panel .namecards-section-head { align-items: start; }
.editor-hint { color: #697586; display: block; font-size: 12px; font-weight: 700; line-height: 1.3; margin-top: 4px; text-transform: none; }
.namecard-reset-all { min-height: 34px; white-space: nowrap; }
.autosave-status { background: #eaf5ff; border: 1px solid #cfe8fb; border-radius: 999px; color: #1769aa; display: inline-flex; font-size: 11px; font-weight: 900; margin-top: 4px; padding: 3px 8px; text-transform: uppercase; }
.autosave-status.is-saving { background: #fff7e6; border-color: #f1d398; color: #8a5b00; }
.autosave-status.is-error { background: #fff1f1; border-color: #f3b5b5; color: #a33636; }
.namecard-preview-shell { background: linear-gradient(135deg, #edf3f8, #f9fbfd); border: 1px solid #dce4ec; border-radius: 14px; display: grid; max-height: 270px; min-height: 220px; overflow: hidden; padding: 12px; place-items: center; position: sticky; top: 72px; z-index: 2; }
.namecard-preview-card { --scale: 3.2px; background: #ffffff; border: 2px solid #172a3d; border-radius: 3px; box-shadow: 0 14px 34px rgba(23, 42, 61, .16); height: calc(var(--card-height, 63) * var(--scale)); overflow: hidden; position: relative; width: calc(var(--card-width, 98) * var(--scale)); }
.namecard-preview-watermark { height: calc(var(--watermark-height, 55) * var(--scale)); left: calc(var(--watermark-x, 35) * var(--scale)); object-fit: contain; opacity: var(--watermark-opacity, .1); position: absolute; top: calc((var(--card-height, 63) - var(--watermark-y, 5) - var(--watermark-height, 55)) * var(--scale)); width: calc(var(--watermark-width, 34) * var(--scale)); }
.namecard-preview-name { color: #172a3d; font-size: calc(var(--title-font-size, 17) * .95px); left: calc(var(--name-x, 6) * var(--scale)); line-height: 1.1; max-width: 70%; overflow: hidden; position: absolute; text-overflow: ellipsis; top: calc((var(--card-height, 63) - var(--name-y, 53) - 4) * var(--scale)); white-space: nowrap; }
.namecard-preview-details { color: #263747; display: grid; font-size: calc(var(--body-font-size, 9) * .95px); gap: 3px; left: calc(var(--details-x, 6) * var(--scale)); line-height: 1.15; max-width: calc((var(--qr-x, 62) - var(--details-x, 6) - 3) * var(--scale)); position: absolute; top: calc((var(--card-height, 63) - var(--details-y, 43) - 3) * var(--scale)); }
.namecard-preview-details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.namecard-preview-details em { color: #697586; font-style: normal; }
.namecard-preview-qr { align-items: center; background: repeating-linear-gradient(45deg, #172a3d, #172a3d 4px, #ffffff 4px, #ffffff 8px); border: 5px solid #ffffff; box-shadow: 0 0 0 1px #d7dde3; color: transparent; display: flex; font-size: 0; height: calc(var(--qr-size, 31) * var(--scale)); justify-content: center; left: calc(var(--qr-x, 62) * var(--scale)); position: absolute; top: calc((var(--card-height, 63) - var(--qr-y, 5) - var(--qr-size, 31)) * var(--scale)); width: calc(var(--qr-size, 31) * var(--scale)); }
.namecard-preview-caption { color: #172a3d; font-size: calc(var(--caption-font-size, 6.5) * .95px); left: calc(var(--qr-x, 62) * var(--scale)); position: absolute; text-align: center; top: calc((var(--card-height, 63) - 4) * var(--scale)); width: calc(var(--qr-size, 31) * var(--scale)); }

.namecard-control-groups { display: grid; gap: 7px; }
.namecard-control-group { border: 1px solid #dfe7ef; border-radius: 12px; margin: 0; overflow: hidden; }
.namecard-control-group > summary { align-items: center; background: #f7fafc; color: #384655; cursor: pointer; display: grid; font-size: 12px; font-weight: 900; gap: 8px; grid-template-columns: auto 1fr auto; list-style: none; padding: 8px 9px; text-transform: uppercase; }
.namecard-control-group > summary::-webkit-details-marker { display: none; }
.namecard-control-group > summary::before { content: ">"; font-size: 10px; }
.namecard-control-group[open] > summary::before { content: "v"; }
.namecard-control-group > summary span { align-items: center; display: flex; gap: 6px; }
.namecard-control-group label { align-items: center; color: #52606d; display: grid; font-size: 12px; font-weight: 700; gap: 6px; grid-template-columns: 70px minmax(0, 1fr) 38px auto; padding: 6px 8px; }
.namecard-control-group label + label { border-top: 1px solid #edf1f5; }
.namecard-control-groups input[type="range"] { width: 100%; }
.namecard-control-groups output { color: #172a3d; font-variant-numeric: tabular-nums; text-align: right; }
.mini-reset { background: #ffffff; border: 1px solid #d7dde3; border-radius: 999px; color: #52606d; cursor: pointer; font-size: 10px; font-weight: 800; line-height: 1; padding: 5px 7px; text-transform: uppercase; }
.mini-reset:hover { border-color: #1769aa; color: #1769aa; }

.namecards-upload-panel { margin-top: 14px; }
.namecards-upload-form { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(180px, .8fr) minmax(160px, 1fr) minmax(160px, 1fr) auto; }
.compact-upload { border-top: 1px solid #e1e7ec; grid-template-columns: minmax(115px, 1fr) minmax(110px, 1fr) auto; margin-top: 8px; padding-top: 8px; }
.compact-upload input[type="text"],
.compact-upload input[type="file"] { min-width: 0; }
.compact-check { align-items: center; color: #52606d; display: flex; font-size: 12px; font-weight: 800; gap: 5px; white-space: nowrap; }
.namecards-upload-form h2 { font-size: 18px; margin: 0; }
.empty-state { color: #697586; margin: 0; padding: 18px; }

@media (max-width: 1120px) {
    .namecards-workspace { grid-template-columns: 1fr; }
    .namecards-side-panel { position: static; }
    .namecard-actions { position: static; }
}

@media (max-width: 720px) {
    .namecards-section-head,
    .namecards-create-list,
    .namecard-job-strip,
    .namecard-actions,
    .namecards-upload-form { align-items: stretch; display: grid; grid-template-columns: 1fr; }
    .namecards-watermark-grid { grid-template-columns: 1fr; }
    .namecard-profile-row { grid-template-columns: 24px minmax(0, 1fr) 28px; }
    .namecard-profile-row > span:not(.namecard-profile-name) { grid-column: 2; }
    .namecard-profile-row .row-actions { grid-column: 3; grid-row: 1; }
    .namecard-preview-shell { min-height: 200px; }
    .namecard-preview-card { --scale: 2.9px; }
    .namecard-control-group label { grid-template-columns: 62px minmax(0, 1fr) 34px auto; }
}