/* ===========================================================
   Palette Studio — brand tokens
   Same token set as Image Studio, so the two tools match.
   =========================================================== */
:root{
  --brand:      #c8963e;   /* accent / buttons   */
  --brand-ink:  #1b1408;   /* text ON the accent */
  --ink:        #12151a;   /* main text          */
  --radius:     14px;

  --bg:         #f5f6f8;
  --surface:    #ffffff;
  --line:       #e3e6eb;
  --muted:      #6b7280;
  --danger:     #c0392b;
  --shadow:     0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.07);
}

*,*::before,*::after{box-sizing:border-box}

/* Must come before any rule that sets `display` on a class.
   A class selector and [hidden] have equal specificity, so without
   !important the later class rule wins and hidden panels stay on screen. */
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; line-height:1.25; font-weight:650}
h2{font-size:16px}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.muted{color:var(--muted)}
.tiny{font-size:13px; color:var(--muted)}
.hint{margin:8px 0 0; font-size:13px; color:var(--muted)}
.link{color:var(--brand); text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar-actions{display:flex; gap:8px; flex:none}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:var(--brand); position:relative; overflow:hidden;
}
.logo::before,.logo::after{
  content:""; position:absolute; top:11px; width:12px; height:12px;
  border-radius:50%; background:#fff;
}
.logo::before{left:5px}
.logo::after{left:14px; opacity:.55}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-text strong{font-size:16px}
.brand-text small{color:var(--muted); font-size:12px}

/* ---------- buttons ---------- */
.primary,.secondary,.ghost{
  border-radius:10px; border:1px solid var(--line); background:var(--surface);
  padding:10px 14px; color:var(--ink); font-weight:550;
  transition:background .15s, border-color .15s, transform .05s;
}
.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.primary:hover{filter:brightness(1.06)}
.secondary{background:var(--ink); border-color:var(--ink); color:#fff}
.ghost{background:transparent}
.ghost:hover{background:#eef0f4}
.small{padding:7px 11px; font-size:14px}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ---------- layout ---------- */
/* Both columns must stretch to the full row height. A sticky child can only
   travel inside its own containing block, so with `align-items:start` the
   short right-hand column gives the preview nothing to stick to and it
   scrolls away as soon as you reach the taller controls column. */
.layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:18px; padding:18px; max-width:1360px; margin:0 auto; align-items:stretch;
}
.controls,.output{display:flex; flex-direction:column; gap:18px; min-width:0}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
}
/* Pinned under the top bar. Capped to the viewport so that on a short screen
   the export buttons stay reachable instead of hanging below the fold — the
   code block gives up its height first, then the panel scrolls internally. */
.card.sticky{
  position:sticky; top:78px;
  display:flex; flex-direction:column;
  max-height:calc(100vh - 96px); overflow:auto;
}
.card.sticky .preview{flex:0 1 auto}
.card.sticky .code{flex:0 1 auto; min-height:110px}
.card.sticky .export,.card.sticky .tabs-head,.card.sticky .hint{flex:none}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; flex-wrap:wrap;
}
.row-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* ---------- fields ---------- */
.field{margin-bottom:14px}
.field > label{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:14px; font-weight:550; margin-bottom:6px;
}
.field output{color:var(--muted); font-weight:450; font-size:13px}
select,textarea,input[type=text],input[type=number]{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface);
}
textarea{resize:vertical}
input[type=range]{width:100%; accent-color:var(--brand)}
.check{
  display:flex; align-items:center; gap:9px; font-size:14px;
  margin:10px 0 0; cursor:pointer;
}
.check input{accent-color:var(--brand); width:17px; height:17px; flex:none}
.check code{background:#f0f2f5; padding:1px 5px; border-radius:5px; font-size:12px}

/* ---------- stepper ---------- */
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.stepper button{
  border:0; background:var(--surface); width:36px; height:36px; font-size:18px;
  color:var(--ink); line-height:1;
}
.stepper button:hover{background:#eef0f4}
.stepper input{
  width:52px; text-align:center; border:0; border-left:1px solid var(--line);
  border-right:1px solid var(--line); border-radius:0; padding:8px 0;
}

/* ---------- swatch rows ---------- */
.swatches{display:flex; flex-direction:column; gap:8px}
.sw{
  border:1px solid var(--line); border-radius:12px; padding:8px;
  background:var(--surface); transition:border-color .15s, box-shadow .15s;
}
.sw.active{border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,150,62,.18)}
.sw.dragging{opacity:.4}
.sw-top{display:flex; align-items:center; gap:8px}
.sw-index{
  width:22px; height:22px; flex:none; border-radius:6px; background:#f0f2f5;
  color:var(--muted); font-size:12px; font-weight:600;
  display:grid; place-items:center; cursor:grab;
}
.chip{
  width:38px; height:38px; flex:none; padding:0; border:1px solid var(--line);
  border-radius:9px; background:none; cursor:pointer; overflow:hidden;
}
.chip::-webkit-color-swatch-wrapper{padding:0}
.chip::-webkit-color-swatch{border:0; border-radius:8px}
.chip::-moz-color-swatch{border:0; border-radius:8px}
.chip.sm{width:30px; height:30px; border-radius:8px}
.sw-fields{display:flex; gap:6px; flex:1; min-width:0}
.sw-fields .hex{width:104px; flex:none; text-transform:uppercase; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
.sw-fields .nm{min-width:0; flex:1; font-size:14px}
.sw-tools{display:flex; gap:2px; flex:none}
.sw-tools button{
  width:28px; height:28px; border:0; background:none; border-radius:7px;
  color:var(--muted); font-size:14px; line-height:1; display:grid; place-items:center;
}
.sw-tools button:hover{background:#eef0f4; color:var(--ink)}
.sw-tools button.rm:hover{background:#fdeceb; color:var(--danger)}
.sw-stroke{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);
}
.sw-stroke .check{margin:0}
.sw-stroke .w{width:70px}
.sw-stroke .w-label{font-size:13px; color:var(--muted)}
.stroke-opts{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sw:not(.has-stroke) .stroke-opts{display:none}

.hexfield{display:flex; gap:6px; align-items:center}
.hexfield input[type=text]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}

.paste-box{margin-top:12px; padding:12px; background:#f7f8fa; border-radius:12px}

/* ---------- dropzone / picker ---------- */
.dropzone{
  border:2px dashed var(--line); border-radius:12px; padding:22px 16px;
  text-align:center; cursor:pointer; background:#fbfcfd; transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone.over{border-color:var(--brand); background:#fdf8ef}
.dz-inner p{margin:4px 0}
.dz-icon{color:var(--brand); width:44px; margin:0 auto 6px}
.dz-icon svg{width:100%; display:block}

.picker-stage{position:relative; border-radius:12px; overflow:hidden; background:#f0f2f5; line-height:0}
#imgCanvas{max-width:100%; display:block; cursor:crosshair; margin:0 auto}
.loupe{
  position:absolute; pointer-events:none; width:120px;
  border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.28);
  border:2px solid #fff; background:#fff; transform:translate(-50%,-130%); z-index:5;
}
#loupeCanvas{display:block; width:120px; height:120px; image-rendering:pixelated}
.loupe-hex{
  display:block; text-align:center; font:600 12px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#12151a; color:#fff; letter-spacing:.04em;
}

/* ---------- segmented control ---------- */
.segmented{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.segmented button{
  border:0; background:var(--surface); padding:7px 12px; font-size:13px;
  color:var(--muted); border-left:1px solid var(--line);
}
.segmented button:first-child{border-left:0}
.segmented button.on{background:var(--ink); color:#fff}
.tabs-head{margin:16px 0 10px}

/* ---------- preview ---------- */
.preview{
  border:1px solid var(--line); border-radius:12px; padding:26px 18px;
  display:grid; place-items:center; min-height:190px; overflow:auto;
}
.preview > div{width:100%}
.bg-transparent{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#e9ecf1 25%,transparent 25%,transparent 75%,#e9ecf1 75%),
    linear-gradient(45deg,#e9ecf1 25%,transparent 25%,transparent 75%,#e9ecf1 75%);
  background-size:18px 18px;
  background-position:0 0,9px 9px;
}
.bg-light{background:#ffffff}
.bg-dark{background:#1d2026}

/* ---------- code ---------- */
.code{
  margin:0; background:#12151a; color:#e6e9ef; border-radius:12px;
  padding:14px; font-size:12.5px; line-height:1.6; max-height:260px; overflow:auto;
  white-space:pre-wrap; word-break:break-word;
}
.export{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center}
.png-group{display:flex; align-items:center; gap:0}
.png-group button{border-top-right-radius:0; border-bottom-right-radius:0}
.png-group select{
  width:auto; border-left:0; border-top-left-radius:0; border-bottom-left-radius:0;
  padding:10px 8px; background:var(--ink); color:#fff; border-color:var(--ink);
}

/* ---------- dialog + toast ---------- */
dialog{
  border:0; border-radius:var(--radius); padding:24px; max-width:560px; width:calc(100% - 32px);
  box-shadow:0 24px 60px rgba(16,24,40,.28); color:var(--ink);
}
dialog::backdrop{background:rgba(12,16,22,.5)}
dialog h2{margin-bottom:10px}
dialog h3{margin:18px 0 6px; font-size:15px}
dialog p,dialog li{font-size:14.5px}
dialog ol{margin:0; padding-left:20px}
dialog li{margin-bottom:8px}
dialog form{margin-top:20px; text-align:right}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:99px;
  font-size:14px; box-shadow:0 8px 24px rgba(16,24,40,.24); z-index:50;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  /* One column: the preview sits in the flow, at whatever height it needs. */
  .card.sticky{position:static; display:block; max-height:none; overflow:visible}
}
@media (max-width:560px){
  .layout{padding:12px; gap:12px}
  .topbar{padding:12px 14px}
  .brand-text small{display:none}
  .grid-2{grid-template-columns:1fr}
  .sw-fields{flex-wrap:wrap}
  .sw-fields .hex{width:100%}
}
.sw-stroke .hex{width:104px; flex:none}