:root{
    --bg:#eef2ff;
    --card:#ffffff;
    --accent:#0ea5e9;
    --muted:#475569;
    --success:#10b981;
    --danger:#ef4444;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
  }
  .widget-8172{
    padding:18px;
    background:linear-gradient(180deg,#f0f9ff,#eef2ff);
    font-family:"Poppins",sans-serif;
    color:#0b1220;
    
  }
  .box-7296{
    max-width:920px;
    margin:10px auto;
    background:var(--card);
    padding:22px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(14,30,37,0.08);
  }

  .title-1234{
    margin:0;
    text-align:center;
    font-size:26px;
    font-weight:700;
    background:linear-gradient(90deg,var(--accent),#6366f1);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  p.lead-4740{
    text-align:center;
    color:var(--muted);
    margin:8px 0 16px 0;
    font-size:14px;
  }

  .lbl-5678{ display:block; margin-top:12px; font-weight:600; font-size:13px; color:#0b1220; }
  .form-input-9012{
    width:100%;
    padding:12px 14px;
    margin-top:6px;
    border-radius:10px;
    border:1px solid #dbe7f2;
    font-size:14px;
    background:white;
    resize: none;
    min-height: 44px;
    max-height: 300px;
    overflow-y: auto;
  }
  .form-input-9012:focus { box-shadow:0 6px 18px rgba(14,165,233,0.08); outline:none; border-color:var(--accent); }

  .row-3639{ display:flex; gap:12px; margin-top:12px; }
  .col-2906{ flex:1; }

  @media (max-width:600px){
    .row-3639{ flex-direction:column; gap:8px; }
    .box-7296{ padding:16px; margin:8px; }
    .title-1234{ font-size:20px; }
    .form-input-9012{ padding:10px 12px; font-size:13px; }
  }

  .btn-3456{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:0;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    color:white;
  }
  .btn-blue-3892{ background:var(--accent); }
  .btn-green-4672{ background:var(--success); }
  .btn-red-1513{ background:var(--danger); }

  #resultBox{
    margin-top:18px;
    background:#fbfdff;
    padding:16px;
    border-radius:12px;
    min-height:80px;
    font-size:15px;
    color:#0b1220;
    position:relative;
    border:1px solid rgba(14,30,37,0.03);
  }

  .actionBtns-5388{
    margin-top:12px;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
  }
  .actionBtns-5388 button{ width:auto; padding:10px 14px; display:inline-flex; align-items:center; gap:8px; }

  /* loader */
  .loader-5883 {
    width:22px; height:22px;
    border:3px solid var(--accent);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin-9274 0.6s linear infinite;
    display:inline-block;
    vertical-align:middle;
  }
  @keyframes spin-9274{100%{transform:rotate(360deg)}}

  /* usage */
  .usage-section-1439{ margin-top:22px; background:#f1f5f9; padding:16px; border-radius:10px; color:var(--muted); }
  .usage-section-1439 h2{ margin:0 0 8px 0; text-align:center; color:#334155; }
  .usage-section-1439 ol{ margin:0; padding-left:18px; line-height:1.6; }

  /* small */
  .small-muted-4525{ color:var(--muted); font-size:13px; margin-top:6px; text-align:center; }