* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-body: #0f0f1a;
    --bg-toolbar: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --bg-preview: #12121f;
    --bg-preview-grad: radial-gradient(circle at 50% 50%, #1a1a30 0%, #0f0f1a 100%);
    --bg-panel: rgba(255,255,255,0.03);
    --bg-popup: #1a1a2e;
    --bg-input: #16213e;
    --border: #242446;
    --border-popup: #2a2a4a;
    --text-primary: #fff;
    --text-secondary: #a6abc9;
    --text-muted: #666;
    --bg-section: #16213e;
    --bg-sheet: #10101a;
    --bg-sheet-border: #23233b;
}

body.light {
    --bg-body: #f0f2f5;
    --bg-toolbar: linear-gradient(135deg, #ffffff 0%, #f0f2f5 50%, #e4e7eb 100%);
    --bg-preview: #e8eaed;
    --bg-preview-grad: radial-gradient(circle at 50% 50%, #f5f5f5 0%, #e0e0e0 100%);
    --bg-panel: rgba(0,0,0,0.03);
    --bg-popup: #ffffff;
    --bg-input: #f5f6f8;
    --border: #d0d5dd;
    --border-popup: #e0e0e0;
    --text-primary: #1a1a2e;
    --text-secondary: #555;
    --text-muted: #999;
    --bg-section: #f0f2f5;
    --bg-sheet: #f5f5f5;
    --bg-sheet-border: #d0d5dd;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
    transition: background 0.3s, color 0.3s;
}

/* ========== TOOLBAR ========== */
.toolbar {
    background: var(--bg-toolbar);
    padding: 10px 20px;
    border-bottom: 2px solid #e94560;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 100;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-mini {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #e94560, #ff6b6b);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}

.toolbar-title {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(to right, #e94560, #ff6b6b, #ffd93d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}

.toolbar-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.theme-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    margin-left: 8px;
}
.theme-toggle:hover { border-color: #e94560; }

.tb-btn {
    padding: 7px 14px;
    border: 1px solid var(--border-popup);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tb-btn:hover {
    border-color: #e94560;
    color: #fff;
    background: #1a2a4e;
    transform: translateY(-1px);
}

.tb-btn.tb-action {
    background: linear-gradient(135deg, #0f3460, #16213e);
    border-color: #e94560;
    color: #fff;
}

.tb-btn.tb-action:hover {
    box-shadow: 0 3px 12px rgba(233, 69, 96, 0.3);
}

.tb-btn.tb-action2 {
    background: linear-gradient(135deg, #533483, #7b2ff7);
    border-color: #7b2ff7;
    color: #fff;
}

.tb-btn.tb-action2:hover {
    box-shadow: 0 3px 12px rgba(123, 47, 247, 0.3);
}

/* ========== PREVIEW AREA ========== */
.preview-area {
    height: calc(100vh - 58px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-preview);
    background-image: var(--bg-preview-grad);
}

.card-container {
    width: 400px;
    min-height: 250px;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* ========== POPUP OVERLAY ========== */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: none;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Compact popup: no blur, light dim only */
.popup-overlay-side {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: none;
}

.popup-overlay.active {
    display: flex;
}

.popup {
    background: var(--bg-popup);
    border: 1px solid var(--border-popup);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: popupIn 0.2s ease-out;
}

.popup-compact {
    max-width: 400px;
    max-height: calc(100vh - 60px);
}
.popup-compact .popup-header {
    padding: 10px 14px;
}
.popup-compact .popup-header h3 {
    font-size: 13px;
}
.popup-compact .popup-body {
    padding: 10px 14px;
}
.popup-compact .form-group label {
    font-size: 11px;
    margin-bottom: 2px;
}
.popup-compact .form-group input,
.popup-compact .form-group select,
.popup-compact .form-group textarea {
    padding: 6px 8px;
    font-size: 12px;
}
.popup-compact .form-row {
    gap: 8px;
    margin-bottom: 6px;
}
.popup-compact .form-group {
    margin-bottom: 6px;
}
.popup-compact .design-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.popup-compact .size-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.popup-compact .size-card {
    padding: 8px;
}
.popup-compact .size-name {
    font-size: 11px;
}
.popup-compact .size-desc,
.popup-compact .size-px,
.popup-compact .size-tag {
    font-size: 9px;
}
.popup-compact .size-icon {
    font-size: 18px;
}
.popup-compact .range-group {
    margin-bottom: 6px;
}
.popup-compact .range-group label {
    font-size: 11px;
}
.popup-compact .control-section {
    margin-bottom: 8px;
    padding: 8px;
}
.popup-compact .control-section-title {
    font-size: 12px;
    margin-bottom: 6px;
}
.popup-compact .color-group {
    margin-bottom: 6px;
}
.popup-compact .color-group label {
    font-size: 11px;
}

.popup-wide {
    max-width: 680px;
}

@keyframes popupIn {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.popup-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-popup);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(233, 69, 96, 0.05);
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
}

.popup-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.popup-close {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(233, 69, 96, 0.15);
    color: #e94560;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.popup-close:hover {
    background: #e94560;
    color: white;
}

.popup-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.popup-body::-webkit-scrollbar {
    width: 6px;
}

.popup-body::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* ========== FORM INSIDE POPUP ========== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 10px;
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #aaa;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background: #16213e;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

/* Photo/Logo Upload */
.photo-upload, .logo-upload {
    width: 100%;
    height: 80px;
    border: 2px dashed #2a2a4a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
}

.photo-upload:hover, .logo-upload:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.05);
}

.upload-placeholder {
    text-align: center;
    color: #666;
}

.upload-placeholder .upload-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.upload-placeholder.small .upload-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.upload-placeholder span {
    font-size: 11px;
}

.photo-preview, .logo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* ========== DESIGN GRID IN POPUP ========== */
.design-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.design-thumb {
    aspect-ratio: 1.6;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    padding: 4px;
    border-radius: 8px;
}

.design-thumb:hover {
    transform: scale(1.05);
    border-color: #e94560;
}

.design-thumb.active {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
}

.design-thumb .design-number {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
}

.design-grid-portrait .design-thumb {
    aspect-ratio: 0.625;
}

/* ========== CONTROL SECTIONS (Adjust Popup) ========== */
.control-section {
    background: #16213e;
    border: 1px solid #2a2a4a;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.control-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #e94560;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a4a;
}

.range-group {
    margin-bottom: 8px;
}

.range-group label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
}

.range-group label span {
    color: #e94560;
    font-weight: 600;
}

.range-group input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #2a2a4a;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.range-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #e94560;
    border-radius: 50%;
    cursor: pointer;
}

/* ========== COLOR GROUPS (Color Popup) ========== */
.color-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.color-group label {
    font-size: 12px;
    color: #aaa;
    flex: 1;
}

.color-group input[type="color"] {
    width: 36px;
    height: 28px;
    border: 2px solid #2a2a4a;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    padding: 2px;
}

.color-group input[type="color"]:hover {
    border-color: #e94560;
}

.color-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hide-toggle {
    width: 24px;
    height: 24px;
    border: 2px solid #444;
    border-radius: 6px;
    background: transparent;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.hide-toggle.active {
    border-color: #2a2a4a;
    color: #555;
    background: transparent;
}
.hide-toggle.hidden {
    border-color: #e94560;
    color: #fff;
    background: #e94560;
}

/* QR Data Popup */
.qr-data-live {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    font-family: monospace;
    font-size: 11px;
    color: #8f8;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}
.extra-qr-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    align-items: center;
}
.extra-qr-row input {
    flex: 1;
    padding: 5px 8px;
    font-size: 11px;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    color: #e1e5ff;
}
.extra-qr-row input::placeholder {
    color: #555;
}
.extra-qr-remove {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(233,69,96,0.2);
    color: #e94560;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
}
.extra-qr-remove:hover {
    background: #e94560;
    color: #fff;
}

/* ========== SIZE GRID (Size Popup) ========== */
.size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.size-card {
    background: #16213e;
    border: 2px solid #2a2a4a;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.size-card:hover {
    border-color: #e94560;
    background: #1a2a4e;
    transform: translateY(-2px);
}

.size-card.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.3);
}

.size-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.size-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.size-desc {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.size-px {
    font-size: 10px;
    color: #e94560;
    font-weight: 600;
    margin-top: 2px;
}

.size-tag {
    font-size: 9px;
    color: #555;
    margin-top: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
}

.custom-size-row {
    display: flex;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2a2a4a;
}

.custom-size-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* ============ CARD DESIGNS ============ */

/* Common card styles */
.id-card, .pt-card {
    position: relative;
    overflow: visible;
    font-family: 'Poppins', sans-serif;
    color: #333;
}
.id-card {
    width: 400px;
    height: 250px;
}

/* ===== Z-index layers ===== */
/* Decorative pseudo-elements always behind everything */
.id-card::before, .id-card::after,
.pt-card::before, .pt-card::after,
.ptr-card::before, .ptr-card::after,
[class*="design-"]::before, [class*="design-"]::after {
    z-index: -1 !important;
}

/* Structural sections: position relative but NO z-index = no stacking context */
.id-card .card-header,
.id-card .card-body,
.id-card .card-details,
.id-card .card-footer,
.id-card .ls-band,
.id-card .ls-left-panel,
.id-card .ls-split-left,
.id-card .ls-right-content,
.id-card .ls-band-body,
.id-card .ls-band-details,
.id-card .ls-split-right,
.id-card .ls-minimal-body,
.id-card .ls-minimal-details,
.pt-card .pt-header,
.pt-card .pt-body,
.pt-card .pt-identity,
.pt-card .pt-photo-wrap,
.pt-card .pt-footer,
.ptr-card .ptr-header-tall,
.ptr-card .ptr-accent-bar,
.ptr-card .ptr-top-half,
.ptr-card .ptr-row,
.ptr-card .ptr-bottom,
.ptr-card .ptr-bottom-half,
.ptr-card .ptr-center-identity,
.ptr-card .ptr-content {
    position: relative;
}

/* All draggable/text elements on top — same stacking context (the card) */
.id-card .card-org,
.id-card .card-name,
.id-card .card-designation,
.id-card .card-id-badge,
.id-card .info-dept,
.id-card .info-phone,
.id-card .info-email,
.id-card .info-blood,
.id-card .info-addr,
.id-card .card-logo,
.id-card .qr-code,
.id-card .photo-frame,
.id-card .card-footer,
.id-card .foot-valid,
.id-card .foot-emergency,
.pt-card .pt-header,
.pt-card .pt-org,
.pt-card .pt-name,
.pt-card .pt-desg,
.pt-card .pt-badge,
.pt-card .pt-info,
.pt-card .pt-info-row,
.pt-card .pt-logo,
.pt-card .pt-photo-wrap,
.pt-card .pt-identity,
.pt-card .pt-body,
.pt-card .pt-divider,
.pt-card .pt-footer,
.pt-card .foot-valid,
.pt-card .foot-emergency,
.pt-card .qr-code,
.pt-card .photo-frame,
.ptr-card .pt-header,
.ptr-card .pt-org,
.ptr-card .pt-name,
.ptr-card .pt-desg,
.ptr-card .pt-badge,
.ptr-card .pt-info,
.ptr-card .pt-info-row,
.ptr-card .pt-logo,
.ptr-card .pt-footer,
.ptr-card .pt-divider,
.ptr-card .foot-valid,
.ptr-card .foot-emergency,
.ptr-card .qr-code,
.ptr-card .photo-frame,
.ptr-card .ptr-row,
.ptr-card .ptr-side-details,
.ptr-card .ptr-bottom,
.ptr-card .ptr-content,
.ptr-card .ptr-center-identity,
.ptr-card .ptr-overlap-photo,
.ptr-card .ptr-header-tall,
.ptr-card .ptr-top-half,
.ptr-card .ptr-bottom-half,
.ptr-card .ptr-top-header {
    position: relative;
    z-index: 50 !important;
}

/* ===== GLOBAL COMPACT FIT — all cards ===== */
.id-card .card-header { padding: 4px 10px; }
.id-card .card-org { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
.id-card .card-body { padding: 3px 10px; gap: 5px; display: flex; }
.id-card .card-name { font-size: 18px; font-weight: 700; line-height: 1.1; white-space: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
.id-card .card-designation { font-size: 12px; font-weight: 600; opacity: 0.9; margin-top: 1px; }
.id-card .card-id-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 1px; width: fit-content; min-width: 8ch; max-width: 100%; box-sizing: border-box; text-align: center; }
.id-card .card-info { font-size: 11px; line-height: 1.35; margin-top: 2px; }
.id-card .card-info span { font-weight: 700; }
.id-card .card-info div { white-space: nowrap; }
.id-card .card-info div.info-addr { white-space: normal; overflow: visible; display: flex; align-items: flex-start; }
.id-card .card-info div.info-addr .addr-text { word-break: break-word; }
.id-card .card-footer { padding: 3px 10px; font-size: 10px; display: flex; justify-content: space-between; gap: 6px; }
.id-card .card-footer span { white-space: nowrap; }
.id-card .card-details { flex: 1; min-width: 0; overflow: visible; }
.id-card .card-logo { max-width: 32px; max-height: 32px; object-fit: contain; }

/* Portrait compact */
.pt-card .pt-header { padding: 6px 10px; }
.pt-card .pt-org { font-size: 14px; font-weight: 800; white-space: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
.pt-card .pt-name { font-size: 17px; font-weight: 700; white-space: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
.pt-card .pt-desg { font-size: 12px; font-weight: 600; margin: 1px 0 2px; }
.pt-card .pt-badge { font-size: 11px; padding: 3px 12px; font-weight: 700; width: fit-content; min-width: 8ch; max-width: 100%; box-sizing: border-box; text-align: center; }
.pt-card .pt-info { font-size: 12px; line-height: 1.45; }
.pt-card .pt-info-row { white-space: nowrap; }
.pt-card .pt-info-row.info-addr { white-space: normal; overflow: visible; display: flex; align-items: flex-start; }
.pt-card .pt-info-row.info-addr .addr-text { word-break: break-word; }
.pt-card .pt-footer { padding: 4px 10px; font-size: 10px; }
.pt-card .pt-footer span { white-space: nowrap; }
.pt-card .pt-body { padding: 3px 10px; }
.pt-card .pt-photo-wrap { padding: 4px 0 2px; }
.pt-card .pt-identity { padding: 2px 10px 1px; }
.pt-card .pt-divider { margin: 2px auto; }

/* ===== LAYOUT 1: Side Panel ===== */
.ls-sidepanel { display: flex !important; flex-direction: row !important; }
.ls-left-panel {
    width: 82px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
}
.ls-left-panel .card-logo { max-width: 28px; max-height: 28px; }
.ls-right-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ls-right-top {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ls-right-top .card-org {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ls-right-body {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ls-right-footer {
    padding: 4px 12px;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

/* ===== LAYOUT 2: Photo Right ===== */
.ls-photoright .card-body { flex-direction: row-reverse !important; }
.ls-photo-qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ===== LAYOUT 3: Top Band ===== */
.ls-band {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
}
.ls-band .card-org {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ls-band .card-id-badge {
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
    width: fit-content;
    min-width: 8ch;
}
.ls-band-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 12px;
}
.ls-band-details {
    flex: 1;
    min-width: 0;
}
.ls-band-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ls-band-foot { text-align: center; }

/* ===== LAYOUT 4: Split Half ===== */
.ls-split { display: flex !important; flex-direction: row !important; }
.ls-split-left {
    width: 38%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    min-width: 0;
    overflow: visible;
}
.ls-split-left .card-logo { max-width: 32px; max-height: 32px; }
.ls-split-left .card-name { font-size: 19px; }
.ls-split-left .card-designation { font-size: 12px; }
.ls-split-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
}
.ls-split-right-top {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.ls-split-right-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.ls-mini-footer {
    font-size: 10px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.ls-mini-footer span { display: block; }

/* ===== LAYOUT 5: Minimal ===== */
.ls-minimal { display: flex; flex-direction: column; }
.ls-minimal-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
}
.ls-minimal-top .card-org {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ls-minimal-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 2px 14px 0;
}
.ls-minimal-details {
    flex: 1;
    min-width: 0;
}

/* Photo Frame - FIXED size window, photo zooms/drags inside */
.photo-frame {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    cursor: grab;
    border-radius: 8px;
    border: 2px solid #fff;
    background: #ddd;
    touch-action: none;
}
.photo-frame:active {
    cursor: grabbing;
}
.photo-frame.photo-frame-round {
    border-radius: 50%;
    border-width: 3px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.photo-frame img {
    display: block;
}
.preview-area {
    overflow: hidden;
}

.id-card .card-photo {
    width: 80px;
    height: 95px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #fff;
    background: #ddd;
}

.id-card .card-photo-placeholder {
    width: 80px;
    height: 95px;
    background: linear-gradient(135deg, #ddd, #eee);
    border-radius: 8px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #999;
}

.id-card .card-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.id-card .qr-code {
    flex-shrink: 0;
    overflow: hidden;
    align-self: flex-start;
}

.id-card .qr-code canvas,
.id-card .qr-code img {
    width: 100% !important;
    height: 100% !important;
}

.id-card .card-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.id-card .card-designation {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
}

.id-card .card-org {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.id-card .card-info {
    font-size: 11px;
    line-height: 1.45;
}

.id-card .card-info span {
    font-weight: 700;
}

.id-card .card-id-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    min-width: 8ch;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* ====== DESIGN 1: Corporate Blue ====== */
.design-1 {
    background: linear-gradient(135deg, #ffffff 60%, #e8f4fd 100%);
}
.design-1 .card-header {
    background: linear-gradient(135deg, #1e3a5f, #2980b9);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-1 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-1 .card-details { flex: 1; }
.design-1 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e3a5f;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-1 .card-id-badge {
    background: #e74c3c;
    color: white;
}

/* ====== DESIGN 2: Modern Gradient ====== */
.design-2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.design-2 .card-header {
    padding: 6px 12px 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-2 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
}
.design-2 .card-details { flex: 1; }
.design-2 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.design-2 .card-id-badge {
    background: rgba(255,255,255,0.25);
    color: white;
}
.design-2 .card-photo {
    border: 3px solid rgba(255,255,255,0.5);
}

/* ====== DESIGN 3: Minimalist White ====== */
.design-3 {
    background: #ffffff;
    border-left: 6px solid #2ecc71;
}
.design-3 .card-header {
    padding: 6px 12px 4px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-3 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-3 .card-details { flex: 1; }
.design-3 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2ecc71;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-3 .card-id-badge {
    background: #2ecc71;
    color: white;
}

/* ====== DESIGN 4: Dark Premium ====== */
.design-4 {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #f0f0f0;
}
.design-4 .card-header {
    padding: 6px 12px;
    background: linear-gradient(90deg, #e94560, #ff6b6b);
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-4 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-4 .card-details { flex: 1; }
.design-4 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(233, 69, 96, 0.2);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.design-4 .card-id-badge {
    background: #e94560;
    color: white;
}
.design-4 .card-photo {
    border-color: #e94560;
}

/* ====== DESIGN 5: Government Style ====== */
.design-5 {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 40%, #fffef5 40%);
}
.design-5 .ls-split-left {
    background: transparent;
}
.design-5 .card-header {
    background: transparent;
    padding: 10px 20px;
    text-align: center;
    color: white;
}
.design-5 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
}
.design-5 .card-details { flex: 1; }
.design-5 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #c0392b;
    padding: 5px 20px;
    text-align: center;
    color: white;
    font-size: 10px;
}
.design-5 .card-id-badge {
    background: #c0392b;
    color: white;
}
.design-5 .card-photo {
    border-color: #c0392b;
}

/* ====== DESIGN 6: Tech Startup ====== */
.design-6 {
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: #fff;
}
.design-6::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.15), transparent);
    border-radius: 50%;
}
.design-6 .card-header {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-6 .card-org {
    color: #00ff88;
}
.design-6 .card-body {
    display: flex;
    padding: 8px 20px;
    gap: 8px;
    position: relative;
}
.design-6 .card-details { flex: 1; }
.design-6 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 255, 136, 0.1);
    border-top: 1px solid rgba(0, 255, 136, 0.3);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.design-6 .card-id-badge {
    background: #00ff88;
    color: #0f0c29;
}
.design-6 .card-photo {
    border-color: #00ff88;
}

/* ====== DESIGN 7: Orange Corporate ====== */
.design-7 {
    background: #fff;
}
.design-7 .card-header {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-7 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-7 .card-details { flex: 1; }
.design-7 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c3e50;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-7 .card-id-badge {
    background: #f39c12;
    color: white;
}

/* ====== DESIGN 8: Healthcare ====== */
.design-8 {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.design-8 .card-header {
    background: linear-gradient(135deg, #00b894, #00cec9);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-8 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-8 .card-details { flex: 1; }
.design-8 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00b894;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-8 .card-id-badge {
    background: #e17055;
    color: white;
}

/* ====== DESIGN 9: Royal Purple ====== */
.design-9 {
    background: linear-gradient(135deg, #2d1b69 0%, #5b2c6f 50%, #8e44ad 100%);
    color: white;
}
.design-9 .card-header {
    padding: 5px 14px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-9 .card-body {
    display: flex;
    padding: 4px 14px;
    gap: 10px;
}
.design-9 .card-details { flex: 1; }
.design-9 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.design-9 .card-id-badge {
    background: #f1c40f;
    color: #2d1b69;
}
.design-9 .card-photo {
    border-color: #f1c40f;
}

/* ====== DESIGN 10: School / University ====== */
.design-10 {
    background: #fff;
}
.design-10 .card-header {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    padding: 10px 20px;
    text-align: center;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.design-10 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
    background: linear-gradient(to bottom, #ecf0f1, #fff);
}
.design-10 .card-details { flex: 1; }
.design-10 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c3e50;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-10 .card-id-badge {
    background: #3498db;
    color: white;
}

/* ====== DESIGN 11: Teal Wave ====== */
.design-11 {
    background: #fff;
    overflow: hidden;
}
.design-11::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, #0abde3, #48dbfb);
    clip-path: ellipse(110% 100% at 50% 0%);
}
.design-11 .card-header {
    padding: 10px 20px;
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-11 .card-body {
    display: flex;
    padding: 25px 20px 12px;
    gap: 8px;
    position: relative;
}
.design-11 .card-details { flex: 1; }
.design-11 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0abde3;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-11 .card-id-badge {
    background: #0abde3;
    color: white;
}

/* ====== DESIGN 12: Red & Black ====== */
.design-12 {
    background: #1a1a1a;
    color: #fff;
}
.design-12 .card-header {
    background: #e74c3c;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-12 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-12 .card-details { flex: 1; }
.design-12 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e74c3c;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.design-12 .card-id-badge {
    background: #e74c3c;
    color: white;
}
.design-12 .card-photo {
    border-color: #e74c3c;
}

/* ====== DESIGN 13: Nature Green ====== */
.design-13 {
    background: linear-gradient(160deg, #f5f5dc 0%, #e8f5e9 100%);
}
.design-13 .card-header {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-13 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-13 .card-details { flex: 1; }
.design-13 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #27ae60;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-13 .card-id-badge {
    background: #27ae60;
    color: white;
}

/* ====== DESIGN 14: Sunrise Gradient ====== */
.design-14 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ffd200 100%);
    color: white;
}
.design-14 .card-header {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-14 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
}
.design-14 .card-details { flex: 1; }
.design-14 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.25);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.design-14 .card-id-badge {
    background: rgba(255,255,255,0.3);
    color: white;
}

/* ====== DESIGN 15: Navy Professional ====== */
.design-15 {
    background: #fff;
    border-top: 5px solid #2c3e50;
}
.design-15 .card-header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #bdc3c7;
}
.design-15 .card-org {
    color: #2c3e50;
}
.design-15 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
}
.design-15 .card-details { flex: 1; }
.design-15 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2c3e50, #3d566e);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-15 .card-id-badge {
    background: #2c3e50;
    color: white;
}

/* ====== DESIGN 16: Cyber Neon ====== */
.design-16 {
    background: #0a0a0a;
    color: #0ff;
    border: 1px solid #0ff;
}
.design-16 .card-header {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-16 .card-org {
    color: #0ff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.design-16 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
}
.design-16 .card-details { flex: 1; color: #ccc; }
.design-16 .card-name { color: #fff; }
.design-16 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 255, 255, 0.05);
    border-top: 1px solid rgba(0, 255, 255, 0.3);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #0ff;
}
.design-16 .card-id-badge {
    background: #0ff;
    color: #0a0a0a;
}
.design-16 .card-photo {
    border-color: #0ff;
}

/* ====== DESIGN 17: Warm Earth ====== */
.design-17 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.design-17 .card-header {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-17 .card-org {
    color: #6b3a2a;
}
.design-17 .card-body {
    display: flex;
    padding: 4px 12px;
    gap: 8px;
}
.design-17 .card-details { flex: 1; color: #4a2c1a; }
.design-17 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #6b3a2a;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-17 .card-id-badge {
    background: #6b3a2a;
    color: white;
}

/* ====== DESIGN 18: Ice Blue ====== */
.design-18 {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2, #80deea);
}
.design-18 .card-header {
    background: linear-gradient(135deg, #006064, #00838f);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-18 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-18 .card-details { flex: 1; color: #004d40; }
.design-18 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #006064;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-18 .card-id-badge {
    background: #006064;
    color: white;
}

/* ====== DESIGN 19: Luxury Gold ====== */
.design-19 {
    background: linear-gradient(135deg, #1a1a2e 0%, #232340 100%);
    color: #d4af37;
}
.design-19 .card-header {
    padding: 6px 12px;
    border-bottom: 2px solid #d4af37;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-19 .card-body {
    display: flex;
    padding: 10px 20px;
    gap: 8px;
}
.design-19 .card-details { flex: 1; color: #e8d5a3; }
.design-19 .card-name { color: #d4af37; }
.design-19 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1a1a2e;
    font-size: 10px;
    font-weight: 600;
}
.design-19 .card-id-badge {
    background: #d4af37;
    color: #1a1a2e;
}
.design-19 .card-photo {
    border-color: #d4af37;
}

/* ====== DESIGN 20: Tricolor (Indian Flag) ====== */
.design-20 {
    background: #fff;
}
.design-20 .card-header {
    background: linear-gradient(135deg, #ff9933, #ffad5c);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-20 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-20 .card-details { flex: 1; }
.design-20 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #138808, #1ca60c);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-20 .card-id-badge {
    background: #000088;
    color: white;
}
.design-20 .card-photo {
    border-color: #138808;
}

/* ====== DESIGN 21: Slate Executive ====== */
.design-21 {
    background: #f1f2f6;
}
.design-21 .card-header {
    background: linear-gradient(135deg, #2f3542, #57606f);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-21 .card-body {
    display: flex;
    padding: 4px 12px;
    gap: 8px;
}
.design-21 .card-details { flex: 1; color: #2f3542; }
.design-21 .card-name { color: #2f3542; }
.design-21 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2f3542;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #dfe4ea;
    font-size: 10px;
}
.design-21 .card-id-badge {
    background: #ff6348;
    color: white;
}
.design-21 .card-photo {
    border-color: #57606f;
}

/* ====== DESIGN 22: Electric Violet ====== */
.design-22 {
    background: linear-gradient(160deg, #dfe6e9 0%, #f8f9ff 50%, #e8e0f0 100%);
}
.design-22 .card-header {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-22 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-22 .card-details { flex: 1; color: #2d3436; }
.design-22 .card-name { color: #6c5ce7; }
.design-22 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-22 .card-id-badge {
    background: #6c5ce7;
    color: white;
}
.design-22 .card-photo {
    border-color: #a29bfe;
}

/* ====== DESIGN 23: Carbon Fiber ====== */
.design-23 {
    background: #141414;
    background-image: repeating-linear-gradient(
        0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px
    );
    color: #e0e0e0;
}
.design-23 .card-header {
    padding: 6px 12px;
    border-bottom: 2px solid #00e676;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-23 .card-org {
    color: #00e676;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.design-23 .card-body {
    display: flex;
    padding: 4px 12px;
    gap: 8px;
}
.design-23 .card-details { flex: 1; color: #bbb; }
.design-23 .card-name { color: #fff; }
.design-23 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00e676;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #141414;
    font-size: 10px;
    font-weight: 600;
}
.design-23 .card-id-badge {
    background: #00e676;
    color: #141414;
}
.design-23 .card-photo {
    border-color: #00e676;
}

/* ====== DESIGN 24: Rose Elegant ====== */
.design-24 {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe0ec 100%);
}
.design-24 .card-header {
    background: linear-gradient(135deg, #b83280, #d53f8c);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-24 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-24 .card-details { flex: 1; color: #4a2040; }
.design-24 .card-name { color: #b83280; }
.design-24 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #b83280, #d53f8c);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-24 .card-id-badge {
    background: #d53f8c;
    color: white;
}
.design-24 .card-photo {
    border-color: #d53f8c;
}

/* ====== DESIGN 25: Arctic Silver ====== */
.design-25 {
    background: linear-gradient(180deg, #dfe6e9 0%, #f8f9fa 100%);
    border-top: 4px solid #636e72;
}
.design-25 .card-header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #b2bec3;
}
.design-25 .card-org {
    color: #2d3436;
    font-weight: 800;
}
.design-25 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-25 .card-details { flex: 1; color: #636e72; }
.design-25 .card-name { color: #2d3436; }
.design-25 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #636e72, #2d3436);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #dfe6e9;
    font-size: 10px;
}
.design-25 .card-id-badge {
    background: #636e72;
    color: white;
}
.design-25 .card-photo {
    border-color: #636e72;
}

/* ====== DESIGN 26: Sapphire Pro ====== */
.design-26 {
    background: linear-gradient(135deg, #0c2461 0%, #1e3799 100%);
    color: white;
}
.design-26 .card-header {
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border-bottom: 2px solid #4a69bd;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-26 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-26 .card-details { flex: 1; color: #dcdde1; }
.design-26 .card-name { color: #fff; }
.design-26 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #4a69bd;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-26 .card-id-badge {
    background: #4a69bd;
    color: white;
}
.design-26 .card-photo {
    border-color: #4a69bd;
}

/* ====== DESIGN 27: Emerald Dark ====== */
.design-27 {
    background: linear-gradient(135deg, #0a3d0a 0%, #1b5e20 100%);
    color: #e8f5e9;
}
.design-27 .card-header {
    padding: 6px 12px;
    border-bottom: 2px solid #a5d6a7;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-27 .card-org {
    color: #a5d6a7;
}
.design-27 .card-body {
    display: flex;
    padding: 4px 12px;
    gap: 8px;
}
.design-27 .card-details { flex: 1; color: #c8e6c9; }
.design-27 .card-name { color: #a5d6a7; }
.design-27 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #2e7d32, #4caf50, #2e7d32);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-27 .card-id-badge {
    background: #4caf50;
    color: white;
}
.design-27 .card-photo {
    border-color: #a5d6a7;
}

/* ====== DESIGN 28: Sunset Blaze ====== */
.design-28 {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}
.design-28 .card-header {
    background: linear-gradient(135deg, #ff5e62, #ff9966);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-28 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-28 .card-details { flex: 1; color: #4e342e; }
.design-28 .card-name { color: #bf360c; }
.design-28 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ff5e62, #ff9966);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-28 .card-id-badge {
    background: #ff5722;
    color: white;
}
.design-28 .card-photo {
    border-color: #ff5e62;
}

/* ====== DESIGN 29: Titanium Grey ====== */
.design-29 {
    background: #eceff1;
    border-left: 5px solid #37474f;
}
.design-29 .card-header {
    background: linear-gradient(135deg, #37474f, #546e7a);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.design-29 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}
.design-29 .card-details { flex: 1; color: #37474f; }
.design-29 .card-name { color: #263238; }
.design-29 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #37474f;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #cfd8dc;
    font-size: 10px;
}
.design-29 .card-id-badge {
    background: #546e7a;
    color: white;
}
.design-29 .card-photo {
    border-color: #546e7a;
}

/* ====== DESIGN 30: Midnight Ocean ====== */
.design-30 {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 60%, #162447 100%);
    color: #caf0f8;
}
.design-30::before {
    content: '';
    position: absolute;
    bottom: 40px;
    right: -20px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.12), transparent);
    border-radius: 50%;
}
.design-30 .card-header {
    padding: 6px 12px;
    border-bottom: 2px solid #00b4d8;
    display: flex;
    align-items: center;
    gap: 10px;
}
.design-30 .card-org {
    color: #00b4d8;
    text-shadow: 0 0 8px rgba(0, 180, 216, 0.4);
}
.design-30 .card-body {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
    position: relative;
}
.design-30 .card-details { flex: 1; color: #90e0ef; }
.design-30 .card-name { color: #fff; }
.design-30 .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #023e8a, #0077b6, #00b4d8);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 10px;
}
.design-30 .card-id-badge {
    background: #00b4d8;
    color: #0d1b2a;
}
.design-30 .card-photo {
    border-color: #00b4d8;
}

/* ============================================================
   PORTRAIT CARD LAYOUT (pt-* classes) - Completely separate
   ============================================================ */
.pt-card {
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

/* -- Header -- */
.pt-header {
    width: 100%;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pt-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.pt-org {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


/* -- Photo (circular, centered) -- */
.pt-photo-wrap {
    display: flex;
    justify-content: center;
    padding: 5px 0 3px;
}
.pt-photo {
    border-radius: 10px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.pt-photo-empty {
    border-radius: 10px;
    background: linear-gradient(135deg, #ddd, #eee);
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #999;
}

/* -- Name / Designation / Badge -- */
.pt-identity {
    text-align: center;
    padding: 3px 12px 2px;
}
.pt-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.pt-desg {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
    margin: 1px 0 3px;
}
.pt-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    min-width: 8ch;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* -- Divider line -- */
.pt-divider {
    width: 60%;
    height: 1px;
    background: rgba(128,128,128,0.25);
    margin: 6px auto;
}

/* -- Info + QR side by side -- */
.pt-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    flex: 1;
}
.pt-info {
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    flex: 1;
    min-width: 0;
}
.pt-info-row span {
    font-weight: 700;
}

/* QR inside portrait - constrain size */
.pt-body .qr-code {
    flex-shrink: 0;
    overflow: hidden;
}
.pt-body .qr-code canvas,
.pt-body .qr-code img {
    width: 100% !important;
    height: 100% !important;
}

/* -- Footer -- */
.pt-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

/* ====== DESIGN 31: P: Royal Blue ====== */
.design-31 {
    background: linear-gradient(180deg, #eaf2f8 0%, #d4e6f1 100%);
}
.design-31 .pt-header { background: linear-gradient(135deg, #1a3a6b, #2471a3); color: white; }
.design-31 .pt-name { color: #1a3a6b; }
.design-31 .pt-info { color: #2c3e50; }
.design-31 .pt-badge { background: #2471a3; color: white; }
.design-31 .pt-photo, .design-31 .pt-photo-empty { border-color: #2471a3; }
.design-31 .pt-divider { background: #2471a3; }
.design-31 .pt-footer { background: #1a3a6b; color: #d4e6f1; }

/* ====== DESIGN 32: P: Dark Elite ====== */
.design-32 {
    background: linear-gradient(180deg, #1c1c2e 0%, #2a2a40 100%);
    color: #f0f0f0;
}
.design-32 .pt-header { background: linear-gradient(90deg, #e94560, #ff6b6b); color: white; }
.design-32 .pt-name { color: #fff; }
.design-32 .pt-desg { color: #ccc; }
.design-32 .pt-info { color: #aaa; }
.design-32 .pt-badge { background: #e94560; color: white; }
.design-32 .pt-photo, .design-32 .pt-photo-empty { border-color: #e94560; }
.design-32 .pt-divider { background: #e94560; }
.design-32 .pt-footer { background: rgba(233,69,96,0.25); color: #ff6b6b; }

/* ====== DESIGN 33: P: Emerald ====== */
.design-33 {
    background: linear-gradient(180deg, #eafaf1 0%, #d5f5e3 100%);
}
.design-33 .pt-header { background: linear-gradient(135deg, #145a32, #27ae60); color: white; }
.design-33 .pt-name { color: #145a32; }
.design-33 .pt-info { color: #1e8449; }
.design-33 .pt-badge { background: #27ae60; color: white; }
.design-33 .pt-photo, .design-33 .pt-photo-empty { border-color: #27ae60; }
.design-33 .pt-divider { background: #27ae60; }
.design-33 .pt-footer { background: #145a32; color: #d5f5e3; }

/* ====== DESIGN 34: P: Sunset ====== */
.design-34 {
    background: linear-gradient(180deg, #fff8f0 0%, #ffe0cc 100%);
}
.design-34 .pt-header { background: linear-gradient(135deg, #f5576c, #ff9966); color: white; }
.design-34 .pt-name { color: #c0392b; }
.design-34 .pt-info { color: #6e3b2e; }
.design-34 .pt-badge { background: #f5576c; color: white; }
.design-34 .pt-photo, .design-34 .pt-photo-empty { border-color: #ff9966; }
.design-34 .pt-divider { background: linear-gradient(90deg, #f5576c, #ff9966); }
.design-34 .pt-footer { background: linear-gradient(135deg, #f5576c, #ff9966); color: white; }

/* ====== DESIGN 35: P: Purple Pro ====== */
.design-35 {
    background: linear-gradient(180deg, #f3e5f5 0%, #e1bee7 100%);
}
.design-35 .pt-header { background: linear-gradient(135deg, #4a148c, #7b1fa2); color: white; }
.design-35 .pt-name { color: #4a148c; }
.design-35 .pt-info { color: #6a1b9a; }
.design-35 .pt-badge { background: #7b1fa2; color: white; }
.design-35 .pt-photo, .design-35 .pt-photo-empty { border-color: #7b1fa2; }
.design-35 .pt-divider { background: #7b1fa2; }
.design-35 .pt-footer { background: #4a148c; color: #e1bee7; }

/* ====== DESIGN 36: P: Neon Dark ====== */
.design-36 {
    background: #0a0a0a;
    color: #00e5ff;
}
.design-36 .pt-header { border-bottom: 2px solid #00e5ff; color: #00e5ff; }
.design-36 .pt-org { text-shadow: 0 0 10px rgba(0,229,255,0.5); }
.design-36 .pt-name { color: #fff; }
.design-36 .pt-desg { color: #80deea; }
.design-36 .pt-info { color: #b0bec5; }
.design-36 .pt-badge { background: #00e5ff; color: #0a0a0a; }
.design-36 .pt-photo, .design-36 .pt-photo-empty { border-color: #00e5ff; box-shadow: 0 0 18px rgba(0,229,255,0.35); }
.design-36 .pt-divider { background: rgba(0,229,255,0.3); }
.design-36 .pt-footer { background: rgba(0,229,255,0.08); border-top: 1px solid rgba(0,229,255,0.3); color: #00e5ff; }

/* ====== DESIGN 37: P: Gold Luxury ====== */
.design-37 {
    background: linear-gradient(180deg, #1a1a2e 0%, #232340 100%);
    color: #d4af37;
}
.design-37 .pt-header { border-bottom: 2px solid #d4af37; }
.design-37 .pt-name { color: #d4af37; }
.design-37 .pt-desg { color: #e8d5a3; }
.design-37 .pt-info { color: #e8d5a3; }
.design-37 .pt-badge { background: #d4af37; color: #1a1a2e; }
.design-37 .pt-photo, .design-37 .pt-photo-empty { border-color: #d4af37; box-shadow: 0 4px 18px rgba(212,175,55,0.35); }
.design-37 .pt-divider { background: #d4af37; }
.design-37 .pt-footer { background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37); color: #1a1a2e; font-weight: 600; }

/* ====== DESIGN 38: P: Tricolor ====== */
.design-38 {
    background: #fff;
}
.design-38 .pt-header { background: linear-gradient(135deg, #ff9933, #ffad5c); color: white; }
.design-38 .pt-name { color: #000088; }
.design-38 .pt-info { color: #333; }
.design-38 .pt-badge { background: #000088; color: white; }
.design-38 .pt-photo, .design-38 .pt-photo-empty { border-color: #138808; }
.design-38 .pt-divider { background: linear-gradient(90deg, #ff9933, #fff, #138808); height: 2px; }
.design-38 .pt-footer { background: linear-gradient(135deg, #138808, #1ca60c); color: white; }

/* ====== DESIGN 39: P: Coral Pink ====== */
.design-39 {
    background: linear-gradient(180deg, #fff5f2 0%, #fce4ec 100%);
}
.design-39 .pt-header { background: linear-gradient(135deg, #ff6f61, #ff8a80); color: white; }
.design-39 .pt-name { color: #c62828; }
.design-39 .pt-info { color: #5d4037; }
.design-39 .pt-badge { background: #ff6f61; color: white; }
.design-39 .pt-photo, .design-39 .pt-photo-empty { border-color: #ff6f61; }
.design-39 .pt-divider { background: #ff6f61; }
.design-39 .pt-footer { background: linear-gradient(135deg, #ff6f61, #ffc3a0); color: white; }

/* ====== DESIGN 40: P: Ocean Deep ====== */
.design-40 {
    background: linear-gradient(180deg, #0d2137 0%, #1a3a5c 100%);
    color: #bbdefb;
}
.design-40 .pt-header { background: linear-gradient(135deg, #1565c0, #1976d2); color: white; }
.design-40 .pt-name { color: #fff; }
.design-40 .pt-desg { color: #90caf9; }
.design-40 .pt-info { color: #90caf9; }
.design-40 .pt-badge { background: #1565c0; color: white; }
.design-40 .pt-photo, .design-40 .pt-photo-empty { border-color: #42a5f5; box-shadow: 0 4px 18px rgba(66,165,245,0.35); }
.design-40 .pt-divider { background: #42a5f5; }
.design-40 .pt-footer { background: linear-gradient(135deg, #0d47a1, #1565c0); color: #bbdefb; }

/* =============================================
   PORTRAIT RECT PHOTO DESIGNS (41-50) — 5 LAYOUTS
   ============================================= */
.ptr-card .pt-header { padding: 6px 10px; }
.ptr-card .pt-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 10px;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

/* --- Shared: bottom info+qr row --- */
.ptr-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 14px 6px;
    gap: 8px;
}
.ptr-bottom .pt-info { flex: 1; min-width: 0; }
.ptr-bottom .qr-code { flex-shrink: 0; overflow: hidden; }

/* --- LAYOUT A: Photo Left + Details Right (41, 42) --- */
.ptr-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
}
.ptr-side-details {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}
.ptr-side-details .pt-name { font-size: 16px; text-align: left; }
.ptr-side-details .pt-desg { text-align: left; font-size: 12px; }
.ptr-side-details .pt-badge { font-size: 11px; }

/* --- LAYOUT B: Big Photo Top Center (43, 44) --- */
.ptr-photo-center {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}
.ptr-center-identity {
    text-align: center;
    padding: 4px 14px;
}

/* --- LAYOUT C: Side Accent Bar (45, 46) --- */
.ptr-layoutC {
    display: flex;
    flex-direction: row;
    position: relative;
}
.ptr-accent-bar {
    width: 8px;
    flex-shrink: 0;
}
.ptr-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.design-45 .ptr-accent-bar { background: linear-gradient(180deg, #ff7e67, #ffc2a2); }
.design-46 .ptr-accent-bar { background: linear-gradient(180deg, #1a237e, #3949ab); }
.ptr-layoutC .qr-code {
    aspect-ratio: 1;
}
.ptr-layoutC .pt-footer {
    position: absolute;
    bottom: 0; left: 8px; right: 0;
}

/* --- LAYOUT D: Photo Overlap Header (47, 48) --- */
.ptr-header-tall {
    width: 100%;
    padding: 8px 12px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.ptr-overlap-photo {
    display: flex;
    justify-content: center;
    margin-top: -44px;
    position: relative;
}

/* --- LAYOUT E: Split Half (49, 50) --- */
.ptr-top-half {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px 4px;
    gap: 4px;
}
.ptr-top-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.ptr-bottom-half {
    flex: 1;
    padding: 4px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ptr-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ptr-bottom-row .pt-info { flex: 1; min-width: 0; }
.ptr-bottom-row .qr-code { flex-shrink: 0; overflow: hidden; }

/* ====== DESIGN 41: PR: Steel Blue — Layout A ====== */
.design-41 {
    background: linear-gradient(180deg, #bbe1fa 0%, #e8f4fd 100%);
}
.design-41 .pt-header { background: linear-gradient(135deg, #1b2838, #3282b8); color: white; }
.design-41 .pt-name { color: #1b2838; }
.design-41 .pt-info { color: #2c3e50; }
.design-41 .pt-badge { background: #3282b8; color: white; }
.design-41 .pt-divider { background: #3282b8; }
.design-41 .pt-footer { background: #1b2838; color: #bbe1fa; }

/* ====== DESIGN 42: PR: Cherry Red — Layout A ====== */
.design-42 {
    background: linear-gradient(180deg, #f1faee 0%, #fde8e8 100%);
}
.design-42 .pt-header { background: linear-gradient(135deg, #6b0f1a, #e63946); color: white; }
.design-42 .pt-name { color: #6b0f1a; }
.design-42 .pt-info { color: #4a2c2a; }
.design-42 .pt-badge { background: #e63946; color: white; }
.design-42 .pt-divider { background: #e63946; }
.design-42 .pt-footer { background: linear-gradient(135deg, #6b0f1a, #e63946); color: #f1faee; }

/* ====== DESIGN 43: PR: Forest — Layout B ====== */
.design-43 {
    background: linear-gradient(180deg, #d8f3dc 0%, #eaf7ec 100%);
}
.design-43 .pt-header { background: linear-gradient(135deg, #1b4332, #40916c); color: white; }
.design-43 .pt-name { color: #1b4332; }
.design-43 .pt-info { color: #2d6a4f; }
.design-43 .pt-badge { background: #40916c; color: white; }
.design-43 .pt-divider { background: #40916c; }
.design-43 .pt-footer { background: #1b4332; color: #d8f3dc; }

/* ====== DESIGN 44: PR: Midnight — Layout B ====== */
.design-44 {
    background: linear-gradient(180deg, #0b0c10 0%, #1f2833 100%);
    color: #c5c6c7;
}
.design-44 .pt-header { border-bottom: 2px solid #66fcf1; color: #66fcf1; }
.design-44 .pt-name { color: #fff; }
.design-44 .pt-desg { color: #66fcf1; }
.design-44 .pt-info { color: #c5c6c7; }
.design-44 .pt-badge { background: #66fcf1; color: #0b0c10; }
.design-44 .pt-divider { background: rgba(102,252,241,0.3); }
.design-44 .pt-footer { background: rgba(102,252,241,0.08); border-top: 1px solid rgba(102,252,241,0.3); color: #66fcf1; }

/* ====== DESIGN 45: PR: Peach — Layout C ====== */
.design-45 {
    background: linear-gradient(0deg, #ffe8d6 0%, #fff9f5 100%);
}
.design-45 .pt-header { background: none; color: #bf360c; padding-top: 12px; }
.design-45 .pt-org { letter-spacing: 2px; }
.design-45 .pt-name { color: #bf360c; }
.design-45 .pt-info { color: #5d4037; }
.design-45 .pt-badge { background: #ff7e67; color: white; }
.design-45 .pt-divider { background: #ff7e67; }
.design-45 .pt-footer { background: linear-gradient(135deg, #ff7e67, #ffc2a2); color: white; }

/* ====== DESIGN 46: PR: Indigo — Layout C ====== */
.design-46 {
    background: linear-gradient(0deg, #e8eaf6 0%, #c5cae9 50%, #e8eaf6 100%);
}
.design-46 .pt-header { background: none; color: #1a237e; padding-top: 12px; }
.design-46 .pt-org { letter-spacing: 2px; }
.design-46 .pt-name { color: #1a237e; }
.design-46 .pt-info { color: #283593; }
.design-46 .pt-badge { background: #3949ab; color: white; }
.design-46 .pt-divider { background: #3949ab; }
.design-46 .pt-footer { background: #1a237e; color: #c5cae9; }

/* ====== DESIGN 47: PR: Maroon Gold — Layout D ====== */
.design-47 {
    background: linear-gradient(180deg, #3c0008 0%, #5c0015 40%, #2a0005 100%);
    color: #ffd700;
}
.design-47 .ptr-header-tall { background: linear-gradient(135deg, #800020, #a00030); color: #ffd700; }
.design-47 .pt-name { color: #ffd700; }
.design-47 .pt-desg { color: #ffecb3; }
.design-47 .pt-info { color: #ffcc80; }
.design-47 .pt-badge { background: #ffd700; color: #3c0008; }
.design-47 .pt-divider { background: #ffd700; }
.design-47 .pt-footer { background: linear-gradient(90deg, #ffd700, #ffea00, #ffd700); color: #3c0008; font-weight: 600; }

/* ====== DESIGN 48: PR: Teal Clean — Layout D ====== */
.design-48 {
    background: linear-gradient(180deg, #e0f2f1 0%, #f0faf9 100%);
}
.design-48 .ptr-header-tall { background: linear-gradient(135deg, #004d40, #00897b); color: white; }
.design-48 .pt-name { color: #004d40; }
.design-48 .pt-info { color: #00695c; }
.design-48 .pt-badge { background: #00897b; color: white; }
.design-48 .pt-divider { background: #00897b; }
.design-48 .pt-footer { background: #004d40; color: #e0f2f1; }

/* ====== DESIGN 49: PR: Slate Pro — Layout E ====== */
.design-49 {
    background: #f5f5f5;
}
.design-49 .ptr-top-half { background: linear-gradient(135deg, #263238, #455a64); }
.design-49 .ptr-top-half .pt-org { color: white; }
.design-49 .pt-name { color: #263238; }
.design-49 .pt-info { color: #37474f; }
.design-49 .pt-badge { background: #455a64; color: white; }
.design-49 .pt-divider { background: #455a64; }
.design-49 .pt-footer { background: #263238; color: #cfd8dc; }

/* ====== DESIGN 50: PR: Vivid Orange — Layout E ====== */
.design-50 {
    background: #fff3e0;
}
.design-50 .ptr-top-half { background: linear-gradient(135deg, #e65100, #ff9800); }
.design-50 .ptr-top-half .pt-org { color: white; }
.design-50 .pt-name { color: #bf360c; }
.design-50 .pt-info { color: #4e342e; }
.design-50 .pt-badge { background: #ff9800; color: #fff; }
.design-50 .pt-divider { background: #ff9800; }
.design-50 .pt-footer { background: linear-gradient(135deg, #e65100, #ff9800); color: white; }

/* =============================================
   NEW LANDSCAPE DESIGNS 51-75
   ============================================= */
/* 51: Executive Navy Gold */
.design-51 { background: linear-gradient(180deg, #f8fafc 60%, #0b132b 60%); }
.design-51 .card-header { background: linear-gradient(135deg, #0b132b, #1b2a4a); color: #d4af37; }
.design-51 .card-name { color: #0b132b; } .design-51 .card-info { color: #334155; }
.design-51 .card-id-badge { background: #d4af37; color: #0b132b; } .design-51 .card-footer { background: #0b132b; color: #d4af37; }

/* 52: Clean Medical Aqua */
.design-52 { background: linear-gradient(180deg, #edf6f9 60%, #006d77 60%); }
.design-52 .card-header { background: linear-gradient(135deg, #006d77, #83c5be); color: white; }
.design-52 .card-name { color: #006d77; } .design-52 .card-info { color: #2c3e50; }
.design-52 .card-id-badge { background: #006d77; color: white; } .design-52 .card-footer { background: #006d77; color: #edf6f9; }

/* 53: Premium Charcoal */
.design-53 { background: #f8f9fa; }
.design-53 .card-header { background: linear-gradient(135deg, #212529, #495057); color: white; }
.design-53 .card-name { color: #212529; } .design-53 .card-info { color: #495057; }
.design-53 .card-id-badge { background: #495057; color: white; } .design-53 .card-footer { background: #212529; color: #adb5bd; }

/* 54: Royal Maroon */
.design-54 { background: #fff1e6; }
.design-54 .card-header { background: linear-gradient(135deg, #5f0f40, #9a031e); color: white; }
.design-54 .card-name { color: #5f0f40; } .design-54 .card-info { color: #6b3a2a; }
.design-54 .card-id-badge { background: #9a031e; color: white; } .design-54 .card-footer { background: #5f0f40; color: #ffc2d1; }

/* 55: Fresh Lime Tech */
.design-55 { background: #f1faee; }
.design-55 .card-header { background: linear-gradient(135deg, #003049, #005f73); color: #8ac926; }
.design-55 .card-name { color: #003049; } .design-55 .card-info { color: #264653; }
.design-55 .card-id-badge { background: #8ac926; color: #003049; } .design-55 .card-footer { background: #003049; color: #8ac926; }

/* 56: Indigo Corporate */
.design-56 { background: #e0e7ff; }
.design-56 .card-header { background: linear-gradient(135deg, #1e1b4b, #4338ca); color: white; }
.design-56 .card-name { color: #1e1b4b; } .design-56 .card-info { color: #312e81; }
.design-56 .card-id-badge { background: #4338ca; color: white; } .design-56 .card-footer { background: #1e1b4b; color: #c7d2fe; }

/* 57: Ocean Cyan */
.design-57 { background: #caf0f8; }
.design-57 .card-header { background: linear-gradient(135deg, #003566, #00b4d8); color: white; }
.design-57 .card-name { color: #003566; } .design-57 .card-info { color: #023e8a; }
.design-57 .card-id-badge { background: #00b4d8; color: #003566; } .design-57 .card-footer { background: #003566; color: #90e0ef; }

/* 58: Copper Classic */
.design-58 { background: #fff7ed; }
.design-58 .card-header { background: linear-gradient(135deg, #3d2c2e, #78350f); color: #b87333; }
.design-58 .card-name { color: #3d2c2e; } .design-58 .card-info { color: #57534e; }
.design-58 .card-id-badge { background: #b87333; color: white; } .design-58 .card-footer { background: #3d2c2e; color: #b87333; }

/* 59: Violet Studio */
.design-59 { background: #f3e8ff; }
.design-59 .card-header { background: linear-gradient(135deg, #3c096c, #9d4edd); color: white; }
.design-59 .card-name { color: #3c096c; } .design-59 .card-info { color: #5b21b6; }
.design-59 .card-id-badge { background: #9d4edd; color: white; } .design-59 .card-footer { background: #3c096c; color: #d8b4fe; }

/* 60: Forest Premium */
.design-60 { background: #d8f3dc; }
.design-60 .card-header { background: linear-gradient(135deg, #081c15, #2d6a4f); color: #b7e4c7; }
.design-60 .card-name { color: #081c15; } .design-60 .card-info { color: #1b4332; }
.design-60 .card-id-badge { background: #2d6a4f; color: white; } .design-60 .card-footer { background: #081c15; color: #95d5b2; }

/* 61: Ruby Black */
.design-61 { background: #fee2e2; }
.design-61 .card-header { background: linear-gradient(135deg, #111827, #1f2937); color: #dc2626; }
.design-61 .card-name { color: #111827; } .design-61 .card-info { color: #374151; }
.design-61 .card-id-badge { background: #dc2626; color: white; } .design-61 .card-footer { background: #111827; color: #fca5a5; }

/* 62: Sky Minimal */
.design-62 { background: #f0f9ff; }
.design-62 .card-header { background: linear-gradient(135deg, #075985, #38bdf8); color: white; }
.design-62 .card-name { color: #075985; } .design-62 .card-info { color: #0369a1; }
.design-62 .card-id-badge { background: #38bdf8; color: #075985; } .design-62 .card-footer { background: #075985; color: #bae6fd; }

/* 63: Golden School */
.design-63 { background: #fffbeb; }
.design-63 .card-header { background: linear-gradient(135deg, #1f2937, #374151); color: #f59e0b; }
.design-63 .card-name { color: #1f2937; } .design-63 .card-info { color: #4b5563; }
.design-63 .card-id-badge { background: #f59e0b; color: #1f2937; } .design-63 .card-footer { background: #1f2937; color: #fbbf24; }

/* 64: Blue White Modern */
.design-64 { background: #eff6ff; }
.design-64 .card-header { background: linear-gradient(135deg, #1d4ed8, #60a5fa); color: white; }
.design-64 .card-name { color: #1d4ed8; } .design-64 .card-info { color: #1e40af; }
.design-64 .card-id-badge { background: #1d4ed8; color: white; } .design-64 .card-footer { background: #1d4ed8; color: #bfdbfe; }

/* 65: Graphite Green */
.design-65 { background: #ecfdf5; }
.design-65 .card-header { background: linear-gradient(135deg, #111827, #1f2937); color: #10b981; }
.design-65 .card-name { color: #111827; } .design-65 .card-info { color: #374151; }
.design-65 .card-id-badge { background: #10b981; color: white; } .design-65 .card-footer { background: #111827; color: #6ee7b7; }

/* 66: Rose Gold */
.design-66 { background: #fdf2f8; }
.design-66 .card-header { background: linear-gradient(135deg, #4a044e, #831843); color: #f9a8d4; }
.design-66 .card-name { color: #4a044e; } .design-66 .card-info { color: #701a75; }
.design-66 .card-id-badge { background: #f9a8d4; color: #4a044e; } .design-66 .card-footer { background: #4a044e; color: #f9a8d4; }

/* 67: Police Blue */
.design-67 { background: #dbeafe; }
.design-67 .card-header { background: linear-gradient(135deg, #0f172a, #1e3a5f); color: white; }
.design-67 .card-name { color: #0f172a; } .design-67 .card-info { color: #1e3a5f; }
.design-67 .card-id-badge { background: #2563eb; color: white; } .design-67 .card-footer { background: #0f172a; color: #93c5fd; }

/* 68: Hospitality Peach */
.design-68 { background: #fff7ed; }
.design-68 .card-header { background: linear-gradient(135deg, #7c2d12, #c2410c); color: white; }
.design-68 .card-name { color: #7c2d12; } .design-68 .card-info { color: #78350f; }
.design-68 .card-id-badge { background: #fb923c; color: white; } .design-68 .card-footer { background: #7c2d12; color: #fed7aa; }

/* 69: Clinic Lavender */
.design-69 { background: #f5f3ff; }
.design-69 .card-header { background: linear-gradient(135deg, #4c1d95, #7c3aed); color: white; }
.design-69 .card-name { color: #4c1d95; } .design-69 .card-info { color: #5b21b6; }
.design-69 .card-id-badge { background: #c4b5fd; color: #4c1d95; } .design-69 .card-footer { background: #4c1d95; color: #c4b5fd; }

/* 70: Security Black Yellow */
.design-70 { background: #fefce8; }
.design-70 .card-header { background: #000000; color: #facc15; }
.design-70 .card-name { color: #000; } .design-70 .card-info { color: #1f2937; }
.design-70 .card-id-badge { background: #facc15; color: #000; } .design-70 .card-footer { background: #000; color: #facc15; }

/* 71: Corporate Mint */
.design-71 { background: #ecfdf5; }
.design-71 .card-header { background: linear-gradient(135deg, #064e3b, #047857); color: #6ee7b7; }
.design-71 .card-name { color: #064e3b; } .design-71 .card-info { color: #065f46; }
.design-71 .card-id-badge { background: #34d399; color: #064e3b; } .design-71 .card-footer { background: #064e3b; color: #a7f3d0; }

/* 72: Event Purple Pink */
.design-72 { background: #fdf2f8; }
.design-72 .card-header { background: linear-gradient(135deg, #581c87, #a21caf); color: white; }
.design-72 .card-name { color: #581c87; } .design-72 .card-info { color: #86198f; }
.design-72 .card-id-badge { background: #ec4899; color: white; } .design-72 .card-footer { background: #581c87; color: #f0abfc; }

/* 73: Industrial Steel */
.design-73 { background: #f8fafc; }
.design-73 .card-header { background: linear-gradient(135deg, #334155, #64748b); color: white; }
.design-73 .card-name { color: #334155; } .design-73 .card-info { color: #475569; }
.design-73 .card-id-badge { background: #94a3b8; color: #1e293b; } .design-73 .card-footer { background: #334155; color: #cbd5e1; }

/* 74: University Crimson */
.design-74 { background: #fef2f2; }
.design-74 .card-header { background: linear-gradient(135deg, #450a0a, #991b1b); color: white; }
.design-74 .card-name { color: #450a0a; } .design-74 .card-info { color: #7f1d1d; }
.design-74 .card-id-badge { background: #b91c1c; color: white; } .design-74 .card-footer { background: #450a0a; color: #fecaca; }

/* 75: Digital Neon */
.design-75 { background: #020617; color: #e0f2fe; }
.design-75 .card-header { border-bottom: 2px solid #22d3ee; color: #22d3ee; }
.design-75 .card-name { color: #fff; } .design-75 .card-info { color: #94a3b8; }
.design-75 .card-id-badge { background: #22d3ee; color: #020617; } .design-75 .card-footer { background: rgba(34,211,238,0.08); border-top: 1px solid rgba(34,211,238,0.3); color: #22d3ee; }

/* =============================================
   NEW PORTRAIT ROUND DESIGNS 76-90
   ============================================= */
/* 76: P2: Sapphire Vertical */
.design-76 { background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%); }
.design-76 .pt-header { background: linear-gradient(135deg, #0f172a, #3b82f6); color: white; }
.design-76 .pt-name { color: #0f172a; } .design-76 .pt-info { color: #1e3a5f; }
.design-76 .pt-badge { background: #3b82f6; color: white; } .design-76 .photo-frame { border-color: #3b82f6; }
.design-76 .pt-divider { background: #3b82f6; } .design-76 .pt-footer { background: #0f172a; color: #bfdbfe; }

/* 77: P2: Emerald White */
.design-77 { background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%); }
.design-77 .pt-header { background: linear-gradient(135deg, #064e3b, #10b981); color: white; }
.design-77 .pt-name { color: #064e3b; } .design-77 .pt-info { color: #065f46; }
.design-77 .pt-badge { background: #10b981; color: white; } .design-77 .photo-frame { border-color: #10b981; }
.design-77 .pt-divider { background: #10b981; } .design-77 .pt-footer { background: #064e3b; color: #a7f3d0; }

/* 78: P2: Black Gold Elite */
.design-78 { background: linear-gradient(180deg, #111 0%, #1a1a1a 100%); color: #d4af37; }
.design-78 .pt-header { border-bottom: 2px solid #d4af37; color: #d4af37; }
.design-78 .pt-name { color: #d4af37; } .design-78 .pt-desg { color: #c9a227; } .design-78 .pt-info { color: #b8972a; }
.design-78 .pt-badge { background: #d4af37; color: #111; } .design-78 .photo-frame { border-color: #d4af37; }
.design-78 .pt-divider { background: #d4af37; } .design-78 .pt-footer { background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37); color: #111; }

/* 79: P2: Maroon Prestige */
.design-79 { background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%); }
.design-79 .pt-header { background: linear-gradient(135deg, #4a0d1f, #be123c); color: white; }
.design-79 .pt-name { color: #4a0d1f; } .design-79 .pt-info { color: #881337; }
.design-79 .pt-badge { background: #be123c; color: white; } .design-79 .photo-frame { border-color: #be123c; }
.design-79 .pt-divider { background: #be123c; } .design-79 .pt-footer { background: #4a0d1f; color: #fda4af; }

/* 80: P2: Aqua Health */
.design-80 { background: linear-gradient(180deg, #e9d8a6 20%, #f5f0dc 100%); }
.design-80 .pt-header { background: linear-gradient(135deg, #005f73, #0a9396); color: white; }
.design-80 .pt-name { color: #005f73; } .design-80 .pt-info { color: #0a4e52; }
.design-80 .pt-badge { background: #0a9396; color: white; } .design-80 .photo-frame { border-color: #0a9396; }
.design-80 .pt-divider { background: #0a9396; } .design-80 .pt-footer { background: #005f73; color: #e9d8a6; }

/* 81: P2: Orange Modern */
.design-81 { background: linear-gradient(180deg, #ffedd5 0%, #fff7ed 100%); }
.design-81 .pt-header { background: linear-gradient(135deg, #7c2d12, #f97316); color: white; }
.design-81 .pt-name { color: #7c2d12; } .design-81 .pt-info { color: #9a3412; }
.design-81 .pt-badge { background: #f97316; color: white; } .design-81 .photo-frame { border-color: #f97316; }
.design-81 .pt-divider { background: #f97316; } .design-81 .pt-footer { background: #7c2d12; color: #fed7aa; }

/* 82: P2: Purple Luxury */
.design-82 { background: linear-gradient(180deg, #ede9fe 0%, #f5f3ff 100%); }
.design-82 .pt-header { background: linear-gradient(135deg, #2e1065, #8b5cf6); color: white; }
.design-82 .pt-name { color: #2e1065; } .design-82 .pt-info { color: #4c1d95; }
.design-82 .pt-badge { background: #8b5cf6; color: white; } .design-82 .photo-frame { border-color: #8b5cf6; }
.design-82 .pt-divider { background: #8b5cf6; } .design-82 .pt-footer { background: #2e1065; color: #c4b5fd; }

/* 83: P2: Grey Minimal */
.design-83 { background: linear-gradient(180deg, #f3f4f6 0%, #f9fafb 100%); }
.design-83 .pt-header { background: linear-gradient(135deg, #1f2937, #4b5563); color: white; }
.design-83 .pt-name { color: #1f2937; } .design-83 .pt-info { color: #4b5563; }
.design-83 .pt-badge { background: #9ca3af; color: #1f2937; } .design-83 .photo-frame { border-color: #9ca3af; }
.design-83 .pt-divider { background: #9ca3af; } .design-83 .pt-footer { background: #1f2937; color: #d1d5db; }

/* 84: P2: Sky Corporate */
.design-84 { background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%); }
.design-84 .pt-header { background: linear-gradient(135deg, #0c4a6e, #38bdf8); color: white; }
.design-84 .pt-name { color: #0c4a6e; } .design-84 .pt-info { color: #075985; }
.design-84 .pt-badge { background: #38bdf8; color: #0c4a6e; } .design-84 .photo-frame { border-color: #38bdf8; }
.design-84 .pt-divider { background: #38bdf8; } .design-84 .pt-footer { background: #0c4a6e; color: #bae6fd; }

/* 85: P2: Fresh Green */
.design-85 { background: linear-gradient(180deg, #f7fee7 0%, #ecfccb 100%); }
.design-85 .pt-header { background: linear-gradient(135deg, #14532d, #84cc16); color: white; }
.design-85 .pt-name { color: #14532d; } .design-85 .pt-info { color: #166534; }
.design-85 .pt-badge { background: #84cc16; color: #14532d; } .design-85 .photo-frame { border-color: #84cc16; }
.design-85 .pt-divider { background: #84cc16; } .design-85 .pt-footer { background: #14532d; color: #d9f99d; }

/* 86: P2: Rose Creative */
.design-86 { background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%); }
.design-86 .pt-header { background: linear-gradient(135deg, #831843, #ec4899); color: white; }
.design-86 .pt-name { color: #831843; } .design-86 .pt-info { color: #9d174d; }
.design-86 .pt-badge { background: #f472b6; color: white; } .design-86 .photo-frame { border-color: #f472b6; }
.design-86 .pt-divider { background: #ec4899; } .design-86 .pt-footer { background: #831843; color: #fbcfe8; }

/* 87: P2: Navy Clean */
.design-87 { background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); }
.design-87 .pt-header { background: linear-gradient(135deg, #172554, #2563eb); color: white; }
.design-87 .pt-name { color: #172554; } .design-87 .pt-info { color: #1e3a8a; }
.design-87 .pt-badge { background: #2563eb; color: white; } .design-87 .photo-frame { border-color: #2563eb; }
.design-87 .pt-divider { background: #2563eb; } .design-87 .pt-footer { background: #172554; color: #93c5fd; }

/* 88: P2: Brown Vintage */
.design-88 { background: linear-gradient(180deg, #fef3c7 0%, #fff8e1 100%); }
.design-88 .pt-header { background: linear-gradient(135deg, #431407, #78350f); color: #fbbf24; }
.design-88 .pt-name { color: #431407; } .design-88 .pt-info { color: #78350f; }
.design-88 .pt-badge { background: #a16207; color: white; } .design-88 .photo-frame { border-color: #a16207; }
.design-88 .pt-divider { background: #a16207; } .design-88 .pt-footer { background: #431407; color: #fde68a; }

/* 89: P2: Teal Professional */
.design-89 { background: linear-gradient(180deg, #ccfbf1 0%, #f0fdfa 100%); }
.design-89 .pt-header { background: linear-gradient(135deg, #134e4a, #14b8a6); color: white; }
.design-89 .pt-name { color: #134e4a; } .design-89 .pt-info { color: #115e59; }
.design-89 .pt-badge { background: #14b8a6; color: white; } .design-89 .photo-frame { border-color: #14b8a6; }
.design-89 .pt-divider { background: #14b8a6; } .design-89 .pt-footer { background: #134e4a; color: #99f6e4; }

/* 90: P2: Red Premium */
.design-90 { background: linear-gradient(180deg, #1f1f1f 0%, #2a2a2a 100%); color: #fca5a5; }
.design-90 .pt-header { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.design-90 .pt-name { color: #fff; } .design-90 .pt-desg { color: #fca5a5; } .design-90 .pt-info { color: #d6d3d1; }
.design-90 .pt-badge { background: #ef4444; color: white; } .design-90 .photo-frame { border-color: #ef4444; }
.design-90 .pt-divider { background: #ef4444; } .design-90 .pt-footer { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* =============================================
   NEW PORTRAIT RECT DESIGNS 91-100
   ============================================= */
/* 91: PR2: Steel Rect — Layout A */
.design-91 { background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%); }
.design-91 .pt-header { background: linear-gradient(135deg, #0f172a, #334155); color: white; }
.design-91 .pt-name { color: #0f172a; } .design-91 .pt-info { color: #475569; }
.design-91 .pt-badge { background: #64748b; color: white; } .design-91 .pt-divider { background: #64748b; }
.design-91 .pt-footer { background: #0f172a; color: #cbd5e1; }

/* 92: PR2: Blue Rect — Layout A */
.design-92 { background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%); }
.design-92 .pt-header { background: linear-gradient(135deg, #082f49, #0284c7); color: white; }
.design-92 .pt-name { color: #082f49; } .design-92 .pt-info { color: #0369a1; }
.design-92 .pt-badge { background: #0284c7; color: white; } .design-92 .pt-divider { background: #0284c7; }
.design-92 .pt-footer { background: #082f49; color: #7dd3fc; }

/* 93: PR2: Green Rect — Layout B */
.design-93 { background: linear-gradient(180deg, #dcfce7 0%, #f0fdf4 100%); }
.design-93 .pt-header { background: linear-gradient(135deg, #052e16, #16a34a); color: white; }
.design-93 .pt-name { color: #052e16; } .design-93 .pt-info { color: #166534; }
.design-93 .pt-badge { background: #16a34a; color: white; } .design-93 .pt-divider { background: #16a34a; }
.design-93 .pt-footer { background: #052e16; color: #bbf7d0; }

/* 94: PR2: Violet Rect — Layout B */
.design-94 { background: linear-gradient(180deg, #ede9fe 0%, #f5f3ff 100%); }
.design-94 .pt-header { background: linear-gradient(135deg, #312e81, #7c3aed); color: white; }
.design-94 .pt-name { color: #312e81; } .design-94 .pt-info { color: #4c1d95; }
.design-94 .pt-badge { background: #7c3aed; color: white; } .design-94 .pt-divider { background: #7c3aed; }
.design-94 .pt-footer { background: #312e81; color: #c4b5fd; }

/* 95: PR2: Coral Rect — Layout C */
.design-95 { background: linear-gradient(0deg, #fff1f2 0%, #ffe4e6 100%); }
.design-95 .ptr-accent-bar { background: linear-gradient(180deg, #e11d48, #fb7185); }
.design-95 .pt-header { background: none; color: #9f1239; padding-top: 12px; }
.design-95 .pt-name { color: #9f1239; } .design-95 .pt-info { color: #881337; }
.design-95 .pt-badge { background: #fb7185; color: white; } .design-95 .pt-divider { background: #fb7185; }
.design-95 .pt-footer { background: linear-gradient(135deg, #9f1239, #e11d48); color: white; }

/* 96: PR2: Gold Rect — Layout C */
.design-96 { background: linear-gradient(0deg, #1c1917 0%, #292524 100%); color: #fbbf24; }
.design-96 .ptr-accent-bar { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.design-96 .pt-header { background: none; color: #f59e0b; padding-top: 12px; }
.design-96 .pt-name { color: #fbbf24; } .design-96 .pt-info { color: #d6d3d1; }
.design-96 .pt-badge { background: #f59e0b; color: #0c0a09; } .design-96 .pt-divider { background: #f59e0b; }
.design-96 .pt-footer { background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); color: #0c0a09; font-weight: 600; }

/* 97: PR2: Mint Rect — Layout D */
.design-97 { background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%); }
.design-97 .ptr-header-tall { background: linear-gradient(135deg, #064e3b, #0d9488); color: white; }
.design-97 .pt-name { color: #064e3b; } .design-97 .pt-info { color: #115e59; }
.design-97 .pt-badge { background: #5eead4; color: #064e3b; } .design-97 .pt-divider { background: #14b8a6; }
.design-97 .pt-footer { background: #064e3b; color: #99f6e4; }

/* 98: PR2: Indigo Rect — Layout D */
.design-98 { background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%); }
.design-98 .ptr-header-tall { background: linear-gradient(135deg, #1e1b4b, #4f46e5); color: white; }
.design-98 .pt-name { color: #1e1b4b; } .design-98 .pt-info { color: #312e81; }
.design-98 .pt-badge { background: #6366f1; color: white; } .design-98 .pt-divider { background: #6366f1; }
.design-98 .pt-footer { background: #1e1b4b; color: #a5b4fc; }

/* 99: PR2: Slate Rect — Layout E */
.design-99 { background: #f9fafb; }
.design-99 .ptr-top-half { background: linear-gradient(135deg, #111827, #374151); }
.design-99 .ptr-top-half .pt-org { color: white; }
.design-99 .pt-name { color: #111827; } .design-99 .pt-info { color: #4b5563; }
.design-99 .pt-badge { background: #6b7280; color: white; } .design-99 .pt-divider { background: #6b7280; }
.design-99 .pt-footer { background: #111827; color: #d1d5db; }

/* 100: PR2: Flame Rect — Layout E */
.design-100 { background: #fff7ed; }
.design-100 .ptr-top-half { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.design-100 .ptr-top-half .pt-org { color: white; }
.design-100 .pt-name { color: #7c2d12; } .design-100 .pt-info { color: #9a3412; }
.design-100 .pt-badge { background: #f97316; color: white; } .design-100 .pt-divider { background: #f97316; }
.design-100 .pt-footer { background: linear-gradient(135deg, #7c2d12, #ea580c); color: white; }

/* Print Styles */
@media print {
    body {
        background: white;
        overflow: visible;
    }
    .toolbar, .popup-overlay {
        display: none !important;
    }
    .preview-area {
        height: auto;
        background: white;
    }
    .card-container {
        box-shadow: none;
        margin: 0 auto;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .toolbar {
        padding: 8px 12px;
    }
    .toolbar-title {
        font-size: 13px;
    }
    .tb-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
    .card-container {
        transform: scale(0.85);
    }
    .design-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .popup {
        max-width: 95vw;
    }
}

@media (max-width: 480px) {
    .toolbar-title {
        display: none;
    }
    .card-container {
        transform: scale(0.7);
    }
    .design-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== EXTRA UI: SHEET PREVIEW + IMPROVED LAYOUT ===== */
.tb-btn.tb-sheet {
    background: linear-gradient(135deg, #13547a, #80d0c7);
    border-color: #80d0c7;
    color: #fff;
}
.tb-btn.tb-sheet2 {
    background: linear-gradient(135deg, #355c7d, #6c5b7b);
    border-color: #6c5b7b;
    color: #fff;
}
.tb-btn.tb-danger {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #ffb3c1;
}

.preview-area {
    height: calc(100vh - 58px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: stretch;
    justify-content: stretch;
    padding: 18px;
}

.preview-stage {
    min-width: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-stage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    flex-wrap: wrap;
}
.preview-tag {
    font-size: 11px;
    font-weight: 700;
    color: #e1e5ff;
    background: rgba(233,69,96,0.15);
    border: 1px solid rgba(233,69,96,0.3);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.preview-tag.hint {
    font-weight: 500;
    color: #a6abc9;
    background: rgba(255,255,255,0.04);
    border-color: #2a2a4a;
}
.preview-meta {
    font-size: 11px;
    color: #e1e5ff;
    background: rgba(123,47,247,0.12);
    border: 1px solid rgba(123,47,247,0.3);
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: auto;
    white-space: nowrap;
}

.card-side-toggle {
    display: flex;
    gap: 0;
    padding: 0 24px;
}
.side-btn {
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #333;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
}
.side-btn:first-child { border-radius: 8px 0 0 8px; }
.side-btn:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.side-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
body.light .side-btn { border-color: #d0d5dd; color: #666; }
body.light .side-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

.preview-canvas-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    padding: 24px;
}
/* ===== QR-ONLY TOGGLE BUTTON ===== */
.qr-only-btn {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid #2a2a4a;
    background: rgba(100,100,100,0.15);
    color: #aaa;
    cursor: pointer;
    margin-left: 4px;
    font-weight: 700;
    vertical-align: middle;
    transition: all 0.2s;
}
.qr-only-btn.both-mode {
    background: rgba(59,130,246,0.15);
    color: #3b82f6;
    border-color: rgba(59,130,246,0.3);
}
.qr-only-btn.card-mode {
    background: rgba(16,185,129,0.15);
    color: #10b981;
    border-color: rgba(16,185,129,0.3);
}
.qr-only-btn.qr-mode {
    background: rgba(233,69,96,0.15);
    color: #e94560;
    border-color: rgba(233,69,96,0.3);
}
body.light .qr-only-btn.both-mode {
    background: rgba(59,130,246,0.1);
}
body.light .qr-only-btn.card-mode {
    border-color: #d0d5dd;
    background: rgba(16,185,129,0.1);
}
body.light .qr-only-btn.qr-mode {
    background: rgba(233,69,96,0.1);
}

/* ===== DRAGGABLE ELEMENTS ON CARD ===== */
[data-drag-key] {
    transition: outline 0.15s, box-shadow 0.15s;
}
[data-drag-key]:hover {
    outline: 1px dashed rgba(233,69,96,0.5);
    outline-offset: 2px;
}

/* ===== INSTRUCTION CARD ===== */
.instruction-card {
    margin: 0 14px 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #242446;
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.instruction-tip {
    font-size: 12px;
    color: #e94560;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.instruction-title {
    display: none;
}
.instruction-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    transition: all 0.3s ease;
}
.instruction-step {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}
.step-num {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    background: #e94560;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.step-text {
    font-size: 9px;
    line-height: 1.2;
    color: #a6abc9;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.step-text b {
    color: #e1e5ff;
}

/* Expanded state */
.instruction-card:hover {
    padding: 14px 18px;
    background: rgba(233,69,96,0.05);
    border-color: rgba(233,69,96,0.3);
}
.instruction-card:hover .instruction-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #e1e5ff;
    margin-bottom: 10px;
}
.instruction-card:hover .instruction-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 14px;
}
.instruction-card:hover .instruction-step {
    gap: 8px;
    align-items: flex-start;
}
.instruction-card:hover .step-num {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 11px;
}
.instruction-card:hover .step-text {
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
}
@media (max-width: 1100px) {
    .instruction-card:hover .instruction-steps {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .instruction-card:hover .instruction-steps {
        grid-template-columns: 1fr;
    }
}

.preview-canvas-wrap::-webkit-scrollbar,
.sheet-panel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.preview-canvas-wrap::-webkit-scrollbar-thumb,
.sheet-panel::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 8px;
}

.card-container {
    max-width: 100%;
    max-height: 100%;
}

.photo-frame img.card-photo-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.08s linear, object-position 0.08s linear;
    will-change: transform, object-position;
}

.sheet-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sheet-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sheet-panel-header h3 {
    font-size: 15px;
    margin-bottom: 3px;
}
.sheet-panel-header p,
.sheet-help {
    font-size: 12px;
    color: #a6abc9;
    line-height: 1.45;
}
.sheet-badge {
    background: rgba(233,69,96,0.14);
    border: 1px solid rgba(233,69,96,0.35);
    color: #ffd2da;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

.sheet-toolbar {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.sheet-page-label {
    text-align: center;
    font-size: 12px;
    color: #d5daf8;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 7px 10px;
    border-radius: 8px;
}

.sheet-preview-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg-sheet);
    border-radius: 14px;
    border: 1px solid #23233b;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-preview {
    position: relative;
    width: 250px;
    min-width: 250px;
    height: 354px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(0,0,0,0.35);
    border-radius: 6px;
    overflow: hidden;
}

.sheet-slot {
    position: absolute;
    border: 1px dashed rgba(23, 43, 77, 0.16);
    overflow: hidden;
    background: #ffffff;
    border-radius: 4px;
}

.sheet-card-host {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sheet-card-host > * {
    transform-origin: top left;
}

.sheet-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(233,69,96,0.95);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.sheet-remove:hover {
    background: #ff335a;
}

.sheet-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #333;
}
.sheet-empty-icon { font-size: 34px; margin-bottom: 8px; }
.sheet-empty-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sheet-empty-text { font-size: 12px; color: #555; line-height: 1.45; }

.sheet-help {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}

@media print {
    .sheet-panel,
    .preview-stage-header {
        display: none !important;
    }
    .preview-area {
        display: block;
        padding: 0;
        background: #fff;
    }
    .preview-stage {
        border: none;
        background: #fff;
    }
    .preview-canvas-wrap {
        padding: 0;
        overflow: visible;
    }
}

@media (max-width: 1100px) {
    .preview-area {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 58px);
        overflow: auto;
    }
    .sheet-panel {
        min-height: 520px;
    }
}

@media (max-width: 768px) {
    .preview-stage-header,
    .sheet-panel-header {
        flex-direction: column;
    }
    .preview-meta {
        max-width: none;
        text-align: left;
    }
    .sheet-toolbar {
        grid-template-columns: repeat(2, 1fr);
    }
    .sheet-page-label {
        grid-column: 1 / -1;
    }
}

/* ===== LIGHT THEME OVERRIDES ===== */
body.light .toolbar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.light .tb-btn {
    color: #333;
}
body.light .tb-btn.tb-action,
body.light .tb-btn.tb-action2,
body.light .tb-btn.tb-sheet,
body.light .tb-btn.tb-sheet2 {
    color: #fff;
}
body.light .tb-btn:hover {
    background: #e94560;
    color: #fff;
}
body.light .logo-mini {
    background: #e94560;
    color: #fff;
}
body.light .toolbar-title {
    color: #1a1a2e;
}
body.light .popup-header {
    background: rgba(233,69,96,0.05);
}
body.light .popup-close {
    background: rgba(233,69,96,0.1);
}
body.light .form-group input,
body.light .form-group select,
body.light .form-group textarea {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}
body.light .form-group label {
    color: var(--text-secondary);
}
body.light .color-group label {
    color: var(--text-secondary);
}
body.light .control-section {
    background: var(--bg-section);
    border-color: var(--border);
}
body.light .control-section-title {
    color: var(--text-primary);
}
body.light .range-group label {
    color: var(--text-secondary);
}
body.light .preview-tag {
    color: var(--text-primary);
    background: rgba(233,69,96,0.1);
    border-color: rgba(233,69,96,0.2);
}
body.light .preview-tag.hint {
    color: var(--text-secondary);
    background: rgba(0,0,0,0.04);
    border-color: var(--border);
}
body.light .preview-meta {
    color: #4a3680;
    background: rgba(123,47,247,0.08);
    border-color: rgba(123,47,247,0.2);
}
body.light .sheet-preview-wrap {
    border-color: var(--border);
}
body.light .sheet-badge {
    background: #e94560;
    color: #ffffff;
}
body.light .sheet-page-label {
    color: #000000;
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}
body.light .instruction-card {
    background: rgba(0,0,0,0.02);
    border-color: var(--border);
}
body.light .instruction-tip {
    color: #e94560;
}
body.light .step-text {
    color: #333;
}
body.light .step-text b {
    color: #000;
}
body.light .instruction-card:hover .step-text {
    color: #000;
}
body.light .instruction-card:hover .instruction-title {
    color: #000;
}
body.light .sheet-empty-title,
body.light .sheet-help {
    color: var(--text-secondary);
}
body.light .qr-data-live {
    background: #f5f5f5;
    border-color: var(--border);
    color: #2e7d32;
}
body.light .extra-qr-row input {
    background: #f5f5f5;
    border-color: var(--border);
    color: #333;
}
body.light .design-thumb {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.light .size-card {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}
body.light .size-card .size-name {
    color: #111;
}
body.light .size-card .size-desc,
body.light .size-card .size-px,
body.light .size-card .size-tag {
    color: var(--text-secondary);
}
body.light .hide-toggle {
    border-color: var(--border);
    color: var(--text-muted);
}

/* Saved design default controls */
.default-status-msg {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 260px;
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
    opacity: 0;
    transition: opacity .25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}