:root { --bg:#0f1115; --panel:#171a21; --text:#e6e6eb; --muted:#9aa0a6; --accent:#6ea8fe; --danger:#f28b82; --success:#81c995; --info:#8ab4f8; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
main{ max-width:960px; margin:0 auto; padding:16px; }
h1{ font-size:1.4rem; margin-bottom:4px; }
p.desc{ color:var(--muted); margin:0 0 16px 0; font-size:0.95rem; }
.panel{ background:var(--panel); border-radius:8px; padding:12px; margin-bottom:16px; }
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
label{ font-size:0.9rem; color:var(--muted); }
input[type="file"], select, input[type="range"]{
  color:var(--text); background:#0f1115; border:1px solid #2a2f3a; border-radius:6px; padding:6px;
}
input[type="range"]{ padding:0; }
button{
  background:var(--accent); color:#000; border:none; border-radius:6px;
  padding:8px 12px; font-size:0.9rem; cursor:pointer;
}
button.secondary{ background:#2a2f3a; color:var(--text); }
button:disabled{ opacity:0.5; cursor:not-allowed; }
button:focus-visible,
select:focus-visible,
input:focus-visible,
.source-dropzone:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
canvas{ max-width:100%; background:transparent; border-radius:4px; }
#srcCanvas{ background:#000; touch-action:none; }
.canvas-wrap{ overflow:auto; }
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.preview-wrap{
  padding:12px;
  border-radius:6px;
  background-color:#e0e0e0;
  background-image:
    linear-gradient(45deg, #cfcfcf 25%, transparent 25%),
    linear-gradient(-45deg, #cfcfcf 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cfcfcf 75%),
    linear-gradient(-45deg, transparent 75%, #cfcfcf 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
}
.controls-block{ margin-top:10px; }
.edge-picker-header{
  display:flex;
  align-items:flex-start;
}
.control-title{
  font-size:0.95rem;
  font-weight:600;
}
.control-help{
  margin:4px 0 0;
  color:var(--muted);
  font-size:0.85rem;
}
.edge-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
  gap:10px;
  margin-top:12px;
}
.edge-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:10px;
  min-height:100%;
  background:#11151d;
  border:1px solid #2a2f3a;
  border-radius:10px;
  color:var(--text);
  text-align:left;
}
.edge-card[aria-checked="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(110, 168, 254, 0.25);
}
.edge-card-canvas{
  width:100%;
  height:auto;
  background:linear-gradient(180deg, #eef2ea 0%, #dce4d6 100%);
  border-radius:8px;
}
.edge-card-name{
  font-size:0.92rem;
  font-weight:600;
  color:var(--text);
}
.edge-card-desc{
  font-size:0.82rem;
  line-height:1.35;
  color:var(--muted);
}
.edge-cross{
  display:grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, auto) minmax(180px, 1fr);
  grid-template-areas:
    ". top apply"
    "left center right"
    ". bottom .";
  gap:10px 14px;
  align-items:center;
  justify-items:center;
  margin-top:14px;
}
.edge-apply-all{
  grid-area:apply;
  align-self:end;
}
.edge-assign{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:168px;
  background:#11151d;
  color:var(--text);
  border:1px solid #2a2f3a;
}
.edge-assign-value{
  color:var(--accent);
  font-size:0.86rem;
}
.edge-selection-summary{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:180px;
  padding:12px;
  border-radius:10px;
  background:#11151d;
  border:1px solid #2a2f3a;
  text-align:center;
}
.edge-top{ grid-area:top; }
.edge-right{ grid-area:right; }
.edge-bottom{ grid-area:bottom; }
.edge-left{ grid-area:left; }
.edge-center{
  grid-area:center;
  color:var(--muted);
  font-size:0.85rem;
}
.edge-center-title{
  font-size:0.78rem;
  color:var(--muted);
}
.edge-center-name{
  color:var(--text);
  font-size:0.95rem;
  font-weight:600;
}
.edge-center-desc{
  color:var(--muted);
  line-height:1.35;
}
.roughness-row{ margin-top:10px; }
.effect-options{ margin-top:8px; }
.edge-buttons{ margin-top:8px; }
.upload-actions{ margin-bottom:8px; }
.source-dropzone{
  position:relative;
  border:1px dashed #2f455e;
  border-radius:6px;
  cursor:pointer;
}
.source-dropzone.has-image{
  cursor:default;
}
.source-dropzone.dragover{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(110, 168, 254, 0.25) inset;
}
.src-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:0.95rem;
  pointer-events:none;
}
.source-dropzone.has-image .src-hint{
  display:none;
}
.selection-hint{
  margin-top:8px;
  margin-bottom:0;
}
.status-message{
  margin:10px 0 0;
  font-size:0.9rem;
  color:var(--muted);
}
.status-message.info{ color:var(--info); }
.status-message.success{ color:var(--success); }
.status-message.error{ color:var(--danger); }
@media (max-width:640px){
  .edge-picker-header{
    align-items:stretch;
  }
  .edge-cross{
    grid-template-columns:1fr;
    grid-template-areas:
      "top"
      "apply"
      "center"
      "right"
      "bottom"
      "left";
    justify-items:stretch;
  }
  .edge-assign{
    width:100%;
  }
  .edge-selection-summary{
    min-width:0;
  }
}