/* PCI Specs App — Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
 --blue: #3a78bd;
 --navy: #3a78bd;
 --gold: #c5a05a;
 --green: #38a169;
 --red: #e53e3e;
 --gray-50: #f7fafc;
 --gray-100: #edf2f7;
 --gray-200: #e2e8f0;
 --gray-300: #cbd5e0;
 --gray-400: #a0aec0;
 --gray-500: #718096;
 --gray-600: #4a5568;
 --gray-700: #2d3748;
 --gray-800: #1a202c;
 --radius: 6px;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background: var(--gray-100);
 color: var(--gray-700);
 line-height: 1.6;
}

/* ========== NAV ========== */
.nav {
 background: var(--blue);
 padding: 0 24px;
 display: flex;
 align-items: center;
 gap: 20px;
 height: 56px;
 position: sticky;
 top: 0;
 z-index: 100;
 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nav-brand {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
}
.nav-logo { height: 32px; }
.nav-titles { display: flex; flex-direction: column; line-height: 1.2; }
.nav-title { color: #fff; font-size: 0.9rem; font-weight: 700; }
.nav-sub { color: var(--gold); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; }
.nav-tabs {
 display: flex;
 gap: 2px;
 flex: 1;
 justify-content: center;
}
.tab {
 background: transparent;
 border: none;
 color: rgba(255,255,255,0.6);
 padding: 16px 18px;
 font-size: 0.82rem;
 font-weight: 600;
 cursor: pointer;
 border-bottom: 3px solid transparent;
 transition: 0.15s;
}
.tab:hover { color: rgba(255,255,255,0.9); }
.tab.active { color: #fff; border-bottom-color: var(--gold); }
.nav-actions {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
}
.user-badge {
 color: rgba(255,255,255,0.7);
 font-size: 0.72rem;
 font-weight: 600;
}

/* ========== BUTTONS ========== */
.btn {
 padding: 6px 14px;
 border: none;
 border-radius: var(--radius);
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 transition: 0.15s;
}
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: #0a5f9a; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #d4af37; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #2f855a; }
.btn-print { background: var(--navy); color: #fff; padding: 8px 16px; white-space: nowrap; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #c53030; }
.btn-edit { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-edit:hover { background: rgba(255,255,255,0.25); }
.btn-edit.active { background: var(--green); border-color: var(--green); }
.btn-sm { padding: 3px 8px; font-size: 0.7rem; }
.btn-outline {
 background: transparent;
 border: 1px solid var(--gray-300);
 color: var(--gray-600);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

/* ========== VIEWS ========== */
.view { display: none; max-width: 1100px; margin: 0 auto; padding: 20px 24px 40px; }
.view.active { display: block; }
.view-header { margin-bottom: 20px; }
.view-header h1 { font-size: 1.4rem; color: var(--navy); margin-bottom: 4px; }
.view-header p { font-size: 0.88rem; color: var(--gray-500); }
.view-toolbar {
 display: flex;
 gap: 10px;
 margin-top: 14px;
 flex-wrap: wrap;
}
.search {
 flex: 1;
 min-width: 220px;
 padding: 8px 12px;
 border: 1px solid var(--gray-300);
 border-radius: var(--radius);
 font-size: 0.85rem;
 font-family: inherit;
}
.search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(11,108,175,0.12); }
.filter {
 padding: 8px 10px;
 border: 1px solid var(--gray-300);
 border-radius: var(--radius);
 font-size: 0.82rem;
 background: #fff;
}
.filter:focus { outline: none; border-color: var(--blue); }
.placeholder-msg {
 text-align: center;
 padding: 60px 20px;
 color: var(--gray-400);
 font-size: 1rem;
 background: #fff;
 border-radius: var(--radius);
 border: 2px dashed var(--gray-300);
}
.placeholder-icon {
 font-size: 2.5rem;
 color: var(--gray-300);
 margin-bottom: 12px;
}
.placeholder-title {
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--gray-500);
 margin-bottom: 6px;
}
.placeholder-detail {
 font-size: 0.85rem;
 color: var(--gray-400);
 line-height: 1.6;
}

/* ========== LOADING ========== */
.loading-msg {
 text-align: center;
 padding: 40px 20px;
 color: var(--gray-400);
 font-size: 0.9rem;
}

/* ========== FOOTER ========== */
.app-footer {
 text-align: center;
 padding: 24px 20px;
 font-size: 0.72rem;
 color: var(--gray-400);
 border-top: 1px solid var(--gray-200);
 margin-top: 40px;
}

/* ========== DIVISION CARDS ========== */
.divisions { display: flex; flex-direction: column; gap: 12px; }
.div-card {
 background: #fff;
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 border: 1px solid var(--gray-200);
}
.div-header {
 background: var(--blue);
 color: #fff;
 padding: 12px 16px;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
 user-select: none;
 transition: 0.15s;
}
.div-header:hover { background: #0a5f9a; }
.div-header h2 { font-size: 0.92rem; font-weight: 700; }
.div-meta {
 display: flex;
 gap: 6px;
 align-items: center;
}
.div-count {
 background: rgba(255,255,255,0.2);
 padding: 1px 8px;
 border-radius: 10px;
 font-size: 0.65rem;
 font-weight: 600;
}
.div-arrow {
 font-size: 0.8rem;
 transition: transform 0.2s;
 width: 18px;
 text-align: center;
}
.div-card.collapsed .div-arrow { transform: rotate(-90deg); }
.div-body { padding: 0; }
.div-card.collapsed .div-body { display: none; }

/* ========== SPEC ITEMS ========== */
.item {
 padding: 10px 16px;
 border-bottom: 1px solid var(--gray-100);
 display: flex;
 gap: 10px;
 align-items: flex-start;
 transition: background 0.1s;
}
.item:hover { background: var(--gray-50); }
.item:last-child { border-bottom: none; }
.item-bullet {
 color: var(--blue);
 font-weight: 700;
 font-size: 1rem;
 line-height: 1.5;
 flex-shrink: 0;
}
.item-content { flex: 1; min-width: 0; }
.item-title {
 font-weight: 600;
 color: var(--navy);
 font-size: 0.88rem;
}
.item-desc {
 font-size: 0.84rem;
 color: var(--gray-600);
 margin-top: 1px;
}
/* Responsibility labels */
.item-resp {
 font-size: 0.76rem;
 font-weight: 600;
 margin-top: 3px;
 padding: 3px 10px;
 border-radius: 4px;
 display: inline-block;
}
.resp-builder {
 background: #f0fff4;
 color: #276749;
 border: 1px solid #c6f6d5;
}
.resp-client {
 background: #fff5f5;
 color: #9b2c2c;
 border: 1px solid #fed7d7;
}
/* Details (qty, price) */
.item-details {
 font-size: 0.8rem;
 color: var(--gray-600);
 font-weight: 500;
 margin-top: 3px;
}
.item-link {
 font-size: 0.74rem;
 color: var(--blue);
 text-decoration: none;
 background: #ebf8ff;
 padding: 3px 10px;
 border-radius: 4px;
 margin-top: 4px;
 display: inline-block;
 font-weight: 600;
}
.item-link:hover { background: #bee3f8; text-decoration: underline; }
.item-tags { display: flex; gap: 4px; flex-shrink: 0; align-items: flex-start; margin-top: 2px; }
.tag {
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.2px;
 white-space: nowrap;
}
.tag-std { background: #f0fff4; color: #276749; border: 1px solid #c6f6d5; }
.tag-opt { background: #fff5f5; color: #9b2c2c; border: 1px solid #fed7d7; }
.tag-select { background: #fefcbf; color: #975a16; border: 1px solid #fefcbf; }

/* ========== SELECT-ONE ITEMS ========== */
.item-variations {
 margin-top: 6px;
 padding: 6px 0 0;
}
.variation {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 4px 0;
 font-size: 0.82rem;
 color: var(--gray-600);
}
.variation input[type="radio"] {
 accent-color: var(--blue);
 cursor: pointer;
}
.variation label { cursor: pointer; flex: 1; }
.variation.selected label { color: var(--navy); font-weight: 600; }

/* ========== OPTION ITEMS (checkbox) ========== */
.item-option {
 padding: 8px 16px;
 border-bottom: 1px solid var(--gray-100);
 display: flex;
 gap: 10px;
 align-items: flex-start;
 background: #fafcff;
}
.item-option:hover { background: #f0f7ff; }
.item-option.checked { background: #f0fff4; border-left: 3px solid var(--green); }
.item-option input[type="checkbox"] {
 width: 16px;
 height: 16px;
 margin-top: 2px;
 accent-color: var(--blue);
 cursor: pointer;
 flex-shrink: 0;
}

/* ========== IMAGES ========== */
.item-images {
 display: flex;
 gap: 6px;
 margin-top: 6px;
 flex-wrap: wrap;
}
.item-img {
 width: 60px;
 height: 60px;
 object-fit: cover;
 border-radius: 4px;
 border: 1px solid var(--gray-200);
 cursor: pointer;
}
.item-img:hover { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(11,108,175,0.15); }
/* ========== IMAGE CAROUSEL ========== */
.img-carousel {
 position: relative;
 margin-top: 8px;
 max-width: 320px;
 background: var(--gray-50);
 border-radius: 6px;
 border: 1px solid var(--gray-200);
 overflow: hidden;
 flex-basis: 100%;
}
.carousel-track {
 position: relative;
 width: 100%;
 aspect-ratio: 4/3;
}
.carousel-slide {
 display: none;
 width: 100%;
 height: 100%;
 object-fit: contain;
 cursor: pointer;
 background: var(--gray-50);
}
.carousel-slide.active { display: block; }
.carousel-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-60%);
 background: rgba(0,0,0,0.4);
 color: #fff;
 border: none;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 font-size: 16px;
 line-height: 28px;
 text-align: center;
 cursor: pointer;
 z-index: 2;
 transition: 0.15s;
}
.carousel-btn:hover { background: rgba(0,0,0,0.65); }
.carousel-prev { left: 6px; }
.carousel-next { right: 6px; }
.carousel-dots {
 display: flex;
 justify-content: center;
 gap: 5px;
 padding: 6px 0;
}
.carousel-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--gray-300);
 cursor: pointer;
 transition: 0.15s;
}
.carousel-dot.active { background: var(--blue); }
.carousel-dot:hover { background: var(--blue); opacity: 0.7; }
.carousel-counter {
 text-align: center;
 font-size: 0.65rem;
 color: var(--gray-400);
 padding: 0 0 6px;
}

.img-link {
 font-size: 0.7rem;
 color: var(--blue);
 text-decoration: none;
 background: #ebf8ff;
 padding: 2px 6px;
 border-radius: 3px;
}
.img-link:hover { background: #bee3f8; }

/* ========== SECTION LABELS ========== */
.section-label {
 padding: 8px 16px 4px;
 font-size: 0.7rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.8px;
 color: var(--gray-500);
 border-top: 1px solid var(--gray-100);
}
.section-label:first-child { border-top: none; }
.section-label-std { color: var(--blue); }
.section-label-opt { color: var(--gold); }

/* ========== SPEC SECTION HEADERS (within divisions) ========== */
.spec-section-header {
 padding: 10px 16px 6px;
 font-size: 0.78rem;
 font-weight: 700;
 color: var(--navy);
 background: var(--gray-50);
 border-top: 2px solid var(--gray-200);
 text-transform: uppercase;
 letter-spacing: 0.4px;
}
.spec-section-header:first-child { border-top: none; }

/* ========== EDIT MODE ========== */
.edit-row {
 display: flex;
 gap: 6px;
 align-items: center;
 width: 100%;
}
.edit-input {
 padding: 5px 8px;
 border: 1px solid var(--gray-300);
 border-radius: 4px;
 font-size: 0.82rem;
 font-family: inherit;
}
.edit-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(11,108,175,0.12); }
.edit-input-title { width: 200px; font-weight: 600; flex-shrink: 0; }
.edit-input-desc { flex: 1; }
.edit-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Add item row */
.add-item-row {
 padding: 10px 16px;
 border-top: 1px solid var(--gray-200);
 background: var(--gray-50);
 display: none;
}
.editing .add-item-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.add-item-row input {
 flex: 1;
 min-width: 150px;
 padding: 6px 8px;
 border: 1px solid var(--gray-300);
 border-radius: 4px;
 font-size: 0.82rem;
 font-family: inherit;
}
.add-item-row input:focus { outline: none; border-color: var(--blue); }
.add-item-row select {
 padding: 6px;
 border: 1px solid var(--gray-300);
 border-radius: 4px;
 font-size: 0.78rem;
}

/* Hide edit controls when not editing */
.edit-only { display: none; }
.editing .edit-only { display: inline-flex; }

/* ========== DIVISION NOTES ========== */
.div-notes {
 padding: 10px 16px;
 border-top: 1px solid var(--gray-200);
}
.div-notes label {
 font-size: 0.7rem;
 font-weight: 600;
 color: var(--gray-500);
 text-transform: uppercase;
}
.div-notes textarea {
 width: 100%;
 min-height: 40px;
 padding: 6px 8px;
 border: 1px solid var(--gray-300);
 border-radius: 4px;
 font-size: 0.82rem;
 font-family: inherit;
 resize: vertical;
 margin-top: 3px;
}
.div-notes textarea:focus { outline: none; border-color: var(--blue); }

/* ========== IMAGE UPLOAD (edit mode) ========== */
.img-upload-zone {
 margin-top: 8px;
 padding: 12px;
 border: 2px dashed var(--gray-300);
 border-radius: var(--radius);
 background: var(--gray-50);
 text-align: center;
 cursor: pointer;
 transition: 0.15s;
 display: none;
}
.editing .img-upload-zone { display: block; flex-basis: 100%; }
.editing .item { flex-wrap: wrap; }
.img-upload-zone.dragover {
 border-color: var(--blue);
 background: #ebf8ff;
}
.img-upload-zone .upload-label {
 font-size: 0.78rem;
 color: var(--gray-500);
 font-weight: 600;
}
.img-upload-zone .upload-hint {
 font-size: 0.68rem;
 color: var(--gray-400);
 margin-top: 2px;
}
.img-upload-zone input[type="file"] { display: none; }
.img-url-row {
 display: none;
 gap: 6px;
 margin-top: 4px;
 align-items: center;
}
.editing .img-url-row { display: flex; flex-basis: 100%; }
.img-url-input {
 flex: 1;
 padding: 5px 8px;
 border: 1px solid var(--gray-300);
 border-radius: 4px;
 font-size: 0.78rem;
 font-family: inherit;
}
.img-url-input:focus { outline: none; border-color: var(--blue); }
.img-edit-grid {
 display: flex;
 gap: 6px;
 margin-top: 6px;
 flex-wrap: wrap;
 flex-basis: 100%;
}
.img-edit-thumb {
 position: relative;
 width: 70px;
 height: 70px;
}
.img-edit-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 4px;
 border: 1px solid var(--gray-200);
}
.img-edit-thumb .img-remove {
 position: absolute;
 top: -4px;
 right: -4px;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: var(--red);
 color: #fff;
 border: none;
 font-size: 10px;
 line-height: 18px;
 text-align: center;
 cursor: pointer;
 display: none;
}
.editing .img-edit-thumb .img-remove { display: block; }
.upload-progress {
 margin-top: 6px;
 height: 4px;
 background: var(--gray-200);
 border-radius: 2px;
 overflow: hidden;
}
.upload-progress-bar {
 height: 100%;
 background: var(--blue);
 width: 0%;
 transition: width 0.3s;
}

/* ========== WORDPRESS MEDIA PICKER ========== */
.wp-picker-overlay {
 display: none;
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0,0,0,0.6);
 z-index: 300;
 justify-content: center;
 align-items: center;
}
.wp-picker-overlay.open { display: flex; }
.wp-picker-modal {
 background: #fff;
 border-radius: 10px;
 width: 90%;
 max-width: 800px;
 max-height: 85vh;
 display: flex;
 flex-direction: column;
 box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.wp-picker-header {
 padding: 14px 18px;
 border-bottom: 1px solid var(--gray-200);
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-shrink: 0;
}
.wp-picker-header h3 {
 font-size: 1rem;
 color: var(--navy);
 margin: 0;
}
.wp-picker-controls {
 display: flex;
 gap: 8px;
 align-items: center;
}
.wp-picker-controls .search {
 width: 200px;
 padding: 6px 10px;
 font-size: 0.8rem;
}
.wp-picker-grid {
 flex: 1;
 overflow-y: auto;
 padding: 14px;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
 gap: 10px;
 align-content: start;
}
.wp-picker-thumb {
 cursor: pointer;
 border: 2px solid var(--gray-200);
 border-radius: 6px;
 overflow: hidden;
 transition: 0.15s;
 background: var(--gray-50);
}
.wp-picker-thumb:hover {
 border-color: var(--blue);
 box-shadow: 0 0 0 2px rgba(58,120,189,0.2);
 transform: scale(1.03);
}
.wp-picker-thumb img {
 width: 100%;
 height: auto;
 display: block;
 background: #fff;
}
.wp-picker-name {
 padding: 4px 6px;
 font-size: 0.62rem;
 color: var(--gray-600);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.wp-picker-footer {
 padding: 10px 18px;
 border-top: 1px solid var(--gray-200);
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-shrink: 0;
}
.wp-picker-hint {
 font-size: 0.72rem;
 color: var(--gray-400);
}
.wp-picker-tip {
 padding: 8px 18px;
 font-size: 0.76rem;
 color: var(--gray-500);
 background: #fffbeb;
 border-bottom: 1px solid #fef3c7;
 flex-shrink: 0;
}
.wp-picker-thumb.selected {
 border-color: var(--green);
 box-shadow: 0 0 0 2px rgba(56,161,105,0.3);
 position: relative;
}
.wp-picker-thumb.selected::after {
 content: '\2713';
 position: absolute;
 top: 4px;
 right: 4px;
 width: 22px;
 height: 22px;
 background: var(--green);
 color: #fff;
 border-radius: 50%;
 font-size: 13px;
 font-weight: 700;
 line-height: 22px;
 text-align: center;
}
.wp-picker-empty {
 grid-column: 1 / -1;
 text-align: center;
 padding: 40px;
 color: var(--gray-400);
 font-size: 0.88rem;
}

/* ========== IMAGE LIGHTBOX ========== */
.lightbox {
 display: none;
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0,0,0,0.85);
 z-index: 200;
 cursor: pointer;
 justify-content: center;
 align-items: center;
}
.lightbox.open { display: flex; }
body.lightbox-open { overflow: hidden; }
.lightbox .lb-img {
 max-width: 85%;
 max-height: 85vh;
 border-radius: 8px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.4);
 cursor: default;
 object-fit: contain;
}
.lightbox .lb-close {
 position: fixed;
 top: 16px; right: 20px;
 color: #fff;
 font-size: 36px;
 cursor: pointer;
 z-index: 201;
 line-height: 1;
 opacity: 0.8;
 background: none;
 border: none;
}
.lightbox .lb-close:hover { opacity: 1; }
.lightbox .lb-prev,
.lightbox .lb-next {
 position: fixed;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(255,255,255,0.25);
 color: #fff;
 border: 2px solid rgba(255,255,255,0.4);
 font-size: 48px;
 width: 56px;
 height: 80px;
 cursor: pointer;
 z-index: 202;
 border-radius: 8px;
 opacity: 1;
 line-height: 1;
 padding: 0;
}
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover { background: rgba(255,255,255,0.4); }
.lightbox .lb-prev { left: 12px; }
.lightbox .lb-next { right: 12px; }
.lightbox .lb-counter {
 position: fixed;
 bottom: 24px;
 left: 50%;
 transform: translateX(-50%);
 color: #fff;
 font-size: 14px;
 opacity: 0.8;
 z-index: 201;
}

/* ========== OPTIONS PLATFORM ========== */
.opt-stats {
 display: flex;
 gap: 16px;
 margin-bottom: 16px;
 padding: 10px 16px;
 background: #fff;
 border-radius: var(--radius);
 border: 1px solid var(--gray-200);
 font-size: 0.82rem;
 color: var(--gray-500);
}
.opt-stat strong { color: var(--navy); }
.opt-division {
 margin-bottom: 16px;
 border-radius: var(--radius);
 overflow: hidden;
 border: 1px solid var(--gray-200);
 background: #fff;
 box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.opt-division.collapsed .opt-div-body { display: none; }
.opt-div-header {
 background: var(--navy);
 color: #fff;
 padding: 12px 16px;
 font-weight: 700;
 font-size: 0.9rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
 user-select: none;
 transition: 0.15s;
}
.opt-div-header:hover { background: #142d48; }
.opt-div-header h2 { font-size: 0.92rem; font-weight: 700; margin: 0; }
.opt-badge {
 background: rgba(255,255,255,0.2);
 padding: 1px 8px;
 border-radius: 10px;
 font-size: 0.65rem;
 font-weight: 600;
 margin-right: 8px;
}
.opt-toggle {
 font-size: 1.1rem;
 font-weight: 700;
 width: 20px;
 display: inline-block;
 text-align: center;
}
.opt-div-body { padding: 0; }
.opt-card {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 14px 16px;
 border-bottom: 1px solid var(--gray-100);
 transition: background 0.1s;
}
.opt-card:last-child { border-bottom: none; }
.opt-card:hover { background: var(--gray-50); }
.opt-card-content { flex: 1; min-width: 0; }
.opt-card-header {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 2px;
}
.opt-code {
 background: var(--gray-100);
 color: var(--gray-600);
 padding: 1px 7px;
 border-radius: 4px;
 font-size: 0.7rem;
 font-weight: 700;
 font-family: monospace;
 letter-spacing: 0.3px;
 white-space: nowrap;
}
.opt-title {
 font-weight: 600;
 color: var(--navy);
 font-size: 0.88rem;
}
.opt-desc {
 font-size: 0.82rem;
 color: var(--gray-600);
 margin-top: 2px;
 line-height: 1.5;
}
.opt-photos {
 display: flex;
 gap: 6px;
 margin-top: 6px;
 flex-wrap: wrap;
}
.opt-photo-link {
 font-size: 0.72rem;
 color: var(--blue);
 text-decoration: none;
 background: #ebf8ff;
 padding: 2px 8px;
 border-radius: 4px;
 font-weight: 600;
}
.opt-photo-link:hover { background: #bee3f8; text-decoration: underline; }
.opt-card-actions {
 display: flex;
 gap: 4px;
 flex-shrink: 0;
 align-items: flex-start;
 margin-top: 2px;
}
.opt-add-row {
 display: flex;
 gap: 8px;
 padding: 10px 16px;
 background: var(--gray-50);
 border-top: 1px solid var(--gray-200);
 align-items: center;
}
.opt-add-input {
 flex: 1;
 padding: 7px 10px;
 border: 1px solid var(--gray-300);
 border-radius: var(--radius);
 font-size: 0.82rem;
 font-family: inherit;
}
.opt-add-input:focus { outline: none; border-color: var(--blue); }
.opt-price-row {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-top: 6px;
 font-size: 0.78rem;
}
.opt-line-count {
 color: var(--gray-400);
 font-weight: 500;
}
.opt-price-tag {
 color: var(--green);
 font-weight: 700;
 font-size: 0.85rem;
}

/* ========== LOGIN MODAL ========== */
.login-overlay {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0,0,0,0.6);
 z-index: 300;
 display: flex;
 justify-content: center;
 align-items: center;
}
.login-modal {
 background: #fff;
 border-radius: 12px;
 padding: 36px 32px;
 width: 360px;
 max-width: 90vw;
 box-shadow: 0 8px 32px rgba(0,0,0,0.25);
 position: relative;
 text-align: center;
}
.login-close {
 position: absolute;
 top: 12px; right: 16px;
 background: none;
 border: none;
 font-size: 24px;
 color: var(--gray-400);
 cursor: pointer;
}
.login-close:hover { color: var(--gray-600); }
.login-title {
 margin: 0 0 4px;
 color: var(--navy);
 font-size: 1.4rem;
}
.login-subtitle {
 margin: 0 0 20px;
 color: var(--gray-400);
 font-size: 0.85rem;
}
.login-form { text-align: left; }
.login-label {
 display: block;
 font-size: 0.8rem;
 font-weight: 600;
 color: var(--gray-600);
 margin-bottom: 4px;
}
.login-input {
 width: 100%;
 padding: 10px 12px;
 border: 1px solid var(--gray-200);
 border-radius: 6px;
 font-size: 0.9rem;
 margin-bottom: 14px;
 box-sizing: border-box;
}
.login-input:focus {
 outline: none;
 border-color: var(--blue);
 box-shadow: 0 0 0 3px rgba(58,120,189,0.15);
}
.login-error {
 color: #e53e3e;
 font-size: 0.82rem;
 min-height: 20px;
 margin-bottom: 8px;
}
.btn-login-submit {
 width: 100%;
 padding: 11px;
 background: var(--navy);
 color: #fff;
 border: none;
 border-radius: 6px;
 font-size: 0.95rem;
 font-weight: 600;
 cursor: pointer;
}
.btn-login-submit:hover { background: #142d48; }
.btn-login-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Nav auth buttons */
.btn-login {
 padding: 6px 16px;
 background: rgba(255,255,255,0.15);
 color: #fff;
 border: 1px solid rgba(255,255,255,0.3);
 border-radius: 6px;
 font-size: 0.8rem;
 font-weight: 600;
 cursor: pointer;
}
.btn-login:hover { background: rgba(255,255,255,0.25); }
.btn-logout {
 padding: 6px 12px;
 background: none;
 color: rgba(255,255,255,0.7);
 border: none;
 font-size: 0.78rem;
 cursor: pointer;
}
.btn-logout:hover { color: #fff; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
 .nav { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; }
 .nav-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
 .tab { padding: 10px 12px; font-size: 0.75rem; white-space: nowrap; }
 .view { padding: 14px 16px 30px; }
 .item { flex-direction: column; }
 .edit-row { flex-direction: column; }
 .edit-input-title { width: 100%; }
}

/* ========== PRINT ========== */
@media print {
 .nav, .view-toolbar, .add-item-row, .edit-only, .btn-edit, .div-notes,
 .app-footer, .btn-print, .login-overlay, .lightbox, .wp-picker-overlay,
 .carousel-btn, .carousel-dots, .carousel-counter { display: none !important; }
 .div-card.collapsed .div-body { display: block !important; }
 .div-card { break-inside: avoid; border: 1px solid #ddd; margin-bottom: 12px; box-shadow: none !important; }
 .div-header { background: #3a78bd !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
 .view { max-width: 100%; padding: 8px; }
 .view:not(.active) { display: none !important; }
 body { background: #fff; }
 .item { border-bottom: 1px solid #eee; }
 .img-carousel { max-width: 300px; }
 .carousel-slide { display: block !important; max-width: 280px; height: auto !important; margin-bottom: 8px; }
 .print-header { display: block !important; text-align: center; margin-bottom: 20px; }
 .print-header img { height: 50px; }
 .print-header h1 { font-size: 1.3rem; color: #3a78bd; margin: 8px 0 4px; }
 .print-header p { font-size: 0.85rem; color: #666; margin: 0; }
}
.print-header { display: none; }