:root{
      --bg-top:#78c7ff;
      --bg-mid:#d9efff;
      --bg-bottom:#f8fbff;

      --card:rgba(255,255,255,.88);
      --field-bg:rgba(255,255,255,.94);
      --field-output:rgba(249,253,255,.96);

      --text:#0b1328;
      --label:#18314c;
      --muted:#6f7f95;

      --border:#cfe7fb;
      --border-soft:#dcecf8;

      --primary:#1593ff;
      --primary-hover:#0b7ee5;
      --primary-soft:#eaf6ff;

      --soft:#f4f9fd;
      --success:#16a34a;
      --danger:#dc2626;

      --shadow:0 28px 80px rgba(44,122,182,.16),
               0 4px 14px rgba(21,147,255,.08),
               inset 0 1px 0 rgba(255,255,255,.95);

      --radius:22px;

      --ease:cubic-bezier(.2,.8,.2,1);
      --ease-bounce:cubic-bezier(.34,1.56,.64,1);
    }

    html[data-theme="dark"]{
      --bg-top:#07111f;
      --bg-mid:#0d1d32;
      --bg-bottom:#08111d;

      --card:rgba(12,24,40,.86);
      --field-bg:rgba(12,24,40,.94);
      --field-output:rgba(9,20,34,.96);

      --text:#f3f8ff;
      --label:#d8eaff;
      --muted:#92a8bd;

      --border:#466a84;
      --border-soft:#35566f;

      --primary:#37a8ff;
      --primary-hover:#5bb8ff;
      --primary-soft:#102b43;

      --soft:#102033;
      --success:#49d17d;
      --danger:#ff6b6b;

      --shadow:0 28px 90px rgba(0,0,0,.38),
               0 8px 20px rgba(28,112,170,.14),
               inset 0 1px 0 rgba(255,255,255,.035);
    }

    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      min-height:100vh;
      padding:42px 18px;
      font-family:"Poppins", system-ui, sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.92) 0 12%, rgba(255,255,255,.30) 32%, transparent 58%),
        radial-gradient(circle at 8% 5%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 94% 8%, rgba(255,255,255,.18), transparent 22%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 38%, var(--bg-bottom) 76%);
      background-attachment:fixed;
      position:relative;
      overflow-x:hidden;

      transition:
        background 700ms var(--ease),
        color 450ms var(--ease);
    }

    html[data-theme="dark"] body{
      background:
        radial-gradient(circle at 50% 12%, rgba(36,132,208,.20) 0 10%, rgba(16,66,104,.10) 30%, transparent 55%),
        radial-gradient(circle at 5% 5%, rgba(34,128,202,.14), transparent 24%),
        radial-gradient(circle at 95% 7%, rgba(49,151,227,.12), transparent 22%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 46%, var(--bg-bottom) 100%);
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      transition:
        opacity 500ms var(--ease),
        transform 850ms var(--ease),
        border-color 500ms var(--ease),
        box-shadow 500ms var(--ease);
    }

    body::before{
      width:420px;
      height:420px;
      top:-170px;
      left:-120px;
      border:1px solid rgba(255,255,255,.5);
      box-shadow:
        0 0 0 60px rgba(255,255,255,.06),
        0 0 0 120px rgba(255,255,255,.04);
      opacity:.35;
    }

    body::after{
      width:500px;
      height:500px;
      top:-210px;
      right:-180px;
      border:1px solid rgba(255,255,255,.42);
      box-shadow:
        0 0 0 65px rgba(255,255,255,.05),
        0 0 0 130px rgba(255,255,255,.035);
      opacity:.32;
    }

    html[data-theme="dark"] body::before,
    html[data-theme="dark"] body::after{
      border-color:rgba(72,166,235,.15);
      box-shadow:
        0 0 0 60px rgba(56,141,205,.025),
        0 0 0 120px rgba(56,141,205,.02);
      opacity:.22;
      transform:scale(1.06);
    }

    .app{
      width:min(1180px, 100%);
      margin:0 auto;
      position:relative;
      z-index:1;

      animation:pageIn 700ms var(--ease) both;
    }

    .topbar{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      margin-bottom:12px;
      position:relative;
      z-index:20;
    }

    .theme-toggle{
      position:relative;
      width:82px;
      height:42px;
      border:1px solid #a9d7f8;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      box-shadow:
        0 10px 30px rgba(33,115,176,.18),
        inset 0 1px 0 rgba(255,255,255,.98);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      cursor:pointer;
      padding:0;
      overflow:hidden;
      isolation:isolate;

      transition:
        background 420ms var(--ease),
        border-color 420ms var(--ease),
        box-shadow 420ms var(--ease),
        transform 160ms var(--ease);
    }

    .theme-toggle:hover{
      transform:translateY(-2px);
      border-color:#74bdf2;
      box-shadow:
        0 14px 34px rgba(33,115,176,.24),
        inset 0 1px 0 rgba(255,255,255,1);
    }

    .theme-toggle:focus-visible{
      outline:none;
      box-shadow:
        0 0 0 4px rgba(21,147,255,.18),
        0 12px 30px rgba(33,115,176,.22);
    }

    .theme-toggle:active{
      transform:scale(.96);
    }

    html[data-theme="dark"] .theme-toggle{
      background:#111c2c;
      border-color:#7198b5;
      box-shadow:
        0 12px 32px rgba(0,0,0,.36),
        0 0 0 1px rgba(139,190,228,.08),
        inset 0 1px 0 rgba(255,255,255,.07);
    }

    html[data-theme="dark"] .theme-toggle:hover{
      border-color:#95bdd9;
      box-shadow:
        0 14px 36px rgba(0,0,0,.42),
        0 0 0 1px rgba(157,211,250,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
    }

    .toggle-track{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 11px;
      color:#2f7fb8;
      z-index:1;
      pointer-events:none;
      transition:color 350ms var(--ease);
    }

    html[data-theme="dark"] .toggle-track{
      color:#c7d9e8;
    }

    .theme-icon{
      width:17px;
      height:17px;
      display:block;
      stroke-width:2.2;
      filter:drop-shadow(0 1px 1px rgba(0,0,0,.08));
      transition:
        transform 500ms var(--ease-bounce),
        opacity 350ms var(--ease),
        color 350ms var(--ease);
    }

    .sun-icon{
      color:#f5a524;
      opacity:1;
      transform:rotate(0deg) scale(1);
    }

    .moon-icon{
      color:#306bb2;
      opacity:.92;
      transform:rotate(-10deg) scale(.98);
    }

    html[data-theme="dark"] .sun-icon{
      color:#e5a83b;
      opacity:.55;
      transform:rotate(70deg) scale(.88);
    }

    html[data-theme="dark"] .moon-icon{
      color:#9ed2ff;
      opacity:1;
      transform:rotate(0deg) scale(1);
    }

    .toggle-knob{
      position:absolute;
      top:4px;
      left:4px;
      width:32px;
      height:32px;
      border-radius:50%;
      background:linear-gradient(180deg,#fefefe,#dff1ff);
      border:1px solid #c4e4fb;
      box-shadow:
        0 5px 14px rgba(33,115,176,.24),
        inset 0 1px 0 rgba(255,255,255,1);
      z-index:2;
      transition:
        transform 500ms var(--ease-bounce),
        background 400ms var(--ease),
        border-color 400ms var(--ease),
        box-shadow 400ms var(--ease);
      pointer-events:none;
    }

    html[data-theme="dark"] .toggle-knob{
      transform:translateX(40px);
      background:linear-gradient(180deg,#273f57,#17283a);
      border-color:#7398b4;
      box-shadow:
        0 6px 16px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.05);
    }

    .header{
      margin-bottom:24px;
      text-align:center;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border:1px solid rgba(255,255,255,.92);
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      color:#3d6f9f;
      margin-bottom:14px;
      box-shadow:0 8px 28px rgba(54,143,213,.10);

      transition:
        color 400ms var(--ease),
        background 400ms var(--ease),
        border-color 400ms var(--ease),
        transform 240ms var(--ease);
    }

    .badge:hover{
      transform:translateY(-2px);
    }

    html[data-theme="dark"] .badge{
      background:rgba(15,31,49,.72);
      border-color:#29465f;
      color:#8fcaff;
    }

    h1{
      margin:0;
      font-family:"Anton", Impact, sans-serif;
      font-size:clamp(38px,6vw,64px);
      line-height:1.02;
      letter-spacing:.5px;
      font-weight:400;
      color:var(--text);

      transition:color 400ms var(--ease);
    }

    .subtitle{
      margin:13px auto 0;
      max-width:650px;
      color:var(--muted);
      font-size:15px;
      line-height:1.7;

      transition:color 400ms var(--ease);
    }

    .card{
      background:var(--card);
      border:1px solid rgba(255,255,255,.95);
      border-radius:var(--radius);
      padding:24px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);

      transition:
        background 450ms var(--ease),
        border-color 450ms var(--ease),
        box-shadow 450ms var(--ease),
        transform 300ms var(--ease);
    }

    html[data-theme="dark"] .card{
      border-color:#42657f;
    }

    .card:hover{
      transform:translateY(-2px);
    }

    .selector{
      margin-bottom:20px;
      padding:14px;
      background:color-mix(in srgb, var(--field-bg) 72%, transparent);
      border:1px solid var(--border);
      border-radius:15px;

      transition:
        background 400ms var(--ease),
        border-color 400ms var(--ease),
        transform 220ms var(--ease);
    }

    .selector:focus-within{
      transform:translateY(-1px);
    }

    .selector-title{
      font-size:12px;
      font-weight:700;
      color:var(--muted);
      margin-bottom:7px;

      transition:color 400ms var(--ease);
    }


    .custom-select{
      position:relative;
      width:100%;
    }

    .select-trigger{
      width:100%;
      min-height:58px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:10px 12px 10px 14px;
      border:1px solid var(--border);
      border-radius:14px;
      background:var(--field-bg);
      color:var(--text);
      box-shadow:
        0 4px 14px rgba(52,126,178,.05),
        inset 0 1px 0 rgba(255,255,255,.65);
      cursor:pointer;
      text-align:left;
      transition:
        transform 180ms var(--ease),
        background 400ms var(--ease),
        border-color 220ms var(--ease),
        box-shadow 220ms var(--ease),
        color 400ms var(--ease);
    }

    .select-trigger:hover{
      transform:translateY(-1px);
      border-color:#abd6f7;
      box-shadow:
        0 8px 20px rgba(52,126,178,.09),
        inset 0 1px 0 rgba(255,255,255,.7);
    }

    .custom-select.open .select-trigger{
      border-color:#6bbcff;
      box-shadow:
        0 0 0 4px rgba(21,147,255,.11),
        0 10px 24px rgba(52,126,178,.10);
    }

    html[data-theme="dark"] .select-trigger{
      box-shadow:
        0 6px 18px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.025);
    }

    .select-main{
      min-width:0;
      display:flex;
      align-items:center;
      gap:11px;
    }

    .select-icon{
      width:34px;
      height:34px;
      flex:0 0 34px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:linear-gradient(180deg, rgba(36,160,255,.14), rgba(16,137,243,.07));
      color:#168ae8;
      font-weight:700;
      font-size:13px;
      transition:
        transform 260ms var(--ease-bounce),
        background 350ms var(--ease),
        color 350ms var(--ease);
    }

    html[data-theme="dark"] .select-icon{
      background:rgba(55,168,255,.10);
      color:#8fd0ff;
    }

    .custom-select.open .select-icon{
      transform:scale(1.05) rotate(-3deg);
    }

    .select-copy{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .select-value{
      color:var(--text);
      font-size:14px;
      font-weight:600;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .select-hint{
      color:var(--muted);
      font-size:11px;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .select-chevron{
      width:34px;
      height:34px;
      flex:0 0 34px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:var(--primary-soft);
      color:#168ae8;
      transition:
        transform 350ms var(--ease-bounce),
        background 350ms var(--ease),
        color 350ms var(--ease);
    }

    html[data-theme="dark"] .select-chevron{
      color:#8fd0ff;
    }

    .select-chevron svg{
      width:16px;
      height:16px;
    }

    .custom-select.open .select-chevron{
      transform:rotate(180deg);
    }

    .select-menu{
      position:relative;
      z-index:2;
      top:auto;
      left:auto;
      right:auto;

      max-height:0;
      margin-top:0;
      padding:0 8px;

      border:1px solid transparent;
      border-radius:16px;
      background:color-mix(in srgb, var(--field-bg) 94%, transparent);
      box-shadow:none;

      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);

      opacity:0;
      visibility:hidden;
      overflow:hidden;
      transform:translateY(-5px);

      transition:
        max-height 360ms var(--ease),
        margin-top 300ms var(--ease),
        padding 300ms var(--ease),
        opacity 220ms var(--ease),
        visibility 220ms var(--ease),
        transform 300ms var(--ease),
        border-color 300ms var(--ease),
        box-shadow 300ms var(--ease);
    }

    html[data-theme="dark"] .select-menu{
      box-shadow:none;
    }

    .custom-select.open .select-menu{
      max-height:420px;
      margin-top:10px;
      padding:8px;

      border-color:var(--border);
      opacity:1;
      visibility:visible;
      transform:translateY(0);

      box-shadow:
        0 14px 34px rgba(37,96,143,.10),
        inset 0 1px 0 rgba(255,255,255,.55);
    }

    html[data-theme="dark"] .custom-select.open .select-menu{
      box-shadow:
        0 16px 38px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.02);
    }

    .select-option{
      width:100%;
      display:grid;
      grid-template-columns:38px 1fr 24px;
      align-items:center;
      gap:11px;
      padding:10px;
      border:0;
      border-radius:12px;
      background:transparent;
      color:var(--text);
      cursor:pointer;
      text-align:left;
      transition:
        background 180ms var(--ease),
        transform 180ms var(--ease),
        color 180ms var(--ease);
    }

    .select-option:hover,
    .select-option:focus-visible{
      background:var(--primary-soft);
      transform:translateX(2px);
      outline:none;
    }

    .option-icon{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:11px;
      background:var(--soft);
      border:1px solid var(--border);
      color:#247fbf;
      font-size:12px;
      font-weight:700;
      transition:
        background 180ms var(--ease),
        border-color 180ms var(--ease),
        transform 220ms var(--ease-bounce);
    }

    html[data-theme="dark"] .option-icon{
      color:#9bd7ff;
    }

    .select-option:hover .option-icon,
    .select-option:focus-visible .option-icon{
      transform:scale(1.05);
    }

    .option-copy{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .option-title{
      font-size:13px;
      font-weight:600;
      line-height:1.25;
    }

    .option-example{
      color:var(--muted);
      font-size:10.5px;
      line-height:1.3;
    }

    .option-check{
      width:20px;
      height:20px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:white;
      background:linear-gradient(180deg,#24a0ff,#1089f3);
      opacity:0;
      transform:scale(.65);
      transition:
        opacity 180ms var(--ease),
        transform 220ms var(--ease-bounce);
    }

    .option-check svg{
      width:12px;
      height:12px;
    }

    .select-option.active{
      background:linear-gradient(90deg, rgba(36,160,255,.10), rgba(36,160,255,.035));
    }

    html[data-theme="dark"] .select-option.active{
      background:rgba(55,168,255,.085);
    }

    .select-option.active .option-check{
      opacity:1;
      transform:scale(1);
    }

    .select-option.active .option-icon{
      border-color:#9bd4ff;
      background:rgba(36,160,255,.11);
    }

    .native-select-hidden{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0,0,0,0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }

    select{
      width:100%;
      height:48px;
      padding:0 14px;
      border:1px solid var(--border);
      border-radius:12px;
      background:var(--field-bg);
      color:var(--text);
      font:inherit;
      cursor:pointer;
      outline:none;

      transition:
        background 400ms var(--ease),
        border-color 220ms var(--ease),
        color 400ms var(--ease),
        box-shadow 220ms var(--ease),
        transform 180ms var(--ease);
    }

    select:hover{
      transform:translateY(-1px);
    }

    select:focus,
    textarea:focus{
      border-color:#6bbcff;
      box-shadow:0 0 0 4px rgba(21,147,255,.12);
    }

    .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:0;
    }

    label{
      font-size:13px;
      font-weight:750;
      color:var(--label);
      transition:color 400ms var(--ease);
    }

    textarea{
      width:100%;
      min-height:250px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:15px;
      background:var(--field-bg);
      color:var(--text);
      font:inherit;
      line-height:1.65;
      resize:vertical;
      outline:none;

      transition:
        background 400ms var(--ease),
        color 400ms var(--ease),
        border-color 220ms var(--ease),
        box-shadow 220ms var(--ease),
        transform 220ms var(--ease);
    }

    textarea:hover{
      transform:translateY(-1px);
    }

    textarea::placeholder{
      color:color-mix(in srgb, var(--muted) 72%, transparent);
      transition:color 400ms var(--ease);
    }

    #outputText{
      background:var(--field-output);
    }

    #outputText.result-pop{
      animation:resultPop 460ms var(--ease-bounce);
    }

    .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:18px;
    }

    button{
      position:relative;
      overflow:hidden;
      border:none;
      border-radius:12px;
      padding:12px 18px;
      font:inherit;
      font-weight:750;
      cursor:pointer;
      isolation:isolate;

      transition:
        transform 180ms var(--ease),
        box-shadow 260ms var(--ease),
        background 320ms var(--ease),
        color 320ms var(--ease),
        border-color 320ms var(--ease);
    }

    button::after{
      content:"";
      position:absolute;
      inset:auto;
      width:8px;
      height:8px;
      border-radius:50%;
      background:rgba(255,255,255,.42);
      transform:scale(0);
      opacity:0;
      pointer-events:none;
      z-index:-1;
    }

    button.ripple::after{
      animation:ripple 520ms var(--ease);
    }

    button:active{
      transform:scale(.97);
    }

    .primary{
      background:linear-gradient(180deg, #24a0ff 0%, #1089f3 100%);
      color:#fff;
      box-shadow:
        0 10px 24px rgba(21,147,255,.30),
        inset 0 1px 0 rgba(255,255,255,.35);
    }

    .primary:hover{
      background:linear-gradient(180deg, #1598fb 0%, #087bdf 100%);
      transform:translateY(-2px);
      box-shadow:
        0 14px 30px rgba(21,147,255,.36),
        inset 0 1px 0 rgba(255,255,255,.35);
    }

    .secondary{
      background:var(--primary-soft);
      color:#176ba9;
      border:1px solid var(--border);
    }

    html[data-theme="dark"] .secondary{
      color:#8fceff;
    }

    .secondary:hover{
      transform:translateY(-2px);
      filter:brightness(1.03);
    }

    .status{
      min-height:20px;
      margin-top:10px;
      font-size:13px;
      font-weight:650;
      color:var(--success);
      opacity:0;
      transform:translateY(5px);

      transition:
        opacity 240ms var(--ease),
        transform 240ms var(--ease),
        color 300ms var(--ease);
    }

    .status.show{
      opacity:1;
      transform:translateY(0);
    }

    .status.success{
      color:var(--success);
    }

    .status.error{
      color:var(--danger);
    }

    .footer-note{
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid var(--border-soft);
      color:var(--muted);
      font-size:12px;
      line-height:1.6;

      transition:
        color 400ms var(--ease),
        border-color 400ms var(--ease);
    }

    .is-clearing{
      animation:clearPulse 360ms var(--ease);
    }

    .theme-flash{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:999;
      background:radial-gradient(circle at top right, rgba(70,174,255,.14), transparent 35%);
      opacity:0;
    }

    .theme-flash.active{
      animation:themeFlash 560ms var(--ease);
    }

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

    @keyframes resultPop{
      0%{
        transform:scale(.985);
        box-shadow:0 0 0 0 rgba(21,147,255,0);
      }
      55%{
        transform:scale(1.008);
        box-shadow:0 0 0 5px rgba(21,147,255,.10);
      }
      100%{
        transform:scale(1);
        box-shadow:none;
      }
    }

    @keyframes clearPulse{
      0%{opacity:1;transform:scale(1)}
      50%{opacity:.5;transform:scale(.995)}
      100%{opacity:1;transform:scale(1)}
    }

    @keyframes themeFlash{
      0%{opacity:0}
      35%{opacity:1}
      100%{opacity:0}
    }

    @keyframes ripple{
      0%{
        transform:scale(0);
        opacity:.6;
      }
      100%{
        transform:scale(26);
        opacity:0;
      }
    }

    @media (max-width:760px){
      body{
        padding:22px 12px 28px;
      }

      .topbar{
        margin-bottom:16px;
      }

      .grid{
        grid-template-columns:1fr;
      }

      .card{
        padding:16px;
      }

      textarea{
        min-height:190px;
      }

      .header{
        text-align:left;
      }

      .subtitle{
        margin-left:0;
      }
    }

    @media (prefers-reduced-motion:reduce){
      *,
      *::before,
      *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
      }
    }