/* Graphiicom — logo editor (design.com-style) */

.ed-body { margin: 0; background: #f5f6f8; color: var(--g-text); font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Top header bar ---- */
.ed-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 16px;
  background: #000; color: #fff; border-bottom: 1px solid #000;
}
.ed-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.ed-brand-name { font-weight: 800; letter-spacing: .04em; }
.ed-back { color: #cbd5e1; font-size: 13px; margin-left: 12px; }
.ed-header-right { display: flex; gap: 8px; align-items: center; }
.ed-hbtn {
  background: transparent; color: #fff; border: 1px solid #2a2a2a;
  padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer;
}
.ed-hbtn:hover { background: #1a1a1a; }
.ed-hbtn-primary { background: var(--g-primary); border-color: transparent; }
.ed-hbtn-primary:hover { background: var(--g-primary-700); }

/* ---- Object toolbar ---- */
.ed-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--g-border);
  gap: 12px; flex-wrap: wrap;
}
.ed-tools-left, .ed-tools-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ed-tbtn {
  background: #fff; border: 1px solid var(--g-border); color: var(--g-text);
  padding: 6px 10px; border-radius: 7px; font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.ed-tbtn:hover { background: var(--g-bg-muted); }
.ed-tbtn-danger:hover { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.ed-tbtn-range { padding: 4px 10px; }
.ed-tbtn-range input[type=range] { width: 80px; }

/* ---- Main work area ---- */
.ed-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 440px; min-height: 0; }
@media (max-width: 1200px) { .ed-main { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (max-width: 980px)  { .ed-main { grid-template-columns: minmax(0, 1fr) 340px; } }
.ed-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 32px; overflow: auto;
}
.ed-canvas-wrap {
  background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(15,23,42,0.10);
  overflow: hidden; flex: 0 0 auto; line-height: 0;
}
.ed-canvas-wrap .canvas-container { line-height: 1; }
.ed-canvas-wrap canvas { display: block; }
.ed-canvas-wrap.is-anim-bounce  canvas { animation: edBounce 1s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-shake   canvas { animation: edShake 0.6s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-pop     canvas { animation: edPop 1.2s ease-out infinite; }
.ed-canvas-wrap.is-anim-fade    canvas { animation: edFade 2s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-scale   canvas { animation: edScale 2s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-pulse   canvas { animation: edPulse 1.4s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-flicker canvas { animation: edFlicker 0.5s steps(2) infinite; }
.ed-canvas-wrap.is-anim-spin    canvas { animation: edSpin 4s linear infinite; }
.ed-canvas-wrap.is-anim-tumble  canvas { animation: edTumble 1.6s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-stamp   canvas { animation: edStamp 1.4s ease-out infinite; }
.ed-canvas-wrap.is-anim-slide   canvas { animation: edSlide 1.6s ease-in-out infinite; }
.ed-canvas-wrap.is-anim-blur    canvas { animation: edBlur 2s ease-in-out infinite; }
@keyframes edBounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes edShake   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes edPop     { 0%,100%{transform:scale(1)} 25%{transform:scale(1.06)} }
@keyframes edFade    { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes edScale   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes edPulse   { 0%,100%{transform:scale(1);filter:brightness(1)} 50%{transform:scale(1.03);filter:brightness(1.15)} }
@keyframes edFlicker { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes edSpin    { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes edTumble  { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
@keyframes edStamp   { 0%{transform:scale(2);opacity:0} 30%{transform:scale(1);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes edSlide   { 0%{transform:translateX(-30px);opacity:.4} 50%{transform:translateX(0);opacity:1} 100%{transform:translateX(30px);opacity:.4} }
@keyframes edBlur    { 0%,100%{filter:blur(0)} 50%{filter:blur(3px)} }

.ed-zoom {
  position: absolute; bottom: 12px; right: 24px;
  display: flex; gap: 4px; align-items: center;
  background: #fff; border: 1px solid var(--g-border); border-radius: 999px; padding: 4px 12px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.ed-zbtn { background: none; border: 0; cursor: pointer; font-size: 16px; padding: 2px 6px; line-height: 1; }
#zoomLabel { font-size: 12px; min-width: 38px; text-align: center; }

/* ---- Right rail ---- */
.ed-rail { display: grid; grid-template-columns: 72px minmax(0, 1fr); background: #fff; border-left: 1px solid var(--g-border); }
.ed-rail-tabs {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 8px; background: var(--g-bg-muted); border-right: 1px solid var(--g-border);
}
.ed-rt {
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 4px; border-radius: 8px; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--g-text); font-size: 16px;
}
.ed-rt small { font-size: 10px; color: var(--g-muted); }
.ed-rt:hover { background: #fff; }
.ed-rt.is-active { background: #fff; box-shadow: 0 0 0 1px var(--g-primary) inset; color: var(--g-primary); }
.ed-rt.is-active small { color: var(--g-primary); }

.ed-rail-panel { padding: 20px 24px; overflow-y: auto; max-height: calc(100vh - 52px - 56px); }
.ed-pane { display: none; }
.ed-pane.is-active { display: block; }
.ed-pane > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ed-pane h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ed-pane label { display: block; font-size: 12px; color: var(--g-muted); margin: 10px 0 4px; }
.ed-pane input[type=text], .ed-pane input[type=number], .ed-pane input[type=search],
.ed-pane select, .ed-pane textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--g-border); border-radius: 8px; font: inherit; background: #fff;
}
.ed-pane input[type=color] { width: 100%; height: 36px; border: 1px solid var(--g-border); border-radius: 8px; padding: 2px; background: #fff; }
.ed-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-muted { color: var(--g-muted); }

.ed-mini { background: #fff; border: 1px solid var(--g-border); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.ed-mini:hover { background: var(--g-bg-muted); }
.ed-mini-primary { background: var(--g-primary); color: #fff; border-color: transparent; }
.ed-mini-primary:hover { background: var(--g-primary-700); color: #fff; }

.ed-step { display: flex; align-items: stretch; }
.ed-step button {
  width: 32px; border: 1px solid var(--g-border); background: #fff; cursor: pointer; font-size: 14px;
}
.ed-step button:first-child { border-radius: 8px 0 0 8px; }
.ed-step button:last-child  { border-radius: 0 8px 8px 0; }
.ed-step input { border-radius: 0; border-left: 0; border-right: 0; width: 100%; text-align: center; }

.ed-seg { display: flex; }
.ed-seg button {
  flex: 1; border: 1px solid var(--g-border); background: #fff; cursor: pointer; padding: 6px;
}
.ed-seg button:first-child { border-radius: 8px 0 0 8px; }
.ed-seg button:last-child  { border-radius: 0 8px 8px 0; border-left: 0; }
.ed-seg button:not(:first-child):not(:last-child) { border-left: 0; }
.ed-seg button.is-active { background: var(--g-primary); color: #fff; border-color: transparent; }

.ed-curve-row { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 26px; }
.ed-curve-row input[type=range]  { flex: 1; accent-color: var(--g-primary); }
.ed-curve-row input[type=number] { width: 64px; text-align: center; height: 32px; border-radius: 8px; border: 1px solid var(--g-border); }
.ed-curve-row .ed-spacing-label  { flex: 0 0 50px; font-size: 12px; color: var(--g-muted); }

.ed-toggles { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--g-border); }
.ed-toggles label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--g-text); font-size: 14px; cursor: pointer; }
.ed-toggles input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }

/* ---- Font browser (language + style + preview list) ---- */
.ed-font-picker { margin-bottom: 14px; }
.ed-font-picker .ed-row2 select { height: 40px; border-radius: 10px; padding: 0 10px; }
.ed-font-list {
  margin-top: 10px; max-height: 420px; overflow-y: auto;
  border: 1px solid var(--g-border); border-radius: 10px; background: #fff;
}
.ed-font-card {
  display: flex; align-items: center; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--g-border);
  padding: 14px 14px; cursor: pointer; text-align: left;
  font-family: inherit;
}
.ed-font-card:last-child { border-bottom: 0; }
.ed-font-card:hover { background: var(--g-bg-muted); }
.ed-font-card.is-active { background: rgba(59,130,246,0.08); position: relative; }
.ed-font-card.is-active::after {
  content: '✓'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--g-primary); font-weight: 700;
}
.ed-font-name { font-size: 20px; color: var(--g-text); line-height: 1.2; word-break: break-word; }

/* ---- Edit Text pane: spacious, mobile-friendly ---- */
.ed-pane .ed-pane-actions { display: flex; gap: 6px; }
.ed-pill {
  background: #fff; border: 1px solid var(--g-border); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.ed-pill:hover { background: var(--g-bg-muted); }
.ed-pill-ai { color: var(--g-primary); border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.06); }
.ed-pill-ai:hover { background: rgba(59,130,246,0.12); }
.ed-pill-icon { display: inline-block; width: 14px; height: 14px; line-height: 1; text-align: center; color: var(--g-primary); }

.ed-txt-content {
  width: 100%; padding: 14px; border: 1px solid var(--g-border); border-radius: 12px;
  font: inherit; font-size: 14px; background: #fff; resize: vertical;
  min-height: 44px; margin-bottom: 14px;
}

.ed-block { width: 100%; margin-bottom: 14px; }
.ed-pane select.ed-block { padding: 12px 14px; border-radius: 12px; font-size: 14px; height: 44px; }

.ed-size-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.ed-color-chip {
  position: relative; width: 44px; height: 44px;
  background: #0F172A; border: 1px solid var(--g-border); border-radius: 10px;
  padding: 0; cursor: pointer; flex: 0 0 auto;
}
.ed-color-chip input[type=color] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.ed-step-grow { flex: 1; height: 44px; }
.ed-step-grow button { width: 44px; height: 44px; font-size: 18px; }
.ed-step-grow input { height: 44px; font-size: 15px; }
.ed-case {
  width: 56px; height: 44px; border: 1px solid var(--g-border); background: #fff;
  border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
}
.ed-case:hover { background: var(--g-bg-muted); }

.ed-pane .ed-seg.ed-block { height: 44px; margin-bottom: 18px; }
.ed-pane .ed-seg.ed-block button { font-size: 16px; }

.ed-spacing-row, .ed-weight-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.ed-spacing-label { font-size: 13px; color: var(--g-text); flex: 0 0 64px; }
.ed-spacing-row input[type=range] {
  flex: 1; accent-color: var(--g-primary);
}
.ed-spacing-row input[type=number] {
  width: 64px; text-align: center; height: 40px; border-radius: 10px;
}
.ed-weight-row select { flex: 1; height: 44px; border-radius: 12px; padding: 0 12px; font-size: 14px; border: 1px solid var(--g-border); background: #fff; }

/* ---- Layout pickers (3-col grid of SVG-thumbnail buttons) ---- */
.ed-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ed-layout {
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: #fff; border: 1px solid var(--g-border); border-radius: 10px;
  cursor: pointer; aspect-ratio: 4/3; transition: border-color .1s ease, transform .08s ease;
}
.ed-layout:hover  { border-color: var(--g-primary); transform: translateY(-1px); }
.ed-layout.is-active { border-color: var(--g-primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.18); }
.ed-layout svg { width: 70%; height: auto; display: block; }
.ed-layout:hover svg circle, .ed-layout:hover svg rect { fill: var(--g-text); }

/* ---- Swatches ---- */
.ed-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ed-sw {
  aspect-ratio: 1/1; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08); transition: transform .08s ease;
}
.ed-sw:hover { transform: scale(1.08); }
.ed-grad-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ed-grad-swatches > div {
  aspect-ratio: 1/1; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
}

/* ---- Custom gradient picker row ---- */
.ed-grad-custom { display: flex; gap: 8px; align-items: center; }
.ed-grad-custom input[type=color] { width: 44px; height: 36px; padding: 0; border-radius: 8px; border: 1px solid var(--g-border); }
.ed-grad-custom button { white-space: nowrap; }

/* ---- Replace-logo thumb picker ---- */
.ed-logo-thumbs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px;
}
.ed-logo-thumb {
  background: #fff; border: 1px solid var(--g-border); border-radius: 10px;
  padding: 6px; cursor: pointer; display: flex; flex-direction: column;
  gap: 6px; align-items: stretch; font: inherit;
}
.ed-logo-thumb:hover { border-color: var(--g-primary); }
.ed-logo-thumb img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 6px;
}
.ed-logo-thumb-fallback {
  width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--g-text); border-radius: 6px; padding: 6px; text-align: center;
}
.ed-logo-thumb span { font-size: 11px; color: var(--g-muted); text-align: center; line-height: 1.2; }

/* ---- Icon library / shapes ---- */
.ed-icons, .ed-shapes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px;
}
.ed-icons button, .ed-shapes button {
  aspect-ratio: 1/1; background: #fff; border: 1px solid var(--g-border); border-radius: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--g-text); transition: border-color .1s ease;
}
.ed-icons button:hover, .ed-shapes button:hover { border-color: var(--g-primary); color: var(--g-primary); }
.ed-icons button svg, .ed-shapes button svg { width: 60%; height: 60%; }
.ed-pro-badge {
  position: absolute; top: 4px; right: 4px;
  background: #fde68a; color: #92400e;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px; line-height: 1.4;
  pointer-events: none;
}
.ed-shape-sw {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08); cursor: pointer; padding: 0;
  transition: transform .08s ease;
}
.ed-shape-sw:hover { transform: scale(1.12); }

/* ---- Animations grid ---- */
.ed-anims { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ed-anims button {
  padding: 12px 8px; background: #fff; border: 1px solid var(--g-border); border-radius: 10px;
  cursor: pointer; font: inherit; font-size: 13px;
}
.ed-anims button:hover  { border-color: var(--g-primary); color: var(--g-primary); }
.ed-anims button.is-active { background: var(--g-primary); color: #fff; border-color: transparent; }

/* ---- AI panel ---- */
.ed-ai-card { background: #fff; border: 1px solid var(--g-border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ed-ai-card strong { display: block; margin-bottom: 8px; font-size: 13px; }
.ed-ai-thumb canvas { width: 100%; height: auto; border-radius: 8px; background: #f1f5f9; }
#aiPrompt { min-height: 70px; resize: vertical; margin-bottom: 8px; }
#btnAiSend { width: 100%; }