/* ── design tokens ───────────────────────────── */
:root{
  --bg:#0b0a14; --bg2:#12101f; --card:rgba(255,255,255,.055); --card-br:rgba(255,255,255,.10);
  --txt:#eceaf6; --muted:#a09cba; --accent:#ff6aa2; --accent2:#7c5cff; --cyan:#00e5ff;
  --ok:#43d18b; --warn:#ffc65c; --bad:#ff6b6b;
  --r:18px; --r-sm:12px; --shadow:0 18px 50px -20px rgba(0,0,0,.75);
  --font:ui-rounded,-apple-system,"Hiragino Maru Gothic ProN","Segoe UI Variable","Segoe UI",Roboto,"Noto Sans JP",system-ui,sans-serif;
}
[data-theme="light"]{
  --bg:#f7f5fb; --bg2:#ffffff; --card:rgba(255,255,255,.75); --card-br:rgba(20,10,50,.10);
  --txt:#1b1730; --muted:#6a6486; --shadow:0 18px 44px -24px rgba(60,30,110,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* animated aurora backdrop */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(90px);opacity:.55}
.aurora span{position:absolute;width:46vmax;height:46vmax;border-radius:50%;animation:drift 26s ease-in-out infinite alternate}
.aurora span:nth-child(1){background:#ff6aa2;top:-14%;left:-10%}
.aurora span:nth-child(2){background:#7c5cff;bottom:-18%;right:-8%;animation-delay:-8s}
.aurora span:nth-child(3){background:#00e5ff;top:35%;left:48%;animation-delay:-16s;opacity:.7}
@keyframes drift{to{transform:translate3d(6vw,-7vh,0) scale(1.25)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── top bar ─────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(14px,3vw,30px);position:sticky;top:0;z-index:20;
  backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid var(--card-br)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 24px -8px var(--accent)}
.brand-text b{display:block;font-size:16px;letter-spacing:.2px}
.brand-text small{color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.topbar-actions{display:flex;gap:8px}

/* ── buttons / inputs ────────────────────────── */
.btn{border:1px solid var(--card-br);background:var(--card);color:var(--txt);border-radius:999px;
  padding:9px 16px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;transition:.18s transform,.18s background,.18s border-color}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;
  box-shadow:0 12px 28px -12px var(--accent)}
.btn.ghost{background:transparent}
.btn.icon{padding:9px 11px}
.btn.tiny{padding:5px 11px;font-size:12px}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
:where(button,input,select,textarea,summary,.dropzone):focus-visible{outline:2.5px solid var(--cyan);outline-offset:2px;border-radius:10px}

input[type=text],input[type=url],input[type=email],input[type=tel],input:not([type]),select,textarea{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--card-br);
  background:color-mix(in srgb,var(--bg2) 70%,transparent);color:var(--txt);font:inherit;font-size:14px;transition:.18s border-color}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical}
label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 6px}
label.inline{margin:0;text-transform:none;letter-spacing:0;font-size:12.5px}
output{float:right;color:var(--accent);font-weight:700;text-transform:none;letter-spacing:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;
  background:color-mix(in srgb,var(--txt) 16%,transparent);margin:8px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));border:2px solid #fff2;cursor:pointer;
  box-shadow:0 3px 10px -2px var(--accent)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;
  background:var(--accent);cursor:pointer}
input[type=color]{width:46px;height:38px;padding:3px;border-radius:11px;border:1px solid var(--card-br);
  background:var(--card);cursor:pointer}
.check{display:flex;align-items:center;gap:9px;margin-top:12px}
.check label{margin:0;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--txt);font-weight:500}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.row input[type=range]{flex:1;min-width:90px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:12.5px;color:var(--muted);margin:8px 0 0;min-height:1em}
.hint.bad{color:var(--bad)}

/* ── layout ──────────────────────────────────── */
.studio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.85fr);gap:22px;
  max-width:1360px;margin:24px auto;padding:0 clamp(14px,3vw,30px)}
@media (max-width:980px){.studio{grid-template-columns:1fr}.preview{order:-1}}

/* ── cards / accordion ───────────────────────── */
.card{background:var(--card);border:1px solid var(--card-br);border-radius:var(--r);
  margin-bottom:14px;backdrop-filter:blur(14px);box-shadow:var(--shadow);overflow:hidden}
.card summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:11px;
  font-weight:700;font-size:15px;user-select:none}
.card summary::-webkit-details-marker{display:none}
.card summary::after{content:"⌄";margin-left:auto;color:var(--muted);font-size:19px;transition:.25s transform}
.card[open] summary::after{transform:rotate(180deg)}
.card summary em{font-style:normal;color:var(--accent);font-size:12.5px;font-weight:600;margin-left:auto}
.card summary em+::after{margin-left:8px}
.step{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;font-size:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.card-body{padding:0 18px 18px}

/* tabs / chips / segmented */
.tabs{display:flex;gap:6px;flex-wrap:wrap;background:color-mix(in srgb,var(--bg2) 60%,transparent);
  padding:5px;border-radius:14px;border:1px solid var(--card-br)}
.tab{flex:1;min-width:76px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;
  font-weight:600;padding:8px 6px;border-radius:10px;cursor:pointer;transition:.18s}
.tab.is-active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button,.seg button{border:1px solid var(--card-br);background:transparent;color:var(--muted);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s}
.chips button:hover,.seg button:hover{color:var(--txt);border-color:var(--accent)}
.chips button.is-active,.seg button.is-active{background:color-mix(in srgb,var(--accent) 22%,transparent);
  border-color:var(--accent);color:var(--txt)}
.seg{display:inline-flex;gap:5px;flex-wrap:wrap}
.quickcaps{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}

/* presets */
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.preset{border:1.5px solid var(--card-br);border-radius:15px;padding:10px 8px;background:transparent;
  cursor:pointer;color:var(--txt);font:inherit;display:grid;gap:7px;justify-items:center;transition:.2s}
.preset:hover{transform:translateY(-3px);border-color:var(--accent)}
.preset.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:0 10px 26px -16px var(--accent)}
.swatch{width:100%;aspect-ratio:1;border-radius:11px;display:grid;place-items:center;font-size:19px;font-weight:800;color:#fff}
.preset b{font-size:11.5px;font-weight:700}
.preset small{font-size:10px;color:var(--muted)}

/* dropzone */
.dropzone{border:1.6px dashed var(--card-br);border-radius:var(--r-sm);padding:18px;text-align:center;
  color:var(--muted);font-size:13px;cursor:pointer;transition:.2s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--txt)}
.dropzone b{color:var(--accent)}

/* ── preview ─────────────────────────────────── */
.preview-sticky{position:sticky;top:86px}
.stage{background:var(--card);border:1px solid var(--card-br);border-radius:26px;padding:22px;
  backdrop-filter:blur(14px);box-shadow:var(--shadow);
  background-image:linear-gradient(45deg,#ffffff08 25%,transparent 25%,transparent 75%,#ffffff08 75%),
                   linear-gradient(45deg,#ffffff08 25%,transparent 25%,transparent 75%,#ffffff08 75%);
  background-size:22px 22px;background-position:0 0,11px 11px}
.qr-holder{max-width:420px;margin:0 auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.35));animation:pop .35s ease}
.qr-holder svg{display:block;width:100%;height:auto;border-radius:6px}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.meta{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:14px 0 6px}
.pill{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;color:var(--muted);
  border:1px solid var(--card-br);background:var(--card)}
.scanmeter{margin:8px 2px 14px}
.scanbar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--txt) 12%,transparent);overflow:hidden}
.scanbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ok),#9ef7c6);transition:.35s width}
.scanmeter.warn .scanbar i{background:linear-gradient(90deg,var(--warn),#ffe1a1)}
.scanmeter.bad  .scanbar i{background:linear-gradient(90deg,var(--bad),#ffb3b3)}
.scanmeter p{font-size:12.5px;color:var(--muted);margin:7px 0 0}
.scanmeter b{color:var(--txt)}
.export{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.export .btn{justify-content:center}
.history{margin-top:18px}
.history h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.history-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.history-list button{flex:0 0 auto;width:60px;height:60px;border-radius:13px;border:1px solid var(--card-br);
  background:#fff;padding:5px;cursor:pointer;transition:.18s}
.history-list button:hover{transform:translateY(-2px);border-color:var(--accent)}
.history-list svg{width:100%;height:100%}

.foot{text-align:center;color:var(--muted);font-size:12.5px;padding:26px 20px 40px;max-width:760px;margin:0 auto}
.foot code{background:var(--card);padding:2px 7px;border-radius:7px;border:1px solid var(--card-br)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--bg2);
  border:1px solid var(--card-br);color:var(--txt);padding:11px 20px;border-radius:999px;font-size:13.5px;
  font-weight:600;box-shadow:var(--shadow);transition:.3s transform;z-index:60}
.toast.show{transform:translate(-50%,0)}