:root{
  --ink:#141414;
  --paper:#FAFAF8;
  --line:#E4E2DC;
  --line-strong:#CFCCC3;
  --accent:#2951FF;
  --accent-dim:#eef1ff;
  --ok:#1F8A55;
  --muted:#6B6862;
  --card-bg:#ffffff;
  --radius:2px;
  --mono:'JetBrains Mono', monospace;
  --sans:'Manrope', sans-serif;
}

html[data-theme="dark"]{
  --ink:#F2F1EC;
  --paper:#121212;
  --line:#2A2A28;
  --line-strong:#3C3B37;
  --accent:#6E8CFF;
  --accent-dim:#1B2140;
  --ok:#3ECB83;
  --muted:#A19E95;
  --card-bg:#1A1A18;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
.grid-bg{
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 18px 18px; background-position: -9px -9px;
}

header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); flex:none;}
.brand-mark{width:26px; height:26px; flex:none; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:2px;}
.brand-mark span{background:var(--ink);}
.brand-mark span:nth-child(1), .brand-mark span:nth-child(3), .brand-mark span:nth-child(7){background:var(--accent);}
.brand-mark span:nth-child(5){background:transparent;}
nav.links{display:flex; gap:24px; align-items:center; flex-wrap:wrap;}
nav.links a{text-decoration:none; color:var(--muted); font-size:0.92rem; font-weight:500; transition:color .15s ease;}
nav.links a:hover, nav.links a.active{color:var(--ink);}
.nav-cta{background:var(--ink); color:var(--paper) !important; padding:9px 16px; border-radius:var(--radius); font-weight:600 !important;}
.nav-cta:hover{background:var(--accent) !important; color:#fff !important;}
.theme-toggle{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  width:36px; height:36px; border-radius:var(--radius); cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.theme-toggle:hover{border-color:var(--accent);}

.hero{padding:56px 0 56px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start;}
.hero.narrow{grid-template-columns:1fr; max-width:720px;}
.kicker{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.78rem; color:var(--accent); background:var(--accent-dim); padding:5px 10px; border-radius:var(--radius); margin-bottom:20px;}
h1{font-size:clamp(2rem, 4vw, 2.9rem); line-height:1.08; letter-spacing:-0.02em; font-weight:800; margin:0 0 16px; max-width:15ch;}
h2{font-weight:800; letter-spacing:-0.01em;}
.hero p.lead{font-size:1.05rem; color:var(--muted); max-width:48ch; margin:0 0 28px;}

.panel-tabs{display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line);}
.panel-tab{
  font-family:var(--sans); font-weight:700; font-size:0.92rem; padding:10px 4px; margin-right:22px;
  background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer;
}
.panel-tab.active{color:var(--ink); border-bottom-color:var(--accent);}
.panel{display:none;}
.panel.active{display:block;}

.type-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.type-tab{font-family:var(--mono); font-size:0.8rem; padding:8px 13px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); border-radius:var(--radius); cursor:pointer; transition:all .15s ease;}
.type-tab:hover{border-color:var(--ink); color:var(--ink);}
.type-tab.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.field-group{margin-bottom:16px;}
.field-group label{display:flex; align-items:center; justify-content:space-between; font-size:0.82rem; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field-group label .hint{font-family:var(--mono); font-weight:400; color:var(--muted); font-size:0.76rem;}
.field-group input[type=text], .field-group input[type=email], .field-group input[type=tel], .field-group input[type=password], .field-group input[type=number], .field-group select, .field-group textarea{
  width:100%; padding:11px 12px; font-size:0.95rem; font-family:var(--sans);
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--card-bg); color:var(--ink);
}
.field-group textarea{resize:vertical; min-height:90px; font-family:var(--mono); font-size:0.85rem;}
.field-group input:focus, .field-group select:focus, .field-group textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

input[type=color]{width:100%; height:38px; border:1px solid var(--line-strong); border-radius:var(--radius); padding:2px; background:var(--card-bg); cursor:pointer;}
input[type=range]{width:100%;}
input[type=file]{width:100%; font-size:0.85rem; padding:8px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--card-bg); color:var(--muted);}

.toggle-row{display:flex; align-items:center; gap:8px; margin:4px 0 16px; font-size:0.88rem; color:var(--ink); font-weight:600;}
.toggle-row input{width:16px; height:16px;}

.style-block{border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px; background:var(--card-bg);}
.style-block h4{margin:0 0 12px; font-size:0.82rem; color:var(--muted); font-weight:700;}
.logo-row{display:flex; align-items:center; gap:12px;}
.logo-thumb{width:44px; height:44px; border:1px solid var(--line-strong); border-radius:var(--radius); object-fit:contain; flex:none; background:#fff; display:none;}
.link-btn{background:none; border:none; color:var(--accent); font-size:0.82rem; font-weight:700; cursor:pointer; padding:0;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; font-family:var(--sans); font-weight:700; font-size:0.92rem; border-radius:var(--radius); border:1px solid var(--ink); cursor:pointer; text-decoration:none; transition:all .15s ease; background:transparent; color:var(--ink);}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.btn-sm{padding:10px 12px; font-size:0.82rem; flex:1;}
.btn-full{width:100%;}
.btn-row{display:flex; gap:8px;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}

.preview-panel{position:sticky; top:96px; border:1px solid var(--line); background:var(--card-bg); border-radius:var(--radius); padding:28px; text-align:center;}
.finder-frame{position:relative; display:inline-flex; align-items:center; justify-content:center; padding:22px; min-height:200px;}
.finder-frame::before, .finder-frame::after, .finder-frame .fc{content:""; position:absolute; width:26px; height:26px; border:4px solid var(--ink); border-radius:2px;}
.finder-frame::before{top:0; left:0; border-right:none; border-bottom:none;}
.finder-frame::after{top:0; right:0; border-left:none; border-bottom:none;}
.finder-frame .fc{bottom:0; left:0; border-right:none; border-top:none;}
#qr-final-canvas{max-width:100%; height:auto; border-radius:1px;}
.preview-meta{font-family:var(--mono); font-size:0.76rem; color:var(--muted); margin-top:16px; word-break:break-all; max-width:280px; margin-left:auto; margin-right:auto;}
.preview-actions{margin-top:20px;}
.preview-actions .btn-row{margin-top:8px;}
.scan-note{font-size:0.76rem; color:var(--muted); margin-top:14px; line-height:1.4;}

section.features{padding:60px 0;}
.section-head{max-width:52ch; margin-bottom:40px;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.1rem); letter-spacing:-0.01em; margin:0 0 10px;}
.section-head p{color:var(--muted); margin:0; font-size:1.02rem;}
.feature-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto; gap:1px; background:var(--line); border:1px solid var(--line);}
.feature-card{background:var(--paper); padding:28px;}
.feature-card.tall{grid-row:span 2;}
.feature-card .num{font-family:var(--mono); font-size:0.78rem; color:var(--accent); margin-bottom:14px; display:block;}
.feature-card h3{font-size:1.05rem; margin:0 0 8px; font-weight:700;}
.feature-card p{margin:0; color:var(--muted); font-size:0.92rem;}

section.how{padding:0 0 60px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.step{border-top:2px solid var(--ink); padding-top:16px;}
.step .step-num{font-family:var(--mono); font-size:0.85rem; color:var(--muted);}
.step h3{margin:8px 0 8px; font-size:1.05rem;}
.step p{margin:0; color:var(--muted); font-size:0.92rem;}

section.faq{padding:0 0 72px;}
details.faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
details.faq-item summary{cursor:pointer; font-weight:700; font-size:1rem; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{content:"+"; font-family:var(--mono); font-size:1.3rem; color:var(--muted); flex:none;}
details.faq-item[open] summary::after{content:"–";}
details.faq-item p{color:var(--muted); margin:12px 0 0; max-width:70ch; font-size:0.95rem;}

footer{border-top:1px solid var(--line); padding:32px 0; margin-top:20px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer p{color:var(--muted); font-size:0.85rem; margin:0;}

/* ---- shared tool-page components (barcode / scan / bulk / manage) ---- */
.tool-card{border:1px solid var(--line); background:var(--card-bg); border-radius:var(--radius); padding:28px;}
.dropzone{
  border:2px dashed var(--line-strong); border-radius:var(--radius); padding:36px 20px; text-align:center;
  color:var(--muted); font-size:0.9rem; cursor:pointer; transition:border-color .15s ease;
}
.dropzone:hover, .dropzone.drag{border-color:var(--accent); color:var(--ink);}
.dropzone strong{color:var(--ink);}
table.result-table{width:100%; border-collapse:collapse; font-size:0.85rem; margin-top:20px;}
table.result-table th, table.result-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
table.result-table th{font-family:var(--mono); font-weight:600; color:var(--muted); font-size:0.76rem;}
.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:0.72rem; font-weight:700; font-family:var(--mono);}
.badge-ok{background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok);}
.badge-err{background:color-mix(in srgb, #E24444 18%, transparent); color:#E24444;}
.spinner{width:16px; height:16px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.result-box{border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:var(--card-bg);}
.result-box .value{font-family:var(--mono); font-size:0.95rem; word-break:break-all; margin:10px 0;}
#reader{width:100%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}

@media (max-width: 880px){
  .hero{grid-template-columns:1fr; padding-top:32px;}
  .preview-panel{position:static;}
  .feature-grid{grid-template-columns:1fr;}
  .feature-card.tall{grid-row:auto;}
  .steps{grid-template-columns:1fr;}
  nav.links{display:none;}
  .field-row3{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;} *{transition:none !important;}}

/* ================= LOCAL AD ENGINE: GHOST PLACEHOLDERS ================= */
.ad-slot {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.ad-slot.ad-active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto !important;
  height: auto !important;
  min-height: 90px;
  max-width: 728px;
  text-align: center;
}