.w2c{ --radius:14px; --gap:12px; --pad:14px; --border:1px solid rgba(0,0,0,.08); --bg:#fff; }
.w2c{ display:block; background:var(--bg); padding:var(--pad); border:var(--border); border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.04); isolation:isolate; }
.w2c-title{ margin:0 0 .75rem 0; font-size:1.25rem; }

.w2c-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; overflow:visible; }
.w2c-field{ display:flex; flex-direction:column; gap:.35rem; position:relative; overflow:visible; z-index:0; }
.w2c-field span{ font-size:.9rem; color:#334155; }

/* Inputs */
.w2c select,.w2c input{ padding:.6rem .7rem; border:var(--border); border-radius:var(--radius); width:100%; background:#fff; box-shadow:0 0 0 transparent; position:relative; z-index:3; }
.w2c select:focus,.w2c input:focus{ outline:2px solid #60a5fa; outline-offset:0; border-color:#93c5fd; }

/* Make sure native dropdown menus are not clipped by neighbors */
.w2c{ overflow:visible; }
.w2c *{ transform:none !important; } /* avoid accidental stacking contexts from parent blocks */
.w2c .w2c-field, .w2c select{ overflow:visible; }
.w2c select{ -webkit-appearance:menulist; appearance:menulist; }

.w2c-swap{ height:42px; padding:.6rem .7rem; border:var(--border); border-radius:var(--radius); background:#f5f7fb; cursor:pointer; }
.w2c-swap:focus{ outline:2px solid #60a5fa; border-color:#93c5fd; }

.w2c-result{ display:block; margin-top:1rem; padding:var(--pad); border-radius:var(--radius); border:var(--border); font-weight:600; background:#f8fafc; }

.w2c-utils{ display:flex; align-items:center; gap:10px; margin-top:.5rem; }
.w2c-copy{ background:#eef6ff; border:var(--border); border-radius:999px; padding:.4rem .8rem; cursor:pointer; }
.w2c-copy:focus{ outline:2px solid #60a5fa; border-color:#93c5fd; }

@media (max-width:1024px){ .w2c-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px){ .w2c-grid{ grid-template-columns:1fr; } }