@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

:root {
  color: #252525;
  background: #f3f1ed;
  font-family: "DM Sans", "Noto Sans JP", sans-serif;
  font-synthesis: none;
  --ink: #252525;
  --muted: #898681;
  --line: #dedbd5;
  --paper: #fbfaf7;
  --accent: #ff5c4d;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100vh; overflow: hidden; background: #f3f1ed; }
button, input, textarea { font: inherit; }
button, label[for="file-input"] { cursor: pointer; }
button:focus-visible, label:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 3px solid rgba(76, 125, 255, .22);
  outline-offset: 2px;
}
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  height: 68px;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 247, .96);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 24px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: var(--ink);
  transform: rotate(-2deg);
}
.brand-mark svg { width: 18px; }

.tabs-area {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 5px;
  overflow: hidden;
  padding: 10px 14px 0;
}
.tabs {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  min-width: 125px;
  max-width: 195px;
  height: 42px;
  flex: 0 1 180px;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  color: #88837d;
  background: transparent;
  font-size: .72rem;
}
.tab:hover { background: #f1efeb; }
.tab.is-active {
  border-color: var(--line);
  color: #3e3b37;
  background: #f3f1ed;
  font-weight: 600;
}
.tab-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #b7b2aa; }
.tab.has-image .tab-dot { background: #45b88a; box-shadow: 0 0 0 3px rgba(69,184,138,.1); }
.tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close {
  display: grid;
  width: 20px;
  height: 20px;
  margin-left: auto;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 5px;
  color: #aaa59d;
  background: transparent;
  opacity: 0;
}
.tab:hover .tab-close, .tab.is-active .tab-close { opacity: 1; }
.tab-close:hover { color: #d94d42; background: #ffe9e6; }
.tab-close svg { width: 11px; }
.add-tab {
  display: flex;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  color: #827d77;
  background: transparent;
  font-size: .68rem;
}
.add-tab:hover { color: #3f3c38; background: #ebe8e3; }
.add-tab svg { width: 14px; }

.top-actions { display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.button {
  display: inline-flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .76rem;
  font-weight: 600;
  transition: .18s ease;
}
.button svg { width: 16px; height: 16px; }
.button:disabled { cursor: not-allowed; opacity: .38; }
.button-ghost { color: #6e6b66; background: transparent; }
.button-ghost:hover:not(:disabled) { background: #efede8; }
.button-primary { color: white; background: var(--accent); box-shadow: 0 7px 18px rgba(255,92,77,.2); }
.button-primary:hover:not(:disabled) { filter: brightness(.94); transform: translateY(-1px); }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: #3c3a37; transform: translateY(-1px); }
.button-outline { border-color: #d8d5cf; color: #55524e; background: #fff; }
.button-outline:hover { border-color: #b8b4ad; background: #f8f7f4; }

.workspace {
  display: grid;
  height: calc(100vh - 68px);
  grid-template-columns: 66px minmax(0, 1fr) 286px;
}
.toolrail {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-right: 1px solid var(--line);
  background: rgba(251, 250, 247, .92);
}
.tool-group { display: grid; gap: 7px; }
.tool-separator { width: 28px; border-top: 1px solid var(--line); }
.tool-button {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #77736e;
  background: transparent;
  transition: .15s;
}
.tool-button svg { width: 19px; height: 19px; }
.tool-button:hover:not(:disabled) { color: var(--ink); background: #ebe8e2; }
.tool-button.is-active { color: white; background: var(--ink); box-shadow: 0 6px 13px rgba(32,31,29,.16); }
.tool-button.danger:hover:not(:disabled) { color: #df4d41; background: #ffebe8; }
.tool-button:disabled { cursor: not-allowed; opacity: .25; }
.tool-button::after {
  position: absolute;
  left: calc(100% + 10px);
  z-index: 10;
  width: max-content;
  padding: 6px 8px;
  border-radius: 6px;
  color: white;
  background: #252525;
  content: attr(data-label);
  font-size: .65rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: .15s;
}
.tool-button:hover::after { opacity: 1; transform: translateX(0); }
.toolrail-hint {
  position: absolute;
  bottom: 22px;
  color: #bbb7b0;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
}

.stage-shell { display: grid; min-width: 0; min-height: 0; grid-template-rows: 54px minmax(0, 1fr) 46px; }
.stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  border-bottom: 1px solid rgba(222,219,213,.75);
}
.stage-head p { margin: 0; color: #88837c; font-size: .68rem; font-weight: 600; }
.zoom-controls {
  display: flex;
  height: 31px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d9d6d0;
  border-radius: 8px;
  background: #faf9f6;
}
.zoom-controls button { height: 100%; padding: 0 10px; border: 0; color: #77736e; background: transparent; font-size: .74rem; }
.zoom-controls button:hover { background: #efede8; }
#zoom-reset { min-width: 54px; border-right: 1px solid #e0ddd7; border-left: 1px solid #e0ddd7; }

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(rgba(43,40,36,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,40,36,.025) 1px, transparent 1px),
    #eeece7;
  background-size: 20px 20px;
}
.empty-state {
  position: absolute;
  inset: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed #cbc7c0;
  border-radius: 3px;
  transition: .2s;
}
.empty-state[hidden] { display: none; }
.stage.is-dragging .empty-state { border-color: var(--accent); background: rgba(255,92,77,.035); }
.drop-visual {
  position: relative;
  display: grid;
  width: 102px;
  height: 83px;
  margin-bottom: 24px;
  place-items: center;
  color: #8e8982;
  background: repeating-linear-gradient(0deg, rgba(80,77,72,.035) 0 1px, transparent 1px 8px), #f7f5f1;
}
.drop-visual svg { width: 30px; height: 30px; stroke-width: 1.35; }
.corner { position: absolute; width: 15px; height: 15px; border-color: #65615b; }
.corner-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
.empty-state h1 { margin: 0 0 9px; font-size: 1.3rem; letter-spacing: -.04em; }
.empty-state > p { margin: 0; color: #8a867f; font-size: .78rem; }
.import-actions { display: flex; gap: 9px; margin-top: 25px; }
.paste-hint { display: flex; align-items: center; gap: 5px; margin-top: 22px !important; font-size: .66rem !important; }
kbd {
  display: grid;
  min-width: 22px;
  min-height: 22px;
  padding: 3px 6px;
  place-items: center;
  border: 1px solid #d3d0ca;
  border-bottom-width: 2px;
  border-radius: 5px;
  color: #6f6b65;
  background: #faf9f6;
  font-family: inherit;
  font-size: .62rem;
}
.windows-key svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

.canvas-wrap {
  position: relative;
  width: max-content;
  margin: 34px auto;
  background: white;
  box-shadow: 0 18px 50px rgba(47,43,37,.16), 0 0 0 1px rgba(60,55,48,.08);
}
.canvas-wrap[hidden] { display: none; }
#canvas { display: block; max-width: none; touch-action: none; }

.text-editor {
  position: fixed;
  z-index: 20;
  width: 290px;
  padding: 14px;
  border: 1px solid #d8d4cd;
  border-radius: 12px;
  background: white;
  box-shadow: 0 16px 40px rgba(40,36,31,.2);
}
.text-editor[hidden] { display: none; }
.text-editor > label { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 700; }
.text-editor textarea {
  width: 100%;
  resize: none;
  padding: 9px 10px;
  border: 1px solid #ddd9d2;
  border-radius: 8px;
  outline: none;
  color: #33302c;
  font-size: .76rem;
  line-height: 1.5;
}
.text-editor textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,92,77,.1); }
.text-editor > div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.text-editor button { padding: 6px 9px; border: 0; border-radius: 6px; color: #77716b; background: #f0eee9; font-size: .69rem; }
.text-editor button[type="submit"] { color: white; background: var(--accent); }

.stage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  border-top: 1px solid var(--line);
  color: #96918a;
  background: rgba(247,245,241,.94);
  font-size: .63rem;
}
.stage-footer p { display: flex; align-items: center; gap: 8px; margin: 0; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #45b88a; box-shadow: 0 0 0 3px rgba(69,184,138,.12); }
.privacy-note svg { width: 13px; }

.properties-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 65px minmax(0, 1fr);
  border-left: 1px solid var(--line);
  background: rgba(251,250,247,.94);
}
.panel-head {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.panel-head > div { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.panel-head span, .property-section > label, .section-title > label {
  color: #8e8a83;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.panel-head strong { color: #aaa59e; font-size: .62rem; font-weight: 500; }
.property-content { min-height: 0; overflow-y: auto; }
.property-section { padding: 18px 19px; border-bottom: 1px solid #e5e2dc; }
.property-section[hidden] { display: none; }
.property-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  color: #aaa59e;
  text-align: center;
}
.property-empty[hidden] { display: none; }
.property-empty svg { width: 24px; stroke-width: 1.35; }
.property-empty p { margin: 0; font-size: .62rem; line-height: 1.7; }
.property-section > label, .section-title > label { display: block; margin-bottom: 11px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 9px; background: #efede8; }
.segmented button {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 7px;
  color: #827e78;
  background: transparent;
  font-size: .67rem;
}
.segmented button.is-active { color: #3e3b37; background: white; box-shadow: 0 2px 7px rgba(39,36,32,.08); font-weight: 600; }
.segmented svg { width: 15px; }
.line-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.line-kinds button {
  display: grid;
  height: 54px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #ddd9d2;
  border-radius: 8px;
  color: #7d7872;
  background: #fff;
  font-size: .58rem;
}
.line-kinds button.is-active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.line-kinds svg { width: 28px; height: 15px; }
.colors { display: flex; align-items: center; gap: 11px; }
.color { width: 20px; height: 20px; padding: 0; border: 3px solid #fbfaf7; border-radius: 50%; background: var(--color); box-shadow: 0 0 0 1px rgba(50,46,41,.12); }
.color.is-active { box-shadow: 0 0 0 2px #fbfaf7, 0 0 0 3px var(--color); }
.custom-color {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border: 1px dashed #aaa59e;
  border-radius: 50%;
  background: conic-gradient(#e94e4e, #f2c94c, #38b87c, #4c7dff, #9b6bff, #e94e4e);
}
.custom-color input { position: absolute; inset: -8px; width: 36px; height: 36px; opacity: 0; cursor: pointer; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.section-title > label { margin: 0; }
.section-title span { color: #aaa69f; font-size: .54rem; }
.field-label { display: block; margin: 0 0 7px; color: #77736c; font-size: .62rem; }
.range-row { display: grid; grid-template-columns: 1fr 47px; align-items: center; gap: 10px; margin-bottom: 16px; }
input[type="range"] { accent-color: var(--accent); }
.range-row output, .opacity-row output {
  padding: 5px 6px;
  border: 1px solid #ddd9d2;
  border-radius: 6px;
  color: #65615b;
  background: white;
  font-size: .62rem;
  text-align: center;
}
.color-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.color-fields > label > span:first-child { display: block; margin-bottom: 6px; color: #77736c; font-size: .61rem; }
.color-input-wrap {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid #ddd9d2;
  border-radius: 7px;
  background: white;
}
.color-input-wrap input { width: 17px; height: 19px; padding: 0; border: 0; background: transparent; }
.color-input-wrap b { color: #76716b; font-size: .54rem; font-weight: 500; }
.opacity-row { display: grid; grid-template-columns: auto 1fr 43px; align-items: center; gap: 8px; margin-top: 14px; }
.opacity-row > span { color: #77736c; font-size: .61rem; }
.property-help { display: grid; grid-template-columns: 18px 1fr; gap: 9px; margin: 18px; padding: 12px; border-radius: 8px; color: #8f8a83; background: #f0eee9; }
.property-help svg { width: 16px; }
.property-help p { margin: 0; font-size: .59rem; line-height: 1.6; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 50;
  padding: 10px 15px;
  border-radius: 9px;
  color: white;
  background: #282623;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  font-size: .74rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: .22s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .workspace { grid-template-columns: 60px minmax(0, 1fr); }
  .properties-panel { display: none; }
  .topbar { grid-template-columns: 170px minmax(0, 1fr) auto; }
  .tab { min-width: 105px; }
}
@media (max-width: 680px) {
  body { overflow: auto; }
  .topbar { position: sticky; top: 0; height: 60px; grid-template-columns: 110px minmax(0,1fr) auto; }
  .brand { padding: 0 12px; font-size: .88rem; }
  .brand-mark { width: 26px; height: 26px; }
  .tabs-area { padding-left: 6px; }
  .add-tab span, .button-ghost { display: none; }
  .top-actions { padding: 0 8px; }
  .button-primary { padding: 0 10px; }
  .workspace { height: calc(100vh - 60px); grid-template-columns: 48px minmax(0,1fr); }
  .toolrail { padding-top: 13px; }
  .tool-button { width: 35px; height: 35px; }
  .stage-shell { grid-template-rows: 50px minmax(0,1fr) 40px; }
  .stage-head { padding: 0 12px; }
  .privacy-note { display: none !important; }
  .empty-state { inset: 14px; padding: 20px; text-align: center; }
  .import-actions { flex-direction: column; width: min(230px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}