:root{
  --brand-bg: #0f1724;
  --brand-accent: #00d4aa;
  --brand-text: #111827;
  --poster-bg: #ffffff;
  --poster-text: #111111;
}

/* poster specific overrides */
.poster {
  background: var(--poster-bg) !important;
  color: var(--poster-text) !important;
}

/* Global app layout to mimic Replit style */
html,body{height:100%;}
body{
  margin:0;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,#0b0f14 0%, #14171b 100%);
  color: #e6eef2;
}

.app-container{ display:flex; min-height:100vh; }

/* Sidebar */
.sidebar{
  width: 320px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding: 1.2rem;
  box-shadow: 4px 0 30px rgba(0,0,0,0.6);
  border-right: 1px solid rgba(255,255,255,0.03);
  box-sizing: border-box;
}
.sidebar .logo h1{ margin:0; font-size:1.2rem; color:var(--brand-accent); }
.sidebar .logo p{ margin:0; font-size:0.8rem; color:rgba(255,255,255,0.6); }

.sidebar .sidebar-section{ margin-top:1rem; background:transparent; border-radius:8px; }
.sidebar .section-content{ padding:0.4rem 0; }
.control-group{ margin-bottom:0.75rem; }
.control-group label{ display:block; font-size:0.85rem; color:rgba(255,255,255,0.7); margin-bottom:0.4rem; }
.custom-select select, .premium-input, input[type=text], select{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); color: #fff; padding:0.5rem; border-radius:6px; width:100%; box-sizing:border-box; }

/* Buttons */
.primary-btn{ background: linear-gradient(90deg,var(--brand-accent), #7c5cff); color:#041018; padding:0.7rem 1rem; border-radius:10px; border:none; cursor:pointer; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.secondary-btn{ background: transparent; border:1px solid rgba(255,255,255,0.06); color: #e6eef2; padding:0.55rem 0.8rem; border-radius:8px; cursor:pointer; }
.mini-btn{ padding:0.35rem 0.6rem; font-size:0.85rem; border-radius:6px; }
.primary-btn:active, .secondary-btn:active{ transform:translateY(1px); }

/* Action buttons grouping */
.action-buttons{ display:flex; gap:0.6rem; margin-top:1rem; flex-direction:column; }
.action-buttons .primary-btn{ width:100%; }

/* Workspace and poster */
.workspace{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding:2rem; }
.poster-wrapper{ background: linear-gradient(180deg,#ffffff,#fbfbfb); border-radius:10px; width:calc(70vh / 1.414); max-width:720px; min-height:80vh; box-shadow: 0 25px 60px rgba(3,7,10,0.6); overflow:visible; padding:1rem; display:flex; align-items:center; justify-content:center; }
.poster{ width:100%; height:100%; background:var(--poster-bg); border-radius:8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03); position:relative; }
.poster .brand-signature{ position:absolute; bottom:10px; right:14px; font-size:0.8rem; color:rgba(0,0,0,0.2); }

/* Poster content area centering */
.poster-content{ display:flex; align-items:flex-start; justify-content:flex-start; padding:2rem; }

/* Chord grid styling */
.chords-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; width:100%; }
.chord-item{ background: #fff; color:#111; border-radius:8px; padding:0.8rem; text-align:center; box-shadow:0 6px 18px rgba(12,12,12,0.06); border:1px solid rgba(0,0,0,0.03); }
.chord-name{ font-weight:800; margin-top:0.4rem; }

/* Modal / overlays */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:5000; }
.modal-overlay.active{ display:flex; }

/* Debug outlines helper (toggled via class on documentElement) */
.debug-outline .poster-wrapper, .debug-outline .chord-item{ outline:2px dashed rgba(255,0,0,0.5); }

/* Responsive tweaks */
@media (max-width: 900px){
  .sidebar{ display:none; }
  .poster-wrapper{ width:90%; min-height:60vh; }
  .chords-grid{ grid-template-columns: repeat(2,1fr); }
}