:root{
  --ink:#101216; --panel:#1A1D24; --panel-2:#20242C; --line:#2C313B; --paper:#F5F3EE;
  --signal:#39FF88; --signal-dim:#1F8A50; --amber:#FFB74A; --text-soft:#9AA1AC; --text-bright:#F1F2F4;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ink);color:var(--text-bright);font-family:'Tajawal',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
.mono{font-family:'JetBrains Mono',monospace;}

header{padding:22px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;text-decoration:none;color:var(--text-bright);}
.brand .mark{width:22px;height:22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;}
.brand .mark span{background:var(--signal);}
.brand .mark span:nth-child(3){background:var(--line);}
nav a{color:var(--text-soft);text-decoration:none;font-size:.88rem;margin-inline-start:18px;}
nav a:hover{color:var(--text-bright);}

.ad-slot{width:100%;display:flex;align-items:center;justify-content:center;color:var(--text-soft);font-size:.7rem;border:1px dashed var(--line);background:var(--panel);min-height:60px;}

.hero-wrap{max-width:900px;margin:0 auto;padding:48px 32px 16px;}
h1{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:900;line-height:1.2;}
.lede{color:var(--text-soft);margin-top:12px;font-size:1rem;max-width:60ch;}
.crumbs{color:var(--text-soft);font-size:.8rem;margin-bottom:14px;}
.crumbs a{color:var(--text-soft);}

.workbench{max-width:900px;margin:32px auto 0;padding:0 32px;display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);background:var(--panel);}
@media(max-width:780px){.workbench{grid-template-columns:1fr;}}
.controls{padding:28px;border-inline-end:1px solid var(--line);}
@media(max-width:780px){.controls{border-inline-end:none;border-bottom:1px solid var(--line);}}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.8rem;color:var(--text-soft);margin-bottom:7px;}
.field input[type=text], .field input[type=url], .field input[type=email], .field input[type=tel], .field input[type=number], .field textarea, .field select{
  width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text-bright);padding:11px 13px;
  font-family:'JetBrains Mono',monospace;font-size:.86rem;
}
.field textarea{resize:vertical;min-height:70px;font-family:'Tajawal',sans-serif;}
.field select{font-family:'Tajawal',sans-serif;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--signal);outline-offset:1px;}
.checkline{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-soft);margin-bottom:16px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
input[type=color]{-webkit-appearance:none;width:34px;height:34px;border:2px solid var(--line);background:none;padding:0;cursor:pointer;}
input[type=range]{width:100%;accent-color:var(--signal);}
.size-label{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-soft);}

.preview{padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg, var(--panel-2) 0, var(--panel-2) 1px, transparent 1px, transparent 16px);min-height:280px;}
.preview canvas{display:block;background:var(--paper);}
.qr-empty{color:var(--text-soft);font-size:.85rem;text-align:center;max-width:22ch;}

.downloads{display:none;gap:8px;margin-top:18px;flex-wrap:wrap;}
.downloads.show{display:flex;}
.dl-btn{flex:1;min-width:70px;text-align:center;padding:10px 8px;border:1px solid var(--line);background:var(--ink);color:var(--text-bright);
  font-family:'Tajawal',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;}
.dl-btn:hover{border-color:var(--signal);color:var(--signal);}

.btn-primary{width:100%;margin-top:6px;padding:13px;background:var(--signal);color:var(--ink);border:none;font-weight:700;font-size:.92rem;cursor:pointer;font-family:'Tajawal',sans-serif;}
.btn-primary:hover{background:var(--amber);}

.privacy-note{display:flex;align-items:flex-start;gap:9px;margin-top:18px;padding:12px 14px;border:1px solid var(--signal-dim);background:rgba(57,255,136,.06);font-size:.78rem;color:var(--text-soft);}
.privacy-note b{color:var(--signal);}

main .section{max-width:900px;margin:56px auto 0;padding:0 32px;}
.section h2{font-size:1.35rem;font-weight:900;margin-bottom:16px;}
.section p{color:var(--text-soft);font-size:.9rem;margin-bottom:10px;max-width:70ch;}
.faq-item{margin-bottom:14px;font-size:.88rem;color:var(--text-soft);}
.faq-item b{color:var(--text-bright);display:block;margin-bottom:3px;}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px;}
.tool-card{background:var(--panel);padding:20px;text-decoration:none;color:var(--text-bright);transition:background .15s;}
.tool-card:hover{background:var(--panel-2);}
.tool-card .ic{color:var(--signal);font-family:'JetBrains Mono',monospace;font-size:.75rem;margin-bottom:8px;display:block;}
.tool-card .name{font-weight:700;font-size:.92rem;}
.tool-card .desc{color:var(--text-soft);font-size:.76rem;margin-top:4px;}

.qr-history-box{background:var(--panel);border:1px solid var(--line);padding:20px;margin-top:16px;max-height:340px;overflow-y:auto;}
.qr-hist-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);}
.qr-hist-item:last-child{border-bottom:none;}
.qr-hist-mini canvas{display:block;width:40px;height:40px;background:var(--paper);}
.qr-hist-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.qr-hist-type{font-size:.68rem;color:var(--signal);font-family:'JetBrains Mono',monospace;}
.qr-hist-label{font-size:.82rem;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qr-hist-del{background:none;border:none;color:var(--text-soft);cursor:pointer;font-size:.9rem;padding:4px 8px;}
.qr-hist-del:hover{color:#ff6b6b;}
.qr-hist-empty{color:var(--text-soft);font-size:.85rem;}

footer{border-top:1px solid var(--line);margin-top:80px;padding:32px;text-align:center;color:var(--text-soft);font-size:.8rem;}