* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --background: hsl(210, 20%, 98%);
      --foreground: hsl(220, 25%, 10%);
      --card: hsl(0, 0%, 100%);
      --primary: hsl(174, 72%, 40%);
      --primary-foreground: hsl(0, 0%, 100%);
      --muted: hsl(210, 15%, 92%);
      --muted-foreground: hsl(220, 10%, 45%);
      --border: hsl(210, 20%, 88%);
      --accent: hsl(174, 60%, 92%);
      --accent-foreground: hsl(174, 72%, 25%);
      --radius: 0.75rem;
      --shadow-card: 0 4px 24px -4px hsla(220, 25%, 10%, 0.08);
    }

    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      background: var(--background);
      color: var(--foreground);
      min-height: 100vh;
    }
    
    .top-bar {
  font-size: 0.8rem;
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.currency-form select {
  background: #000;
  color: #fff;
  border: 1px solid #444;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
}


    /* Header */
    .header {
      background: hsla(0, 0%, 100%, 0.8);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
      height: 64px;
      display: flex;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      background: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-foreground);
    }

    .logo-text {
      font-weight: 600;
      font-size: 1.125rem;
    }

    /* Main */
    .main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1rem;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    @media (min-width: 1024px) {
      .grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
      }
    }

    /* Hero */
    .hero h1 {
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    @media (min-width: 768px) {
      .hero h1 {
        font-size: 3.5rem;
      }
    }

    .hero h1 span {
      color: var(--primary);
    }

    .hero p {
      margin-top: 1.5rem;
      font-size: 1.125rem;
      color: var(--muted-foreground);
      line-height: 1.7;
      max-width: 500px;
    }

    .hero strong {
      color: var(--foreground);
    }

    .features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 2.5rem;
    }

    .feature {
      padding: 1rem;
      background: var(--accent);
      border: 1px solid var(--accent);
      border-radius: var(--radius);
    }

    .feature h3 {
      font-size: 0.875rem;
      font-weight: 600;
    }

    .feature p {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      margin-top: 0.25rem;
    }

    /* Card */
    .card {
      background: var(--card);
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-card);
      border: 1px solid hsla(210, 20%, 88%, 0.5);
    }

    .form-group {
      margin-bottom: 1.25rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
    }

    input, select, textarea {
      width: 100%;
      height: 44px;
      padding: 0 0.75rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 0.875rem;
      background: var(--card);
      color: var(--foreground);
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px hsla(174, 72%, 40%, 0.15);
    }

    textarea {
      height: auto;
      min-height: 60px;
      padding: 0.75rem;
      resize: none;
      font-family: 'JetBrains Mono', monospace;
    }

    /* Preview */
    .preview {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem;
      background: hsla(210, 15%, 92%, 0.5);
      border: 1px solid hsla(210, 20%, 88%, 0.5);
      border-radius: var(--radius);
    }

    .preview code {
      flex: 1;
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.125rem;
      letter-spacing: 0.05em;
    }

    .preview button {
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted-foreground);
      transition: background 0.2s;
    }

    .preview button:hover {
      background: var(--muted);
    }

    /* Generate Button */
    .btn-generate {
      width: 100%;
      height: 48px;
      background: var(--primary);
      color: var(--primary-foreground);
      border: none;
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      box-shadow: 0 4px 12px hsla(174, 72%, 40%, 0.3);
      transition: all 0.2s;
    }

    .btn-generate:hover {
      background: hsl(174, 72%, 35%);
      box-shadow: 0 6px 20px hsla(174, 72%, 40%, 0.4);
    }

    .btn-generate:active {
      transform: scale(0.98);
    }

    /* Results */
    .results {
      margin-top: 1.5rem;
      animation: fadeIn 0.4s ease-out;
    }

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

    .results-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .results-header h3 {
      font-size: 1.125rem;
      font-weight: 600;
    }

    .results-header span {
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--muted-foreground);
      margin-left: 0.5rem;
    }

    .btn-group {
      display: flex;
      gap: 0.5rem;
    }

    .btn-outline {
      height: 36px;
      padding: 0 1rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: inherit;
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.375rem;
      transition: all 0.2s;
    }

    .btn-outline:hover {
      background: var(--accent);
      border-color: var(--accent);
    }

    .codes-list {
      max-height: 256px;
      overflow-y: auto;
      background: hsla(210, 15%, 92%, 0.3);
      border: 1px solid hsla(210, 20%, 88%, 0.3);
      border-radius: var(--radius);
      padding: 1rem;
    }

    .codes-list code {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      color: hsla(220, 25%, 10%, 0.8);
      line-height: 1.6;
    }

    .codes-more {
      font-size: 0.875rem;
      color: var(--muted-foreground);
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid hsla(210, 20%, 88%, 0.3);
    }

    /* Footer */
    .footer {
      border-top: 1px solid var(--border);
      padding: 2rem 1rem;
      margin-top: 5rem;
      text-align: center;
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    .hidden { display: none !important; }
    
    .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.nav a {
  text-decoration: none;
  padding: 10px 15px;
  color: #000;
}

.nav a:hover {
  background: #eee;
}