/* unit-style.css - colorful and attractive theme for Unit Converter */

:root{
  --bg1: #ffecd2;
  --bg2: #fcb69f;
  --card-bg: #ffffff;
  --accent: #6C63FF;
  --muted: #6b7280;
  --success: #10b981;
}

/* Reset & layout */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#0f172a}
.uw-converter{padding:40px 16px}
.uw-wrap{max-width:1100px;margin:0 auto;background:var(--card-bg);border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(15,23,42,.12)}

/* Header */
.uw-header h1{margin:0;font-size:28px;color:var(--accent)}
.uw-lead{margin-top:6px;color:var(--muted);font-size:15px}

/* Controls grid */
.uw-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.uw-row{display:flex;flex-direction:column}
.uw-row label{font-weight:600;margin-bottom:6px;color:#111827}
.uw-row select,.uw-row input{padding:10px;border-radius:10px;border:1px solid #e6e9ee;font-size:15px;outline:none}
.uw-row input[type=number]{-moz-appearance:textfield}
.uw-row input::-webkit-outer-spin-button, .uw-row input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}

/* Actions */
.uw-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.uw-btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(108,99,255,.18)}
.uw-ghost{background:transparent;color:var(--accent);border:1px solid rgba(108,99,255,.12);box-shadow:none}

/* Result */
.uw-result{margin-top:20px;padding:16px;border-radius:10px;background:linear-gradient(180deg,rgba(108,99,255,.06),rgba(108,99,255,.02));display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.uw-result__value{font-size:20px;font-weight:800;color:#0f172a}
.uw-result__meta{color:var(--muted);font-size:14px}

/* info section */
.uw-info{margin-top:16px;border-radius:10px;padding:12px;background:#fafafa;border:1px solid #f0f0f2}
.uw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;font-size:14px;color:#374151;margin-top:10px}

/* Footer */
.uw-footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}

/* Responsive */
@media (max-width:700px){
  .uw-wrap{padding:18px}
  .uw-header h1{font-size:22px}
  .uw-actions{justify-content:flex-start}
}