/* compiler.css */
/* White UI + light grey accents. Tool styles are strictly .tc-* to avoid interfering with compiled strip. */

:root{
  --ui-bg:#ffffff;
  --ui-panel:#ffffff;
  --ui-border:#e6e8ee;
  --ui-soft:#f4f6f8;
  --ui-text:#111827;
  --ui-muted:#6b7280;
  --ui-primary:#cc3d02;

  --panel-w:420px;
  --panel-collapsed:18px;

  --r:10px;
  --r2:12px;
}

/* Dark mode only for tool UI (by variables) */
body[data-ui="dark"]{
  --ui-bg:#000;
  --ui-panel:#000;
  --ui-border:#222;
  --ui-soft:#222;
  --ui-text:#e7eefc;
  --ui-muted:#444;
  --ui-primary:#f99305;
}
body[data-ui="dark"] .tc-topbar{
  background: var(--ui-panel);
  border-bottom:1px solid var(--ui-border);
}
body[data-ui="dark"] .tc-site-footer{
  background: var(--ui-panel);
  border-top:1px solid var(--ui-border);
}
body[data-ui="dark"] .tc-preview{
  background: var(--ui-bg);
}
body[data-ui="dark"] .tc-preview__canvas{
  background: var(--ui-bg);
}
body[data-ui="dark"] .tc-app{
  background: var(--ui-bg);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff; /* preview surface */
  color:#111827;
  display:flex;
  flex-direction:column;
}
body[data-ui="dark"]{
  background:#000;
}

/* Top bar */
.tc-topbar{
  height:100px;
  border-bottom:1px solid var(--ui-border);
  background:#fff;
  display:flex;
  align-items:center;
}
.tc-topbar__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}
.tc-topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}
.tc-hamburger{
  border:1px solid var(--ui-border);
  background:transparent;
  color:var(--ui-text);
  padding:8px 10px;
  border-radius:3px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.tc-logo img{height:50px;width:auto;display:block}
.tc-topbar__links{display:flex;gap:10px}
.tc-linkbtn{
  border:1px solid var(--ui-border);
  background:transparent;
  color:var(--ui-text);
  padding:8px 12px;
  border-radius:3px;
  cursor:pointer;
  text-decoration:none;
}

/* Layout: preview left, tools right */
.tc-app{
  position:relative;
  flex:1 1 auto;
  transition:margin-right .5s;
  margin-right: var(--panel-w);
}
body.tc-panel-collapsed .tc-app{margin-right:0}

/* Preview is intentionally clean */
.tc-preview{
  background:#fff;
  overflow:auto;
}
.tc-preview__canvas{
  min-height:100%;
  padding:0; /* compiled strip controls itself */
}

/* Tool panel */
.tc-panel{
  position:fixed;
  top:100px;
  right:0;
  bottom:0;
  background:var(--ui-panel);
  border-left:1px solid var(--ui-border);
  color:var(--ui-text);
  overflow:hidden;
  transition:width .5s;
  width:var(--panel-w);
  height:auto;
}

/* Collapsed: only handle visible */
.tc-panel.is-collapsed{
  width:0;
  border-left:none;
}
.tc-panel.is-collapsed .tc-panel__inner{
  opacity:0;
  pointer-events:none;
  transform:translateX(10px);
}

/* Inner panel content */
.tc-panel__inner{
  height:100%;
  overflow:auto;
  padding:14px;
  transition:opacity .15s ease, transform .15s ease;
}

/* Panel top */
.tc-panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--ui-border);
  margin-bottom:12px;
}
.tc-brand__title{font-weight:700;letter-spacing:.2px}
.tc-brand__meta{color:var(--ui-muted);font-size:12px;margin-top:2px}

/* Toolbar */
.tc-panel__toolbar{
  display:flex;
  gap:10px;
  margin:10px 0 12px;
}

/* Buttons */
.tc-btn{
  padding:9px 10px;
  border-radius:3px;
  border:1px solid var(--ui-border);
  background:transparent;
  color:var(--ui-text);
  cursor:pointer;
}
.tc-btn--primary{
  background:var(--ui-primary);
  border-color:transparent;
  color:#fff;
}
body[data-ui="dark"] .tc-btn--primary{ color:#081018; }
.tc-btn:active{transform:translateY(1px)}

/* Tabs */
.tc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tc-tab{
  background:transparent;
  border:1px solid var(--ui-border);
  color:var(--ui-text);
  padding:7px 10px;
  border-radius:var(--r);
  cursor:pointer;
}
.tc-tab.is-active{
  border-color: color-mix(in srgb, var(--ui-primary) 60%, var(--ui-border));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ui-primary) 18%, transparent) inset;
}
.tc-tabpanel{display:none}
.tc-tabpanel.is-active{display:block}

/* Headings scoped */
.tc-h2{margin:8px 0 10px;font-size:15px}
.tc-h3{margin:12px 0 8px;font-size:13px;color:var(--ui-muted)}

/* Inputs */
.tc-row{margin:10px 0}
.tc-label{display:block;margin:0 0 6px;color:var(--ui-muted)}
.tc-label--withlock{display:flex;align-items:center;gap:8px;justify-content:space-between}
.tc-lock{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tc-lock img{width:18px;height:18px;display:block;opacity:.6}
.tc-lock.is-locked img{opacity:1}
.tc-row input[type="text"],
.tc-row input[type="number"],
.tc-row select{
  width:100%;
  padding:9px 10px;
  border-radius:var(--r);
  border:1px solid var(--ui-border);
  background:#fff;
  color:var(--ui-text);
  outline:none;
}
body[data-ui="dark"] .tc-row input[type="text"],
body[data-ui="dark"] .tc-row input[type="number"],
body[data-ui="dark"] .tc-row select{
  background:var(--ui-soft);
}
.tc-row input[type="color"]{
  width:100%;
  height:42px;
  border-radius:var(--r);
  border:1px solid var(--ui-border);
  background:transparent;
  padding:6px;
}
.tc-number{display:none}
.tc-slider{
  display:flex;
  align-items:center;
  gap:10px;
}
.tc-slider__range{width:100%}
.tc-slider__value{
  min-width:38px;
  text-align:right;
  color:var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
.tc-row.is-advanced .tc-slider{display:none}
.tc-row input[data-no-slider="true"]{display:block}
.tc-row input[data-no-slider="true"] + .tc-slider{display:none}
.tc-help{color:var(--ui-muted);display:block;margin-top:6px}
.tc-inline{display:flex;gap:8px;align-items:center}
.tc-inline .tc-slider{flex:1 1 100px; min-width:200px}
.tc-inline--spread{justify-content:space-between}
.tc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tc-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

.tc-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tc-checks label{display:flex;gap:8px;align-items:center;color:var(--ui-text)}
.tc-sep{border:none;border-top:1px solid var(--ui-border);margin:12px 0}

.tc-row--box{
  border:1px solid var(--ui-border);
  background:var(--ui-soft);
  padding:10px;border-radius:var(--r2);
}

/* Advanced per-corner fields */
.tc-adv{display:none}
.tc-adv.is-active{display:grid}

/* Pills (drag order) */
.tc-pills{
  display:flex;
  flex-direction:column;
  gap:0;
}
.tc-pill{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  background:#444;
  border:none;
  border-radius:4px;
  padding:5px 0;
  margin-bottom:1px;
  color:#999;
  cursor:grab;
  user-select:none;
}
.tc-pill[draggable="true"]:active{cursor:grabbing}
.tc-pill.is-dragging{opacity:.4}
.tc-pill.is-drop-target{outline:1px dashed #777}
.tc-pill.is-off{
  opacity:.65;
}
.tc-pill__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--ui-border);
}

/* Color palette */
.tc-palette{
  display:flex;
  gap:6px;
  margin-top:6px;
  flex-wrap:wrap;
}
.tc-swatch{
  width:20px;height:20px;
  border-radius:50%;
  border:1px solid #ccc;
  cursor:pointer;
  margin-right:4px;
  margin-top:5px;
}

/* Switch */
.tc-switch{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  cursor:pointer;
  color:var(--ui-muted);
  font-size:12px;
}
.tc-switch input{display:none}
.tc-switch__ui{
  width:42px;height:24px;
  border-radius:14px;
  border:1px solid var(--ui-border);
  background:var(--ui-soft);
  position:relative;
}
.tc-switch__ui::after{
  content:"";
  position:absolute;
  top:50%;left:3px;
  width:18px;height:18px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--ui-border);
  transform:translateY(-50%);
  transition:transform .15s ease;
}
body[data-ui="dark"] .tc-switch__ui::after{ background:var(--ui-panel); }
.tc-switch input:checked + .tc-switch__ui::after{
  transform:translate(18px, -50%);
}
.tc-switch__label{color:var(--ui-text)}


/* Footer */
.tc-panel__footer{
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid var(--ui-border);
  color:var(--ui-muted);
  font-size:12px;
}

/* Site footer full width */
.tc-site-footer{
  width:100%;
  padding:12px 16px;
  border-top:1px solid var(--ui-border);
  color:var(--ui-muted);
  font-size:12px;
  background:#fff;
}

/* Gradient preview */
.tc-gradient__preview{
  height:60px;
  border-radius:10px;
  border:1px solid var(--ui-border);
  margin:8px 0;
}
.tc-grad-swatches{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.tc-grad-swatches .tc-swatch{margin:0}
.tc-grad-pair{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;margin-top:6px}
.tc-grad-swatches--left{justify-content:flex-start}
.tc-grad-swatches--right{justify-content:flex-end}

/* On small screens: tool becomes overlay on right */
@media (max-width: 980px){
  .tc-panel{
    width:min(var(--panel-w), 92vw);
    z-index:50;
    box-shadow:0 12px 40px rgba(0,0,0,.12);
  }
  .tc-panel.is-collapsed{width:0}
}