*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:#0b0e14;color:#e5e7eb}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
.site-header{background:#111827;border-bottom:1px solid #1f2937}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:20px}
.card{background:#111827;border:1px solid #1f2937;border-radius:16px;padding:16px;box-shadow:0 10px 20px rgba(0,0,0,.2)}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.preview{background:#0b1220;border:1px solid #334155;border-radius:14px;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.controls label{display:block;margin-top:8px;margin-bottom:6px}
input,select,button,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:#e2e8f0}
textarea{min-height:110px;resize:vertical}
button{cursor:pointer}
.small{font-size:12px;color:#94a3b8}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.badge{display:inline-block;background:#0b1220;border:1px solid #334155;padding:4px 8px;border-radius:999px;font-size:12px}
.range-wrap{display:flex;align-items:center;gap:10px}
.range-wrap output{min-width:48px;text-align:right}

/* ===== Mobile-friendly improvements ===== */
:root{
  --space:16px;
  --radius:16px;
}
html{-webkit-text-size-adjust:100%}
button,input,select,textarea{font-size:16px; line-height:1.2; touch-action:manipulation}
.preview img{max-width:100%;height:auto;display:block}

@media (max-width: 1024px){
  .grid{grid-template-columns:1fr; gap:14px}
  .preview{min-height:60vh}
}
@media (max-width: 640px){
  .wrap{padding:12px}
  .card{padding:12px;border-radius:14px}
  .row{grid-template-columns:1fr; gap:10px}
  .site-header .wrap{padding:12px}
  .preview{min-height:55vh}
  #btnPreview,#btnExport{width:100%}
  input[type="file"]{padding:12px}
  .range-wrap{gap:12px}
  .range-wrap input[type="range"]{width:100%; height:32px}
}
@media (pointer:coarse){
  select{padding-right:36px}
}

.nav{margin-left:auto}
.nav .badge{text-decoration:none}