/* ===== WebColors styles ===== */

/* minimal reset (replaces the old normalize/primer dump) */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-y:scroll; scrollbar-gutter:stable; }
button,input,select,textarea{ font:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img{ border:0; }

:root{ --accent:#3b82f6; --on:#16a34a; --panel:#16181d; --panel-2:#0e0f13; --line:#353941; --muted:#9aa0ab; --txt:#e8e8ea;
 /* popup theme follows the page background (light default) */
 --pop-bg:#fff; --pop-fg:#222; --pop-line:#e6e6e6; --pop-muted:#777; --pop-hover:#f1f1f1; }
body.mode-dark{ --pop-bg:#000; --pop-fg:#eaeaea; --pop-line:#333; --pop-muted:#999; --pop-hover:#1a1a1a; }

body{
 margin:0; padding:10px 20px 20px;
 font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-size:14px; line-height:1.5;
 background-color:#fff; color:#222;
}
#wrapper{ width:99%; max-width:1280px; margin:0 auto 8px; padding:6px 10px; }
#header{ padding:2px 0 4px; }
#page{ min-height:200px; }

.logo{ margin:0; font-family:'Fredoka','Inter',sans-serif; font-weight:700; font-size:30px; letter-spacing:.3px; line-height:1; }
.logo-link{ color:inherit; }
.logo-img{ height:32px; width:auto; vertical-align:middle; margin-right:2px; }

/* form panel */
.cgen{ position:relative; background:var(--panel); color:var(--txt); border:1px solid var(--line);
 border-radius:14px; padding:14px 16px; margin:8px 0 18px; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.cgen-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 24px; align-items:flex-start; }
.cgen-group{ display:flex; flex-direction:column; gap:8px; }
.cgen-head{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; }

/* number fields with steppers */
.cgen-num{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:600; color:#c7cad1; }
.num-wrap{ display:inline-flex; align-items:stretch; }
.num-input{ width:60px; height:26px; min-height:0; padding:0 8px; font-size:13px; border-radius:8px 0 0 8px;
 border:1px solid var(--line); border-right:none; background:var(--panel-2); color:#fff;
 -moz-appearance:textfield; appearance:textfield; }
.num-input:focus{ outline:none; }
.num-input::-webkit-inner-spin-button,.num-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.num-wrap:focus-within .num-input,.num-wrap:focus-within .num-up,.num-wrap:focus-within .num-down{ border-color:var(--accent); }
.num-steps{ display:flex; flex-direction:column; }
.num-up,.num-down{ display:flex; align-items:center; justify-content:center; flex:1 1 0; width:20px; padding:0; font-size:7px; color:#c7cad1; cursor:pointer; border:1px solid var(--line); background:var(--panel-2); }
.num-up{ border-radius:0 8px 0 0; border-bottom:none; }
.num-down{ border-radius:0 0 8px 0; }
.num-up:hover,.num-down:hover{ background:#23262d; color:#fff; }

/* segmented + toggle buttons (native inputs, styled labels) */
.seg{ display:flex; flex-wrap:wrap; gap:6px; }
.seg-wrap{ max-width:280px; }
.tg{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.tg-btn{ display:inline-flex; align-items:center; height:26px; padding:0 11px; font-size:12.5px; font-weight:600;
 border:1px solid var(--line); border-radius:9px; background:var(--panel-2); color:#c7cad1;
 cursor:pointer; user-select:none; transition:background .12s,border-color .12s,color .12s; }
.tg-btn:hover{ border-color:#5b6068; color:#fff; }
.tg:checked + .tg-btn{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tg:focus-visible + .tg-btn{ outline:2px solid var(--accent); outline-offset:2px; }
.tg-toggle{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tg-toggle:hover{ filter:brightness(1.08); border-color:var(--accent); color:#fff; }
#sortDir{ min-width:40px; justify-content:center; font-size:14px; }

/* palette controls */
.pal-row{ display:flex; align-items:center; gap:8px; }
.pal-name{ font-size:12.5px; font-weight:600; color:#c7cad1; min-width:120px; }
.pbtn{ display:inline-flex; align-items:center; height:26px; padding:0 11px; font-size:12.5px; font-weight:600; border-radius:9px;
 border:1px solid var(--line); background:var(--panel-2); color:#c7cad1; cursor:pointer; }
.pbtn:hover{ border-color:#5b6068; color:#fff; }
.pbtn-on{ background:var(--on); border-color:var(--on); color:#fff; }

/* randomize */
.rand-btn{ display:inline-flex; align-items:center; align-self:flex-start; height:30px; margin-top:6px; padding:0 18px; font-size:13.5px; font-weight:700; border-radius:10px; cursor:pointer;
 border:none; color:#fff; background:linear-gradient(135deg,#7c3aed,#db2777); }
.rand-btn:hover{ filter:brightness(1.08); }

/* palette tray (chosen colors) */
.palette-tray{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin:4px 0 14px; }
.palette-tray:empty{ display:none; }
.palette-tray::before{ content:"Palette"; align-self:center; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:#888; }
.pchip{ position:relative; width:120px; }
.pchip-sw{ height:64px; border-radius:8px; cursor:pointer; border:1px solid rgba(128,128,128,.35); }
.pchip-hex{ display:block; margin-top:4px; text-align:center; font-size:12px; font-family:Consolas,"Liberation Mono",Menlo,monospace; color:#333; }
body.mode-dark .pchip-hex{ color:#ddd; }
.pchip-x{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:#e11d48; color:#fff; font-size:14px; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.45); }
.pchip-x:hover{ background:#f43f5e; }

/* color grid */
#color-wrappage{ margin:14px auto 0; clear:both; }
.swatch{ float:left; margin:0 1px 1px 0; width:var(--sz,30px); height:var(--sz,30px); border-radius:50%; cursor:pointer; }
#color-wrappage.square .swatch{ border-radius:0; }
.spacer{ clear:both; height:10px; }
#color-wrappage.flat .spacer{ height:0; }
#color-wrappage.flat .swatch{ margin:0; }
.cursor-pointer:hover{ cursor:pointer; }

/* palette modal */
.wc-modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.72); padding:32px 14px; overflow:auto; }
.wc-modal.open{ display:block; }
.wc-modal-box{ max-width:780px; margin:0 auto; background:var(--pop-bg); color:var(--pop-fg); border:1px solid var(--pop-line); border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.wc-modal-bar{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--pop-line); }
.wc-modal-title{ margin:0; font-size:18px; font-weight:800; font-variant:small-caps; }
.wc-x{ border:none; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--pop-muted); }
.wc-x:hover{ color:var(--pop-fg); }
.wc-sort{ display:flex; align-items:center; gap:8px; padding:10px 18px 0; font-size:12px; color:var(--pop-muted); }
.wc-sort-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.wc-sort-sel{ padding:4px 8px; border:1px solid var(--pop-line); border-radius:7px; background:var(--pop-bg); color:var(--pop-fg); font-size:12px; cursor:pointer; }
.wc-sort-dir{ height:28px; min-width:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border:1px solid var(--pop-line); border-radius:7px; background:var(--pop-bg); color:var(--pop-fg); cursor:pointer; font-size:14px; }
.wc-sort-dir:hover{ background:var(--pop-hover); }
.wc-grid{ padding:12px 18px 20px; }
.wsc-color{ margin:0 0 8px; padding:.7em; text-align:center; border-radius:8px; font-size:13px; font-weight:600; }

/* color codes popup */
.color-pop{ display:none; position:fixed; z-index:1100; min-width:208px; padding:10px; background:var(--pop-bg); color:var(--pop-fg); border:1px solid var(--pop-line); border-radius:12px; box-shadow:0 14px 44px rgba(0,0,0,.55); }
.color-pop-sw{ position:relative; height:38px; border-radius:8px; margin:2px 0 8px; border:1px solid rgba(128,128,128,.4); }
.cp-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:6px 8px; border:none; border-radius:7px; background:transparent; color:var(--pop-fg); cursor:pointer; text-align:left; }
.cp-row:hover{ background:var(--pop-hover); }
.cp-label{ font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--pop-muted); }
.cp-val{ font-size:12.5px; font-family:Consolas,"Liberation Mono",Menlo,monospace; }
.color-pop-x{ position:absolute; top:5px; right:7px; padding:0; border:none; background:none; color:var(--pop-muted); font-size:18px; line-height:1; cursor:pointer; }
.color-pop-x:hover{ color:var(--pop-fg); }
.cp-add{ position:absolute; top:5px; right:5px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; padding:0; border:none; border-radius:6px; background:rgba(255,255,255,.72); color:#111; font-size:16px; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.cp-add:hover{ background:#fff; }

/* copy toast */
.wc-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px); background:rgba(20,20,22,.95); color:#fff; padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:2000; box-shadow:0 6px 20px rgba(0,0,0,.4); }
.wc-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:560px){ body{ padding:12px; } .cgen-row{ gap:14px 16px; } }