.kabbalah-calculator .container { max-width:1000px; margin: 0 auto; background:white; padding:20px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1);}
    
    .c-header { text-align: center; margin-bottom: 40px; color: #5a3a7a; }
    .c-header h1 {
      font-size: 2.5em; margin-bottom: 10px;
      background: linear-gradient(135deg, #152361 0%,#764ba2 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .c-header p { font-size: 1.1em; color: #666; }
    .c-card { background: white; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .form-group { margin-bottom: 20px; }
    label { display:block; margin-bottom:8px; font-weight:600; color:#333; }
    input { width:100%; padding:12px; border:2px solid #e0e0e0; border-radius:8px; font-size:1em; transition:border-color .3s; }
    input:focus { outline:none; border-color:#667eea; }
    button { width:100%; padding:14px; background: linear-gradient(135deg,#293b8a 0%,#764ba2 100%); color:#fff; border:none; border-radius:8px; font-size:1.1em; font-weight:600; cursor:pointer; transition:transform .2s; }
    button:hover { transform: translateY(-2px); } button:active { transform: translateY(0); }
    .results { display:none; } .results.show { display:block; }
    .profile-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:30px; }
    .colour-card { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:20px; border-radius:12px; text-align:center; }
    .name-display { text-align:center; font-size:1.8em; font-weight:bold; color:#667eea; margin-bottom:20px; letter-spacing:2px; }
    .color-vibration { margin-top:30px; padding:20px; border-radius:12px; text-align:center; }
    .color-bar { height:60px; border-radius:8px; margin-bottom:15px; display:flex; overflow:hidden; border:1px solid rgba(0,0,0,0.04); }
    .color-segment { flex:1; }
    .about { background: linear-gradient(135deg,#fcfcfa 0%,#f5f3eb 100%); padding:20px; border-radius:12px; margin-top:30px; }
    .about-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
    .error { color:#dc2626; background:#fee2e2; padding:12px; border-radius:8px; margin-bottom:20px; display:none; }
    .error.show { display:block; }
    .download-row { display:flex; gap:12px; align-items:center; margin-top:10px; }
    .download-row button { width:auto; padding:10px 14px; }
    canvas { width:100%; height:80px; display:block; border-radius:8px; }
  

.profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .profile-grid {
    grid-template-columns: 1fr !important;
  }
}

.colour-card {
  width: 100% !important;
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 25px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.colour-card h3,
.colour-card .number,
.colour-card p {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

.colour-card .number {
  font-size: 3rem;
  font-weight: bold;
}

.colour-card .letters-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
}

.colour-card .letters-container span {
    display: inline-flex !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}