@font-face {
      font-family: "Preeti";
      src: url("Preeti.otf") format("opentype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --red: #d61f26;
      --blue: #1a4ba3;
      --white: #ffffff;
      --ink: #101318;
      --muted: #5b667a;
      --bg1: #f7f9ff;
      --bg2: #fff5f5;
      --card: #ffffff;
      --border: #e5e9f3;
      --shadow: 0 20px 40px rgba(16, 19, 24, 0.08);
      --khula-red: #77081e;
      --khula-red-dark: #5b0617;
      --copy-blue: #01214a;
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", "Noto Sans Devanagari", "Mangal", "Kalimati", sans-serif;
      color: var(--ink);
      background: radial-gradient(1200px 600px at 10% -10%, #e9f1ff 0%, transparent 60%),
                  radial-gradient(900px 600px at 90% 10%, #ffe8e8 0%, transparent 60%),
                  linear-gradient(180deg, var(--bg1), var(--bg2));
      min-height: 100vh;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 12px 16px 20px;
    }

    body.embed {
      background: transparent;
      padding: 12px;
    }

    body.embed .app {
      width: 100%;
      max-width: none;
    }

    body.embed .panel {
      box-shadow: none;
    }

    .app {
      width: min(1100px, 100%);
      display: grid;
      gap: 8px;
      margin: 0 auto;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 4px;
    }

    .brand-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .site-logo {
      width: 40%;
      height: auto;
      display: block;
    }


    .title {
      display: grid;
      gap: 6px;
    }

    .title h1 {
      margin: 0;
      font-size: clamp(22px, 4vw, 34px);
      letter-spacing: 0.2px;
    }

    .title p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .tabs {
      display: inline-flex;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .tab {
      border: none;
      padding: 10px 18px;
      font-weight: 600;
      color: var(--blue);
      background: transparent;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab.active {
      color: var(--white);
      background: linear-gradient(135deg, var(--blue), #2a6ed6);
    }

    .panel {
      display: none;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 1px 10px 12px 14px;
      gap: 18px;
      animation: fadeUp 0.35s ease;
    }

    .panel.active {
      display: grid;
    }

    .panel:not(.active) .actions {
      display: none;
    }

    .grid {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    label {
      font-weight: 600;
      display: block;
      margin-bottom: 8px;
    }

    textarea {
      width: 100%;
      min-height: 220px;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid var(--border);
      resize: vertical;
      font-size: 18px;
      line-height: 1.5;
      background: #fafbff;
      color: var(--ink);
    }

    textarea:focus {
      outline: none;
      box-shadow: none;
      border-color: var(--border);
    }

    .preeti-font {
      font-family: "Preeti", "Segoe UI", "Noto Sans Devanagari", "Mangal", "Kalimati", sans-serif;
    }

    textarea[readonly] {
      background: #f2f5fb;
      color: #111827;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .output-box {
      position: relative;
    }

    .copy-overlay {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      background: transparent;
    }

    .output-box textarea {
      padding-top: 48px;
      padding-right: 92px;
    }

    .special-chars {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .char-btn {
      border: 1px solid var(--border);
      background: #f8fafc;
      color: var(--ink);
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 16px;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }

    .char-btn:hover {
      background: #ffffff;
      box-shadow: 0 8px 16px rgba(16, 19, 24, 0.08);
    }

    button.action {
      border-width: 2px;
      border-style: solid;
      border-color: #08494f;
      cursor: pointer;
      padding: 3px 8px;
      border-radius: 999px;
      font-weight: 600;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
      background: transparent;
    }

    button.action:active { transform: translateY(1px); }

    .secondary {
      background: transparent;
      color: var(--khula-red);
      border: 1px solid var(--khula-red);
      box-shadow: none;
    }

    .ghost {
      background: transparent;
      color: var(--copy-blue);
      border: 1px solid var(--copy-blue);
      box-shadow: none;
    }

    .ghost:hover {
      background: var(--copy-blue);
      color: #fff;
    }

    .secondary:hover {
      background: var(--khula-red);
      color: #fff;
    }

    .note {
      font-size: 16px;
      color: var(--muted);
    }

    .status {
      font-size: 16px;
      color: var(--muted);
    }

    .status.copied {
      color: #1a7f37;
      font-weight: 600;
    }

    .status.cleared {
      color: #b42318;
      font-weight: 600;
    }

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

    @media (max-width: 720px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }
      .tabs { width: 100%; }
      .tab { flex: 1; text-align: center; }
    }



    @media (max-width: 480px) {
      body { padding: 16px 10px 24px; }
      .panel { padding: 16px; }
      textarea { min-height: 180px; }
    }