:root {
  --ink: #202124;
  --muted: #67696d;
  --line: #e3e3e5;
  --panel: #fff;
  --bg: #f6f5f7;
  --purple: #9d32dc;
  --purple-dark: #7920ae;
  --danger: #bc3030;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); }
a { color: var(--purple-dark); }
.topbar { min-height: 68px; padding: 14px max(24px, calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:16px; align-items:center; color:var(--ink); text-decoration:none; font-weight:700; }
.brand img { object-fit:contain; }
.topbar nav { display:flex; align-items:center; gap:8px; }
.topbar nav a, .nav-button { color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:600; font-size:14px; }
.nav-button { border:0; background:transparent; font-family:inherit; cursor:pointer; }
.topbar nav a:hover, .topbar nav a.active, .nav-button:hover { color:var(--purple-dark); background:#f6ebfc; }
.page { width:min(1180px, calc(100% - 32px)); margin:32px auto 64px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
h1 { margin:0 0 8px; font-size:clamp(26px, 4vw, 38px); letter-spacing:-.03em; }
h2 { margin:0 0 16px; font-size:21px; }
p { line-height:1.55; }
.muted { margin:0; color:var(--muted); }
.button { appearance:none; border:1px solid transparent; border-radius:10px; padding:11px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:700; line-height:1; cursor:pointer; text-decoration:none; background:var(--purple); color:#fff; }
.button:hover { background:var(--purple-dark); }
.button.secondary { color:var(--ink); background:#fff; border-color:var(--line); }
.button.secondary:hover { border-color:#bdbdc1; background:#fafafa; }
.button.danger { color:var(--danger); background:#fff; border-color:#efcaca; }
.button.danger:hover { background:#fff2f2; }
.button.small { padding:8px 10px; font-size:13px; border-radius:8px; }
.button-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 4px 20px rgba(31,24,35,.04); }
.empty { padding:70px 24px; text-align:center; }
.empty h2 { margin-bottom:8px; }
.signature-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px; }
.signature-card { display:grid; grid-template-columns:72px 1fr; gap:18px; }
.signature-card .photo { width:72px; height:72px; object-fit:contain; border-radius:14px; }
.signature-card h2 { margin:2px 0 4px; font-size:18px; }
.signature-card .meta { color:var(--muted); font-size:13px; margin:0; }
.signature-card .actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
form.inline { display:inline; margin:0; }
.flash { padding:14px 16px; border-radius:12px; margin-bottom:22px; border:1px solid; }
.flash-success { color:#19683d; background:#effaf4; border-color:#bce4cc; }
.flash-error { color:#8d2828; background:#fff1f1; border-color:#edc0c0; }
.edit-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(380px, .9fr); align-items:start; gap:24px; }
.form-grid + .form-section,
.form-section + .form-section { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
label { font-size:14px; font-weight:700; }
input, textarea { width:100%; border:1px solid #cfcfd3; border-radius:9px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; }
input:focus, textarea:focus { outline:3px solid rgba(157,50,220,.15); border-color:var(--purple); }
textarea { resize:vertical; min-height:88px; }
.field[hidden] { display:none !important; }
.photo-mode-field { min-width:0; margin:0; padding:0; border:0; }
.photo-mode-field legend { margin:0 0 7px; padding:0; font-size:14px; font-weight:700; }
.photo-mode-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.photo-mode-option { position:relative; min-width:0; cursor:pointer; }
.photo-mode-option > input { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; pointer-events:none; }
.photo-mode-card { min-height:116px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink); background:#fff; border:1px solid #cfcfd3; border-radius:11px; text-align:center; font-size:12px; font-weight:700; line-height:1.25; transition:border-color .15s, box-shadow .15s, background .15s; }
.photo-mode-card img, .photo-mode-placeholder { display:block; width:64px; height:64px; object-fit:contain; flex:0 0 64px; }
.photo-mode-placeholder { display:flex; align-items:center; justify-content:center; border:1px dashed #c5a3d8; border-radius:14px; color:var(--purple-dark); background:#fbf5fe; font-size:13px; letter-spacing:.06em; }
.photo-mode-option:hover .photo-mode-card { border-color:#b891cc; background:#fdfaff; }
.photo-mode-option > input:checked + .photo-mode-card { border-color:var(--purple); background:#fbf5fe; box-shadow:0 0 0 3px rgba(157,50,220,.13); }
.photo-mode-option > input:focus + .photo-mode-card { outline:3px solid rgba(157,50,220,.18); outline-offset:2px; }
.hint { color:var(--muted); font-size:12px; line-height:1.45; }
.field-error { color:var(--danger); font-size:12px; font-weight:600; }
.preview-card { position:sticky; top:20px; overflow:hidden; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.preview-toolbar h2 { margin:0; }
.preview-stage { width:100%; min-height:220px; overflow:hidden; background:#fff; border-radius:10px; }
.preview-frame { display:block; width:680px; height:220px; border:0; background:#fff; transform-origin:top left; }
.login-wrap { width:min(440px, 100%); margin:8vh auto; }
.login-wrap .card { padding:32px; }
.login-wrap form { display:grid; gap:18px; }
.banner-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.banner-preview { max-width:100%; height:auto; display:block; border-radius:10px; }
.notice { background:#f8f1fc; border:1px solid #e3c7f2; border-radius:10px; padding:12px 14px; color:#63337c; font-size:13px; line-height:1.5; }
.danger-zone { border-color:#efd1d1; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; padding:12px 18px; color:#fff; background:#252127; border-radius:10px; font-weight:600; box-shadow:0 10px 35px rgba(0,0,0,.25); transition:.2s; z-index:20; }
.toast.visible { opacity:1; transform:translate(-50%, 0); }
@media (max-width: 900px) {
  .edit-layout, .banner-layout { grid-template-columns:1fr; }
  .preview-card { position:static; }
}
@media (max-width: 620px) {
  .topbar { align-items:flex-start; padding:14px 16px; }
  .brand span { display:none; }
  .topbar nav { flex-wrap:wrap; justify-content:flex-end; }
  .topbar nav a { padding:8px; }
  .page { width:min(100% - 24px, 1180px); margin-top:22px; }
  .page-head { flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .card { padding:18px; border-radius:13px; }
  .signature-grid { grid-template-columns:1fr; }
}