:root{
    --ind:#4f46e5; --ind2:#7c3aed; --ink:#0f172a; --mut:#5b6473; --mut2:#8a93a3;
    --bg:#f6f7fb; --card:#ffffff; --line:#e7e9f0; --line2:#dfe2ec; --ind-soft:#eef0fe;
    --grn:#16a34a; --amber:#d97706; --radius:16px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;color:var(--ink);background:
      radial-gradient(1100px 500px at 100% -5%,rgba(124,58,237,.07),transparent 60%),
      radial-gradient(900px 500px at -5% 5%,rgba(79,70,229,.07),transparent 55%),var(--bg);
      min-height:100vh;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(14px,4vw,28px);max-width:1080px;margin:0 auto}
  .brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
  .brand .logo{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:21px;color:#fff;
    background:linear-gradient(135deg,var(--ind),var(--ind2));box-shadow:0 6px 16px rgba(79,70,229,.34)}
  .brand b{font-size:16px;letter-spacing:-.01em;display:block;line-height:1.15}
  .brand small{font-size:11.5px;color:var(--mut);font-weight:600}
  .langsw{display:flex;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px}
  .langsw a{border:0;background:transparent;font:inherit;font-weight:800;font-size:12.5px;color:var(--mut);padding:7px 11px;border-radius:8px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block}
  .langsw a.on{background:linear-gradient(135deg,var(--ind),var(--ind2));color:#fff;box-shadow:0 3px 9px rgba(79,70,229,.3)}
  .langsw a:hover{color:var(--ind)} .langsw a.on:hover{color:#fff}

  main{max-width:1040px;margin:0 auto;padding:6px clamp(14px,4vw,24px) 40px}
  .h1{font-size:clamp(24px,5vw,32px);font-weight:850;letter-spacing:-.02em;margin:12px 0 5px;text-align:center}
  .sub{color:var(--mut);text-align:center;font-size:15px;font-weight:600;margin:0 auto 22px;max-width:520px;line-height:1.5}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 14px rgba(15,23,42,.05)}
  .pad{padding:clamp(16px,3vw,22px)}

  /* ===== 2-column tool ===== */
  .tool{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 360px;
    grid-template-areas:"input preview" "style preview";align-items:start}
  .col-input{grid-area:input}
  .col-preview{grid-area:preview;position:sticky;top:16px}
  .col-style{grid-area:style}
  @media(max-width:860px){
    .tool{grid-template-columns:1fr;grid-template-areas:"input" "preview" "style"}
    .col-preview{position:static}
  }

  /* type tabs */
  .tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  .tab{display:flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid var(--line2);background:var(--card);color:var(--mut);font:inherit;font-weight:700;font-size:13px;
    padding:9px 12px;border-radius:11px;cursor:pointer;transition:.15s}
  .tab:hover{border-color:var(--ind);color:var(--ind)}
  .tab.on{background:var(--ind-soft);border-color:var(--ind);color:var(--ind)}
  .tab .ic{font-size:15px}

  label.fld{display:block;margin:0 0 12px}
  label.fld>span{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
  input[type=text],input[type=url],input[type=tel],input[type=email],input[type=password],input[type=number],textarea,select{
    width:100%;border:1px solid var(--line2);border-radius:11px;padding:12px 13px;font:inherit;font-size:15px;color:var(--ink);background:#fcfcfe;transition:.15s}
  input:focus,textarea:focus,select:focus{outline:0;border-color:var(--ind);box-shadow:0 0 0 3px var(--ind-soft)}
  textarea{min-height:84px;resize:vertical}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .chk{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--mut);cursor:pointer;margin-top:2px}
  .chk input{width:17px;height:17px;accent-color:var(--ind)}
  .tabpane{display:none}
  .tabpane.on{display:block}

  /* preview */
  .qrcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 14px rgba(15,23,42,.05);padding:20px;text-align:center}
  .qrbox{display:inline-flex;align-items:center;justify-content:center;padding:16px;border-radius:18px;background:#fff;
    border:1px solid var(--line);box-shadow:0 8px 26px rgba(15,23,42,.10);min-width:220px;min-height:220px}
  .qrbox canvas{display:block;max-width:260px;width:100%;height:auto;image-rendering:pixelated;border-radius:6px}
  .qrempty{color:var(--mut2);font-size:13.5px;font-weight:600;padding:64px 18px;max-width:210px;line-height:1.5}
  .qrerr{color:var(--amber);font-size:13px;font-weight:700;margin-top:10px;display:none}
  .dl{display:flex;gap:10px;margin-top:16px;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;font:inherit;font-weight:800;font-size:14px;padding:12px 18px;border-radius:12px;cursor:pointer;transition:.15s;white-space:nowrap}
  .btn-prim{background:linear-gradient(135deg,var(--ind),var(--ind2));color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.32)}
  .btn-prim:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .btn-sec{background:var(--card);border:1px solid var(--line2);color:var(--ink)}
  .btn-sec:hover{border-color:var(--ind);color:var(--ind)}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}

  /* style options */
  .col-style h3{font-size:13px;font-weight:800;color:var(--mut);margin:0 0 13px;text-transform:uppercase;letter-spacing:.03em}
  .colors{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .colorpick{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink)}
  .colorpick input[type=color]{width:38px;height:34px;border:1px solid var(--line2);border-radius:9px;padding:2px;background:#fff;cursor:pointer}
  .swatches{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
  .sw{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line2);transition:.15s}
  .sw:hover{transform:scale(1.1)}
  .logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  .file-btn{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--line2);background:#fcfcfe;color:var(--mut);font:inherit;font-weight:700;font-size:13px;padding:9px 13px;border-radius:10px;cursor:pointer;transition:.15s}
  .file-btn:hover{border-color:var(--ind);color:var(--ind)}
  .hint-sm{font-size:12px;color:var(--mut2);font-weight:600;margin-top:4px}
  .sizerow{display:flex;align-items:center;gap:12px;margin-top:4px}
  .sizerow input[type=range]{flex:1;accent-color:var(--ind)}
  .sizeval{font-size:13px;font-weight:800;color:var(--ind);min-width:74px;text-align:right}

  /* funnel */
  .funnel{display:flex;align-items:center;gap:13px;margin:20px auto 0;max-width:1040px;padding:14px 16px;border-radius:14px;
    background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(124,58,237,.08));border:1px solid var(--ind-soft);text-decoration:none}
  .funnel .fic{font-size:24px;flex-shrink:0}
  .funnel .ftx{flex:1;min-width:0}
  .funnel .ft-t{font-weight:800;font-size:14px;color:var(--ink);display:block}
  .funnel .ft-d{font-size:12.5px;color:var(--mut);font-weight:600}
  .funnel .fcta{font-weight:800;font-size:13px;color:var(--ind);white-space:nowrap}

  /* sections */
  .sec{margin:40px auto 0;max-width:1040px}
  .sec-h{font-size:clamp(19px,3vw,23px);font-weight:850;letter-spacing:-.02em;text-align:center;margin:0 0 6px}
  .sec-sub{text-align:center;color:var(--mut);font-size:14px;font-weight:600;margin:0 auto 22px;max-width:520px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 18px;text-align:center}
  .step .n{width:38px;height:38px;margin:0 auto 12px;border-radius:11px;display:grid;place-items:center;font-weight:850;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--ind),var(--ind2))}
  .step b{display:block;font-size:15px;margin-bottom:4px}
  .step span{font-size:13px;color:var(--mut);line-height:1.5}
  @media(max-width:680px){.steps{grid-template-columns:1fr}}

  .usegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .use{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;transition:.15s}
  .use:hover{border-color:var(--ind-soft);box-shadow:0 6px 18px rgba(79,70,229,.08);transform:translateY(-2px)}
  .use .e{font-size:26px;display:block;margin-bottom:9px}
  .use b{display:block;font-size:14.5px;margin-bottom:3px}
  .use span{font-size:13px;color:var(--mut);line-height:1.5}
  @media(max-width:760px){.usegrid{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.usegrid{grid-template-columns:1fr}}

  .seo{max-width:760px;margin:40px auto 0}
  .seo-intro{color:var(--mut);font-size:14px;line-height:1.62;padding:15px 17px;background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:22px}
  .seo h2{font-size:18px;font-weight:850;margin:24px 0 12px;text-align:center}
  .tips{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:9px}
  .tips li{position:relative;padding:13px 15px 13px 44px;background:var(--card);border:1px solid var(--line);border-radius:11px;font-size:13.6px;line-height:1.55;color:var(--ink)}
  .tips li::before{content:'✓';position:absolute;left:15px;top:13px;width:20px;height:20px;border-radius:6px;background:var(--ind-soft);color:var(--ind);font-weight:800;font-size:12px;display:grid;place-items:center}
  details.q{border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:var(--card)}
  details.q summary{cursor:pointer;list-style:none;padding:13px 42px 13px 15px;font-weight:700;font-size:14px;position:relative}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary::after{content:'+';position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:700;color:var(--ind)}
  details.q[open] summary::after{content:'–'}
  details.q .a{padding:0 15px 14px;font-size:13.6px;line-height:1.6;color:var(--mut)}

  footer{margin-top:44px;background:#0f1320;color:#c7cdda}
  .ft-in{max-width:1080px;margin:0 auto;padding:26px clamp(14px,4vw,28px);display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
  .ft-brand .fb{font-weight:800;color:#fff;font-size:15px}
  .ft-brand div{font-size:12.5px;color:#8a93a8;margin-top:3px;max-width:230px;line-height:1.5}
  .ft-col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#7681a0;margin:0 0 9px}
  .ft-col a{display:block;color:#c7cdda;text-decoration:none;font-size:13.5px;font-weight:600;margin-bottom:7px;transition:.15s}
  .ft-col a:hover{color:#fff}
  .ft-note{width:100%;border-top:1px solid #232a3d;padding:14px clamp(14px,4vw,28px);max-width:1080px;margin:0 auto;font-size:12px;color:#7681a0}

  @media(max-width:560px){ .row2{grid-template-columns:1fr} .ft-in{gap:18px} }
  /* ===== added in v1 (14.09.2026) ===== */
  .crumbs{max-width:1040px;margin:4px auto 0;font-size:12.5px;font-weight:700;color:var(--mut2);
    display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .crumbs a{color:var(--mut);text-decoration:none}
  .crumbs a:hover{color:var(--ind)}
  .crumbs .cur{color:var(--ink)}

  .fmsg{display:none;font-size:12px;font-weight:700;line-height:1.45;margin-top:5px}
  .fmsg.on{display:block}
  .fmsg.warn{color:var(--amber)}
  .fmsg.ok{color:var(--grn)}
  .qrcard .fmsg{margin-top:8px;text-align:center}

  .btn-ghost{background:transparent;border:1px dashed var(--line2);color:var(--mut);
    font-size:13px;padding:9px 14px}
  .btn-ghost:hover:not(:disabled){border-color:var(--ind);color:var(--ind)}

  .tab{font-family:inherit}
  .sw{padding:0;border:2px solid #fff;font:inherit}

  /* ===== added in v2: landing pages + /maksat/ ===== */
  .hubgrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
  .hubcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:15px 16px;text-decoration:none;transition:.15s}
  .hubcard:hover{border-color:var(--ind);transform:translateY(-1px);box-shadow:0 6px 18px rgba(79,70,229,.10)}
  .hubcard b{display:block;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
  .hubcard span{display:block;font-size:12.8px;line-height:1.5;color:var(--mut);font-weight:600}

  .relgrid{display:flex;flex-wrap:wrap;gap:9px}
  .relcard{display:inline-block;background:var(--ind-soft);border:1px solid var(--line2);
    border-radius:11px;padding:9px 14px;font-size:13.2px;font-weight:700;color:var(--ind);
    text-decoration:none;transition:.15s}
  .relcard:hover{border-color:var(--ind);background:#fff}

  .seo .pnote{background:var(--ind-soft);border-left:3px solid var(--ind);border-radius:0 10px 10px 0;
    padding:11px 14px;font-size:13.4px;line-height:1.6;color:var(--ink);font-weight:600;margin:14px 0}

  .paycard{max-width:520px;margin:0 auto}
  .ptable{display:grid;gap:10px;margin-bottom:16px}
  .prow{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fcfcfe}
  .pk{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2);margin-bottom:4px}
  .pv{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .pv span{font-size:15.5px;font-weight:700;color:var(--ink);word-break:break-all;line-height:1.35}
  .copy{flex:none;border:1px solid var(--line2);background:#fff;color:var(--ind);font:inherit;
    font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.15s}
  .copy:hover{border-color:var(--ind)}
  .copy.done{background:var(--grn);border-color:var(--grn);color:#fff}
  #copyAll{width:100%;justify-content:center}
  #copyAll.done{background:var(--grn);box-shadow:none}
  .phint{font-size:12.6px;line-height:1.6;color:var(--mut);font-weight:600;margin:14px 0 0;text-align:center}
  .pwarn{background:#fff7ed;border:1px solid #fed7aa;color:var(--amber);border-radius:11px;
    padding:11px 13px;font-size:13px;font-weight:700;line-height:1.5;margin-bottom:13px}
  .pempty{text-align:center;color:var(--mut2);font-size:14px;font-weight:600;padding:34px 12px}

  /* ===== v3: 15 code types — keep the tab strip compact ===== */
  .tabs{gap:6px}
  .tab{padding:8px 10px;font-size:12.5px}
  .tab .ic{font-size:14px}
  @media(max-width:560px){
    .tabs{gap:5px;margin-bottom:14px}
    .tab{padding:7px 9px;font-size:12px;border-radius:9px}
    .tab .ic{font-size:13px}
  }

  /* v4: design controls */
  .col-style .fld>span{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
  .col-style input[type=color]{width:100%;height:38px}
  .col-style .chk{margin-top:10px;font-size:13px;color:var(--ink);font-weight:700}
  .col-style select{font-size:13.5px;padding:10px 11px}
  #gradwrap,#framewrap{border-left:2px solid var(--ind-soft);padding-left:11px}

  /* v6: standalone tools */
  .toolcard{max-width:720px;margin:0 auto}
  #camwrap{margin:14px 0}
  #cam{width:100%;max-height:400px;border-radius:14px;background:#0f1320;display:block;object-fit:cover}
  .droparea{margin-top:14px;border:2px dashed var(--line2);border-radius:14px;padding:22px 16px;
    text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px;transition:.15s}
  .droparea.over{border-color:var(--ind);background:var(--ind-soft)}
  .droparea>span{font-size:13.5px;font-weight:600;color:var(--mut)}
  .result{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:15px;background:#fcfcfe}
  .rkind{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ind);margin-bottom:7px}
  .rtext{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-all;line-height:1.5;
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px}
  .ract{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
  .ract .btn{text-decoration:none}
  .rwarn{font-size:12.5px;font-weight:700;color:var(--amber);margin:11px 0 0;line-height:1.5}

  #csvpreview{margin-top:13px}
  .pvhead{font-size:12.5px;font-weight:800;color:var(--ind);margin-bottom:8px}
  .pvlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .pvlist li{background:#fcfcfe;border:1px solid var(--line);border-radius:10px;padding:8px 11px;
    font-size:12.5px;display:flex;gap:10px;justify-content:space-between;align-items:baseline}
  .pvlist b{color:var(--ink);white-space:nowrap}
  .pvlist span{color:var(--mut);font-weight:600;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;direction:rtl;text-align:left}
  .pvmore{font-size:12px;color:var(--mut2);font-weight:600;margin-top:7px}

  .bcbox{margin:16px 0;padding:18px;background:#fff;border:1px solid var(--line);
    border-radius:14px;text-align:center;min-height:130px;display:flex;align-items:center;
    justify-content:center}
  .bcbox canvas{max-width:100%;height:auto}