*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif;}
body{background:#020817;color:white;min-height:100vh;padding:40px 20px;}
.tool-container{width:100%;max-width:1200px;margin:auto;background:#07152f;border:1px solid #17315f;border-radius:28px;padding:28px;box-shadow:0 0 60px rgba(0,140,255,0.1);}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.home-btn{background:#0f1d3b;border:1px solid #1f3f75;color:#cbd5e1;padding:10px 18px;border-radius:14px;text-decoration:none;display:flex;align-items:center;gap:8px;transition:0.3s;}
.home-btn:hover{background:#1a2e58;color:white;}
.title{font-size:40px;font-weight:800;margin-bottom:12px;}
.type-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.tab-btn{padding:10px 18px;border-radius:12px;border:1px solid #1f3f75;background:#0f1d3b;color:#94a3b8;cursor:pointer;font-size:13px;font-weight:600;transition:0.3s;}
.tab-btn:hover{border-color:#3b82f6;color:white;}
.tab-btn.active{background:#2563eb;border-color:#2563eb;color:white;}
.mode-tabs{display:flex;gap:10px;margin-bottom:20px;}
.mode-btn{padding:12px 22px;border-radius:14px;border:1px solid #1f3f75;background:#0f1d3b;color:#94a3b8;cursor:pointer;font-size:14px;font-weight:700;transition:0.3s;}
.mode-btn.active{background:#2563eb;border-color:#2563eb;color:white;}
.content-panel{display:none;}
.content-panel.active{display:block;}
.main-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;}
textarea,input[type="text"],input[type="number"],select{
  width:100%;background:#0b1730;border:1px solid #24467f;color:white;padding:13px 15px;
  border-radius:12px;outline:none;font-size:14px;transition:0.3s;
}
textarea:focus,input[type="text"]:focus,input[type="number"]:focus,select:focus{border-color:#3b82f6;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.color-box{background:#0b1730;border:1px solid #24467f;border-radius:14px;padding:14px;text-align:center;}
.color-box span{display:block;font-size:12px;color:#94a3b8;margin-bottom:8px;}
input[type="color"]{width:100%;height:44px;border:none;background:transparent;cursor:pointer;border-radius:8px;}
input[type="checkbox"]{width:18px;height:18px;accent-color:#3b82f6;cursor:pointer;}
.check-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;color:#cbd5e1;}
.range-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.range-row label{font-size:13px;color:#94a3b8;min-width:110px;}
.range-row input{flex:1;accent-color:#3b82f6;}
.range-row span{font-size:12px;background:#0f1d3b;border:1px solid #24467f;color:#60a5fa;padding:4px 10px;border-radius:8px;min-width:44px;text-align:center;}
.preview-card{background:#081224;border:1px solid #1a3159;border-radius:22px;padding:22px;}
.barcode-box{background:#ffffff;border:1px solid #203d6f;border-radius:18px;min-height:220px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:14px;}
.placeholder-bc{text-align:center;color:#334155;}
.placeholder-bc i{font-size:60px;color:#3b82f6;}
.placeholder-bc p{margin-top:14px;color:#64748b;font-size:13px;}
.err-msg{background:#2b0f14;border:1px solid #7f1d1d;color:#fca5a5;padding:10px 14px;border-radius:12px;font-size:13px;margin-top:12px;display:none;}
.err-msg.show{display:block;}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.stat-box strong{font-size:15px;color:#60a5fa;}
.btns{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.btn{flex:1;border:none;padding:14px;border-radius:14px;font-weight:700;cursor:pointer;transition:0.3s;font-size:14px;min-width:130px;}
.primary{background:#2563eb;color:white;}
.primary:hover{background:#1d4ed8;transform:translateY(-1px);}
.secondary{background:#101d38;border:1px solid #294577;color:white;}
.secondary:hover{background:#17284b;}
.history-wrap{margin-top:22px;}
.history-title{font-size:14px;color:#94a3b8;margin-bottom:12px;font-weight:600;}
.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.history-item{background:#ffffff;border:1px solid #1a3159;border-radius:12px;padding:8px;text-align:center;cursor:pointer;transition:0.3s;}
.history-item:hover{border-color:#3b82f6;}
.history-item svg,.history-item canvas{width:100%;}
.history-item p{font-size:10px;color:#0f172a;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.bulk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.bulk-item{background:#ffffff;border:1px solid #1a3159;border-radius:14px;padding:12px;text-align:center;}
.bulk-item svg{width:100%;}
.bulk-item p{font-size:11px;color:#0f172a;margin-top:6px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bulk-item.invalid{border-color:#dc2626;}
.bulk-item .bulk-err{color:#dc2626;font-size:10px;margin-top:4px;}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px;}
.feature{background:#081224;border:1px solid #1b3563;border-radius:20px;padding:22px;text-align:center;transition:0.3s;}
.feature:hover{border-color:#3b82f6;transform:translateY(-4px);}
.feature i{font-size:28px;color:#3b82f6;margin-bottom:14px;}
.feature h3{margin-bottom:8px;font-size:15px;}
.feature p{color:#94a3b8;line-height:1.6;font-size:13px;}
.hint{font-size:12px;color:#64748b;margin-top:-8px;margin-bottom:14px;line-height:1.6;}
@media(max-width:1024px){.main-grid{grid-template-columns:1fr;}}
@media(max-width:700px){.features{grid-template-columns:1fr 1fr;}.type-tabs{flex-wrap:wrap;}.title{font-size:28px;}.form-row{grid-template-columns:1fr;}.bulk-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.features{grid-template-columns:1fr;}.btns{flex-direction:column;}.bulk-grid{grid-template-columns:1fr;}.history-grid{grid-template-columns:1fr 1fr;}}