:root { --bg:#0b0c10; --fg:#e5e7eb; --muted:#9ca3af; --accent:#60a5fa; --card:#111318; --border:#1f2937; --error:#ef4444; }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--fg);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:20px}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.2px}.brand .dot{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-links a{margin-left:16px;color:var(--muted)}
/* small header icons (now colorful) */


h1{font-size:clamp(26px,4vw,40px);margin:0 0 12px}
p.small{color:var(--muted);font-size:14px}
/* banner */
.banner{margin-top:12px;margin-bottom:8px;text-align:center}
.banner h2{font-size:clamp(28px,6vw,54px);margin:4px 0 8px;font-weight:900;letter-spacing:.3px}
.banner-icons{display:none}
.banner-icons svg{width:56px;height:56px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start; margin-top:14px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.footer{border-top:1px solid var(--border);margin-top:12px;color:var(--muted)}
.form{display:grid;gap:16px}
label{font-weight:700; display:flex; align-items:center; gap:8px;}
label .current{color:var(--muted); font-weight:600;}
.range-row{display:grid;gap:8px}
.range-ends{display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:14px}
#lengthOut{font-weight:700}
input[type=range]{width:100%}
.options { display:grid; gap:16px; }
.switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.switch input{display:none}
.slider{position:relative;width:44px;height:24px;background:var(--border);border-radius:24px;transition:background .25s;flex:none}
.slider::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--fg);transition:transform .25s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(20px);background:#0b1220}
.option-desc{font-size:14px;color:var(--muted);margin-left:54px;margin-top:-6px;line-height:1.4}
.subform{margin-left:54px;margin-top:8px;display:none;gap:8px}
.subform.show{display:grid}
.subform textarea{width:100%;min-height:80px;resize:vertical;padding:10px;border:1px solid var(--border);border-radius:10px;background:#0e1116;color:var(--fg)}
.subform select{padding:8px;border:1px solid var(--border);border-radius:10px;background:#0e1116;color:var(--fg)}
.req-note{color:var(--muted); font-size:12px; margin-left:54px}
.error{color:var(--error); font-weight:700; font-size:13px; margin-left:54px}
.summary{position:sticky;top:16px}
.price{font-size:clamp(28px,4vw,40px);font-weight:800}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.mix-note{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}


/* icon badges for social logos (white background, rounded) */
.icon-badge{background:transparent;border-radius:12px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.icon-badge.big{padding:0;border-radius:16px}
.social .icon-badge svg{width:24px;height:24px}
.banner-icons .icon-badge svg{width:64px;height:64px}


/* Upload sections */
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.drop{border:2px dashed var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:140px;background:#0e1116}
.drop.drag{border-color:var(--accent);background:#0f1420}
.drop-title{font-weight:700}
.drop-hint{color:var(--muted);font-size:13px}
.btn{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:#111827;color:var(--fg);cursor:pointer}
.status{font-size:14px;margin-top:8px}
.status.ok{color:#10b981;font-weight:700} /* green */
.status.warn{color:#ef4444;font-weight:700} /* red */
.file-meta{color:var(--muted);font-size:12px}
@media (max-width: 800px){
  .upload-grid{grid-template-columns:1fr}
}

.icon-contrast svg{filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));}