.color-generator {
  max-width: 1100px;
  margin: 120px auto;
  padding: 0 20px;
}

.color-generator h2 {
  font-size: 26px;
  margin-bottom: 25px;
}

/* BOX */
.color-editor {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 25px;
}

@media(max-width:800px) {
  .color-editor {
    grid-template-columns: 1fr;
  }
}

/* LEFT */
.picker-box {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}

body.light .picker-box {
  background: #fff;
  border: 1px solid #ddd;
}

#colorPicker {
  width: 100%;
  height: 70px;
  border-radius: 12px;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

/* Preview */
.color-preview {
  margin-top: 14px;
  height: 120px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .15);
}

body.light .color-preview {
  border: 1px solid #ddd;
}

/* Code */
.code-box {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
}

body.light .code-box {
  background: #eee;
}

#copyBtn {
  border: none;
  background: #42445A;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

#copyBtn:hover {
  opacity: .8;
}

/* Random Button */
.randomBtn {
  margin-top: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #42445A;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.randomBtn:hover {
  opacity: .9;
}


/* RIGHT SIDE MATERIAL UI */
.material-preview {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}

body.light .material-preview {
  background: #fff;
  border: 1px solid #ddd;
}

.mui-card {
  padding: 18px;
  border-radius: 16px;
  background: #222;
  color: white;
}

body.light .mui-card {
  background: #f1f1f1;
  color: #000;
}

.mui-btn {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: #fff;
}

.mui-chip {
  margin-top: 12px;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 13px;
  color: #fff;
}

.cg-layout{
  display:grid;
  grid-template-columns:1.2fr 1.8fr;
  gap:25px;
}
@media(max-width:900px){
  .cg-layout{ grid-template-columns:1fr; }
}

.cg-left,.cg-right{
  border-radius:18px;
  padding:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
}
body.light .cg-left,
body.light .cg-right{
  background:#fff;
  border:1px solid #ddd;
}

#colorPicker{
  margin-bottom:20px;
}

/* Inputs */
.color-info .row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.color-info input{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:none;
  outline:none;
  background:#111;
  color:white;
}
body.light .color-info input{
  background:#f1f1f1;
  color:#000;
}
.color-info label{
  width:60px;
}
.copy-c{
  border:none;
  padding:9px 11px;
  border-radius:10px;
  background:#42445A;
  color:white;
}
.random{
  width:100%;
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  border:none;
  background:#42445A;
  color:white;
  font-weight:600;
}

/* Material UI */
.mui-card{
  padding:18px;
  border-radius:18px;
  margin-top:10px;
}
.mui-btn{
  padding:10px 14px;
  border-radius:12px;
  border:none;
  color:white;
  margin-top:10px;
}
.mui-chip{
  display:inline-block;
  margin-top:10px;
  padding:8px 14px;
  border-radius:50px;
  color:white;
}

/* Palette */
.palette{
  margin:10px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(70px,1fr));
  gap:8px;
}
.palette div{
  height:60px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.3);
  cursor:pointer;
}

/* Gradient */
.gradient{
  height:120px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.2);
}