:root{
      --bg:#f4f6f8;
      --surface:#ffffff;
      --surface-soft:#f8fafc;
      --text:#17212f;
      --muted:#657386;
      --border:#dbe3ec;
      --accent:#2d6cdf;
      --accent-soft:#eaf2ff;
      --ok:#2f7d4f;
      --shadow:0 16px 44px rgba(23,33,47,.08);
    }
    *{box-sizing:border-box}
    html,body{min-height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    }
    a{
      color:#174fae;
      font-weight:800;
      text-decoration-thickness:2px;
      text-underline-offset:3px;
    }
    a:focus,button:focus,input:focus,textarea:focus{
      outline:3px solid rgba(122,167,255,.34);
      outline-offset:2px;
    }
    .site-header{
      margin:0;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid var(--border);
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter:blur(12px);
    }
    .site-nav,.site-footer nav{
      width:min(980px,100%);
      margin:0 auto;
      padding:12px 18px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }
    .site-nav a,.site-footer a{
      color:#26384d;
      background:#f8fafc;
      border:1px solid var(--border);
      border-radius:999px;
      padding:8px 11px;
      text-decoration:none;
      font-size:14px;
    }
    .site-nav a[aria-current="page"]{
      background:var(--accent-soft);
      border-color:#c7dcff;
      color:#174fae;
    }
    main{
      width:min(980px,100%);
      margin:0 auto;
      padding:32px 18px 48px;
    }
    .page-intro{
      margin-bottom:22px;
    }
    h1{
      margin:0 0 6px;
      font-size:clamp(30px,5vw,46px);
      line-height:1.08;
      letter-spacing:0;
    }
    .lead{
      margin:0;
      max-width:720px;
      color:var(--muted);
    }
    .app{
      display:grid;
      gap:18px;
    }
    .tool,.notice-card,.legal-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .notice-card{
      padding:16px 18px;
      margin-bottom:18px;
      background:#fbfdff;
    }
    .notice-card h2{
      margin:0 0 8px;
      font-size:18px;
    }
    .notice-card p{
      margin:8px 0 0;
    }
    .tool-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      border-bottom:1px solid var(--border);
      background:linear-gradient(180deg,#ffffff,#f8fbff);
    }
    .tool-title{
      margin:0;
      font-size:21px;
      line-height:1.2;
    }
    .tool-note{
      margin:5px 0 0;
      color:var(--muted);
      font-size:14px;
    }
    .tool-body{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
      padding:20px;
    }
    @media (min-width:800px){
      .tool-body{grid-template-columns:minmax(0,1fr) minmax(300px,.95fr)}
    }
    label{
      display:block;
      margin:0 0 8px;
      font-size:13px;
      font-weight:800;
      color:#34465d;
    }
    input,textarea{
      width:100%;
      border:1px solid var(--border);
      border-radius:9px;
      background:#fff;
      color:var(--text);
      font:inherit;
      padding:14px 15px;
      outline:none;
    }
    textarea{
      min-height:280px;
      resize:vertical;
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
      font-size:13px;
      line-height:1.5;
    }
    input:focus,textarea:focus{
      border-color:#7aa7ff;
      box-shadow:0 0 0 3px rgba(122,167,255,.26);
    }
    .option{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:12px;
      padding:11px 12px;
      border:1px solid var(--border);
      border-radius:9px;
      background:#fff;
      color:#34465d;
      font-size:14px;
      font-weight:750;
    }
    .option input{
      width:auto;
      margin-top:3px;
      accent-color:var(--accent);
    }
    .field-help{
      margin:9px 0 0;
      color:var(--muted);
      font-size:13px;
    }
    .result{
      min-height:148px;
      border:1px solid var(--border);
      border-radius:9px;
      background:var(--surface-soft);
      padding:16px;
    }
    .placeholder{
      color:var(--muted);
      display:flex;
      align-items:center;
      height:100%;
    }
    .result-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin:12px 0;
    }
    @media (max-width:560px){
      .result-grid{grid-template-columns:1fr}
    }
    .metric{
      background:#fff;
      border:1px solid var(--border);
      border-radius:8px;
      padding:11px;
    }
    .metric-label{
      color:var(--muted);
      font-size:12px;
      font-weight:750;
      margin-bottom:4px;
    }
    .metric-value{
      color:#163762;
      font-size:26px;
      font-weight:850;
      line-height:1.1;
      overflow-wrap:anywhere;
    }
    .hebrew{
      direction:rtl;
      font-size:34px;
      line-height:1.25;
      color:#13233a;
      margin:4px 0 10px;
      overflow-wrap:anywhere;
    }
    .summary{
      margin:10px 0 0;
      color:#2e3f55;
    }
    .muted{
      color:var(--muted);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      border:1px solid #c7dcff;
      background:var(--accent-soft);
      color:#174fae;
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:850;
      margin-bottom:8px;
    }
    .details{
      margin-top:12px;
      border-top:1px solid var(--border);
      padding-top:12px;
      color:var(--muted);
      font-size:13px;
    }
    .details-row{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:4px 0;
    }
    .details-row strong{color:#26384d}
    .error{
      color:#8f3030;
      background:#fff5f5;
      border:1px solid #f0c7c7;
      border-radius:8px;
      padding:10px 12px;
    }
    .prompt-body{
      display:grid;
      gap:14px;
      padding:20px;
    }
    .explanation{
      margin:0;
      color:#34465d;
      background:#f8fafc;
      border:1px solid var(--border);
      border-radius:9px;
      padding:13px 14px;
    }
    .copy-warning{
      margin:0;
      color:#4a3b15;
      background:#fff8df;
      border:1px solid #edd98d;
      border-radius:9px;
      padding:13px 14px;
    }
    .actions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }
    button{
      appearance:none;
      border:0;
      border-radius:9px;
      background:var(--accent);
      color:white;
      cursor:pointer;
      font:inherit;
      font-weight:850;
      padding:11px 15px;
    }
    button.secondary{
      background:#edf3fb;
      color:#1d395f;
      border:1px solid var(--border);
    }
    .site-footer{
      border-top:1px solid var(--border);
      background:#fff;
      color:var(--muted);
    }
    .footer-inner{
      width:min(980px,100%);
      margin:0 auto;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .footer-meta{
      display:grid;
      gap:3px;
      font-size:14px;
      color:#40536a;
    }
    .footer-version{
      color:var(--muted);
      font-size:13px;
    }
    .site-footer nav{
      width:auto;
      margin:0;
      padding:0;
    }
    .legal-card{
      padding:22px;
    }
    .legal-card h2{
      margin:26px 0 8px;
      font-size:21px;
    }
    .legal-card h2:first-child{
      margin-top:0;
    }
    .legal-card p,.legal-card li{
      color:#33445a;
    }
    .legal-card ul{
      padding-left:22px;
    }
    .placeholder-note{
      border:1px solid #edd98d;
      background:#fff8df;
      border-radius:8px;
      padding:10px 12px;
      font-weight:800;
    }
    @media (max-width:560px){
      main{padding:24px 14px 40px}
      .site-nav{padding:10px 14px}
      .footer-inner{align-items:flex-start;flex-direction:column;padding:14px}
      .legal-card{padding:18px}
    }