:root{
  --bg: #0f172a;           /* slate-900 */
  --panel: #111827;        /* gray-900 */
  --muted: #334155;        /* slate-700 */
  --muted-2:#475569;       /* slate-600 */
  --text: #e5e7eb;         /* gray-200 */
  --text-dim:#cbd5e1;      /* slate-300 */
  --primary:#22c55e;       /* green-500 */
  --primary-600:#16a34a;
  --border:#1f2937;        /* gray-800 */
  --accent:#94a3b8;        /* slate-400 */
  --success:#10b981;       /* emerald */
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background: linear-gradient(180deg, #0b1224, #0f172a 40%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Thai", "Kanit", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a{color:inherit}

.back-home-btn{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 30;
  display:inline-block;
  background: #1e40af;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 20px rgba(30,64,175,.35);
  transition: transform .15s ease, background .2s ease;
}
.back-home-btn:hover{ background:#1d4ed8; transform: translateY(-1px); }

.app-header{
  padding: 64px 16px 20px;
  text-align:center;
}
.app-header h1{
  margin:0 0 6px;
  letter-spacing:.3px;
  font-size: clamp(22px, 2.8vw, 36px);
}
.subtitle{
  color: var(--text-dim);
  margin:0;
  opacity:.9;
}

.container{
  display:grid;
  gap:18px;
  grid-template-columns: 400px 1fr;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.panel{
  background: linear-gradient(180deg, #0e162b, #0f172a);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.controls h2, .palette h2{ margin: 4px 0 14px; font-size: 18px; }
hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
  opacity: .5;
}

.picker-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 12px;
}
#colorPicker{
  width: 56px; height: 56px; border:none; background:transparent;
}
.preview{
  flex:1; height:56px; border-radius:12px; border:1px solid var(--border);
  background: #000;
}

.io-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
.io-field label{ display:block; margin-bottom:6px; color:var(--text-dim); font-size:14px; }
.input-with-btn{ display:flex; gap:8px; }
.input-with-btn input{
  flex:1; background:#0b1224; border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:#fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.copy-btn{
  white-space:nowrap; border:1px solid var(--border); background:#0b1224; color:#e2e8f0; border-radius:10px; padding:10px 12px; cursor:pointer;
}
.copy-btn:hover{ background:#0c1327; }

.action-row{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
button{
  cursor:pointer; border:none; border-radius:12px; padding:10px 14px; background:#1f2937; color:#fff; transition: transform .1s ease, background .2s ease;
}
button:hover{ transform: translateY(-1px); }
button.primary{ background: var(--primary); color: #08120c; font-weight:800; }
button.primary:hover{ background: var(--primary-600); }
button.success{ background: var(--success); color: #00150c; font-weight:800; }
button.danger{ background:#ef4444; }

.palette-controls{ display:grid; gap:12px; }
.mode-row, .count-row{ display:grid; gap:8px; }
select{
  background:#0b1224; color:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}

.save-wrap{ display:flex; gap:8px; margin-top:12px; }
.save-wrap input{
  flex:1; background:#0b1224; color:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}

.saved-area{ margin-top:16px; }
.saved-list{ display:grid; gap:10px; }
.saved-card{
  border:1px solid var(--border); border-radius:12px; padding:10px;
  background: #0b1224;
}
.saved-title{ font-weight:800; margin-bottom:8px; }
.saved-swatches{ display:flex; gap:6px; flex-wrap:wrap; }
.saved-actions{ display:flex; gap:8px; margin-top:8px; }

.palette-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
}
.swatch{
  border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#0b1224;
}
.swatch-color{ height:86px; }
.swatch-info{
  display:flex; align-items:center; justify-content:space-between; padding:8px; gap:8px;
}
.lock-btn{
  background:#0b1224; border:1px solid var(--border); color:#fff; border-radius:10px; padding:8px 10px;
}
.locked{ outline:2px dashed #f59e0b; outline-offset:-6px; }
.copy-hex{
  background:#111827; border:1px solid var(--border); padding:8px 10px; border-radius:10px; font-family: ui-monospace, Menlo, Consolas, monospace;
}

.hint{ color: var(--accent); margin-top:10px; font-size:14px; }

.preview-duo{
  display:grid; gap:12px; grid-template-columns: 1fr 1fr;
}
.mock{
  border:1px solid var(--border); border-radius:14px; padding:12px;
}
.mock.light{ background:#f8fafc; color:#0f172a; }
.mock.dark{ background:#0b1224; color:#e2e8f0; }
.mock-header{ font-weight:800; margin-bottom:8px; }
.mock-btn{
  margin-top:6px; background:#111827; border:1px solid var(--border);
}
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.chip{
  height:22px; min-width:22px; border-radius:999px; border:1px solid rgba(0,0,0,.15);
}

.app-footer{
  padding: 18px 16px 40px; text-align:center; color:var(--text-dim);
}

@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
  .preview-duo{ grid-template-columns: 1fr; }
}