:root {
  --bg: #0B0D14;
  --card: #141722;
  --line: rgba(246, 243, 238, .12);
  --ink: #F6F3EE;
  --mute: rgba(246, 243, 238, .6);
  --or: #EC5121;
  --amb: #FFB36B;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg) radial-gradient(60% 40% at 70% 0, rgba(236, 81, 33, .14), transparent 70%) no-repeat;
  color: var(--ink);
  font: 15px/1.5 Rubik, "IBM Plex Sans SC", -apple-system, "PingFang SC", sans-serif;
  min-height: 100vh;
}
.bar { display: flex; align-items: center; gap: 16px; padding: 20px 32px; border-bottom: 1px solid var(--line); }
.bar .logo { height: 26px; }
.bar .ttl { font-weight: 700; letter-spacing: .08em; font-size: 14px; color: var(--mute); }
.bar .ttl b { color: var(--or); }
.wrap { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 40px; max-width: 1180px; margin: 0 auto; padding: 36px 32px 60px; }
.panel { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button { border: 0; background: none; color: var(--mute); font: inherit; font-weight: 600; padding: 10px; border-radius: 9px; cursor: pointer; }
.seg button.on { background: var(--or); color: #fff; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--mute); font-weight: 600; letter-spacing: .04em; }
.field input { width: 100%; min-width: 0; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; outline: none; }
.field input:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(236, 81, 33, .2); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button { font: inherit; font-weight: 700; cursor: pointer; border-radius: 12px; padding: 13px 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
button.primary { background: var(--or); border-color: var(--or); color: #fff; }
button.small { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:not(:disabled):hover { filter: brightness(1.1); }
.msg { display: flex; flex-direction: column; gap: 8px; }
.msg-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mute); font-weight: 600; }
textarea { width: 100%; font: 14px/1.6 -apple-system, "PingFang SC", "IBM Plex Sans SC", sans-serif; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; resize: vertical; outline: none; }
textarea:focus { border-color: var(--or); }
.hint { font-size: 12px; color: var(--mute); }
.preview { min-width: 0; }
.frame { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; max-width: 460px; margin: 0 auto; position: sticky; top: 20px; }
.frame img { display: block; width: 100%; height: auto; border-radius: 8px; max-height: calc(100vh - 80px); object-fit: contain; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-weight: 600; }
.loading[hidden] { display: none; }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); background: #fff; color: #111; font-weight: 700; padding: 11px 20px; border-radius: 999px; opacity: 0; transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .wrap { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 48px; gap: 24px; }
  .bar { padding: 14px 16px; }
  .bar { gap: 12px; }
  .bar .logo { height: 22px; }
  .bar .ttl { font-size: 11px; letter-spacing: .04em; }
  .frame { position: static; max-width: 420px; }
  .frame img { max-height: none; }
}