:root{
  --bg:#06101d;
  --bg2:#0b1830;
  --card:#0d1729;
  --card2:#12203b;
  --line:rgba(255,255,255,.09);
  --line2:rgba(106,160,255,.20);
  --text:#eaf1ff;
  --muted:#9db0d4;
  --brand:#5b9dff;
  --brand-2:#7bc1ff;
  --ok:#35d28b;
  --warn:#ffb44d;
  --danger:#ff6e7a;
  --shadow:0 16px 48px rgba(0,0,0,.25);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:
  radial-gradient(circle at top left, rgba(91,157,255,.18), transparent 26%),
  radial-gradient(circle at top right, rgba(123,193,255,.12), transparent 24%),
  linear-gradient(180deg, #07111f 0%, #0b1424 100%);
  color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  min-height:100%}
body{padding:20px 14px 28px}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{max-width:100%;display:block}
.app-shell{max-width:1180px;margin:0 auto}
.hero{padding:20px 4px 18px}
.hero__badge{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(91,157,255,.10);color:#cfe2ff;font-size:13px}
.hero__title{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:16px 0 10px;font-weight:800;letter-spacing:.02em}
.hero__desc{margin:0;max-width:860px;color:var(--muted);font-size:15px;line-height:1.8}
.layout{display:grid;gap:18px}
.panel{background:linear-gradient(180deg, rgba(15,25,45,.92), rgba(11,20,37,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.panel--primary{border-color:rgba(106,160,255,.24)}
.panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.panel__head h2{margin:0 0 8px;font-size:22px}
.panel__head p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}
.ghost-btn,.secondary-btn,.primary-btn{border:none;border-radius:18px;cursor:pointer;transition:.18s ease;white-space:nowrap}
.ghost-btn{padding:11px 16px;background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line)}
.ghost-btn:hover,.secondary-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.primary-btn{padding:14px 20px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;font-weight:700;box-shadow:0 12px 28px rgba(91,157,255,.22)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.primary-btn--xl{padding:16px 26px;font-size:17px;border-radius:20px}
.secondary-btn{display:inline-flex;justify-content:center;align-items:center;padding:14px 20px;background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.dropzone{position:relative;border:1.5px dashed rgba(123,193,255,.32);background:linear-gradient(180deg, rgba(16,28,53,.95), rgba(9,17,31,.96));border-radius:26px;padding:26px;text-align:center;outline:none;transition:.18s ease}
.dropzone.is-dragover{border-color:rgba(123,193,255,.85);background:linear-gradient(180deg, rgba(24,42,74,.96), rgba(10,18,33,.96));transform:translateY(-1px)}
.dropzone__icon{font-size:30px;color:#cfe2ff;opacity:.95}
.dropzone__title{font-size:22px;font-weight:800;margin-top:8px}
.dropzone__sub{font-size:14px;color:var(--muted);margin:10px 0 20px;line-height:1.7}
.dropzone:focus{border-color:rgba(123,193,255,.6);box-shadow:0 0 0 3px rgba(91,157,255,.10)}
.preview-grid,.result-grid{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:16px}
.preview-box,.result-card,.qr-card{background:linear-gradient(180deg, rgba(19,32,59,.94), rgba(13,21,39,.98));border:1px solid var(--line);border-radius:22px;padding:18px}
.preview-box__label,.result-card__title,.qr-card__title{font-size:15px;font-weight:700;margin-bottom:12px;color:#dce8ff}
.preview-box__image-wrap{position:relative;min-height:136px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:16px}
.preview-box__image-wrap img{max-width:84px;max-height:84px;width:auto;height:auto;object-fit:contain;display:none;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.preview-box__image-wrap:not(.is-empty) img{display:block}
.preview-box__placeholder{padding:16px;color:var(--muted);text-align:center;line-height:1.7;font-size:14px}.preview-box__placeholder span{display:block;font-size:12px;opacity:.86;margin-top:6px}
.status-card{padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:700}
.status-card--idle{color:#dce8ff}
.status-card--loading{color:#dce8ff;border-color:rgba(123,193,255,.25);background:rgba(91,157,255,.12)}
.status-card--success{color:#d4ffe7;border-color:rgba(53,210,139,.25);background:rgba(53,210,139,.12)}
.status-card--error{color:#ffd8dc;border-color:rgba(255,110,122,.24);background:rgba(255,110,122,.12)}
.meta-text{margin-top:10px;color:var(--muted);font-size:14px}
.recognized-link-wrap{margin-top:14px}
.field-label{display:block;margin-bottom:10px;color:#dce8ff;font-weight:700}
.textarea{width:100%;resize:vertical;min-height:122px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);outline:none}
.textarea:focus{border-color:rgba(123,193,255,.5);box-shadow:0 0 0 3px rgba(91,157,255,.08)}
.field-group{margin-bottom:14px}
.action-row{display:flex;gap:12px;flex-wrap:wrap}
.message{margin-top:14px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);line-height:1.75}
.message--hidden,.is-hidden{display:none!important}
.message--loading{background:rgba(91,157,255,.12);border-color:rgba(91,157,255,.22)}
.message--error{background:rgba(255,110,122,.12);border-color:rgba(255,110,122,.26)}
.message--success{background:rgba(53,210,139,.12);border-color:rgba(53,210,139,.26)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700}
.pill--success{background:rgba(53,210,139,.14);color:#d4ffe7;border:1px solid rgba(53,210,139,.24)}
.result-card__url{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;line-height:1.8;word-break:break-all;color:#f3f7ff}
.result-card__actions,.qr-card__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.stat-box{padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.stat-box--strong{background:linear-gradient(180deg, rgba(91,157,255,.16), rgba(91,157,255,.08));border-color:rgba(91,157,255,.24)}
.stat-box__label{font-size:13px;color:var(--muted);margin-bottom:8px}
.stat-box__value{font-size:28px;font-weight:800;letter-spacing:.02em}
.meta-list{margin-top:16px;display:grid;gap:10px}
.meta-list div{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.meta-list span{color:var(--muted)}
.meta-list strong{word-break:break-all;text-align:right}
.qr-card__image-wrap{background:white;border-radius:20px;padding:14px;min-height:300px;display:flex;align-items:center;justify-content:center}
.qr-card__image-wrap img{width:100%;max-width:280px}
@media (max-width: 960px){
  .preview-grid,.result-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  body{padding:14px 10px 22px}
  .panel{padding:16px}
  .hero{padding:8px 2px 14px}
  .hero__title{font-size:30px}
  .dropzone{padding:20px 16px}
  .dropzone__title{font-size:19px;line-height:1.45}
  .preview-box__image-wrap{min-height:210px}
  .stats-grid{grid-template-columns:1fr}
  .action-row,.result-card__actions,.qr-card__actions{flex-direction:column}
  .action-row > *, .result-card__actions > *, .qr-card__actions > *{width:100%}
}

@media (max-width: 900px){
  .preview-box__image-wrap{min-height:112px;padding:12px}
  .preview-box__image-wrap img{max-width:72px;max-height:72px}
  .dropzone__title{font-size:19px}
}


.traffic-panel{margin-top:16px;padding:18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(15,26,47,.94), rgba(10,18,33,.98))}
.traffic-panel__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.traffic-panel__title{font-size:15px;font-weight:800;color:#dce8ff;margin-bottom:6px}
.traffic-panel__desc{font-size:13px;color:var(--muted);line-height:1.7}
.inline-badge{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#dce8ff;font-size:12px;font-weight:800;letter-spacing:.02em}
.inline-badge--ok{background:rgba(53,210,139,.12);border-color:rgba(53,210,139,.25);color:#d7ffe8}
.inline-badge--warn{background:rgba(255,180,77,.12);border-color:rgba(255,180,77,.25);color:#ffe3bf}
.inline-badge--danger{background:rgba(255,110,122,.12);border-color:rgba(255,110,122,.24);color:#ffd8dc}
.inline-badge--muted{background:rgba(255,255,255,.05);border-color:var(--line);color:#dce8ff}
.stats-grid--traffic{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-box--traffic{min-height:120px}
.stat-box--remain{border-color:rgba(53,210,139,.18);background:linear-gradient(180deg, rgba(18,40,39,.96), rgba(12,25,23,.98))}
.meta-list--traffic{margin-top:14px}
@media (max-width: 900px){
  .stats-grid--traffic{grid-template-columns:1fr}
  .traffic-panel{padding:16px}
}