/* ================================================================
   animations.css — Codeisa
   Modern Design System v2: design tokens, keyframes, motion,
   hover/focus states, transitions.
   ================================================================ */

  <style id="modern-design-v2">
    /* ---------- Design tokens ---------- */
    :root{
      --c-bg-0: #07061a;
      --c-bg-1: #0d0a2b;
      --c-bg-2: #1a0d3d;
      --c-bg-3: #0a0820;
      --c-accent-1: #818cf8;   /* indigo-400 */
      --c-accent-2: #c084fc;   /* purple-400 */
      --c-accent-3: #f472b6;   /* pink-400 */
      --c-accent-4: #22d3ee;   /* cyan-400 */
      --c-success: #34d399;
      --c-warn: #fbbf24;
      --c-danger: #f87171;
      --c-text: #f8fafc;
      --c-text-muted: #cbd5e1;
      --c-text-dim: #94a3b8;
      --c-border: rgba(255,255,255,0.10);
      --c-border-strong: rgba(255,255,255,0.18);
      --c-surface: rgba(255,255,255,0.045);
      --c-surface-hover: rgba(255,255,255,0.08);
      --shadow-soft: 0 6px 20px rgba(0,0,0,0.18);
      --shadow-md: 0 14px 36px rgba(0,0,0,0.32);
      --shadow-glow: 0 0 28px rgba(139,92,246,0.22);
      --radius-sm: 12px;
      --radius-md: 16px;
      --radius-lg: 22px;
      --radius-xl: 28px;
      --ease-out: cubic-bezier(.22,.61,.36,1);
    }

    /* ---------- Body background (overrides body class) ---------- */
    html, body { background: transparent !important; }
    body{
      position: relative;
      background:
        radial-gradient(1100px 700px at 12% -10%, rgba(99,102,241,0.28), transparent 60%),
        radial-gradient(900px 600px at 90% 0%, rgba(168,85,247,0.22), transparent 55%),
        radial-gradient(800px 600px at 50% 110%, rgba(236,72,153,0.18), transparent 60%),
        linear-gradient(180deg, var(--c-bg-0) 0%, var(--c-bg-1) 50%, var(--c-bg-3) 100%) !important;
      background-attachment: fixed !important;
      color: var(--c-text) !important;
      min-height: 100vh;
    }
    /* subtle animated noise / aurora overlay */
    body::before{
      content:"";
      position: fixed; inset:0;
      background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.06), transparent 60%),
        radial-gradient(2px 2px at 70% 70%, rgba(255,255,255,0.05), transparent 60%),
        radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.04), transparent 60%);
      pointer-events:none;
      z-index:0;
    }
    body::after{
      content:"";
      position: fixed; inset:-20%;
      background:
        conic-gradient(from 180deg at 50% 50%, rgba(99,102,241,0.06), rgba(168,85,247,0.05), rgba(236,72,153,0.04), rgba(99,102,241,0.06));
      filter: blur(80px);
      opacity:.55;
      pointer-events:none;
      animation: aurora-spin 30s linear infinite;
      z-index:0;
    }
    @keyframes aurora-spin { to { transform: rotate(360deg); } }
    #app{ position: relative; z-index: 1; }

    /* ---------- Glass cards (refined) ---------- */
    .glass{
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
      backdrop-filter: blur(22px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
      border: 1px solid var(--c-border) !important;
      box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.06);
      border-radius: var(--radius-lg);
      transition: transform .35s var(--ease-out), border-color .25s ease, box-shadow .35s ease, background .25s ease;
    }
    .glass:hover{
      border-color: var(--c-border-strong) !important;
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .glass-dark{
      background: linear-gradient(180deg, rgba(7,4,28,0.7), rgba(7,4,28,0.55)) !important;
      backdrop-filter: blur(28px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
      border-bottom: 1px solid var(--c-border) !important;
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    }

    /* ---------- Header (modernized) ---------- */
    header.glass-dark{
      padding: 14px 20px !important;
    }
    header h1#site-title{
      font-weight: 800 !important;
      letter-spacing: -0.02em;
      font-size: 22px !important;
      background: linear-gradient(120deg, #c7d2fe 0%, #e9d5ff 35%, #fbcfe8 70%, #c7d2fe 100%) !important;
      background-size: 200% 100%;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      animation: title-shimmer 6s ease-in-out infinite;
    }
    @keyframes title-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .site-logo{
      box-shadow: 0 8px 24px rgba(139,92,246,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
      border: 1px solid rgba(255,255,255,0.18);
    }
    #online-status{
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(16,185,129,0.10);
      border: 1px solid rgba(16,185,129,0.28);
      font-weight: 600;
    }
    #online-status .blink{ box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }

    /* ---------- Navigation (pills) ---------- */
    nav{
      padding: 14px 16px 6px !important;
    }
    nav .nav-btn{
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      border-radius: 14px !important;
      padding: 10px 16px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      color: rgba(255,255,255,0.78) !important;
      transition: all .25s var(--ease-out) !important;
      backdrop-filter: blur(8px);
      position: relative;
      overflow: hidden;
    }
    nav .nav-btn::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(135deg, rgba(99,102,241,0.0), rgba(168,85,247,0.0));
      transition: opacity .25s ease;
      opacity:0;
      pointer-events:none;
    }
    nav .nav-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(168,85,247,0.4) !important;
      color: #fff !important;
      box-shadow: 0 8px 22px rgba(99,102,241,0.18);
    }
    nav .nav-btn.active{
      background: linear-gradient(135deg, rgba(99,102,241,0.7), rgba(168,85,247,0.7), rgba(236,72,153,0.55)) !important;
      border-color: rgba(255,255,255,0.28) !important;
      color: #fff !important;
      box-shadow: 0 10px 26px rgba(139,92,246,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
      transform: translateY(-1px);
    }
    nav .nav-btn.active::after{
      content:"";
      position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
      width:24px; height:3px; border-radius:99px;
      background: linear-gradient(90deg, #818cf8, #f472b6);
      box-shadow: 0 0 12px rgba(168,85,247,0.7);
    }

    /* ---------- Section headings ---------- */
    main h2{
      font-weight: 800 !important;
      letter-spacing: -0.01em;
      font-size: 22px !important;
      background: linear-gradient(120deg, #ffffff 0%, #e0e7ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ---------- Inputs (refined) ---------- */
    .input,
    input[type="text"], input[type="number"], input[type="search"], input[type="email"], select, textarea{
      background: rgba(7,4,28,0.55) !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      color: var(--c-text) !important;
      border-radius: 14px !important;
      transition: border-color .2s ease, box-shadow .25s ease, background .25s ease !important;
    }
    .input::placeholder, input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.4) !important; }
    .input:focus, input:focus, select:focus, textarea:focus{
      border-color: rgba(168,85,247,0.7) !important;
      box-shadow: 0 0 0 4px rgba(168,85,247,0.18) !important;
      background: rgba(7,4,28,0.75) !important;
    }

    /* ---------- Buttons (universal upgrade) ---------- */
    button:not(.nav-btn):not(.calc-btn):not(.banking-tab):not(.pill):not(.btn-mini):not(.opt):not(.psy-surface .btn):not(.tab-btn){
      transition: transform .15s var(--ease-out), box-shadow .25s ease, filter .25s ease;
    }
    button:not(.nav-btn):not(.calc-btn):not(.banking-tab):not(.pill):not(.btn-mini):not(.opt):not(.psy-surface .btn):not(.tab-btn):active{
      transform: scale(0.97);
    }
    .calc-btn{
      border-radius: 16px !important;
      font-weight: 700 !important;
      transition: all .15s var(--ease-out) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.18);
    }
    .calc-btn:hover{
      filter: brightness(1.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 20px rgba(99,102,241,0.25);
    }
    .calc-btn:active{ transform: scale(.93) !important; }

    /* ---------- Banking tabs ---------- */
    .banking-tab{
      transition: all .25s var(--ease-out);
      border-radius: 14px !important;
    }
    .banking-tab.active{
      background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(168,85,247,0.5)) !important;
      border-color: rgba(168,85,247,0.6) !important;
      box-shadow: 0 8px 20px rgba(139,92,246,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
    }

    /* ---------- Crypto cards refinement ---------- */
    .crypto-card{
      transition: transform .35s var(--ease-out), box-shadow .35s ease !important;
    }
    .crypto-card:hover{
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(99,102,241,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
    }

    /* ---------- Status dots/pills ---------- */
    .blink{
      box-shadow: 0 0 0 4px currentColor;
      filter: drop-shadow(0 0 6px currentColor);
      opacity: .85;
    }

    /* ---------- Scrollbar (Persian/RTL friendly) ---------- */
    *::-webkit-scrollbar{ width: 10px; height: 10px; }
    *::-webkit-scrollbar-track{ background: rgba(255,255,255,0.04); border-radius: 99px; }
    *::-webkit-scrollbar-thumb{
      background: linear-gradient(180deg, rgba(139,92,246,.5), rgba(99,102,241,.5));
      border-radius: 99px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover{
      background: linear-gradient(180deg, rgba(139,92,246,.75), rgba(99,102,241,.75));
      background-clip: padding-box;
      border: 2px solid transparent;
    }

    /* ---------- Pills ---------- */
    .pill{
      transition: all .25s var(--ease-out);
      border-radius: 999px !important;
    }
    .pill.active{
      background: linear-gradient(135deg, rgba(99,102,241,.6), rgba(168,85,247,.6)) !important;
      border-color: rgba(168,85,247,0.6) !important;
      box-shadow: 0 6px 18px rgba(139,92,246,0.35);
    }

    /* ---------- Focus visible (accessibility) ---------- */
    button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
      outline: 2px solid rgba(168,85,247,0.65);
      outline-offset: 2px;
      border-radius: 12px;
    }

    /* ---------- Subtle entrance animation for sections ---------- */
    main section:not(.hidden){
      animation: section-in .45s var(--ease-out);
    }
    @keyframes section-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ---------- Better cards inside sections ---------- */
    main .glass{
      padding: 18px;
    }
    @media (min-width: 768px){
      main .glass{ padding: 22px; }
    }

    /* ---------- Wider layout on large screens ---------- */
    @media (min-width: 1024px){
      #app { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; }
    }
    @media (min-width: 1280px){
      #app { max-width: 1280px !important; }
    }

    /* ---------- Selection ---------- */
    ::selection{ background: rgba(168,85,247,0.45); color: #fff; }

    /* ---------- Smooth section transitions ---------- */
    section{ scroll-margin-top: 90px; }

    /* ---------- Fix: keep tailwind text colors but slightly cleaner ---------- */
    .text-gray-300, .text-gray-400 { color: var(--c-text-muted) !important; }
    .text-gray-500 { color: var(--c-text-dim) !important; }

    /* ---------- Numeric digits font (mono everywhere they appear) ---------- */
    .mono, [class*="tabular"]{ font-variant-numeric: tabular-nums; }

    /* ---------- Better dropdown menus ---------- */
    .unit-menu, #conv-type-menu, #from-unit-menu, #to-unit-menu{
      background: linear-gradient(180deg, rgba(13,10,43,0.98), rgba(7,4,28,0.98)) !important;
      border: 1px solid rgba(168,85,247,0.25) !important;
      border-radius: var(--radius-md) !important;
      box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
    }

    /* ---------- Mobile polish ---------- */
    @media (max-width: 640px){
      header.glass-dark{ padding: 12px 16px !important; }
      header h1#site-title{ font-size: 19px !important; }
      nav .nav-btn{ padding: 9px 14px !important; font-size: 12.5px !important; }
      main h2{ font-size: 19px !important; }
      .site-logo{ width: 38px !important; height: 38px !important; }
    }

    /* ---------- Print/PDF ---------- */
    @media print{
      body::before, body::after { display:none !important; }
    }

    /* ---------- Mini buttons (table actions) refinement ---------- */
    .btn-mini{
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      border-radius: 12px !important;
      transition: all .2s var(--ease-out);
    }
    .btn-mini:hover{
      background: linear-gradient(180deg, rgba(168,85,247,0.18), rgba(99,102,241,0.12)) !important;
      border-color: rgba(168,85,247,0.35) !important;
      transform: translateY(-1px);
    }

    /* ---------- Forecast strip prettier ---------- */
    .forecast-strip{ padding-bottom: 8px; }
    .forecast-strip > *{ flex-shrink: 0; }

    /* ---------- Subtle floating shapes (decorative, behind content) ---------- */
    .deco-blob{
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .35;
      pointer-events: none;
      z-index: 0;
    }
    .deco-blob.b1{ width: 380px; height: 380px; top: 5%; right: -100px; background: #6366f1; animation: blob-1 18s ease-in-out infinite; }
    .deco-blob.b2{ width: 320px; height: 320px; bottom: 10%; left: -80px; background: #a855f7; animation: blob-2 22s ease-in-out infinite; }
    .deco-blob.b3{ width: 260px; height: 260px; top: 50%; left: 30%; background: #ec4899; opacity:.22; animation: blob-3 26s ease-in-out infinite; }
    @keyframes blob-1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.05)} }
    @keyframes blob-2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.07)} }
    @keyframes blob-3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,40px) scale(1.04)} }
    @media (max-width: 768px){
      .deco-blob{ opacity:.22; }
      .deco-blob.b3{ display:none; }
    }
  </style>


  <!-- ===== PREMIUM UPGRADE v3 STYLES ===== -->