/* ICFF Unit & Time Converter styles (scoped under .icffu-tool) */
.icffu-tool{
  --icffu-ink:#14202e; --icffu-soft:#4a5b6d; --icffu-line:#e3e9f0;
  --icffu-brand:#4f46e5; --icffu-brand-soft:#eef2ff; --icffu-green:#16a34a; --icffu-green-soft:#e9f8ef;
  --icffu-radius:16px; --icffu-shadow:0 1px 3px rgba(20,32,46,.06),0 8px 24px rgba(20,32,46,.06);
  background:#fff;border:1px solid var(--icffu-line);border-radius:var(--icffu-radius);
  box-shadow:var(--icffu-shadow);padding:26px;max-width:640px;margin:0 auto;box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--icffu-ink);line-height:1.6;-webkit-font-smoothing:antialiased;
}
.icffu-tool *{box-sizing:border-box}

/* ---------- shared grid (landscape: from | swap | to) ---------- */
.icffu-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
@media(max-width:520px){.icffu-grid{grid-template-columns:1fr;gap:12px}}
.icffu-cell{min-width:0}
.icffu-cell label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--icffu-soft);margin-bottom:6px}

/* hub/single/timezone common field styling */
.icffu-in,.icffu-out,.icffu-cat,.icffu-fromsel,.icffu-tosel,.icffu-tzfrom,.icffu-tzto,.icffu-tzdate,.icffu-tztime{
  width:100%;padding:12px 14px;border:1px solid var(--icffu-line);border-radius:11px;font-size:16px;font-weight:600;color:var(--icffu-ink);background:#fff;line-height:1.4;height:48px}
select.icffu-cat,select.icffu-fromsel,select.icffu-tosel,select.icffu-tzfrom,select.icffu-tzto{
  font-size:15px;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%234a5b6d'%20stroke-width%3D'2'%3E%3Cpolyline%20points%3D'6%209%2012%2015%2018%209'%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* hub result box (unchanged look: green) */
/* ---------- single & hub converter: big value box with corner symbol ---------- */
.icffu-box{position:relative;border:1px solid var(--icffu-line);border-radius:12px;background:#fff;height:96px;margin-bottom:10px}
.icffu-box .icffu-in,.icffu-box .icffu-out{
  border:none;background:transparent;height:100%;width:100%;text-align:center;
  font-size:34px;font-weight:800;color:var(--icffu-ink);padding:0 14px}
.icffu-box .icffu-in::placeholder,.icffu-box .icffu-out::placeholder{color:#c4ccd6;font-weight:800}
.icffu-boxsym{position:absolute;top:10px;right:14px;font-size:14px;font-weight:700;color:var(--icffu-soft);pointer-events:none}
/* the RESULT box: light gray bg + blue text (like the time-zone result) */
.icffu-outbox{background:#f3f4f6;border-color:#e3e9f0}
.icffu-outbox .icffu-out{color:var(--icffu-brand)}
.icffu-outbox .icffu-boxsym{color:var(--icffu-brand)}
/* result label above the output box */
.icffu-reslabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--icffu-brand);margin-bottom:6px;min-height:16px}

/* single-converter dropdowns sit under each box */
.icffu-single .icffu-fromsel,.icffu-single .icffu-tosel,.icffu-hub .icffu-fromsel,.icffu-hub .icffu-tosel{margin-top:0}

/* ft + in helper row (length only) */
.icffu-ftin{display:flex;gap:8px;margin-top:8px}
.icffu-ftin input{width:100%;padding:9px 12px;border:1px solid var(--icffu-line);border-radius:9px;font-size:14px;font-weight:600;color:var(--icffu-ink)}

/* ---------- swap button (perfectly centered circle in the middle column) ---------- */
.icffu-swap{align-self:start;justify-self:center;margin-top:50px;
  background:#fff;color:var(--icffu-soft);border:1px solid var(--icffu-line);border-radius:50%;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin-left:0;margin-right:0;
  font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-sizing:border-box;flex:0 0 auto;transition:.15s;-webkit-appearance:none;appearance:none;overflow:hidden}
.icffu-swap:hover{background:var(--icffu-brand-soft);color:var(--icffu-brand);border-color:var(--icffu-brand)}
/* hub now matches single layout (label+box); timezone has label+select only */
.icffu-hub .icffu-swap{margin-top:50px}
.icffu-tz .icffu-swap{margin-top:24px}
@media(max-width:520px){.icffu-swap{margin-top:0;width:100%;height:44px;border-radius:11px}}

/* ---------- conversion table ---------- */
.icffu-tablewrap{margin-top:20px;border:1px solid var(--icffu-line);border-radius:12px;padding:16px 18px}
.icffu-tabletitle{font-size:15px;font-weight:800;color:var(--icffu-ink);margin-bottom:10px}
.icffu-trow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid #eef1f5;font-size:14px}
.icffu-trow:first-child{border-top:none}
.icffu-tleft{color:var(--icffu-soft);font-weight:600}
.icffu-tright{color:var(--icffu-ink);font-weight:800}

/* ---------- category row (hub) ---------- */
.icffu-catrow{margin-bottom:16px}
.icffu-catrow label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--icffu-soft);margin-bottom:6px}

/* ---------- timezone: separate date + time, labeled ---------- */
.icffu-tzdatetime-row{display:flex;gap:14px}
@media(max-width:520px){.icffu-tzdatetime-row{flex-direction:column;gap:12px}}
.icffu-tzlabel{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--icffu-soft);margin-bottom:6px}
.icffu-tzresult{margin-top:0;background:#f3f4f6;border:1px solid #e3e9f0;border-radius:12px;padding:18px;text-align:center;font-size:22px;font-weight:800;color:var(--icffu-brand);min-height:30px}
.icffu-tz .icffu-cell label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--icffu-soft);margin-bottom:6px}

.icffu-note{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;font-size:12.5px;color:var(--icffu-soft)}