/* ═══════════════════════════════════════════════════════════════
   glass-theme.css  –  Prismatic Glass UI
   يُحمَّل آخر شيء في كل صفحة، يـoverride كل الثيمات القديمة
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── 1. CSS Variables ─────────────────────────────────────────── */
:root {
  /* Background */
  --g-bg-1:   #050810;
  --g-bg-2:   #080d1a;

  /* Glass layers */
  --g-glass-1:  rgba(255,255,255,.055);
  --g-glass-2:  rgba(255,255,255,.08);
  --g-glass-3:  rgba(255,255,255,.11);

  /* Borders */
  --g-border:   rgba(255,255,255,.10);
  --g-border-2: rgba(255,255,255,.17);

  /* Text */
  --g-text:     rgba(230,238,255,.94);
  --g-muted:    rgba(180,196,230,.60);
  --g-sub:      rgba(150,170,210,.50);

  /* Accents — Prismatic */
  --g-blue:     #4f9dff;
  --g-cyan:     #22d3ee;
  --g-purple:   #a78bfa;
  --g-pink:     #f472b6;
  --g-green:    #34d399;
  --g-amber:    #fbbf24;
  --g-red:      #f87171;

  /* Glow */
  --g-glow-blue:   rgba(79,157,255,.28);
  --g-glow-purple: rgba(167,139,250,.22);
  --g-glow-cyan:   rgba(34,211,238,.20);

  /* Blur */
  --g-blur:     blur(20px) saturate(180%);
  --g-blur-sm:  blur(12px) saturate(160%);

  /* Radii */
  --g-r:   20px;
  --g-r2:  14px;
  --g-r3:  10px;

  /* Shadow */
  --g-shadow:    0 24px 80px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.25);
  --g-shadow-sm: 0 8px 32px rgba(0,0,0,.35);

  /* Typography */
  --g-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --g-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Transitions */
  --g-ease: cubic-bezier(.22,1,.36,1);
  --g-fast: .15s var(--g-ease);
  --g-mid:  .25s var(--g-ease);
}

/* Light theme tokens */
:root[data-theme="light"] {
  --g-bg-1:     #eef2ff;
  --g-bg-2:     #f0f4ff;
  --g-glass-1:  rgba(255,255,255,.62);
  --g-glass-2:  rgba(255,255,255,.75);
  --g-glass-3:  rgba(255,255,255,.85);
  --g-border:   rgba(100,130,200,.14);
  --g-border-2: rgba(100,130,200,.22);
  --g-text:     rgba(10,18,50,.90);
  --g-muted:    rgba(30,50,120,.58);
  --g-sub:      rgba(30,50,120,.42);
  --g-glow-blue:   rgba(79,157,255,.15);
  --g-glow-purple: rgba(167,139,250,.12);
  --g-shadow:    0 24px 60px rgba(80,100,180,.18), 0 4px 16px rgba(0,0,0,.08);
  --g-shadow-sm: 0 6px 24px rgba(80,100,180,.14);
}

/* ── 2. Global reset & base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--g-font);
  color: var(--g-text);
  min-height: 100vh;
}

body {
  background:
    radial-gradient(ellipse 80vw 60vh at 15% -5%,  rgba(79,157,255,.18) 0%, transparent 55%),
    radial-gradient(ellipse 70vw 55vh at 85% 10%,  rgba(167,139,250,.16) 0%, transparent 55%),
    radial-gradient(ellipse 90vw 40vh at 50% 90%,  rgba(34,211,238,.12) 0%, transparent 60%),
    linear-gradient(170deg, var(--g-bg-1) 0%, var(--g-bg-2) 100%);
  background-attachment: fixed;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80vw 60vh at 15% -5%,  rgba(79,157,255,.12) 0%, transparent 55%),
    radial-gradient(ellipse 70vw 55vh at 85% 10%,  rgba(167,139,250,.10) 0%, transparent 55%),
    radial-gradient(ellipse 90vw 40vh at 50% 90%,  rgba(34,211,238,.08) 0%, transparent 60%),
    linear-gradient(170deg, var(--g-bg-1) 0%, var(--g-bg-2) 100%);
  background-attachment: fixed;
}

/* Noise texture overlay for depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

a { color: inherit; text-decoration: none; }

/* ── 3. Shell / Topbar ────────────────────────────────────────── */
#wmShell { position: relative; z-index: 100; }

.wm-topbar {
  position: sticky;
  top: 0;
  z-index: 999;
}

.wm-wrap {
  margin: 10px 12px 0 !important;
  border-radius: var(--g-r) !important;
  border: 1px solid var(--g-border-2) !important;
  background: var(--g-glass-2) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: var(--g-shadow), 0 0 0 1px rgba(255,255,255,.04) inset !important;
  transition: background var(--g-mid), border-color var(--g-mid) !important;
}

.wm-nav {
  margin: 8px 12px 10px !important;
  border-radius: var(--g-r) !important;
  border: 1px solid var(--g-border) !important;
  background: var(--g-glass-1) !important;
  backdrop-filter: var(--g-blur-sm) !important;
  -webkit-backdrop-filter: var(--g-blur-sm) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.20) !important;
}

.wm-nav a {
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: var(--g-muted) !important;
  transition: all var(--g-fast) !important;
  position: relative;
}
.wm-nav a:hover {
  color: var(--g-text) !important;
  background: var(--g-glass-2) !important;
  border-color: var(--g-border-2) !important;
}
.wm-nav a.active {
  color: var(--g-text) !important;
  background: linear-gradient(135deg, rgba(79,157,255,.2), rgba(167,139,250,.18)) !important;
  border: 1px solid rgba(79,157,255,.35) !important;
  box-shadow: 0 0 20px rgba(79,157,255,.15) !important;
}

.wm-logo {
  background:
    radial-gradient(80% 90% at 25% 20%, rgba(79,157,255,.7) 0%, transparent 55%),
    radial-gradient(80% 80% at 75% 70%, rgba(167,139,250,.65) 0%, transparent 56%),
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.04)) !important;
  border-color: rgba(79,157,255,.3) !important;
  box-shadow: 0 0 30px rgba(79,157,255,.25), 0 8px 20px rgba(0,0,0,.3) !important;
}

.wm-iconbtn {
  border-color: var(--g-border) !important;
  background: var(--g-glass-1) !important;
  backdrop-filter: var(--g-blur-sm) !important;
  color: var(--g-text) !important;
  font-family: var(--g-font) !important;
  transition: all var(--g-fast) !important;
}
.wm-iconbtn:hover {
  background: var(--g-glass-2) !important;
  border-color: var(--g-border-2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
}

.wm-drawer {
  background: rgba(5,8,16,.95) !important;
  backdrop-filter: var(--g-blur) !important;
  border-left: 1px solid var(--g-border-2) !important;
}
:root[data-theme="light"] .wm-drawer {
  background: rgba(238,242,255,.97) !important;
}
.wm-drawer-nav a {
  background: var(--g-glass-1) !important;
  border-color: var(--g-border) !important;
  border-radius: 14px !important;
  transition: all var(--g-fast) !important;
}
.wm-drawer-nav a:hover {
  background: var(--g-glass-2) !important;
  border-color: rgba(79,157,255,.3) !important;
  transform: translateX(-3px) !important;
}
.wm-drawer-nav a.active {
  background: linear-gradient(135deg, rgba(79,157,255,.2), rgba(167,139,250,.18)) !important;
  border-color: rgba(79,157,255,.35) !important;
}

/* ── 4. Universal card / surface ─────────────────────────────── */

/* All card-like elements */
.db-card,
.stock-card, .stock-hero,
.in-card, .out-card, .tr-card,
.users-card, .users-hero,
.al-card,
.rs-card,
.mat-card,
.import-card,
[class*="-hero"],
[class*="-card"] {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  backdrop-filter: var(--g-blur-sm) !important;
  -webkit-backdrop-filter: var(--g-blur-sm) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow-sm) !important;
  transition: box-shadow var(--g-mid), border-color var(--g-mid) !important;
}
[class*="-card"]:hover {
  border-color: var(--g-border-2) !important;
  box-shadow: 0 16px 60px rgba(0,0,0,.4) !important;
}

/* Toolbar sticky bars */
[class*="-toolbar"],
.stock-toolbar {
  background: rgba(5,8,16,.75) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border-bottom: 1px solid var(--g-border) !important;
}
:root[data-theme="light"] [class*="-toolbar"],
:root[data-theme="light"] .stock-toolbar {
  background: rgba(238,242,255,.82) !important;
}

/* ── 5. Inputs & Selects ──────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font-family: var(--g-font) !important;
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text) !important;
  border-radius: var(--g-r3) !important;
  backdrop-filter: var(--g-blur-sm) !important;
  transition: border-color var(--g-fast), box-shadow var(--g-fast), background var(--g-fast) !important;
  outline: none !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: rgba(79,157,255,.55) !important;
  background: rgba(79,157,255,.07) !important;
  box-shadow: 0 0 0 4px rgba(79,157,255,.12) !important;
}

input::placeholder, textarea::placeholder { color: var(--g-sub) !important; }

select option {
  background: #0d1425 !important;
  color: var(--g-text) !important;
}
:root[data-theme="light"] select option {
  background: #fff !important;
  color: #0a1232 !important;
}

/* ── 6. Buttons ───────────────────────────────────────────────── */

button:not(.wm-iconbtn):not(.ai-fab):not(.ai-close):not(.ai-send-btn):not(.ai-mic-btn):not(.stock-alt-btn),
.btn,
[class*="-btn"]:not(.ai-fab):not(.ai-close):not(.ai-send-btn):not(.ai-mic-btn):not(.stock-alt-btn) {
  font-family: var(--g-font) !important;
  border-radius: var(--g-r3) !important;
  border: 1px solid var(--g-border) !important;
  background: var(--g-glass-2) !important;
  color: var(--g-text) !important;
  backdrop-filter: var(--g-blur-sm) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  transition: all var(--g-fast) !important;
}
button:not(.wm-iconbtn):not(.ai-fab):not(.ai-close):not(.ai-send-btn):not(.ai-mic-btn):not(.stock-alt-btn):hover,
.btn:hover {
  background: var(--g-glass-3) !important;
  border-color: var(--g-border-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}

/* Danger buttons */
.btn.danger,
button.danger {
  border-color: rgba(248,113,113,.35) !important;
  background: rgba(248,113,113,.1) !important;
  color: var(--g-red) !important;
}
.btn.danger:hover, button.danger:hover {
  background: rgba(248,113,113,.2) !important;
  border-color: rgba(248,113,113,.5) !important;
}

/* Primary/accent buttons */
.btn.primary, button.primary,
.btn[class*="primary"], .btn-primary {
  background: linear-gradient(135deg, rgba(79,157,255,.35), rgba(167,139,250,.3)) !important;
  border-color: rgba(79,157,255,.45) !important;
  box-shadow: 0 4px 20px rgba(79,157,255,.2) !important;
}

/* ── 7. Tables ────────────────────────────────────────────────── */

table {
  border-collapse: collapse !important;
  width: 100% !important;
}
thead tr {
  background: var(--g-glass-2) !important;
  border-bottom: 1px solid var(--g-border-2) !important;
}
thead th {
  color: var(--g-muted) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
}
tbody tr {
  border-bottom: 1px solid var(--g-border) !important;
  transition: background var(--g-fast) !important;
}
tbody tr:hover {
  background: var(--g-glass-1) !important;
}
tbody td {
  padding: 10px 12px !important;
  font-size: 13px !important;
}

/* ── 8. Badges, Pills, Chips ─────────────────────────────────── */

[class*="-badge"],
[class*="-pill"],
[class*="-chip"],
[class*="-kicker"],
.badge, .pill, .chip, .tag {
  background: var(--g-glass-2) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  backdrop-filter: var(--g-blur-sm) !important;
}

.badge.warn, [class*="warn"] { color: var(--g-amber) !important; border-color: rgba(251,191,36,.25) !important; background: rgba(251,191,36,.1) !important; }
.badge.ok,   [class*="ok"]   { color: var(--g-green) !important; border-color: rgba(52,211,153,.25) !important; background: rgba(52,211,153,.1) !important; }
.badge.bad,  [class*="bad"]  { color: var(--g-red)   !important; border-color: rgba(248,113,113,.25) !important; background: rgba(248,113,113,.1) !important; }
.badge.info                  { color: var(--g-blue)  !important; border-color: rgba(79,157,255,.25) !important; background: rgba(79,157,255,.1) !important; }

/* ── 9. Stock page specifics ──────────────────────────────────── */

.stock-item {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r2) !important;
  backdrop-filter: var(--g-blur-sm) !important;
  transition: all var(--g-fast) !important;
  margin-bottom: 8px !important;
}
.stock-item:hover {
  background: var(--g-glass-2) !important;
  border-color: rgba(79,157,255,.3) !important;
  box-shadow: 0 8px 32px rgba(79,157,255,.1) !important;
  transform: translateY(-1px) !important;
}
.stock-item__title { font-weight: 800 !important; font-size: 14px !important; }
.stock-item__desc  { color: var(--g-muted) !important; font-size: 12px !important; }

.stock-wh {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 8px !important;
  transition: all var(--g-fast) !important;
}
.stock-wh:hover { border-color: var(--g-border-2) !important; }
.stock-wh.zero  { background: rgba(248,113,113,.08) !important; border-color: rgba(248,113,113,.2) !important; }
.stock-wh.zero b { color: var(--g-red) !important; }
.stock-wh.low   { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.2) !important; }
.stock-wh.low b  { color: var(--g-amber) !important; }

.stock-total {
  background: var(--g-glass-2) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 10px !important;
  font-family: var(--g-mono) !important;
  font-weight: 700 !important;
}

/* Stock modal */
.stock-modal__panel {
  background: rgba(5,8,16,.97) !important;
  backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border-2) !important;
  border-radius: var(--g-r) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.65) !important;
}
:root[data-theme="light"] .stock-modal__panel {
  background: rgba(238,242,255,.98) !important;
}
.stock-modal__backdrop {
  backdrop-filter: blur(8px) !important;
  background: rgba(0,0,0,.55) !important;
}

/* ── 10. Dashboard specifics ──────────────────────────────────── */

.db-row {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 12px !important;
  transition: all var(--g-fast) !important;
}
.db-row:hover {
  background: var(--g-glass-2) !important;
  border-color: var(--g-border-2) !important;
}

.db-online .db-row {
  border-color: rgba(52,211,153,.2) !important;
  background: rgba(52,211,153,.06) !important;
}

.db-q {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r2) !important;
  transition: all var(--g-fast) !important;
}
.db-q:hover {
  background: var(--g-glass-2) !important;
  border-color: rgba(79,157,255,.35) !important;
  box-shadow: 0 8px 24px rgba(79,157,255,.12) !important;
  transform: translateY(-2px) !important;
}
.db-q .ic {
  background: var(--g-glass-2) !important;
  border-color: var(--g-border) !important;
}

.db-wh {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r2) !important;
}

/* ── 11. Forms (in / out / transfer / materials) ─────────────── */

[class*="-form"],
[class*="-fields"],
.form-section {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  backdrop-filter: var(--g-blur-sm) !important;
}

.field label,
[class*="-label"] {
  color: var(--g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
}

/* ── 12. Login page ───────────────────────────────────────────── */

.lg-box,
.login-box,
[class*="login-card"],
[class*="login-wrap"] {
  background: var(--g-glass-2) !important;
  border: 1px solid var(--g-border-2) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}

/* ── 13. Modals & Overlays ────────────────────────────────────── */

[class*="-modal__panel"],
[class*="-popup"],
[class*="-overlay"] > div {
  background: rgba(5,8,16,.97) !important;
  backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border-2) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow) !important;
}
:root[data-theme="light"] [class*="-modal__panel"],
:root[data-theme="light"] [class*="-popup"] {
  background: rgba(238,242,255,.98) !important;
}

/* ── 14. Scrollbar ────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--g-border-2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ── 15. Toast notifications ─────────────────────────────────── */

.toast, [class*="-toast"], .wm-toast {
  background: var(--g-glass-3) !important;
  border: 1px solid var(--g-border-2) !important;
  backdrop-filter: var(--g-blur) !important;
  border-radius: var(--g-r2) !important;
  box-shadow: var(--g-shadow) !important;
  color: var(--g-text) !important;
}

/* ── 16. Hero sections typography ────────────────────────────── */

[class*="-title"],
h1, h2, h3 {
  font-family: var(--g-font) !important;
  letter-spacing: .2px;
}

[class*="-kicker"] {
  background: var(--g-glass-2) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-blue) !important;
  font-size: 11px !important;
  letter-spacing: .5px !important;
}

[class*="-sub"] {
  color: var(--g-muted) !important;
  line-height: 1.75 !important;
}

/* Profile chips */
[class*="-profile"],
[class*="-meta"] > div,
[class*="-chip"] {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r2) !important;
  backdrop-filter: var(--g-blur-sm) !important;
}

/* Avatar */
[class*="-avatar"] {
  background: linear-gradient(135deg, rgba(79,157,255,.3), rgba(167,139,250,.25)) !important;
  border: 1px solid rgba(79,157,255,.3) !important;
  box-shadow: 0 0 20px rgba(79,157,255,.15) !important;
}

/* ── 17. Status dot ───────────────────────────────────────────── */
.dot {
  background: var(--g-green) !important;
  box-shadow: 0 0 0 4px rgba(52,211,153,.2), 0 0 12px rgba(52,211,153,.4) !important;
  animation: dotBreath 2s ease-in-out infinite !important;
}
@keyframes dotBreath {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,.2), 0 0 10px rgba(52,211,153,.3); }
  50%       { box-shadow: 0 0 0 5px rgba(52,211,153,.15), 0 0 18px rgba(52,211,153,.4); }
}

/* ── 18. Alerts page ─────────────────────────────────────────── */

.al-row, [class*="al-item"] {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r2) !important;
  transition: all var(--g-fast) !important;
}
.al-row:hover { background: var(--g-glass-2) !important; border-color: rgba(251,191,36,.3) !important; }

/* ── 19. Users page ──────────────────────────────────────────── */

.users-row, [class*="user-row"], [class*="users-item"] {
  background: var(--g-glass-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r2) !important;
  transition: all var(--g-fast) !important;
}

/* ── 20. Count / Excel page ──────────────────────────────────── */

[class*="count-"] td,
[class*="count-"] th {
  border-color: var(--g-border) !important;
}
[class*="count-"] tr:hover td {
  background: var(--g-glass-1) !important;
}

/* ── 21. Page-load animation ─────────────────────────────────── */

.wm-page,
[class*="-page"] > *,
#wmShell + * > * {
  animation: fadeSlideIn .4s var(--g-ease) both;
}
.wm-page > *:nth-child(1) { animation-delay: .05s; }
.wm-page > *:nth-child(2) { animation-delay: .10s; }
.wm-page > *:nth-child(3) { animation-delay: .15s; }
.wm-page > *:nth-child(4) { animation-delay: .20s; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 22. Selection ────────────────────────────────────────────── */

::selection {
  background: rgba(79,157,255,.3);
  color: #fff;
}

/* ── 23. Focus ring ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid rgba(79,157,255,.6) !important;
  outline-offset: 2px !important;
}

/* ── 24. Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .wm-wrap { margin: 8px 8px 0 !important; border-radius: 14px !important; }
  .wm-nav  { margin: 6px 8px 8px !important; border-radius: 14px !important; }
}