/* ==========================================================
   محوّل الوحدات — ستايل الأداة
   كل الأصناف تبدأ بالبادئة uc- حتى لا يحدث أي تعارض مع style.css
   نفس ألوان وخطوط الموقع (Tokens) منسوخة هنا كمتغيّرات محلية
   ========================================================== */
.uc-body{
  --uc-bg-top:#E9F1F6; --uc-bg-bottom:#C8DAE5;
  --uc-ink:#1E2F40; --uc-ink-soft:#64768A;
  --uc-card:#FFFFFF; --uc-accent:#2F5770; --uc-accent-soft:#E3EEF4;
  --uc-line:rgba(30,47,64,.10);
  --uc-radius:20px; --uc-shadow:0 16px 34px rgba(21,36,49,.10);
  --uc-w:80%;

  margin:0; min-height:100vh;
  background:linear-gradient(160deg,var(--uc-bg-top) 0%,var(--uc-bg-bottom) 100%) fixed;
  color:var(--uc-ink);
  font-family:'Tajawal',sans-serif;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] .uc-body{ font-family:'Inter',sans-serif; }
.uc-page, .uc-page *{ box-sizing:border-box; }
.uc-page{ padding-bottom:60px; }

/* ---------- الشريط العلوي ---------- */
.uc-topbar{
  width:var(--uc-w); margin-inline:auto;
  padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.uc-brand{
  font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem;
  color:var(--uc-ink); text-decoration:none; white-space:nowrap;
}
.uc-actions{ display:flex; align-items:center; gap:10px; }
.uc-icon-btn{
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--uc-line); background:var(--uc-card); color:var(--uc-ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; font-family:inherit;
  box-shadow:0 2px 8px rgba(21,36,49,.06);
  transition:background .15s ease, transform .15s ease, color .15s ease;
}
.uc-icon-btn svg{ width:19px; height:19px; }
.uc-icon-btn:hover{ background:var(--uc-accent-soft); transform:translateY(-2px); }
.uc-lang{ font-weight:700; font-size:.78rem; }

/* ---------- المحتوى: 80% من الصفحة ---------- */
.uc-wrap{ width:var(--uc-w); margin:26px auto 0; }

.uc-head{ margin-bottom:22px; }
.uc-head h1{ margin:0 0 6px; font-size:2rem; font-weight:800; letter-spacing:-.2px; }
.uc-head p{ margin:0; color:var(--uc-ink-soft); font-size:1rem; }

/* ---------- الفئات ---------- */
.uc-cats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.uc-cat{
  border:1px solid var(--uc-line); background:var(--uc-card); color:var(--uc-ink);
  border-radius:999px; padding:10px 20px; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:700;
  box-shadow:0 2px 8px rgba(21,36,49,.05);
  transition:all .15s ease;
}
.uc-cat:hover{ background:var(--uc-accent-soft); transform:translateY(-2px); }
.uc-cat.active{
  background:var(--uc-accent); border-color:var(--uc-accent); color:#fff;
  box-shadow:0 8px 18px rgba(47,87,112,.28);
}

/* ---------- بطاقة التحويل ---------- */
.uc-card{
  background:var(--uc-card); border-radius:var(--uc-radius); box-shadow:var(--uc-shadow);
  padding:26px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
}
.uc-panel{
  background:#F4F8FB; border:1px solid var(--uc-line); border-radius:16px;
  padding:18px 20px; display:flex; flex-direction:column; gap:12px; min-width:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.uc-panel:focus-within{ border-color:var(--uc-accent); box-shadow:0 0 0 4px rgba(47,87,112,.12); }
.uc-panel-out{ background:var(--uc-accent-soft); }
.uc-label{ font-size:.82rem; font-weight:700; color:var(--uc-ink-soft); }

.uc-input, .uc-output{
  width:100%; min-height:58px; border:none; outline:none; background:transparent;
  font-family:'Inter','Tajawal',sans-serif; font-size:2.1rem; font-weight:700;
  color:var(--uc-ink); padding:0; direction:ltr; text-align:start;
  overflow-wrap:anywhere; line-height:1.3;
  display:flex; align-items:center;
}
[dir="rtl"] .uc-input{ text-align:right; }
[dir="rtl"] .uc-output{ justify-content:flex-end; }
.uc-input{ display:block; }
.uc-output{ cursor:pointer; color:var(--uc-accent); }

.uc-select{
  width:100%; appearance:none; -webkit-appearance:none;
  border:1px solid var(--uc-line); border-radius:12px; background-color:#fff;
  padding:12px 14px; padding-inline-end:38px;
  font-family:inherit; font-size:1rem; font-weight:600; color:var(--uc-ink);
  cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5770' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:18px;
  background-position:left 12px center;
}
[dir="rtl"] .uc-select{ background-position:left 12px center; }
[dir="ltr"] .uc-select{ background-position:right 12px center; }
.uc-select:focus{ border-color:var(--uc-accent); }

.uc-swap{
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:var(--uc-accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(47,87,112,.30);
  transition:transform .25s ease, box-shadow .15s ease;
}
.uc-swap svg{ width:22px; height:22px; }
.uc-swap:hover{ transform:rotate(180deg); box-shadow:0 10px 22px rgba(47,87,112,.38); }

.uc-formula{
  margin:16px 4px 0; color:var(--uc-ink-soft); font-size:.98rem; font-weight:500;
  direction:ltr; text-align:center; unicode-bidi:plaintext;
}

/* ---------- كل التحويلات ---------- */
.uc-sec-row{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px;
  margin:34px 0 14px;
}
.uc-sec{ margin:0; font-size:1.2rem; font-weight:800; }
.uc-hint{ color:var(--uc-ink-soft); font-size:.85rem; }

.uc-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;
}
.uc-item{
  background:var(--uc-card); border:1px solid var(--uc-line); border-radius:16px;
  padding:14px 16px; cursor:pointer; text-align:start; font-family:inherit; color:inherit;
  display:flex; flex-direction:column; gap:6px; min-width:0;
  box-shadow:0 2px 10px rgba(21,36,49,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.uc-item:hover{ transform:translateY(-3px); box-shadow:var(--uc-shadow); border-color:var(--uc-accent); }
.uc-item.target{ border-color:var(--uc-accent); background:var(--uc-accent-soft); }
.uc-item-name{ font-size:.85rem; font-weight:700; color:var(--uc-ink-soft); }
.uc-item-val{
  font-family:'Inter','Tajawal',sans-serif; font-size:1.2rem; font-weight:700;
  direction:ltr; text-align:start; overflow-wrap:anywhere;
}
[dir="rtl"] .uc-item-val{ text-align:right; }
.uc-item-sym{ font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600; color:var(--uc-accent); direction:ltr; text-align:start; }
[dir="rtl"] .uc-item-sym{ text-align:right; }

/* ---------- إشعار النسخ ---------- */
.uc-toast{
  position:fixed; inset-inline:0; bottom:28px; margin-inline:auto; width:max-content; max-width:90%;
  background:var(--uc-ink); color:#fff; padding:11px 22px; border-radius:999px;
  font-size:.92rem; font-weight:700; box-shadow:0 12px 28px rgba(21,36,49,.28);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:50;
}
.uc-toast.show{ opacity:1; transform:translateY(0); }

/* ---------- الشاشات الصغيرة ---------- */
@media (max-width:900px){
  .uc-body{ --uc-w:94%; }
  .uc-head h1{ font-size:1.6rem; }
}
@media (max-width:720px){
  .uc-card{ grid-template-columns:1fr; padding:18px; gap:12px; }
  .uc-swap{ margin-inline:auto; }
  .uc-swap:hover{ transform:rotate(180deg); }
  .uc-input, .uc-output{ font-size:1.8rem; }
  .uc-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .uc-cat{ padding:9px 16px; font-size:.9rem; }
}