:root{
  --bg:#f4f6f9; --panel:#ffffff; --ink:#1c2430; --sub:#5b6875;
  --line:#e3e8ef; --accent:#2563eb; --accent-weak:#eaf1ff;
  --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  --shadow:0 1px 3px rgba(20,30,50,.06),0 6px 24px rgba(20,30,50,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6;
}
header{
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:14px 22px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20; flex-wrap:wrap;
}
header h1{font-size:17px; margin:0; font-weight:700; letter-spacing:.02em}
header .badge{font-size:11px; color:var(--sub); background:var(--bg); border:1px solid var(--line); padding:2px 8px; border-radius:20px}
header .mode{font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600}
header .mode.cloud{background:#dcfce7; color:#15803d}
header .mode.local{background:#fef3c7; color:#b45309}
header .spacer{flex:1}
button{font:inherit; cursor:pointer}
.btn{font-size:13px; border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:8px 13px; border-radius:8px; transition:.15s}
.btn:hover{background:var(--bg); border-color:#cbd3de}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:none; border-color:transparent; color:var(--accent)}
.btn.small{padding:5px 10px; font-size:12px}
.btn.danger{color:var(--danger); border-color:#fca5a5}
.btn.danger:hover{background:#fee2e2}

.wrap{max-width:1080px; margin:0 auto; padding:20px 22px 60px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media(max-width:820px){ .grid{grid-template-columns:1fr} }

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px}
.card > h2{font-size:13px; margin:0; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--sub); font-weight:700; letter-spacing:.04em}
.card .body{padding:16px}

label.lb{display:block; font-size:12px; color:var(--sub); margin-bottom:4px; font-weight:600}
input.tx, textarea.tx, select.tx{
  width:100%; font:inherit; font-size:13px; color:var(--ink);
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; transition:.15s;
}
input.tx:focus, textarea.tx:focus, select.tx:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
textarea.tx{resize:vertical; min-height:70px}
.row{margin-bottom:12px}
.req-star{color:var(--danger)}
.muted{color:var(--sub)}
.hint{font-size:12px; color:var(--sub); margin-top:4px}

/* preset field chips */
.fieldpick{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:7px 12px;
  border:1px solid var(--line); border-radius:20px; background:#fff; cursor:pointer; user-select:none; transition:.12s;
}
.chip:hover{border-color:#cbd3de}
.chip.on{background:var(--accent-weak); border-color:var(--accent); color:#1d4ed8; font-weight:600}
.chip input{display:none}

/* selected field list (builder) */
.flist{margin-top:4px}
.fitem{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:#fafbfd}
.fitem .grab{color:#c1c8d2; cursor:grab; font-size:16px}
.fitem .fl{flex:1; min-width:0}
.fitem .fl b{font-size:13px}
.fitem .fl .ty{font-size:11px; color:var(--sub)}
.fitem .reqtoggle{font-size:11px; color:var(--sub); display:flex; align-items:center; gap:4px; white-space:nowrap}
.fitem .x{border:none; background:none; color:var(--sub); font-size:18px; cursor:pointer; line-height:1}
.fitem .x:hover{color:var(--danger)}

/* result / links */
.result{background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:14px; margin-top:12px}
.linkrow{display:flex; gap:8px; align-items:center; margin:8px 0}
.linkrow .lk{flex:1; font-size:12px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:monospace}
.linkrow .lb2{font-size:11px; color:var(--sub); width:76px; flex:none}

/* my forms list */
.mfitem{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px}
.mfitem .top{display:flex; align-items:center; gap:10px}
.mfitem .top b{flex:1; font-size:14px}
.mfitem .cnt{font-size:12px; background:var(--accent-weak); color:#1d4ed8; padding:2px 9px; border-radius:20px; font-weight:600}
.mfitem .meta{font-size:11px; color:var(--sub); margin-top:2px}
.mfitem .acts{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}

/* responses table */
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{text-align:left; font-size:11px; color:var(--sub); font-weight:700; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:#fafbfd}
tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; max-width:260px; word-break:break-word}
tbody tr:hover{background:#fafbfd}
.empty{padding:40px 20px; text-align:center; color:var(--sub)}

.overlay{position:fixed; inset:0; background:rgba(20,30,50,.45); display:none; align-items:center; justify-content:center; z-index:50; padding:20px}
.overlay.open{display:flex}
.modal{background:#fff; border-radius:14px; max-width:900px; width:100%; max-height:88vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .mh{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; position:sticky; top:0; background:#fff; z-index:2}
.modal .mh h3{margin:0; font-size:16px; flex:1}
.modal .mh .x{border:none; background:none; font-size:22px; cursor:pointer; color:var(--sub)}
.modal .mb{padding:8px 16px 20px; overflow:auto}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1c2430; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; opacity:0; transition:.25s; pointer-events:none; z-index:100}
.toast.show{opacity:1}

.foot{text-align:center; color:var(--sub); font-size:12px; padding:10px 0 30px}