/* ============================================================
   二维码工坊 · 样式
   浅色小清新 / 圆角卡片 / 移动端优先
   ============================================================ */

:root{
  --ink:#22303f;
  --ink-2:#5d7285;
  --ink-3:#93a7b6;
  --line:#e7f0f5;
  --line-2:#d9eaf2;

  --accent:#4fb3d9;
  --accent-2:#5fd0b4;
  --accent-ink:#3d90b4;
  --accent-soft:#eaf8fc;
  --mint-soft:#e9f9f3;

  --amber:#cf9a3c;
  --amber-soft:#fdf5e6;
  --amber-line:#f2e0b8;

  --r-card:26px;
  --r-field:16px;

  --sh-card:0 22px 46px -34px rgba(44,102,132,.55), 0 2px 8px -5px rgba(44,102,132,.10);
  --sh-pop:0 16px 36px -20px rgba(44,102,132,.45);

  --font:"PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC",
         "Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",
         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* 作者样式里的 display 会盖掉浏览器默认的 [hidden]{display:none}，必须显式兜底 */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--ink);
  background:linear-gradient(178deg,#f7fbfd 0%,#f2f9fb 46%,#f1f8f6 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:30px 16px 60px;
}

/* ---------- 背景柔光 ---------- */
.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(56px);opacity:.6}
.aurora .b1{width:520px;height:520px;left:-150px;top:-170px;background:radial-gradient(circle at 35% 35%,#c4eaf8,#e2f6fc 62%,rgba(255,255,255,0) 74%)}
.aurora .b2{width:470px;height:470px;right:-140px;top:20px;background:radial-gradient(circle at 60% 40%,#c9f1e3,#e8faf4 62%,rgba(255,255,255,0) 74%)}
.aurora .b3{width:430px;height:430px;left:38%;bottom:-200px;background:radial-gradient(circle at 50% 50%,#e2e7fb,#f1f3fd 62%,rgba(255,255,255,0) 74%)}
@media (prefers-reduced-motion:no-preference){
  .aurora .b1{animation:float1 18s ease-in-out infinite}
  .aurora .b2{animation:float2 22s ease-in-out infinite}
  .aurora .b3{animation:float3 26s ease-in-out infinite}
}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,22px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,26px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-22px)}}

.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto}

/* ---------- 头部 ---------- */
.hero{text-align:center;margin:4px 0 24px}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px 7px 12px;border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line-2);
  box-shadow:0 8px 20px -14px rgba(44,102,132,.5);
  font-size:13px;font-weight:600;color:var(--accent-ink);
  backdrop-filter:blur(6px);
}
.hero-badge svg{width:16px;height:16px}
.hero h1{
  margin:16px 0 9px;
  font-size:clamp(25px,5.4vw,34px);
  font-weight:700;letter-spacing:-.015em;line-height:1.25;
}
.hero h1 .grad{
  background:linear-gradient(115deg,#4fb3d9 5%,#5fd0b4 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{margin:0;font-size:13.5px;color:var(--ink-3)}

/* ---------- 分段切换 ---------- */
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  padding:5px;border-radius:999px;max-width:430px;margin:0 auto 22px;
  background:rgba(255,255,255,.9);
  box-shadow:0 14px 32px -22px rgba(44,102,132,.6), 0 0 0 1px rgba(226,240,246,.9);
  backdrop-filter:blur(8px);
}
.seg-pill{
  position:absolute;top:5px;left:5px;
  width:calc((100% - 14px)/2);height:calc(100% - 10px);
  border-radius:999px;
  background:linear-gradient(135deg,#e6f7fc,#e6f8f1);
  box-shadow:inset 0 0 0 1.5px #d5ecf4, 0 4px 10px -6px rgba(79,179,217,.6);
  transition:transform .34s cubic-bezier(.34,.02,.2,1);
}
.seg[data-active="1"] .seg-pill{transform:translateX(calc(100% + 4px))}
.seg-btn{
  position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border-radius:999px;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:color .24s;
}
.seg-btn svg{width:17px;height:17px;transition:transform .3s}
.seg-btn.is-active{color:var(--accent-ink)}
.seg-btn.is-active svg{transform:scale(1.06)}

/* ---------- 卡片 ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:21px;
  box-shadow:var(--sh-card);
}
.card-head{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.card-head h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.005em}
.dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#6fc9e6,#8fd9e6);box-shadow:0 0 0 4px #eaf7fb}
.dot-mint{background:linear-gradient(135deg,#5fd0b4,#8ee0c3);box-shadow:0 0 0 4px #e9f9f3}

.badge-ok{
  margin-left:auto;font-size:12px;font-weight:600;color:#2f9b80;
  background:var(--mint-soft);border:1px solid #d6f0e6;
  padding:3px 10px;border-radius:999px;
}

/* ---------- 生成页栅格 ---------- */
.grid-create{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:18px;align-items:start}
.side-inner{position:sticky;top:22px}
.grid-scan{display:grid;gap:18px;max-width:660px;margin:0 auto}

/* ---------- 类型选择 ---------- */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 6px;border-radius:15px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-2);
  background:#f8fcfe;border:1.5px solid var(--line);
  transition:.22s;
}
.chip svg{width:16px;height:16px;opacity:.85}
.chip:hover{background:#f1fafc;border-color:var(--line-2)}
.chip.is-active{
  color:var(--accent-ink);
  background:linear-gradient(135deg,#eaf8fd,#e9faf3);
  border-color:#c9e9f3;
  box-shadow:0 8px 18px -14px rgba(79,179,217,.95);
}

/* ---------- 表单 ---------- */
.tform{margin-bottom:14px}
textarea,input[type=text],select{
  width:100%;
  font-family:inherit;font-size:15px;color:var(--ink);
  background:#fbfdfe;
  border:1.5px solid var(--line);
  border-radius:var(--r-field);
  padding:13px 15px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  appearance:none;
}
textarea{resize:vertical;min-height:106px;line-height:1.65;display:block}
textarea::placeholder,input::placeholder{color:#a9bcc9}
textarea:focus,input[type=text]:focus,select:focus{
  border-color:#a7dcee;
  background:#fff;
  box-shadow:0 0 0 4px rgba(95,199,222,.15);
}

.ifield{position:relative;display:flex;align-items:center}
.ifield-ico{
  position:absolute;left:14px;width:17px;height:17px;
  color:#9fb6c6;pointer-events:none;
}
.ifield input{padding-left:41px}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.frow + .frow{margin-top:11px}
.ifield + .ifield{margin-top:0}

.pick{
  position:relative;display:flex;align-items:center;gap:9px;
  background:#fbfdfe;border:1.5px solid var(--line);border-radius:var(--r-field);padding:0 14px;
}
.pick span{font-size:13px;color:var(--ink-3);white-space:nowrap}
.pick select{flex:1 1 auto;border:0;background:transparent;padding:13px 22px 13px 0;font-size:14.5px;box-shadow:none;min-width:0}
.pick::after{
  content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;
  border-right:2px solid #a8bdcb;border-bottom:2px solid #a8bdcb;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.pick:focus-within{border-color:#a7dcee;box-shadow:0 0 0 4px rgba(95,199,222,.15);background:#fff}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--ink-2);user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{
  position:relative;width:44px;height:26px;border-radius:999px;flex:0 0 auto;
  background:#e6f0f5;border:1.5px solid var(--line-2);transition:.25s;
}
.switch-thumb{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(44,102,132,.28);transition:.25s;
}
.switch input:checked + .switch-track{background:linear-gradient(135deg,#7fd3ec,#79dcbe);border-color:#7fd3ec}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(18px)}

.meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px;margin-top:2px}
.meta-left{font-size:12.5px;color:var(--ink-3)}
.meta-left b{color:var(--accent-ink);font-weight:700}
.meta-hint{font-size:12.5px;color:var(--amber);text-align:right}

/* ---------- 高级设置 ---------- */
.adv{margin-top:16px;border-top:1px dashed var(--line-2);padding-top:15px}
.adv summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-size:14px;font-weight:600;color:var(--ink-2);
  padding:2px 0;
}
.adv summary::-webkit-details-marker{display:none}
.adv-title{display:inline-flex;align-items:center;gap:8px}
.adv-title svg{width:16px;height:16px;color:#8fb0c4}
.chev{width:17px;height:17px;color:#a8bdcb;transition:transform .28s}
.adv[open] .chev{transform:rotate(180deg)}
.adv-body{padding-top:16px;display:grid;gap:17px;animation:slidein .3s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

.adv-item{display:grid;gap:9px}
.adv-label{font-size:13px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px}
.adv-num{color:var(--accent-ink)}
.tip-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  background:#eaf3f8;color:#7e9bb0;font-size:11px;font-style:normal;
  font-weight:700;cursor:help;position:relative;
}
.tip-i::after{
  content:attr(data-tip);position:absolute;bottom:135%;left:50%;transform:translateX(-50%) scale(.96);
  width:210px;padding:9px 11px;border-radius:12px;
  background:#35495c;color:#fff;font-size:12px;font-weight:400;line-height:1.55;font-style:normal;
  opacity:0;pointer-events:none;transition:.2s;z-index:20;text-align:left;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6);
}
.tip-i:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

.miniseg{display:inline-flex;gap:4px;padding:4px;background:#f4fafc;border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.miniseg button{
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  padding:8px 17px;border-radius:11px;transition:.2s;
}
.miniseg button:hover{color:var(--accent-ink)}
.miniseg button.is-active{
  background:#fff;color:var(--accent-ink);
  box-shadow:0 4px 12px -8px rgba(44,102,132,.75), 0 0 0 1px #dceef4;
}

.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch{
  width:31px;height:31px;border-radius:11px;cursor:pointer;
  border:2px solid #fff;
  box-shadow:0 0 0 1.5px var(--line-2), 0 4px 10px -8px rgba(44,102,132,.9);
  transition:.2s;padding:0;
}
.swatch:hover{transform:translateY(-2px)}
.swatch.is-active{box-shadow:0 0 0 2px #7fd0e6, 0 4px 12px -8px rgba(44,102,132,.9);transform:translateY(-2px)}

.color-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.color-line .swatches{flex:1 1 auto}
.color-pick{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer}
.color-pick input[type=color]{width:42px;height:32px}
.color-val{font-size:12.5px;color:var(--ink-3);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;min-width:58px}
input[type=color]{
  width:46px;height:34px;padding:0;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:9px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,#bfe7f4,#c8eee0);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2.5px solid #7fd0e6;cursor:pointer;
  box-shadow:0 4px 10px -5px rgba(44,102,132,.7);transition:.15s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.08)}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid #7fd0e6;cursor:pointer;
}

/* ---------- 预览 ---------- */
.preview{display:flex;flex-direction:column}
.qr-stage{
  display:flex;align-items:center;justify-content:center;
  min-height:252px;padding:16px;border-radius:20px;
  background:linear-gradient(165deg,#f8fdfe 0%,#f2faf7 100%);
  border:1px dashed #dceef4;
}
.qr-box{
  background:#fff;padding:12px;border-radius:20px;
  box-shadow:0 16px 34px -24px rgba(44,102,132,.85), 0 0 0 1px #eef6f9;
  animation:pop .32s cubic-bezier(.34,1.42,.6,1);
  line-height:0;
}
@keyframes pop{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.qr-box canvas{display:block;width:224px;max-width:100%;height:auto;border-radius:6px}

.qr-empty{text-align:center;color:#adc3cf}
.qr-empty svg{width:52px;height:52px;opacity:.75}
.qr-empty p{margin:12px 0 0;font-size:13px;line-height:1.7;color:#a4bac6}

.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.preview .actions .btn{flex:1 1 auto;min-width:104px}

.tip{margin:13px 0 0;font-size:12px;color:var(--ink-3);text-align:center;min-height:18px;transition:color .2s}
.tip.warn{color:var(--amber)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:.01em;
  padding:12px 18px;border-radius:15px;
  transition:transform .2s, box-shadow .24s, background .24s, opacity .2s;
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#5cc4e6 0%,#5ed2b5 100%);
  box-shadow:0 14px 26px -16px rgba(76,186,200,.95);
}
.btn-primary:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 18px 30px -16px rgba(76,186,200,1)}
.btn-ghost{
  color:#3f7189;background:#f3fafc;border:1.5px solid #e0eef4;
}
.btn-ghost:hover:not(:disabled){background:#ebf7fb;border-color:#d3e9f1;transform:translateY(-1.5px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- 识别页 ---------- */
.drop{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:32px 20px 28px;border-radius:22px;cursor:pointer;
  background:linear-gradient(170deg,#f9fdfe 0%,#f3faf7 100%);
  border:1.8px dashed #d5e9f1;
  transition:.24s;
  outline:none;
}
.drop:hover,.drop:focus-visible{border-color:#a9dced;background:linear-gradient(170deg,#f4fbfe 0%,#eef9f4 100%)}
.drop.dragover{border-color:#7fd0e6;background:linear-gradient(170deg,#eef9fd 0%,#e9f8f2 100%);transform:scale(1.008)}
.drop-ico{
  width:60px;height:60px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#5fb6d4;
  box-shadow:0 12px 26px -18px rgba(44,102,132,.9), 0 0 0 1px #e6f2f7;
  margin-bottom:15px;
}
.drop-ico svg{width:27px;height:27px}
.drop-title{margin:0 0 7px;font-size:15px;font-weight:600}
.drop-sub{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.7;max-width:330px}
.drop-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:19px}

.cam-wrap{position:relative;border-radius:22px;overflow:hidden;background:#1a2733;line-height:0}
.cam-wrap video{width:100%;max-height:64vh;object-fit:cover;display:block}
.cam-frame{position:absolute;inset:0;pointer-events:none}
.cam-frame::before,.cam-frame::after{
  content:"";position:absolute;width:46px;height:46px;
  border:3px solid rgba(255,255,255,.9);border-radius:6px;
}
.cam-frame::before{top:13%;left:13%;border-right:0;border-bottom:0}
.cam-frame::after{bottom:13%;right:13%;border-left:0;border-top:0}
.laser{
  position:absolute;left:13%;right:13%;top:50%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(127,211,236,0),#7fd3ec 20%,#7fd3ec 80%,rgba(127,211,236,0));
  box-shadow:0 0 12px 2px rgba(127,211,236,.85);
}
@media (prefers-reduced-motion:no-preference){
  .laser{animation:laser 2.1s ease-in-out infinite}
}
@keyframes laser{0%,100%{top:22%;opacity:.35}50%{top:76%;opacity:1}}
.cam-stop{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(255,255,255,.94)}
.cam-stop:hover{background:#fff;transform:translateX(-50%) translateY(-1.5px)!important}

.scan-status{
  margin-top:14px;padding:12px 15px;border-radius:15px;
  font-size:13.5px;display:flex;align-items:center;gap:9px;
  background:var(--amber-soft);border:1px solid var(--amber-line);color:#a97c25;
}
.scan-status svg{width:17px;height:17px;flex:0 0 auto}

/* ---------- 结果 ---------- */
.result-card{border-color:#dff0ea;animation:pop .3s cubic-bezier(.34,1.42,.6,1)}
.result-body{
  background:#f8fdfb;border:1px solid #e5f3ee;border-radius:17px;
  padding:15px 16px;font-size:14.5px;line-height:1.7;color:var(--ink);
  word-break:break-all;white-space:pre-wrap;max-height:300px;overflow:auto;
}
.result-body a{color:var(--accent-ink)}

.kv{display:grid;gap:9px}
.kv-row{display:flex;align-items:center;gap:10px}
.kv-key{font-size:13px;color:var(--ink-3);min-width:64px;flex:0 0 auto}
.kv-val{
  flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:600;
  background:#fff;border:1px solid #e5f3ee;border-radius:11px;padding:8px 12px;
  word-break:break-all;
}

/* ---------- 页脚 / 提示 ---------- */
.foot{margin-top:28px;text-align:center;font-size:12px;color:#a8bfcb}

.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);
  padding:12px 22px;border-radius:999px;
  background:rgba(45,68,88,.94);color:#fff;font-size:13.5px;font-weight:500;
  box-shadow:0 18px 38px -18px rgba(20,45,65,.8);
  opacity:0;pointer-events:none;transition:.3s cubic-bezier(.34,1.3,.6,1);z-index:99;
  max-width:86vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.warn{background:rgba(180,131,36,.95)}

/* ---------- 响应式 ---------- */
@media (max-width:880px){
  .grid-create{grid-template-columns:1fr}
  .side-inner{position:static}
  .col-side{order:2}
  .col-main{order:1}
}
@media (max-width:560px){
  body{padding:20px 13px 48px;font-size:14.5px}
  .card{padding:17px;border-radius:22px}
  .hero h1{margin-top:13px}
  .hero p{font-size:12.5px}
  .seg{max-width:none;margin-bottom:18px}
  .seg-btn{font-size:14px;padding:11px 6px}
  .chips{gap:7px}
  .chip{font-size:13.5px;padding:10px 4px}
  .chip svg{display:none}
  .qr-stage{min-height:216px;padding:12px}
  .qr-box canvas{width:190px}
  .preview .actions .btn{flex:1 1 calc(50% - 5px);min-width:0;padding:12px 10px;font-size:14px}
  .preview .actions .btn:first-child{flex:1 1 100%}
  .frow{grid-template-columns:1fr}
  .miniseg{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .miniseg[data-group="ecc"]{grid-template-columns:repeat(4,1fr)}
  .miniseg button{padding:9px 4px}
  .drop{padding:26px 15px 24px}
  .drop-btns .btn{flex:1 1 100%}
  .tip-i::after{width:172px;left:auto;right:-52px;transform:translateX(0) scale(.96)}
  .tip-i:hover::after{transform:translateX(0) scale(1)}
  .toast{bottom:22px;font-size:13px}
}