@import url('https://fonts.googleapis.com/css2?family=Allura&family=Bebas+Neue&family=Caveat:wght@400;700&family=Cinzel:wght@400;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Dancing+Script:wght@400;700&family=Great+Vibes&family=Inter:wght@300;400;500;700&family=Josefin+Sans:ital,wght@0,300..700;1,300..700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lobster&family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:wght@300;400;500;700&family=Montserrat+Alternates:wght@300;400;700&family=Nunito:wght@300;400;700&family=Outfit:wght@300;400;500;700&family=Pacifico&family=Parisienne&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@300;400;500;700&family=Poppins:wght@300;400;500;700&family=Quicksand:wght@300;400;500;700&family=Raleway:ital,wght@0,300..800;1,300..800&family=Roboto:wght@300;400;500;700&family=Sacramento&family=Shadows+Into+Light&family=Ubuntu:wght@300;400;500;700&family=Merriweather:wght@300;400;700&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #090d16;
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Scrollbars --- */
.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar,
.panel-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.left-panel::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.left-panel::-webkit-scrollbar-thumb:hover,
.right-panel::-webkit-scrollbar-thumb:hover,
.panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- Workspace Layout --- */
.workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #07090e;
}

/* --- Left Panel (Figma Dark Satin style) --- */
.left-panel {
  width: 280px;
  background: #0d121f;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Properties Right Panel --- */
.right-panel {
  display: none;
  width: 280px;
  background: #0d121f;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 16px;
  overflow-y: auto;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-gutter: stable;
}

.gap-6 {
  gap: 6px;
}
.flex-1 {
  flex: 1;
}

/* --- Form controls --- */
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-row input {
  width: 100%;
  padding: 10px 12px;
  background: #111726;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 13px;
  font-family: inherit;
}
.form-row input:focus {
  outline: none;
  border-color: #6366f1;
}

/* ──────────────────────────────────────────────────────────────
   PREMIUM LIGHT MODE OVERRIDES
   ────────────────────────────────────────────────────────────── */
body {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.left-panel, .right-panel {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.form-row input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.form-row input:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN & MEDIA QUERIES
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .topbar-left h1, .topbar-left .sub-label {
    display: none !important;
  }
  .topbar-left {
    min-width: auto !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 1220px) {
  .topbar-center {
    gap: 4px !important;
  }
  .topbar-center .divider {
    display: none !important;
  }
  .topbar-center .control-group:last-child {
    display: none !important;
  }
}

@media (max-width: 990px) {
  .topbar-center {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body {
    height: 100dvh;
    overflow: hidden;
    background: #090d16;
  }
  
  .topbar-right {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }
  .toolbar-row {
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-right .create-status,
  .topbar-right label,
  #scale-label {
    display: none !important;
  }
  
  .workspace {
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100dvh - 112px);
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  
  .left-panel,
  .right-panel {
    width: 100%;
    flex: 0 0 auto;
    border: 0;
    background: #0d121f;
  }
  .left-panel {
    order: 3;
    max-height: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .right-panel {
    order: 3;
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.mobile-notice {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #090d16;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px; gap: 16px;
}
.mobile-notice h2 { font-size: 20px; font-weight: 700; color: #ffffff; font-family: 'Outfit', sans-serif; }
.mobile-notice p { font-size: 14px; color: #94a3b8; line-height: 1.6; max-width: 280px; }
.mobile-notice a {
  display: inline-block; margin-top: 8px;
  padding: 12px 24px; border-radius: 10px;
  background: #4f46e5; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600;
}

/* --- Inline Styles from Monolith --- */
.constructor-inline-1 { gap:8px; }
.constructor-inline-2 { background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); border:none; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); }
.constructor-inline-3 { display:none; }
.constructor-inline-4 { display:none; }
.constructor-inline-5 { display: block; }
.constructor-inline-6 { font-size:36px;margin-bottom:12px; }
.constructor-inline-7 { font-weight:600;color:#64748b; }
.constructor-inline-8 { display:none; }
.constructor-inline-9 { flex:1; }
.constructor-inline-10 { font-size:12px;color:#475569;align-self:center;font-weight:600; }
.constructor-inline-11 { flex:1;font-family:monospace;font-size:12px; }
.constructor-inline-12 { display:none; }
.constructor-inline-13 { margin-top: 5px; border-color: rgba(99, 102, 241, 0.25); }
.constructor-inline-14 { background: rgba(99, 102, 241, 0.1); color: #818cf8; display: flex; align-items: center; justify-content: space-between; }
.constructor-inline-15 { padding: 12px; }
.constructor-inline-16 { margin-bottom: 10px; }
.constructor-inline-17 { display:none; margin-bottom: 10px; }
.constructor-inline-18 { width: 100%; height: 34px; }
.constructor-inline-19 { margin-bottom: 12px; }
.constructor-inline-20 { display: flex; justify-content: space-between; }
.constructor-inline-21 { font-weight: 700; color: #818cf8; }
.constructor-inline-22 { width:100%; accent-color:#6366f1; }
.constructor-inline-23 { display: flex; gap: 8px; }
.constructor-inline-24 { background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); border: none; }
.constructor-inline-25 { flex: 1; }
.constructor-inline-26 { padding-right: 28px; }
.constructor-inline-27 { right: 8px; }
.constructor-inline-28 { flex: 1; }
.constructor-inline-29 { padding-right: 28px; }
.constructor-inline-30 { right: 8px; }
.constructor-inline-31 { display:none; }
.constructor-inline-32 { font-size:11px;font-weight:600;word-break:break-all;line-height:1.4; }
.constructor-inline-33 { margin-top:14px; }
.constructor-inline-34 { margin-top:20px; }
.constructor-inline-35 { display: none; }
.constructor-inline-36 { margin-bottom: 0; }
.constructor-inline-37 { background: #111726; border-color: rgba(255, 255, 255, 0.08); }
.constructor-inline-38 { background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); border:none; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); flex: 1; }
.constructor-inline-39 { display: none; }
.constructor-inline-40 { max-width: 420px; }
.constructor-inline-41 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.constructor-inline-42 { flex:1; }
.constructor-inline-43 { grid-column:1/-1;color:#fca5a5;font-size:12px;line-height:1.5; }
.constructor-inline-44 { grid-column:1/-1;color:#94a3b8;font-size:12px;line-height:1.5; }
.constructor-inline-45 { grid-column:1/-1;color:#64748b; }
.constructor-inline-46 { font-size:48px; }