:root {
    --indigo: #4f46e5; --slate: #0f172a; --bg: #f8fafc; --border: #e2e8f0;
    --red: #ef4444; --green: #10b981; --orange: #f59e0b;
}

body { font-family: 'Inter', sans-serif; margin: 0; background: var(--bg); }
.csm-saas-root { display: flex; height: 100vh; overflow: hidden; background: white; }

/* Sidebar */
.csm-sidebar { width: 260px; background: var(--slate); color: white; display: flex; flex-direction: column; padding: 40px 0; }
.csm-logo { padding: 0 40px 40px; font-weight: 900; font-size: 24px; letter-spacing: -1.5px; }
.csm-logo span { color: var(--indigo); }
.csm-nav { flex: 1; }
.csm-nav-item { display: flex; width: 100%; border: none; background: none; align-items: center; padding: 14px 40px; color: #94a3b8; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.csm-nav-item.active { background: #1e293b; color: white; border-left: 4px solid var(--indigo); }

/* Layout Viewport */
.csm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.csm-header { padding: 25px 40px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.csm-viewport-scroll { flex: 1; overflow-y: auto; padding: 40px; background: var(--bg); }

/* Command Center Split */
.csm-cc-layout { display: flex; gap: 30px; height: 1200px; }
.csm-cc-map-col { flex: 0 0 450px; background: white; border-radius: 20px; border: 1px solid var(--border); padding: 20px; position: sticky; top: 0; }
.csm-cc-gallery-col { flex: 1; min-width: 0; }

.csm-canvas-container { width: 100%; aspect-ratio: 500/1500; background: #cbd5e1; border-radius: 12px; overflow: hidden; position: relative; }
.csm-map-engine { width: 100%; height: 100%; position: relative; transform-origin: 0 0; transition: transform 0.2s; }
.csm-map-engine img { width: 100%; height: 100%; object-fit: fill; }

.csm-shape-pt { position: absolute; cursor: pointer; opacity: 0.7; transition: 0.2s; border: 1px solid rgba(255,255,255,0.4); }
.csm-shape-pt:hover { opacity: 1; transform: scale(1.1); z-index: 10; outline: 3px solid var(--indigo); }
.csm-shape-pt.active { opacity: 1; outline: 3px solid var(--indigo); outline-offset: 2px; }

.shape-circle { border-radius: 50% !important; }
.shape-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: none !important; }
.shape-trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); border: none !important; }

.color-red { background: var(--red); }
.color-green { background: var(--green); }
.color-orange { background: var(--orange); animation: saasPulse 2s infinite; }
@keyframes saasPulse { 0%{opacity:0.4} 50%{opacity:1} 100%{opacity:0.4} }

/* Gallery */
.csm-gallery-toolbar { display: flex; justify-content: space-between; align-items: center; background: white; padding: 15px 20px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 20px; }
.csm-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.csm-img-card { background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: zoom-in; position: relative; }
.csm-img-card img { width: 100%; height: 150px; object-fit: cover; }
.csm-img-checkbox { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; accent-color: var(--indigo); }

/* Lightbox */
.csm-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.95); z-index: 99999; display: none; align-items: center; justify-content: center; }
.csm-saas-modal { background: #fff; width: 95vw; height: 90vh; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; padding: 30px; }
.csm-saas-viewer { flex: 1; display: flex; background: #000; gap: 2px; }
.csm-v-box { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.csm-v-box img { max-width: 100%; max-height: 100%; transition: transform 0.2s; }

/* Filter & Grid */
.csm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.csm-saas-card { background: white; border: 1px solid var(--border); padding: 25px; border-radius: 16px; transition: 0.3s; cursor: pointer; }
.csm-saas-card:hover { border-color: var(--indigo); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* Right Sidebar */
.csm-sidebar-right { width: 340px; background: #fff; border-left: 1px solid var(--border); padding: 40px; display: flex; flex-direction: column; }
.csm-right-header { font-size: 12px; font-weight: 900; text-transform: uppercase; color: var(--muted); margin-bottom: 30px; }

/* Metrics */
.trend-up { color: var(--red); font-weight: 900; }
.trend-down { color: var(--green); font-weight: 900; }
.csm-btn { border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.csm-btn.primary { background: var(--indigo); color: #fff; }
.csm-btn.danger { background: var(--red); color: #fff; }