:root{
    --ink:#111827;
    --gold:#B8912F;
    --gold-light:#FDF3D8;
    --paper:#FAFAF8;
    --line:#E5E1D6;
    --text:#1F2937;
    --muted:#6B7280;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;
    color:var(--text);
    direction:rtl;
  }
  @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

  .topbar{
    background:var(--ink);
    color:#fff;
    padding:22px 28px;
    display:flex;
    align-items:baseline;
    gap:14px;
  }
  .topbar .brand{
    font-weight:900;
    font-size:20px;
    color:var(--gold);
    letter-spacing:0.5px;
  }
  .topbar .sub{
    font-size:13px;
    color:#D1D5DB;
  }

  .wrap{
    max-width:820px;
    margin:0 auto;
    padding:32px 20px 80px;
  }

  h1{
    font-size:22px;
    margin:0 0 4px;
  }
  .lead{
    color:var(--muted);
    font-size:14px;
    margin:0 0 28px;
  }

  .card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px;
    margin-bottom:18px;
  }
  .card h2{
    font-size:15px;
    margin:0 0 16px;
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
  }

  .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
  }
  @media (max-width:600px){ .row{grid-template-columns:1fr;} }

  label{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:6px;
    color:var(--ink);
  }
  input, textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
    font-family:inherit;
    font-size:14px;
    color:var(--text);
    background:#fff;
    resize:vertical;
  }
  input:focus, textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(184,145,47,0.15);
  }
  textarea{min-height:64px;}
  .field{margin-bottom:14px;}

  .run-btn{
    width:100%;
    background:var(--ink);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:15px;
    font-size:16px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:opacity .15s;
  }
  .run-btn:hover{opacity:0.9;}
  .run-btn:disabled{opacity:0.5;cursor:not-allowed;}

  .status{
    text-align:center;
    padding:30px 0;
    color:var(--muted);
    font-size:14px;
    display:none;
  }
  .status.active{display:block;}
  .dot{
    display:inline-block;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--gold);
    margin-left:6px;
    animation:pulse 1s infinite ease-in-out;
  }
  @keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

  #results{display:none;}
  #results.active{display:block;}

  .score-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    margin-bottom:4px;
  }
  .score-table th, .score-table td{
    text-align:right;
    padding:10px 8px;
    border-bottom:1px solid var(--line);
  }
  .score-table th{
    background:var(--ink);
    color:#fff;
    font-size:13px;
  }
  .score-table tr.winner td{
    background:var(--gold-light);
    font-weight:700;
  }
  .score-table td.num{
    text-align:center;
    font-weight:700;
    width:70px;
  }

  details{
    margin-top:6px;
    font-size:13px;
    color:var(--muted);
  }
  details summary{
    cursor:pointer;
    color:var(--gold);
    font-weight:700;
  }
  .cond-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:6px 0;
    border-bottom:1px dashed var(--line);
  }
  .cond-row .id{font-weight:700;color:var(--ink);flex-shrink:0;}
  .cond-row .reason{color:var(--muted);text-align:right;}
  .cond-row .val{
    flex-shrink:0;
    width:24px;height:24px;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    font-size:12px;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }

  .verdict{
    margin-top:20px;
    padding:20px;
    background:var(--ink);
    color:#fff;
    border-radius:10px;
  }
  .verdict .label{
    font-size:12px;
    color:var(--gold);
    font-weight:700;
    margin-bottom:6px;
  }
  .verdict .point{
    font-size:24px;
    font-weight:900;
    margin-bottom:10px;
  }
  .verdict .reason{
    font-size:14px;
    color:#D1D5DB;
    line-height:1.7;
  }
  .verdict .tie-note{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.15);
    font-size:13px;
    color:var(--gold-light);
  }

  .confirm-btn{
    margin-top:16px;
    width:100%;
    background:var(--gold);
    color:var(--ink);
    border:none;
    border-radius:8px;
    padding:14px;
    font-size:15px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
  }
  .confirm-btn:hover{opacity:0.9;}
  .confirmed-box{
    display:none;
    margin-top:16px;
    text-align:center;
    padding:14px;
    background:var(--gold-light);
    border-radius:8px;
    color:var(--ink);
    font-weight:700;
    font-size:14px;
  }
  .confirmed-box.show{display:block;}

  .error{
    background:#FEF2F2;
    border:1px solid #FCA5A5;
    color:#991B1B;
    padding:14px;
    border-radius:8px;
    font-size:14px;
    margin-top:14px;
    display:none;
  }
  .error.active{display:block;}

  .footnote{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:30px;
  }

  @media print{
    body *{ visibility:hidden; }
    #reportResults, #reportResults *{ visibility:visible; }
    #reportResults{
      position:absolute;
      top:0; right:0; left:0;
      width:100%;
      margin:0;
      padding:0;
    }
    @page{ margin:18mm 15mm; }
  }

.project-actions{
  grid-template-columns:repeat(3, 1fr);
}

@media (max-width:600px){
  .project-actions{
    grid-template-columns:1fr;
  }
}