:root { --g: #176b5b; --g2: #0f5144; --bg: #f3f6f5; --card: #fff; --line: #dbe3e0; --txt: #14211e; --mut: #5d6e69; --red: #b42318; --amb: #b54708; --blu: #175cd3; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 15px/1.6 "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif; }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.3; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
a { color: var(--g); }
.boot { text-align: center; padding: 4rem 1rem; color: var(--mut); }

/* frame */
.bar { background: var(--g); color: #fff; display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; position: sticky; top: 0; z-index: 5; }
.bar .brand { font-weight: 700; font-size: 1.05rem; flex: 1; }
.bar .who { font-size: .85rem; opacity: .9; }
.bar button { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 8px; padding: .35rem .8rem; cursor: pointer; font: inherit; }
nav.tabs { display: flex; gap: .25rem; overflow-x: auto; background: var(--card); border-bottom: 1px solid var(--line); padding: 0 .5rem; position: sticky; top: 2.9rem; z-index: 4; }
nav.tabs a { padding: .65rem .9rem; white-space: nowrap; text-decoration: none; color: var(--mut); border-bottom: 3px solid transparent; }
nav.tabs a.on { color: var(--g); border-color: var(--g); font-weight: 700; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.muted { color: var(--mut); font-size: .9rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; min-width: 0; }
.row.tight > * { flex: 0 1 auto; }

/* forms */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
input, select, textarea { width: 100%; font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--txt); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--g); outline-offset: 0; border-color: var(--g); }
textarea { min-height: 5.5rem; resize: vertical; }
.field { margin-bottom: .8rem; }
.field .err { color: var(--red); font-size: .85rem; min-height: 1em; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--red); }
input[type=checkbox] { width: auto; }
.chk { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
button.btn, a.btn { display: inline-block; background: var(--g); color: #fff; border: 0; border-radius: 8px; padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; }
button.btn:hover { background: var(--g2); }
button.btn:disabled { opacity: .55; cursor: default; }
button.btn.sec { background: #fff; color: var(--g); border: 1px solid var(--g); }
button.btn.danger { background: var(--red); }
button.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.warn { background: #fffaeb; border: 1px solid #fedf89; color: var(--amb); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; }
.fail { background: #fef3f2; border: 1px solid #fecdca; color: var(--red); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; }
.ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; }

/* image picker */
.pick { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pick input[type=file] { display: none; }
.preview { max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: 8px; display: block; margin-top: .4rem; }

/* login */
.login { max-width: 380px; margin: 8vh auto; }
.login .logo { width: 56px; height: 56px; border-radius: 14px; background: var(--g); color: #fff; display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; margin: 0 auto .8rem; }
.login h1 { text-align: center; }

/* tables */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
th { background: #f7faf9; font-size: .85rem; color: var(--mut); white-space: nowrap; }
td.num, th.num { text-align: left; font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap; }
tr.click { cursor: pointer; } tr.click:hover td { background: #f7faf9; }
.pager { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: .75rem; }

/* badges */
.badge { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef2f1; color: var(--mut); white-space: nowrap; }
.badge.pending { background: #fff4e5; color: var(--amb); } .badge.fetched { background: #eff4ff; color: var(--blu); }
.badge.accepted, .badge.reconciled { background: #ecfdf3; color: #067647; } .badge.rejected, .badge.discrepancy { background: #fef3f2; color: var(--red); }
.badge.conflict { background: #fdf2fa; color: #c11574; } .badge.withdrawn { background: #eef2f1; color: var(--mut); }

/* proposal cards */
.prop { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; margin-bottom: .6rem; background: var(--card); }
.prop header { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.prop header strong { flex: 1; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .5rem 0; }
dl.kv dt { color: var(--mut); } dl.kv dd { margin: 0; word-break: break-word; }
.thumb { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; display: block; margin-top: .4rem; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(15, 25, 22, .55); display: grid; place-items: center; padding: 1rem; z-index: 20; overflow-y: auto; }
.modal .box { background: var(--card); border-radius: 14px; width: min(720px, 100%); max-height: 94vh; overflow-y: auto; padding: 1rem 1.1rem; }
.modal .box img.big { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); margin-top: .5rem; }
.modal .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.modal .top button { background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--mut); line-height: 1; }

/* reports */
.bars { display: grid; gap: .35rem; margin-top: .5rem; }
.bars .b { display: grid; grid-template-columns: minmax(70px, 160px) 1fr max-content; gap: .5rem; align-items: center; font-size: .9rem; }
.bars .t { background: #e8efed; border-radius: 6px; height: 1.1rem; overflow: hidden; direction: ltr; }
.bars .t i { display: block; height: 100%; background: var(--g); }
.totals { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.totals .tot { flex: 1 1 180px; background: #f7faf9; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; }
.totals .tot b { display: block; font-size: 1.25rem; direction: ltr; text-align: right; }
.tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.tag { background: #eef2f1; border-radius: 999px; padding: .1rem .6rem; font-size: .85rem; display: inline-flex; gap: .3rem; align-items: center; }
.tag button { border: 0; background: none; cursor: pointer; color: var(--mut); padding: 0; font-size: 1rem; line-height: 1; }
pre.json { background: #f7faf9; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; overflow-x: auto; direction: ltr; text-align: left; font-size: .8rem; margin: .3rem 0; }

#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #14211e; color: #fff; padding: .6rem 1rem; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; max-width: 90vw; }
#toast.show { opacity: 1; }

@media (max-width: 640px) {
  main { padding: .6rem; }
  .bar .who { display: none; }
  table.stack thead { display: none; }
  table.stack tr { display: block; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; padding: .3rem .5rem; background: var(--card); }
  table.stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem 0; text-align: right; }
  table.stack td::before { content: attr(data-l); color: var(--mut); font-size: .85rem; }
  table.stack td.num { direction: rtl; }
}
@media print { .bar, nav.tabs, .actions, #toast { display: none; } body { background: #fff; } }