:root{
 /* --paper:#F4F2ED;
  --paper-line:#E1DDD3;*/
  --cards:#FFFFFF;
  --ink:#14161A;
  --ink-soft:#63636B;
 /* --line:#D8D3C6; */
  --radius:16px;

}
/* *{box-sizing:border-box;} */
body{
  min-height:100vh;
}

.wrap{max-width:1280px;margin:0 auto;}

/* ---------- Nav ---------- */
.site-nav{
  max-width:1280px; margin:20px auto; padding:0px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-nav .brand{
  font-family:soraneu; font-weight:700; font-size:15px; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:8px; text-decoration:none; color:#FFF;
}
.site-nav .brand .dot{width:10px;height:10px;border-radius:50%;
  background:conic-gradient(from 0deg,#FF6B6B,#FFD93D,#6BCB77,#4D96FF,#F72585,#FF6B6B);}
.site-nav .links{display:flex; gap:6px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border:1px solid #000;
  padding:4px; border-radius:999px; }
.site-nav .links a{
  font-family:soraneu; font-size:12.5px; letter-spacing:0.02em; text-decoration:none;
  color:#FFF; padding:8px 16px; border-radius:999px; transition:background .15s ease, color .15s ease;
}
.site-nav .links a:hover{color:#000;}
.site-nav .links a.active{background:#000; color:#FFF;}

/* ---------- Header ---------- */

.eyebrow{
  font-family:soraneu; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;
  background:conic-gradient(from 0deg,#FF6B6B,#FFD93D,#6BCB77,#4D96FF,#F72585,#FF6B6B);}


section{margin-bottom:64px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-family:soraneu; font-size:22px; margin:0;}
.section-head span{font-size:13px; color:#FFF; font-family:soraneu;}

/* ---------- Swatch-book card shell (shared) ---------- */
.cards_pal{
  background:#000; border:1px solid #000; border-radius:8px;
  overflow:hidden; position:relative; box-shadow:0 1px 2px rgba(20,22,26,0.04);
  padding: 22px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   
}


.punches{position:absolute; top:10px; left:0; right:0; display:flex; justify-content:space-around;
  pointer-events:none; z-index:2;}
.punches i{width:12px; height:12px; border-radius:50%; background:var(--paper);
  border:1px solid var(--line); display:block;}

/* ---------- Featured palette ---------- */
.featured-card{padding-top:22px; }
.featured-bars{display:flex; height:180px;}
.featured-bars .swatch{flex:1; position:relative; cursor:pointer;}
.featured-meta{display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-top:1px solid var(--line);}
.featured-meta h3{font-family:soraneu; font-size:17px; margin:0 0 2px; color:#FFF;}
.featured-meta span{font-size:12.5px; color:#FFF; font-family:soraneu;}

/* ---------- Generator ---------- */
.generator-card{padding-top:22px;}
.gen-bars{display:flex; height:220px;}
.gen-slot{flex:1; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding-bottom:18px; cursor:pointer;
  transition:flex .25s ease;}
.gen-slot .hex-label{font-family:soraneu; font-size:13px; font-weight:600;
  padding:6px 10px; border-radius:8px;}
.gen-slot .lock-btn{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.25); backdrop-filter:blur(3px);
}
.gen-slot .lock-btn svg{width:14px;height:14px;}
.gen-slot.locked{flex:1.15;}
.gen-controls{display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-top:1px solid var(--line); flex-wrap:wrap; gap:12px;}
.gen-controls .hint{font-size:12.5px; color:#CCC; font-family:soraneu;}
.generate-btn{
  font-family:soraneu; font-weight:700; font-size:14px; letter-spacing:0.02em;
  border:none; padding:12px 24px;
  border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform .12s ease; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; transition: transform 0.2s, box-shadow 0.2s;
}
.generate-btn:hover{transform:translateY(-1px);}
.generate-btn:active{transform:translateY(1px);}
kbd{font-family:soraneu; font-size:11px; background:var(--paper);
  border:1px solid var(--line); border-bottom-width:2px; padding:2px 6px; border-radius:5px;}

/* ---------- Library / browse grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:20px;}
.lib-card{padding-top:18px;}
.lib-bars{display:flex; height:150px;}
.lib-bars .swatch{flex:1; position:relative; cursor:pointer;}
.lib-meta{display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-top:1px solid var(--line); gap:10px;}
.lib-meta .meta-text h3{font-family:soraneu; font-size:14.5px; margin:0 0 2px; color:#FFF;}
.lib-meta .meta-text span{font-family:soraneu; font-size:10.5px; color:#CCC;
  text-transform:uppercase; letter-spacing:0.06em;}
.copy-all-btn{
  font-family:soraneu; font-size:11px;  border:1px solid #000;
  padding:5px 10px; border-radius:20px; cursor:pointer; white-space:nowrap; flex-shrink:0; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
}
.copy-all-btn:hover{transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);}

/* ---------- Swatch shared behavior ---------- */
.swatch .copy-hint{
  position:absolute; inset:auto 0 0 0; text-align:center; font-family:soraneu;
  font-size:11px; padding:8px 4px; opacity:0; transition:opacity .15s ease;
  background:rgba(0,0,0,0.18); color:#fff;
}
.swatch:hover .copy-hint{opacity:1;}
.shades-btn{
 position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  border:none; cursor:pointer; opacity:0; background:rgba(255,255,255,0.25); backdrop-filter:blur(3px);	 border-radius:10px; transition:opacity .15s ease;
  display:flex; align-items:center; justify-content:center; 
}
.swatch:hover .shades-btn{opacity:1;}
.swatch .shades-btn svg{width:13px;height:13px;}
.swatch.copied .copy-hint{opacity:1; background:rgba(20,22,26,0.75);}

/* ---------- Browse toolbar ---------- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;
}
.search-box{
  position:relative; flex:1; min-width:150px; max-width:340px;
}
.search-box input{
  width:100%; font-family:soraneu; font-size:13px; color:#FFF;
  background:#000; border:1px solid var(--line); border-radius:999px;
   outline:none;
}
.search-box input:focus{border-color:var(--ink);}
.search-box svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--ink-soft);
}
.filter-chips{display:flex; gap:8px; flex-wrap:wrap;}
.filter-chips button{
  font-family:soraneu; font-size:11.5px; letter-spacing:0.02em; text-transform:uppercase;
  background:#333; border:1px solid #000; color:#FFF;
  padding:8px 14px; border-radius:999px; cursor:pointer; transition:all .15s ease;
}
.filter-chips button:hover{color:#CCC;}
.filter-chips button.active{background:#000; color:#FFF; border-color:#CCC;}

.result-count{font-family:soraneu; font-size:12.5px; color:var(--ink-soft); margin-bottom:16px;}
.no-results{
  text-align:center; padding:60px 20px; color:var(--ink-soft); font-family:soraneu; font-size:13px;
  display:none;
}
.no-results.show{display:block;}

.load-more-wrap{display:flex; justify-content:center; margin-top:32px;}
.load-more-btn{
  font-family:soraneu; font-size:13px;  border:1px solid var(--line);
  padding:12px 26px; border-radius:999px; cursor:pointer;
  transition:background .15s ease; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
}
.load-more-btn:hover{ /* background:#fff; */
transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.load-more-btn:disabled{opacity:0.4; cursor:default;}

/* ---------- Modal: shades & tints ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,22,26,0.55); display:none;
  align-items:center; justify-content:center; padding:24px; z-index:50;
   box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.modal-backdrop.open{display:flex;}
.modal{
  background:#000; border-radius:20px; width:100%; height:100%; max-width:560px;max-height:300px; 
  overflow:hidden; border:1px solid var(--line); display:block; top:30%;left:30%;
   box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
} 
.modal-hero{ /*height:140px;*/ position:relative; display:flex; align-items:flex-end; padding:16px; }
.modal-hero .close-btn{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,0.3); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.modal-codes{display:flex; gap:8px; flex-wrap:wrap;}
.code-chip{
  font-family:soraneu; font-size:12px; background:rgba(255,255,255,0.85); color:var(--ink);
  padding:6px 10px; border-radius:8px; cursor:pointer; border:none;
}
.modal-body{padding:20px;}
.modal-body h4{font-family:soraneu; font-size:13px; margin:0 0 10px;
  text-transform:uppercase; letter-spacing:0.06em; color:#FFF;}
.ramp{display:flex; border-radius:10px; overflow:hidden; margin-bottom:20px; border:1px solid var(--line);}
.ramp div{flex:1; height:52px; cursor:pointer; position:relative;}
.ramp div .tip{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-family:soraneu; font-size:10px; color:var(--ink-soft); white-space:nowrap; opacity:0;
  transition:opacity .12s ease;
}
.ramp div:hover .tip{opacity:1;}

/* ---------- Toast ---------- */
.toast{
 position: fixed;
            bottom: 20px;
            right: 20px;
            background: #28a745;
            color: white;
            padding: 15px 20px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 9999;
            animation: slideUp 0.3s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}