:root{
    --navy:#16324A; --navy-light:#2E5A78; --gold:#D9A441; --gold-dark:#B5822E;
    --rust:#A85C32; --green:#3B5D3A; --green-light:#6E8F5C; --sand:#FAF3E6; --sand-deep:#EFE2C6;
    --ink:#211B12; --white:#FFFFFF; --danger:#A83232; --warn:#B5822E;
    --shadow:0 8px 24px rgba(22,50,74,0.08);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:var(--sand); color:var(--ink); font-family:'Almarai',sans-serif; line-height:1.7;}
  h1,h2,h3,h4{font-family:'Tajawal',sans-serif;}
  .num{font-family:'JetBrains Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  button{font-family:'Tajawal',sans-serif; cursor:pointer;}
  input,select,textarea{font-family:'Almarai',sans-serif;}

  .login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(160deg, var(--navy), var(--green));}
  .login-box{background:#fff; border-radius:22px; padding:40px; max-width:420px; width:100%; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.25);}
  .login-box .lg-icon{font-size:44px; margin-bottom:10px;}
  .login-box h2{color:var(--navy); font-size:22px; margin-bottom:6px;}
  .login-box p{color:#6b6050; font-size:13.5px; margin-bottom:26px;}
  .login-box label{display:block; text-align:right; font-size:13px; font-weight:800; color:var(--navy); margin-bottom:7px;}
  .login-box select, .login-box input{width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid #e4d9bd; font-size:14px; background:#fffdf8; margin-bottom:16px;}
  .login-box button{width:100%; padding:13px; border-radius:12px; border:none; background:var(--navy); color:#fff; font-weight:800; font-size:15px; box-shadow:0 8px 20px rgba(22,50,74,0.3);}
  .login-note{font-size:11.5px; color:#a89a78; margin-top:16px;}
  .login-error{display:none; color:var(--danger); font-size:12.5px; margin-top:10px;}

  .shell{display:none; min-height:100vh; grid-template-columns:250px 1fr;}
  .shell.show{display:grid;}
  .sidebar{background:var(--navy); color:#fff; padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;}
  .sb-brand{display:flex; align-items:center; gap:10px; margin-bottom:26px; padding:0 6px;}
  .sb-brand svg{width:34px; height:34px; flex-shrink:0;}
  .sb-brand strong{font-size:14px; display:block;}
  .sb-brand span{font-size:10.5px; color:#a9c3d1;}
  .sb-role-badge{background:rgba(255,255,255,0.1); border-radius:10px; padding:8px 12px; font-size:11.5px; margin-bottom:20px; text-align:center; font-weight:700;}
  .sb-nav{list-style:none; flex:1;}
  .sb-nav li{margin-bottom:4px;}
  .sb-nav button{width:100%; text-align:right; background:none; border:none; color:#cfe0e2; padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:10px; transition:.2s;}
  .sb-nav button:hover{background:rgba(255,255,255,0.07);}
  .sb-nav button.active{background:var(--gold); color:var(--navy);}
  .sb-foot{border-top:1px solid rgba(255,255,255,0.12); padding-top:14px; margin-top:10px;}
  .sb-foot a{display:block; font-size:12.5px; color:#a9c3d1; padding:8px 14px;}
  .sb-foot a:hover{color:#fff;}

  .main{padding:26px 32px; overflow-x:hidden;}
  .topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:12px;}
  .topbar h1{font-size:22px; color:var(--navy);}
  .topbar .tb-actions{display:flex; gap:10px; align-items:center;}
  .lang-toggle{border:1.5px solid var(--navy); background:transparent; color:var(--navy); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; padding:7px 12px; border-radius:30px;}
  .logout-btn{border:1.5px solid var(--danger); color:var(--danger); background:transparent; font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:30px;}

  .panel{display:none;} .panel.active{display:block; animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:30px;}
  .kpi-card{background:var(--white); border-radius:16px; padding:18px; box-shadow:var(--shadow); border-inline-start:4px solid var(--gold);}
  .kpi-card .kv{font-size:24px; font-weight:800; color:var(--navy); font-family:'JetBrains Mono',monospace;}
  .kpi-card .kl{font-size:12px; color:#8a7a5a; font-weight:700; margin-top:4px;}

  .card{background:var(--white); border-radius:16px; padding:22px; box-shadow:var(--shadow); margin-bottom:20px;}
  .card h3{font-size:15.5px; color:var(--navy); margin-bottom:16px;}
  .card h3.h3-with-print{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .card h3.h3-with-print .icon-btn{width:30px; height:30px; font-size:13px; flex-shrink:0;}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  thead th{background:var(--sand-deep); color:var(--navy); text-align:right; padding:10px 12px; font-size:12px; font-weight:800;}
  tbody td{padding:10px 12px; border-bottom:1px solid #f0e6cc; vertical-align:middle;}
  tbody tr:hover{background:#fbf7ee;}
  .badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:800;}
  .badge.pending{background:#eee0bd; color:#7a6a2e;}
  .badge.approved{background:rgba(59,93,58,0.12); color:var(--green);}
  .badge.rejected{background:rgba(168,50,50,0.12); color:var(--danger);}
  .badge.active{background:rgba(22,50,74,0.12); color:var(--navy);}
  .badge.ended{background:#e4d9bd; color:#6b6050;}
  .badge.open{background:#eee0bd; color:#7a6a2e;}
  .badge.resolved{background:rgba(59,93,58,0.12); color:var(--green);}
  .grade-pill{font-family:'JetBrains Mono',monospace; font-weight:800; font-size:12px; padding:2px 9px; border-radius:8px;}
  .grade-A{background:#3B5D3A; color:#fff;} .grade-B{background:#D9A441; color:#16324A;} .grade-C{background:#A85C32; color:#fff;}
  .row-actions{display:flex; gap:6px; flex-wrap:wrap;}
  .btn-sm{padding:6px 12px; border-radius:8px; border:none; font-size:11.5px; font-weight:800; cursor:pointer;}
  .btn-approve{background:var(--green); color:#fff;}
  .btn-reject{background:var(--danger); color:#fff;}
  .btn-neutral{background:var(--sand-deep); color:var(--navy);}
  select.status-select{padding:6px 10px; border-radius:8px; border:1.5px solid #e4d9bd; font-size:12px; background:#fffdf8;}

  .settings-field{margin-bottom:16px;}
  .settings-field label{display:block; font-size:12.5px; font-weight:800; color:var(--navy); margin-bottom:6px;}
  .settings-field input, .settings-field textarea{width:100%; padding:10px 12px; border-radius:8px; border:1.5px solid #e4d9bd; background:#fffdf8; font-size:13.5px;}
  .save-note{font-size:12px; color:var(--green); font-weight:700; display:none; margin-top:10px;}
  .save-note.show{display:block;}

  .price-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:18px;}
  .price-input-card{background:var(--sand); border-radius:12px; padding:14px;}
  .price-input-card label{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--navy); margin-bottom:8px;}
  .price-input-card input{width:100%; padding:8px 10px; border-radius:8px; border:1.5px solid #e4d9bd; font-family:'JetBrains Mono',monospace; font-size:14px;}

  .de-input{width:100%; min-width:100px; padding:6px 8px; border-radius:6px; border:1.5px solid transparent; background:transparent; font-size:12.5px; font-family:'Almarai',sans-serif; color:var(--ink); transition:.15s;}
  .de-input:hover{border-color:#e4d9bd;}
  .de-input:focus{outline:none; border-color:var(--navy); background:#fff;}
  .de-input.dirty{border-color:var(--gold); background:#fffbf0;}
  .de-add-row{background:var(--sand); border-radius:12px; padding:14px 16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .de-add-row input{padding:8px 10px; border-radius:8px; border:1.5px solid #e4d9bd; font-size:12.5px; flex:1; min-width:120px;}
  .de-save-hint{font-size:10.5px; color:var(--gold-dark); font-weight:700;}
  .tabs-sub{display:flex; gap:10px; margin-bottom:18px;}
  .tab-sub-btn{padding:8px 18px; border-radius:20px; border:1.5px solid #e4d9bd; background:var(--white); font-size:13px; font-weight:800; color:#6b6050; cursor:pointer; font-family:'Tajawal',sans-serif;}
  .tab-sub-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;}
  .sub-panel{display:none;} .sub-panel.active{display:block;}

  .dispute-card{background:var(--sand); border-radius:14px; padding:18px 20px; margin-bottom:14px; border-inline-start:4px solid var(--warn);}
  .dispute-card.resolved{border-inline-start-color:var(--green); opacity:.8;}
  .dispute-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; flex-wrap:wrap; gap:8px;}
  .dispute-head h4{font-size:14.5px; color:var(--navy);}
  .dispute-parties{display:flex; gap:20px; margin-bottom:10px; flex-wrap:wrap;}
  .dispute-parties div{font-size:12.5px;}
  .dispute-parties b{display:block; color:var(--navy); font-size:13px;}
  .dispute-desc{font-size:13px; color:#5a5040; background:#fff; border-radius:10px; padding:10px 14px; margin-bottom:12px;}
  .dispute-actions{display:flex; gap:8px; flex-wrap:wrap;}

  .audit-item{display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed #f0e6cc; font-size:12.5px;}
  .audit-item:last-child{border-bottom:none;}
  .audit-time{color:#a89a78; font-family:'JetBrains Mono',monospace; font-size:11px; white-space:nowrap;}
  .audit-text b{color:var(--navy);}

  .sb-toggle{display:none; width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:10px; border-radius:10px; font-size:13px; font-weight:700; align-items:center; justify-content:center; gap:8px; margin-bottom:14px;}
  @media (max-width:900px){
    .shell.show{grid-template-columns:1fr;}
    .sidebar{position:relative; height:auto;}
    .main{padding:20px;}
    .card{overflow-x:auto;}
    .sb-nav{display:none;}
    .sb-nav.open{display:block;}
    .sb-toggle{display:flex;}
    .topbar h1{font-size:18px;}
  }

  .icon-btn{border:1.5px solid var(--navy); background:transparent; color:var(--navy); font-size:15px; width:36px; height:36px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s;}
  .icon-btn:hover{background:var(--navy); color:#fff;}
  @media print{
    .sidebar, .tb-actions, .app-modal-overlay{display:none !important;}
    .shell.show{grid-template-columns:1fr !important;}
    .main{padding:0 !important;}
    body{background:#fff !important;}
  }
  .app-modal-overlay{position:fixed; inset:0; background:rgba(22,20,14,0.55); z-index:500; display:none; align-items:center; justify-content:center; padding:20px;}
  .app-modal-overlay.show{display:flex;}
  .app-modal{background:#fff; border-radius:20px; max-width:560px; width:100%; max-height:86vh; overflow-y:auto; padding:28px 26px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .app-modal h3{color:var(--navy); font-size:18px; margin-bottom:14px; padding-inline-end:30px;}
  .app-modal-close{position:absolute; top:16px; inset-inline-end:16px; background:var(--sand); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px;}
  .app-modal-close:hover{background:var(--gold);}
  .app-modal img{max-width:100%; border-radius:12px; margin:10px 0;}
  .app-modal video, .app-modal iframe{width:100%; border-radius:12px; margin:10px 0; aspect-ratio:16/9; border:none;}
  .help-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px dashed #e9ddc0;}
  .help-item:last-child{border-bottom:none;}
  .help-item .hi-icon{font-size:20px; flex-shrink:0;}
  .help-item h4{font-size:13.5px; color:var(--navy); margin-bottom:3px;}
  .help-item p{font-size:12.5px; color:#5a5040; margin:0;}
  .designer-card{text-align:center;}
  .designer-card .d-badge{width:60px; height:60px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 10px;}
  .designer-card a{color:var(--rust); font-weight:800;}
  .settings-form label{display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin:12px 0 5px;}
  .settings-form input[type=text], .settings-form textarea{width:100%; padding:9px 12px; border-radius:8px; border:1.5px solid #e4d9bd; font-family:'Almarai',sans-serif; font-size:13px;}
  .settings-form textarea{min-height:80px; resize:vertical;}
  .toggle-row{display:flex; align-items:center; gap:10px; margin-top:10px;}
  .guide-row{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed #eee1c4;}
  .guide-row .g-body{flex:1;}
  .guide-row .g-actions{display:flex; gap:6px; flex-shrink:0;}
  .sb-foot-designer{background:transparent; border:1.5px solid #e4d9bd; color:#8a7a5a; width:100%; padding:9px; border-radius:10px; font-weight:700; font-size:12px; cursor:pointer; margin-top:8px;}

  /* --- رسوم لوحة النظرة العامة --- */
  .ov-charts{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:4px;}
  @media (min-width:900px){ .ov-charts{grid-template-columns:1.4fr 1fr;} }
  .dc-legend{display:flex; gap:16px; font-size:12px; color:#8a7a5a; font-weight:700; margin-bottom:10px;}
  .dc-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:6px;}
  .daychart{display:flex; align-items:flex-end; gap:5px; height:150px;}
  .dc-col{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; min-width:0;}
  .dc-pair{flex:1; width:100%; display:flex; align-items:flex-end; gap:2px;}
  .dc-bar{flex:1; display:block; border-radius:4px 4px 0 0;}
  .l{background:var(--gold);} .b{background:var(--navy);}
  .dc-col span{font-size:9.5px; color:#a99c81; font-family:'JetBrains Mono',monospace;}
  .tc-row{display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:10px; margin-bottom:11px; font-size:12.5px;}
  .tc-name{font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .tc-track{height:10px; background:#f1e8d2; border-radius:10px; overflow:hidden;}
  .tc-track i{display:block; height:100%; background:linear-gradient(90deg,var(--green),#6E8F5C); border-radius:10px;}
  .chart-empty{font-size:13px; color:#a99c81; padding:18px 0; text-align:center;}

  /* ---- UX polish (accessibility + smoothness), added without touching existing rules ---- */
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  button, a, input, select, textarea{ -webkit-tap-highlight-color:transparent; }
  :focus-visible{ outline:3px solid var(--gold,#D9A441); outline-offset:2px; border-radius:6px; }
  img{ max-width:100%; height:auto; }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }