/* Align visual language with the site's main stylesheet (site.css)
  Uses the same CSS variables, gradients and subtle ambient glow */
:root{--bg:#07050a;--bg-2:#0b0b0f;--accent-cyan:#39d9ff;--accent-purple:#7c3aed;--accent-magenta:#ff4ecf;--accent-mid:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple),var(--accent-magenta));--glass:rgba(255,255,255,0.02);--card-border:rgba(255,255,255,0.04);--muted:#cfcbe1;--text:#e6e6ee;--surface:#071018}
/* New styles for tool card and adjustments */
.tool-card{background:linear-gradient(180deg,rgba(20,14,28,0.48),rgba(12,8,18,0.6));backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--card-border);border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.6);padding:1rem}
.results-header h3{font-size:1rem;margin:0}
.btn-group .cta{padding:.5rem .85rem;border-radius:10px;font-weight:700}
.preview-seg{transition:width .35s ease}
.palette-grid .color-card{align-items:center}
.copy-btn{min-width:76px}
/* Align visual language with the site's main stylesheet (site.css)
   Uses the same CSS variables, gradients and subtle ambient glow */
:root{--bg:#07050a;--bg-2:#0b0b0f;--accent-cyan:#39d9ff;--accent-purple:#7c3aed;--accent-magenta:#ff4ecf;--accent-mid:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple),var(--accent-magenta));--glass:rgba(255,255,255,0.02);--card-border:rgba(255,255,255,0.04);--muted:#cfcbe1;--text:#e6e6ee;--surface:#071018}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Cairo', Inter, Arial, sans-serif;margin:0;padding:0;background-color:var(--bg-2);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:1100px;margin:28px auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 6px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-text{font-size:18px}
.controls{display:flex;gap:12px;align-items:center}

/* Buttons */
.upload-btn{background:linear-gradient(180deg,rgba(6,6,10,0.72),rgba(8,6,14,0.68));border:1px solid var(--card-border);padding:10px 14px;border-radius:12px;cursor:pointer;color:var(--text);position:relative;overflow:hidden;box-shadow:0 8px 26px rgba(2,6,23,0.45)}
.upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.primary{background:var(--accent-mid);border:none;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:0 10px 36px rgba(124,58,237,0.18)}
.primary:disabled{opacity:0.5;cursor:not-allowed}

.main{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.uploader{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:14px;padding:18px;border:1px solid var(--card-border);backdrop-filter:blur(6px)}
.uploader-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}
.preview-wrap{width:100%;display:flex;align-items:center;justify-content:center;max-height:320px;overflow:hidden}
.preview-wrap img{max-width:100%;max-height:300px;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.6);transition:transform .18s ease, opacity .18s ease}
.hint{color:var(--muted);margin-top:12px}

/* uploader-controls: responsive wrapping and tidy spacing */
.uploader-controls{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.uploader-controls .upload-btn{padding:10px 12px;font-weight:700}

/* Export toolbar */
.export-toolbar{display:flex;gap:8px;align-items:center}
.export-toolbar .cta{padding:8px 10px;border-radius:10px;font-weight:700;white-space:nowrap}
.export-toolbar .cta[disabled]{opacity:0.48;cursor:not-allowed}

/* Buttons: subtle hover/focus */
.cta{background:var(--accent-mid);color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.cta:hover:not([disabled]){transform:translateY(-3px);box-shadow:0 12px 36px rgba(124,58,237,0.12)}
.cta:active{transform:translateY(-1px)}
.cta[disabled]{opacity:0.6}

/* Load more wrap */
#load-more-wrap{margin-top:14px}

/* Palette preview tweaks */
.palette-preview{height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--card-border);display:flex;margin-bottom:12px}

/* dense grid hint for very many colors */
.palette-grid.dense .color-tile{padding:6px}
.palette-grid.dense .color-swatch{height:48px;border-radius:6px}
.palette-grid.dense .color-meta div{font-size:11px}

@media(max-width:800px){
  .main{grid-template-columns:1fr;}
  .export-toolbar{flex-wrap:wrap}
  .palette-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

.results{display:flex;flex-direction:column;gap:12px}
.palette-preview{height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--card-border);display:flex}
.preview-seg{height:100%;display:inline-block}
/* compact responsive grid for many colors */
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;align-items:start}

/* tighter tiles for dense palettes */
.palette-grid.dense{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}

.export-toolbar{display:flex;gap:8px;align-items:center}
.export-toolbar .cta{padding:6px 10px;border-radius:10px;font-weight:700}

.slider-wrap{display:inline-flex;align-items:center;gap:8px}
.slider-wrap input[type="range"]{appearance:none;height:6px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));border-radius:8px}
.slider-wrap input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid rgba(0,0,0,0.2)}

/* individual color tile when many colors are displayed */
.color-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.45);position:relative}
.color-tile .color-swatch{width:100%;height:72px;border-radius:8px}
.color-tile .color-meta{width:100%;text-align:left;padding-top:6px}
.color-tile .color-meta div{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.color-pct{font-size:12px}

.color-card{display:flex;align-items:center;gap:12px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:12px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6);transition:transform .18s ease, box-shadow .18s ease;position:relative}
.color-swatch{width:84px;height:64px;border-radius:10px;flex-shrink:0;box-shadow:inset 0 -6px 12px rgba(0,0,0,0.2)}
.color-meta{flex:1;display:flex;flex-direction:column;min-width:0}
.color-values{display:flex;gap:10px;align-items:center}
.color-pct{color:var(--muted);font-size:13px;margin-left:auto}
.copy-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer;opacity:0;transform:translateY(6px);transition:all .12s ease}
.color-card:hover{transform:translateY(-6px)}
.color-card:hover .copy-btn{opacity:1;transform:translateY(0)}

/* In dense mode make tiles compact and hide extra text */
.palette-grid.dense .color-card, .palette-grid.dense .color-tile{padding:8px}
.palette-grid.dense .color-meta div{font-size:12px}
.palette-grid.dense .muted{display:none}
.palette-grid.dense .color-pct{display:none}
.palette-grid.dense .copy-btn{position:absolute;top:8px;right:8px;opacity:0.92;padding:6px 8px}

.footer{margin-top:18px;color:var(--muted);text-align:center}

@media(min-width:900px){
  .main{grid-template-columns:430px 1fr}
}

/* ambient background glow */
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(600px 400px at 12% 12%,rgba(57,217,255,0.06),transparent 8%),radial-gradient(500px 360px at 88% 78%,rgba(124,58,237,0.06),transparent 8%),radial-gradient(400px 260px at 50% 60%,rgba(255,78,207,0.04),transparent 7%);mix-blend-mode:screen;opacity:0.95;animation:floatBG 12s linear infinite;z-index:0}
@keyframes floatBG{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* small helpers */
.muted{color:var(--muted)}
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Ensure brand header matches global site style (gradient clipped text) */
header nav .brand h1,
header .brand h1 {
  background: var(--accent-mid);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 1.05rem;
}