:root { 
  --bg:#0f1115; 
  --fg:#e6e9ef; 
  --muted:#9aa3b2; 
  --card:#171a21; 
  --accent:#8ab4f8; 
  --accent2:#c084fc; 
  --border:#222630; 
}

* { 
  box-sizing:border-box 
} 

a { 
  color: var(--accent);
  text-decoration: none; 
}

html,body { 
  width:100%; 
  max-width:100%; 
  overflow-x:hidden; 
}

body { 
  margin:0; 
  font-family:ui-sans-serif,system-ui,Inter,Segoe UI,Roboto,Arial;
  background:#0f1115; 
  color:#e6e9ef 
}

.brand {
  font-weight: 700;
  color: var(--fg);
}

.container{ 
  max-width:1100px; 
  margin:24px auto; 
  padding:0 16px 
}

.site-header{ 
  padding:16px 22px; 
  border-bottom:1px solid #222630 
}

.site-footer{ 
  padding:16px 22px; 
  border-top:1px solid #222630; 
  color:#9aa3b2 
}

.title {
  margin-top: 32px;
}

.sub{ 
  color:#9aa3b2; 
  margin:4px 0 0 
}

.card{ 
  background:#171a21; 
  border:1px solid #222630; 
  padding:16px; 
  border-radius:12px; 
  margin-top:16px 
}

.controls{ 
  display:grid; 
  gap:10px;
}

.grid-controls{ 
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  gap:10px; 
}

label{ 
  display:grid; 
  gap:6px; 
  margin-bottom:0; 
  color:#9aa3b2 
}

label.inline{ 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  margin-right:12px 
}

input[type="text"], select{ 
  background:#0f1115; 
  color:#e6e9ef; 
  border:1px solid #222630; 
  padding:8px 10px; 
  border-radius:8px 
}

.row{ 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
  align-items:center; 
  margin:8px 0 
}

.spacer{ 
  flex:1 1 auto 
}

.btn{ 
  background:linear-gradient(90deg,#8ab4f8,#c084fc); 
  color:#111; 
  border:none; 
  padding:9px 12px; 
  border-radius:10px; 
  cursor:pointer; 
  font-weight:700 
}

.btn.ghost{ 
  background:transparent; 
  border:1px solid #222630; 
  color:#e6e9ef 
}

.btn.small{ 
  padding:9px 10px; 
  font-weight:600 
}

.codes{ 
  display:grid; 
  gap:12px; 
  margin-top:12px 
}

.codes pre{ 
  background:#0f1115; 
  padding:10px; 
  border-radius:8px; 
  overflow:auto; 
  hite-space:pre-wrap; 
  word-break:break-word 
}

.button-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* rows: each scale renders as a single 10-column row */
.rows{ 
  display:grid; 
  gap:12px; 
  margin-top:12px 
}

.row-scale{ 
  display:grid; 
  grid-template-columns: repeat(10, minmax(70px, 1fr)); 
  gap:10px 
}

@media (max-width: 900px){
  .row-scale{ 
    grid-template-columns: repeat(5, minmax(70px, 1fr)); 
  }
}

.tile{ 
  border:1px solid #222630; 
  -radius:10px; 
  padding:8px; 
  display:grid; 
  gap:6px; 
  min-width:0 
}

.tile .box{ 
  height:52px; 
  border-radius:8px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:800 
}

.hex-display{ 
  font-family: 'Courier New', monospace;
  font-size: 13px; 
  color: #e6e9ef;
  text-align: center;
  font-weight: 600;
  margin: 4px 0 2px 0;
}

.copy-hex{ 
  background: rgba(255,255,255,0.08); 
  color: #9aa3b2; 
  border: 1px solid rgba(255,255,255,0.1); 
  border-radius: 6px; 
  padding: 4px 8px; 
  cursor: pointer; 
  font-size: 11px;
  width: 100%;
  transition: all 0.2s ease;
}

.copy-hex:hover{ 
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: #c9d1d9;
}

.contrast-info{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.contrast-badge{ 
  font-size: 10px; 
  padding: 2px 6px; 
  border-radius: 4px; 
  background: rgba(255,255,255,0.06);
  color: #9aa3b2;
  border: 1px solid rgba(255,255,255,0.1);
}

.contrast-badge.aa{ 
  background: rgba(31,157,85,0.2);
  border-color: rgba(31,157,85,0.3);
  color: #a3e635;
}

.contrast-badge.aaa{ 
  background: rgba(31,157,85,0.3);
  border-color: rgba(31,157,85,0.4);
  color: #4ade80;
}

.nearest{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px 
}

.near-card{ 
  border:1px solid #222630; 
  border-radius:10px;
  padding:10px; 
  display:grid; 
  gap:8px 
}

.near-box{ 
  height:48px; 
  border-radius:8px 
}

.breadcrumb {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 16px;
  padding: 8px 0;
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .separator {
  margin: 0 8px;
  color: var(--muted);
}

h1 {
  margin: 0;
}

.how-to-use {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 16px 0;
  overflow: hidden;
}

.how-to-use summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid transparent;
}

.how-to-use[open] summary {
  border-bottom-color: var(--border);
}

.how-to-use .content {
  padding: 16px;
}

.how-to-use ol {
  margin: 0;
  padding-left: 20px;
}

.how-to-use li {
  margin: 8px 0;
  line-height: 1.5;
}

.privacy {
  max-width: 85%;
  margin-inline: auto;
  margin-top: 28px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 12px;
  text-align: center;
}