:root{
    --css-blue-50:#EFF6FF;
    --css-blue-100:#DBEAFE;
    --css-blue-200:#BFDBFE;
    --css-blue-400:#60A5FA;
    --css-blue-500:#3B82F6;
    --css-blue-600:#2563EB;
    --css-blue-700:#1D4ED8;
    --css-blue-900:#1E3A8A;
    --css-ink:#0F172A;
    --css-ink-soft:#475569;
    --css-ink-faint:#94A3B8;
    --css-line:#E2E8F0;
    --css-line-soft:#EDF1F6;
    --css-white:#FFFFFF;
    --css-danger:#DC2626;
    --css-danger-bg:#FEF2F2;
    --css-ok:#16A34A;
    --css-radius:10px;
    --css-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --css-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
 
  /*.app{
    max-width:1160px;
    margin:0 auto;
    padding:36px 28px 64px;
  }*/

 
  /* -- toolbar -- */
  .toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px;
    background:var(--css-blue-50);
    border:1px solid var(--css-blue-100);
    border-radius:var(--css-radius);
    padding:14px 18px;
    margin-bottom:20px;
  }
 
  .option{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .option label{
    font-size:12px;
    font-weight:600;
    color:var(--css-blue-900);
    text-transform:uppercase;
    letter-spacing:0.03em;
  }
  .option select{
    font-family:var(--css-sans);
    font-size:13px;
    padding:6px 10px;
    border-radius:7px;
    border:1px solid var(--css-blue-200);
    background:var(--css-white);
    color:var(--css-ink);
    cursor:pointer;
  }
  .option select:focus-visible, .toggle:has(input:focus-visible){
    outline:2px solid var(--css-blue-500);
    outline-offset:1px;
  }
 
  .toggle{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:var(--css-ink);
    cursor:pointer;
    user-select:none;
  }
  .toggle input{
    accent-color:var(--css-blue-600);
    width:15px;
    height:15px;
    cursor:pointer;
  }
 
  /* -- panels -- */
  .panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media (max-width:820px){
    .panels{grid-template-columns:1fr;}
  }
 
  .panel{
    border:1px solid var(--css-line);
    border-radius:var(--css-radius);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:var(--css-white);
  }
 
  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    background:#F8FAFC;
    border-bottom:1px solid var(--css-line);
  }
  .panel-title{
    font-size:12px;
    font-weight:600;
    color:var(--css-ink-soft);
    text-transform:uppercase;
    letter-spacing:0.04em;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .dot{
    width:7px;height:7px;border-radius:50%;
  }
  .dot.blue{background:var(--css-blue-500);}
  .dot.green{background:var(--css-ok);}
 
  .panel-meta{
    font-family:var(--css-mono);
    font-size:11px;
    color:var(--css-ink-faint);
  }
 
  textarea{
    width:100%;
    flex:1;
    min-height:360px;
    resize:vertical;
    border:none;
    outline:none;
    padding:16px;
    font-family:var(--css-mono);
    font-size:13px;
    line-height:1.6;
    color:var(--css-ink);
    background:var(--css-white);
  }
  textarea::placeholder{color:var(--css-ink-faint);}
  textarea#output{
    background:#FAFBFD;
    color:var(--css-blue-900);
  }
 
  .panel-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-top:1px solid var(--css-line);
    background:#F8FAFC;
  }
 
  /* -- buttons -- */
  button{
    font-family:var(--css-sans);
    font-size:13px;
    font-weight:600;
    border-radius:7px;
    padding:8px 14px;
    cursor:pointer;
    border:1px solid transparent;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:background .12s ease, border-color .12s ease, transform .06s ease;
  }
  button:active{transform:scale(0.97);}
  button:disabled{opacity:.45;cursor:not-allowed;transform:none;}
 
  .btn1-primary{
    background:var(--css-blue-600);
    color:var(--css-white);
  }
  .btn1-primary:hover:not(:disabled){background:var(--css-blue-700);}
 
  .btn1-ghost{
    background:var(--css-white);
    color:var(--css-ink-soft);
    border-color:var(--css-line);
  }
  .btn1-ghost:hover:not(:disabled){background:var(--css-line-soft);border-color:var(--css-ink-faint);}
 
  .btn1-sm{
    padding:6px 10px;
    font-size:12px;
  }
 
  .actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
    flex-wrap:wrap;
  }
 
  .toast{
    font-size:12px;
    font-weight:600;
    color:var(--css-ok);
    opacity:0;
    transition:opacity .2s ease;
  }
  .toast.show{opacity:1;}
 
  .error-banner{
    display:none;
    align-items:flex-start;
    gap:9px;
    background:var(--css-danger-bg);
    border:1px solid #FECACA;
    color:var(--css-danger);
    font-size:13px;
    padding:11px 14px;
    border-radius:8px;
    margin-bottom:16px;
  }
  .error-banner.show{display:flex;}
  .error-banner svg{flex:none;margin-top:1px;}
 
  /* -- stats -- */
  .stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:22px;
  }
  @media (max-width:640px){
    .stats{grid-template-columns:repeat(2,1fr);}
  }
  .stat{
    border:1px solid var(--css-line);
    border-radius:var(--css-radius);
    padding:14px 16px;
    background:#FAFBFD;
  }
  .stat-value{
    font-family:var(--css-mono);
    font-size:22px;
    font-weight:600;
    color:var(--css-blue-700);
  }
  .stat-label{
    font-size:11px;
    color:var(--css-ink-soft);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-top:3px;
  }
 
  /* -- about -- */

  .about-heading{
    font-size:28px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0 0 6px;
  }
  .about-l{
    color:var(--css-ink-soft);
    margin:0 0 24px;
    max-width:720px;
    line-height:1.6;
  }

  .about-block h3{
    font-size:20px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--css-blue-700);
    margin:0 0 10px;
  }
  .about-block p{
    line-height:1.65;
    color:var(--css-ink-soft);
    margin:0 0 10px;
  }
  .about-block ul{
    margin:0 0 10px;
    padding-left:18px;
  }
  .about-block li{
    line-height:1.65;
    color:var(--css-ink-soft);
    margin-bottom:6px;
  }