.linkringme-app {
  --bg:#ffffff;
  --card:#ffffff;
  --text:#6c6c6c;
  --muted:#9a9a9a;
  --line:#e2e2e2;
  --soft:#f6f6f6;
  --danger:#a83b3b;
  --danger-bg:#fff5f5;
  --success:#41764d;
  --success-bg:#f3faf4;
  --shadow:0 12px 30px rgba(0,0,0,.04);
}
.linkringme-app, .linkringme-app * { box-sizing:border-box; }
.linkringme-app { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.65; }
.linkringme-app { min-width:320px; }
.linkringme-app button, .linkringme-app input { font:inherit; }
.linkringme-app button { cursor:pointer; }
.linkringme-app img, .linkringme-app canvas { display:block; max-width:100%; }
.linkringme-app .header { border-bottom:1px solid #ededed; padding:8px clamp(16px,4vw,40px); }
.linkringme-app .brand { font-size:clamp(19px, 2.2vw, 27px); font-weight:400; color:#747474; letter-spacing:.015em; text-align:center; }
.linkringme-app .hero { padding:14px 16px 8px; text-align:center; }
.linkringme-app .hero .eyebrow { color:#a1a1a1; font-size:11px; letter-spacing:.08em; font-weight:600; }
.linkringme-app .hero h1 { margin:4px 0 5px; color:#696969; font-size:clamp(12px,1.7vw,16px); font-weight:500; line-height:1.4; }
.linkringme-app .hero p { margin:0 auto; max-width:760px; color:#949494; font-size:12px; line-height:1.55; }
.linkringme-app .page { width:min(900px, 100% - 18px); margin:0 auto; padding:6px 0 46px; }
.linkringme-app .workspace { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; align-items:start; max-width:820px; margin:0 auto; }
.linkringme-app .preview-panel, .linkringme-app .controls-panel { background:var(--card); border:1px solid #ededed; border-radius:16px; box-shadow:var(--shadow); }
.linkringme-app .preview-panel { padding:9px 12px 8px; }
.linkringme-app .controls-panel { padding:12px 16px 14px; }
.linkringme-app .preview-box { width:clamp(190px, 25vw, 285px); margin:0 auto; aspect-ratio:1; position:relative; border-radius:14px; overflow:hidden; background:#fff; }
.linkringme-app #preview { width:100%; height:100%; background:#fff; touch-action:none; border-radius:18px; }
.linkringme-app .upload-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; padding:5%; }
.linkringme-app .upload-circle { pointer-events:auto; width:min(76%, 76vw); aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#ddd; color:#777; border:0; position:relative; cursor:pointer; transition:.18s; text-align:center; padding:18px; }
.linkringme-app .upload-circle::before { content:""; position:absolute; inset:-10px; border-radius:50%; background:conic-gradient(#08a5cc,#67af83,#dec51e,#f08a1e,#df2f78,#7e3496,#08a5cc); z-index:-1; }
.linkringme-app .upload-circle::after { content:none; }
.linkringme-app .upload-circle.drag { transform:scale(.985); filter:brightness(.98); }
.linkringme-app .upload-icon { width:34px; height:34px; display:block; color:#444; margin-bottom:3px; }
.linkringme-app .upload-circle b { font-size:clamp(11px,1.5vw,14px); font-weight:600; letter-spacing:.09em; }
.linkringme-app .upload-icon svg { width:100%; height:100%; display:block; }
.linkringme-app .upload-circle span { font-size:clamp(11px,1.8vw,13px); color:#909090; margin-top:3px; }
.linkringme-app .upload-circle .small { font-size:clamp(10px,1.5vw,12px); line-height:1.55; margin-top:8px; max-width:19em; }
.linkringme-app .status { display:none; margin:8px auto 0; border:1px solid #dfe6e9; border-radius:10px; padding:9px 12px; font-size:11px; line-height:1.55; background:#f4f8fa; color:#536b7a; max-width:720px; }
.linkringme-app .status.show { display:block; }
.linkringme-app .status.success { background:var(--success-bg); color:var(--success); border-color:#d8eadc; }
.linkringme-app .status.error { background:var(--danger-bg); color:var(--danger); border-color:#efd6d6; }
.linkringme-app .preview-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:7px; }
.linkringme-app .soft-btn { border:1px solid #ddd; background:#fff; color:#777; border-radius:999px; padding:5px 11px; font-size:11px; min-height:30px; }
.linkringme-app .soft-btn:hover { border-color:#b5b5b5; color:#444; }
.linkringme-app .preview-help { font-size:10px; color:#9d9d9d; text-align:center; margin:6px auto 0; max-width:720px; line-height:1.55; }
.linkringme-app .control-section { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.linkringme-app .control-section:last-of-type { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.linkringme-app .dual { display:grid; grid-template-columns:minmax(0, 1fr) 82px; gap:14px; align-items:start; }
.linkringme-app .range-labels { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#777; font-weight:600; padding:0 2px; margin-bottom:3px; }
.linkringme-app input[type=range] { width:100%; appearance:none; height:6px; background:#8b8b8b; border-radius:999px; outline:none; margin:0; }
.linkringme-app input[type=range]::-webkit-slider-thumb { appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #858585; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.linkringme-app input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #858585; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.linkringme-app .toggle-label { text-align:center; font-size:12px; font-weight:700; margin-bottom:6px; }
.linkringme-app .switch { display:block; width:64px; height:34px; margin:4px auto; position:relative; }
.linkringme-app .switch input { opacity:0; width:0; height:0; }
.linkringme-app .slider { position:absolute; inset:0; border-radius:50px; background:#d2d2d2; }
.linkringme-app .slider::after { content:""; position:absolute; width:28px; height:28px; top:3px; left:3px; border-radius:50%; background:#fff; border:2px solid #777; box-sizing:border-box; transition:.18s; }
.linkringme-app .switch input:checked + .slider::after { transform:translateX(30px); }
.linkringme-app .control-caption { text-align:center; font-size:13px; font-weight:600; color:#777; margin-top:5px; }
.linkringme-app .palette {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:clamp(8px, 1.4vw, 14px);
  width:100%;
  max-width:620px;
  margin:6px auto 22px;
  padding:0;
  align-items:center;
  justify-items:center;
}
.linkringme-app .swatch {
  position:relative;
  width:min(100%, 72px);
  min-width:0;
  max-width:72px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:visible;
  border:0;
  background:transparent;
  padding:2px;
  box-sizing:border-box;
}
.linkringme-app .swatch canvas { width:100%; height:100%; display:block; border-radius:50%; pointer-events:none; background:#fff; }
.linkringme-app .swatch.active { outline:2px solid #777; outline-offset:2px; }
.linkringme-app .saturation-labels { display:flex; justify-content:space-between; font-size:10px; font-weight:600; padding:0 3px; margin-bottom:3px; }
.linkringme-app .labels { display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; margin-bottom:6px; }
.linkringme-app .labels .name { font-size:13px; font-weight:600; }
.linkringme-app .labels .value { font-size:12px; color:#777; }
.linkringme-app .option-row { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.linkringme-app .option-row:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.linkringme-app .option-title { text-align:center; font-size:14px; font-weight:600; margin-top:8px; color:#777; }
.linkringme-app .radio-grid { display:flex; justify-content:center; gap:18px 22px; flex-wrap:wrap; }
.linkringme-app .radio { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; cursor:pointer; color:#767676; }
.linkringme-app .radio input { appearance:none; width:22px; height:22px; border-radius:50%; border:2px solid #888; margin:0; display:grid; place-items:center; flex:0 0 auto; }
.linkringme-app .radio input:checked::after { content:""; width:10px; height:10px; border-radius:50%; background:#ef3d3d; }
.linkringme-app .download-btn { display:block; width:min(100%, 420px); margin:8px auto 0; border:0; background:#767676; color:#fff; border-radius:12px; padding:16px; font-size:16px; letter-spacing:.12em; font-weight:700; min-height:54px; }
.linkringme-app .download-btn:hover { background:#5e5e5e; }
.linkringme-app .download-btn:disabled { opacity:.45; cursor:not-allowed; }
.linkringme-app .format-note { text-align:center; color:#a0a0a0; font-size:12px; margin-top:10px; }
.linkringme-app .secondary-controls { margin-top:14px; }
.linkringme-app .security-note { width:min(100%, 820px); margin:22px auto 0; padding:20px clamp(16px,3vw,28px); background:#fafafa; border:1px solid #eee; border-radius:16px; color:#888; text-align:center; }

.linkringme-app .note-title { margin:0 0 16px; color:#777; font-size:14px; font-weight:600; letter-spacing:.05em; }
.linkringme-app .note-body { max-width:700px; margin:0 auto; }
.linkringme-app .note-body p { margin:0; font-size:12px; line-height:1.75; }
.linkringme-app .note-body p + p { margin-top:12px; }
@media (max-width:640px) {
  .linkringme-app .note-title { font-size:13px; margin-bottom:14px; }
  .linkringme-app .note-body p { font-size:11px; line-height:1.7; }
  .linkringme-app .note-body p + p { margin-top:10px; }
}

.linkringme-app .footer { border-top:1px solid #eee; padding:28px 18px; text-align:center; color:#aaa; font-size:11px; margin-top:28px; }
@media (max-width: 980px) {
  .linkringme-app .page { width:min(820px, 100% - 20px); }
}
@media (max-height: 760px) and (min-width: 641px) {
  .linkringme-app .preview-box { width:clamp(170px,22vw,235px); }
  .linkringme-app .hero { padding-top:8px; }
  .linkringme-app .hero p { font-size:11px; }
}
@media (max-width: 640px) {
  .linkringme-app .page { width:calc(100% - 14px); }
  .linkringme-app .preview-panel, .linkringme-app .controls-panel { border-radius:16px; }
  .linkringme-app .preview-box { width:clamp(190px,56vw,250px); }
  .linkringme-app .preview-box { border-radius:14px; }
  .linkringme-app #preview { border-radius:14px; }
  .linkringme-app .dual { grid-template-columns:minmax(0,1fr) 80px; gap:14px; }
  .linkringme-app .palette { grid-template-columns:repeat(6, minmax(42px,1fr)); gap:8px; max-width:420px; }
  .linkringme-app .radio { font-size:16px; }
}
.linkringme-app {
  width:100%;
  min-width:0;
  isolation:isolate;
}
.linkringme-app .basic-settings-note {
  text-align:center;
  font-size:11px;
  color:#aaa;
  margin:-2px 0 7px;
}
.linkringme-app .safety-value {
  font-size:10px;
  font-weight:500;
  color:#999;
}


.linkringme-app .palette {
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:clamp(8px, 1.5vw, 14px) !important;
  width:100% !important;
  max-width:620px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:visible !important;
}
.linkringme-app .palette .swatch {
  width:min(100%, 72px) !important;
  max-width:72px !important;
  min-width:0 !important;
  justify-self:center !important;
}
@media (max-width:640px) {
  .linkringme-app .palette {
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  .linkringme-app .palette .swatch {
    width:min(100%, 58px) !important;
    max-width:58px !important;
  }
}
@media (max-width:420px) {
  .linkringme-app .palette {
    gap:6px !important;
  }
  .linkringme-app .palette .swatch {
    width:min(100%, 48px) !important;
    max-width:48px !important;
  }
}


.linkringme-app .palette .swatch {
  -webkit-appearance:none !important;
  appearance:none !important;
  display:block !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  line-height:0 !important;
  padding:2px !important;
}

.linkringme-app .palette .swatch canvas {
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
}