:root, [data-theme="light"] {
  --color-bg:#f6f5f2; --color-surface:#ffffff; --color-surface-2:#fbfaf7; --color-surface-offset:#eeece5;
  --color-divider:#ded9cd; --color-border:#d4cfc0; --color-text:#1c2430; --color-text-muted:#5a6270;
  --color-text-faint:#96968f; --color-text-inverse:#f6f5f2; --color-primary:#0b2e4f; --color-primary-hover:#082238;
  --color-primary-active:#061a2a; --color-primary-highlight:#d9e2ea; --color-accent:#9c7a2e; --color-accent-hover:#7e6224;
  --color-accent-highlight:#ece2c7; --color-success:#2f6d3f; --color-success-highlight:#dce9de; --color-warning:#92590f;
  --color-warning-highlight:#ecdcc4; --color-error:#9c2b2b; --color-error-highlight:#ecd3d3; --color-info:#35607d;
  --color-info-highlight:#d8e3ea; --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(11,46,79,.06); --shadow-md:0 4px 14px rgba(11,46,79,.09); --shadow-lg:0 14px 36px rgba(11,46,79,.14);
  --font-display:'IBM Plex Sans Arabic','Cairo','Segoe UI',sans-serif; --font-body:'IBM Plex Sans Arabic','Tahoma',sans-serif;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8rem); --text-sm:clamp(.875rem,.84rem + .2vw,.95rem);
  --text-base:clamp(1rem,.97rem + .2vw,1.0625rem); --text-lg:clamp(1.125rem,1.05rem + .4vw,1.3rem);
  --text-xl:clamp(1.4rem,1.2rem + 1vw,1.9rem); --text-2xl:clamp(1.8rem,1.4rem + 2vw,2.6rem);
}
[data-theme="dark"] {
  --color-bg:#10161f; --color-surface:#161d29; --color-surface-2:#1b2330; --color-surface-offset:#202938;
  --color-divider:#2b3648; --color-border:#34405a; --color-text:#e7e6e1; --color-text-muted:#a3a9b5; --color-text-faint:#6c7484;
  --color-text-inverse:#10161f; --color-primary:#4f7fa8; --color-primary-hover:#6b98bd; --color-primary-active:#8bb0d1;
  --color-primary-highlight:#223347; --color-accent:#cba854; --color-accent-hover:#ddc478; --color-accent-highlight:#362c17;
  --color-success:#6fae7f; --color-success-highlight:#1e3324; --color-warning:#d19a4f; --color-warning-highlight:#3a2c17;
  --color-error:#cf6b6b; --color-error-highlight:#3a2020; --color-info:#6ea3c2; --color-info-highlight:#1f313d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 14px 36px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.65;min-height:100dvh}
img,svg{display:block;max-width:100%}
a{color:var(--color-primary);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;font-weight:700}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.container{max-width:1080px;margin-inline:auto;padding-inline:var(--space-4)}
.container-narrow{max-width:760px;margin-inline:auto;padding-inline:var(--space-4)}
.topbar{background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-4) 0;box-shadow:var(--shadow-sm)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--space-3);color:inherit}
.brand-logo{width:40px;height:40px;flex-shrink:0}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1.2}
.brand-text small{display:block;font-weight:400;font-size:var(--text-xs);opacity:.75}
.topbar-actions{display:flex;align-items:center;gap:var(--space-3)}
.topbar-actions a,.topbar-actions button{color:var(--color-text-inverse);font-size:var(--text-sm)}
.theme-toggle{background:rgba(255,255,255,.12);border-radius:var(--radius-full);width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.theme-toggle:hover{background:rgba(255,255,255,.2)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.card-header h2,.card-header h3{font-size:var(--text-lg);margin:0}
.card-body{padding:var(--space-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;border:1px solid transparent;cursor:pointer;transition:background 160ms,border-color 160ms,color 160ms,transform 100ms;min-height:44px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-accent{background:var(--color-accent);color:#fff}
.btn-accent:hover{background:var(--color-accent-hover)}
.btn-outline{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.btn-outline:hover{background:var(--color-surface-offset)}
.btn-ghost{background:transparent;color:var(--color-primary)}
.btn-ghost:hover{background:var(--color-primary-highlight)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);min-height:36px}
.btn-danger{background:var(--color-error);color:#fff}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{margin-bottom:var(--space-5)}
.field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);color:var(--color-text)}
.field .hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],input[type=number],select,textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);min-height:44px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight);outline:none}
.checkbox-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.checkbox-row input{width:20px;height:20px;flex-shrink:0}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:900px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
.progress-track{height:10px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:var(--radius-full);transition:width 400ms cubic-bezier(.16,1,.3,1)}
.progress-label{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
.section-nav{display:flex;flex-direction:column;gap:var(--space-1)}
.section-nav a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm)}
.section-nav a:hover{background:var(--color-surface-offset)}
.section-nav a.active{background:var(--color-primary-highlight);color:var(--color-primary);font-weight:600}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;background:var(--color-surface-offset);color:var(--color-text-muted)}
.badge-done{background:var(--color-success-highlight);color:var(--color-success)}
.item-card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-4);background:var(--color-surface-2)}
.item-card-head{display:flex;gap:var(--space-3);margin-bottom:var(--space-3)}
.item-num{width:32px;height:32px;border-radius:var(--radius-md);background:var(--color-primary-highlight);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);flex-shrink:0}
.item-req{font-weight:600;font-size:var(--text-base)}
.item-meta{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.item-meta strong{color:var(--color-text)}
.status-options{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0}
.status-opt{position:relative}
.status-opt input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.status-opt label{display:flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:var(--text-xs);font-weight:600;cursor:pointer;color:var(--color-text-muted);min-height:36px;transition:all 140ms}
.status-opt input:checked+label{border-color:transparent}
.status-opt[data-code=C] input:checked+label{background:var(--color-success-highlight);color:var(--color-success)}
.status-opt[data-code=PC] input:checked+label{background:var(--color-warning-highlight);color:var(--color-warning)}
.status-opt[data-code=NC] input:checked+label{background:var(--color-error-highlight);color:var(--color-error)}
.status-opt[data-code=NA] input:checked+label{background:var(--color-surface-offset);color:var(--color-text)}
.status-opt[data-code=PV] input:checked+label{background:var(--color-info-highlight);color:var(--color-info)}
.status-opt[data-code=UV] input:checked+label{background:var(--color-accent-highlight);color:var(--color-accent)}
.alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-5);display:flex;gap:var(--space-3);align-items:flex-start}
.alert-success{background:var(--color-success-highlight);color:var(--color-success)}
.alert-error{background:var(--color-error-highlight);color:var(--color-error)}
.alert-info{background:var(--color-info-highlight);color:var(--color-info)}
.alert-warning{background:var(--color-warning-highlight);color:var(--color-warning)}
table.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table.data-table th,table.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);text-align:start}
table.data-table th{background:var(--color-surface-offset);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted)}
table.data-table tbody tr:hover{background:var(--color-surface-2)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.kpi-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700}
.kpi-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.risk-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700}
.risk-CRITICAL{background:var(--color-error-highlight);color:var(--color-error)}
.risk-HIGH{background:var(--color-warning-highlight);color:var(--color-warning)}
.risk-MEDIUM{background:var(--color-info-highlight);color:var(--color-info)}
.risk-LOW{background:var(--color-success-highlight);color:var(--color-success)}
.site-footer{padding:var(--space-10) 0;text-align:center;color:var(--color-text-muted);font-size:var(--text-xs);border-top:1px solid var(--color-divider);margin-top:var(--space-16)}
.flex{display:flex}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)}
.mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)}
.text-muted{color:var(--color-text-muted)} .text-sm{font-size:var(--text-sm)} .text-center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
