@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900;1000&display=swap');

:root{
  --bg:#06070a;
  --surface:#0d1017;
  --card:#141923;
  --line:rgba(255,255,255,.10);
  --text:#f7f8fb;
  --muted:#9da7b8;
  --gold:#efca72;
  --gold2:#9b641d;
  --gold3:#fff0bd;
  --green:#35e69d;
  --red:#ff5f7e;
  --blue:#6bbcff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{direction:rtl;scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:'Cairo',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 90% -10%,rgba(239,202,114,.18),transparent 34%),
    radial-gradient(circle at 0% 12%,rgba(107,188,255,.08),transparent 30%),
    linear-gradient(180deg,#0a0b0f 0%,#050608 100%);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}
a{text-decoration:none;color:inherit}
button,input,select{font-family:'Cairo',system-ui,sans-serif}
button{cursor:pointer}
.app{width:min(1040px,100%);margin:auto;min-height:100vh;padding:12px 12px 104px}

/* Header */
.appbar{
  position:sticky;
  top:0;
  z-index:100;
  margin:-12px -12px 14px;
  padding:10px 12px 12px;
  background:rgba(6,7,10,.92);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.appbar-inner{
  width:min(1040px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
.profile-pill{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.032));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 12px 36px rgba(0,0,0,.24);
}
.avatar{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#12100a;
  font-size:21px;
  font-weight:1000;
  background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));
  box-shadow:0 10px 28px rgba(239,202,114,.14), inset 0 1px 0 rgba(255,255,255,.35);
}
.profile-text{min-width:0}
.profile-name{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
  font-size:17px;
  font-weight:1000;
  line-height:1.15;
}
.profile-role{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.action-dock{
  display:grid;
  grid-template-columns:repeat(3,44px);
  gap:7px;
  justify-content:end;
}
.dock-btn{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  font-weight:1000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.dock-btn:before{font-size:19px;line-height:1}
.dock-btn.refresh:before{content:"↻"}
.dock-btn.print:before{content:"⎙"}
.dock-btn.logout:before{content:"×";font-size:24px}
.dock-btn.print{
  background:linear-gradient(135deg,var(--gold3),var(--gold2));
  color:#111;
  border-color:rgba(239,202,114,.35);
}
.app-label{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.app-label h1{font-size:22px;font-weight:1000}
.app-label span{font-size:12px;font-weight:900;color:var(--muted)}

/* Hero */
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12px;
  margin-bottom:12px;
}
.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  min-height:208px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.038)),
    radial-gradient(circle at 12% 0%,rgba(239,202,114,.15),transparent 45%);
  border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  animation:floatIn .45s ease both;
}
.hero-card:after{
  content:"";
  position:absolute;
  inset:auto -82px -100px auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,202,114,.16),transparent 66%);
  pointer-events:none;
  z-index:0;
}
.hero-card > *{
  position:relative;
  z-index:2;
}
.status-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(239,202,114,.10);
  border:1px solid rgba(239,202,114,.24);
  color:#ffe7aa;
  font-size:12px;
  font-weight:1000;
  margin-bottom:16px;
}
.status-chip:after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px var(--green);
}
.hero-card h2{
  position:relative;
  font-size:34px;
  line-height:1.14;
  font-weight:1000;
  margin-bottom:10px;
}
.hero-card p{
  position:relative;
  color:var(--muted);
  font-size:15px;
  font-weight:850;
  line-height:1.85;
}
.hero-actions{
  position:relative;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:18px;
}
.total-card{
  overflow:hidden;
  position:relative;
  border-radius:32px;
  padding:22px;
  color:#12100a;
  background:linear-gradient(135deg,#fff1be 0%,#e0ad4b 46%,#875516 100%);
  box-shadow:0 26px 72px rgba(155,100,29,.28);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:208px;
  animation:floatIn .52s ease both;
}
.total-card:before{
  content:"";
  position:absolute;
  inset:-30px auto auto -40px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
}
.total-card span{position:relative;font-size:13px;font-weight:1000}
.total-card strong{position:relative;display:block;margin:12px 0 8px;font-size:38px;line-height:1;font-weight:1000}
.total-card small{position:relative;font-size:12px;font-weight:1000;opacity:.78}

/* Buttons */
.btn{
  border:0;
  border-radius:16px;
  padding:11px 15px;
  min-height:44px;
  background:linear-gradient(135deg,var(--gold3),var(--gold2));
  color:#12100a;
  font-size:14px;
  font-weight:1000;
  box-shadow:0 12px 28px rgba(239,202,114,.12), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;box-shadow:none}
.btn.green{background:rgba(53,230,157,.13);color:var(--green);border:1px solid rgba(53,230,157,.25);box-shadow:none}
.btn.red{background:rgba(255,95,126,.13);color:var(--red);border:1px solid rgba(255,95,126,.25);box-shadow:none}
.btn.blue{background:rgba(107,188,255,.13);color:var(--blue);border:1px solid rgba(107,188,255,.25);box-shadow:none}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.metric{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:16px;
  min-height:112px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
  border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(0,0,0,.23);
}
.metric:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--gold),var(--green),var(--blue));
}
.metric span{display:block;color:var(--muted);font-size:12px;font-weight:900}
.metric strong{display:block;margin-top:9px;font-size:25px;font-weight:1000}
.green{color:var(--green)}.gold{color:var(--gold)}.blue{color:var(--blue)}.red{color:var(--red)}

/* Panel */
.panel{
  overflow:hidden;
  border-radius:30px;
  margin-top:12px;
  background:rgba(13,16,22,.80);
  border:1px solid var(--line);
  box-shadow:0 18px 56px rgba(0,0,0,.28);
  scroll-margin-top:110px;
}
.panel-head{
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.panel-title{font-size:22px;font-weight:1000}
.count{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(239,202,114,.10);
  color:#ffe2a2;
  border:1px solid rgba(239,202,114,.23);
  font-size:12px;
  font-weight:1000;
}
.toolbar{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.input,.select{
  width:100%;
  height:52px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(4,5,8,.68);
  color:#fff;
  font-size:15px;
  font-weight:850;
  padding:0 14px;
  outline:none;
  margin-bottom:10px;
}
.input:focus,.select:focus{border-color:rgba(239,202,114,.55);box-shadow:0 0 0 4px rgba(239,202,114,.075)}
.search{margin-bottom:0}
.form-card{padding:16px}
.request-list{display:grid;gap:10px;padding:12px}
.request{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border-radius:23px;
  padding:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.095);
  animation:cardIn .28s ease both;
}
.request:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--gold),var(--blue));
}
.req-main h3{font-size:19px;font-weight:1000;line-height:1.35;margin-bottom:9px}
.req-meta{display:flex;flex-wrap:wrap;gap:7px 10px;color:var(--muted);font-size:12px;font-weight:850;line-height:1.65}
.req-meta b{color:#fff;font-weight:1000}
.amount{text-align:left;white-space:nowrap;font-size:23px;font-weight:1000}
.status{display:inline-flex;margin-top:10px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:1000}
.pending{background:rgba(239,202,114,.12);color:#ffe0a2;border:1px solid rgba(239,202,114,.22)}
.done{background:rgba(53,230,157,.12);color:var(--green);border:1px solid rgba(53,230,157,.23)}
.rejected{background:rgba(255,95,126,.12);color:var(--red);border:1px solid rgba(255,95,126,.23)}
.req-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.empty{padding:34px 16px;text-align:center;color:var(--muted);font-weight:850}
.toast{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(239,202,114,.12);
  border:1px solid rgba(239,202,114,.24);
  color:#ffe0a2;
  font-weight:1000;
}

/* Bottom nav */
.bottom-nav{
  position:sticky;
  bottom:10px;
  z-index:110;
  display:flex;
  gap:8px;
  margin-top:14px;
  padding:8px;
  background:rgba(4,5,8,.90);
  border:1px solid var(--line);
  border-radius:24px;
  backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.bottom-nav a,.bottom-nav button{
  flex:1;
  text-align:center;
  padding:12px 8px;
  border-radius:18px;
  color:#b9c2d2;
  font-weight:1000;
  border:0;
  background:transparent;
  font-size:15px;
}
.bottom-nav .active{
  background:linear-gradient(135deg,var(--gold3),var(--gold2));
  color:#12100a;
}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.login-card{
  width:100%;
  max-width:430px;
  text-align:center;
  border-radius:34px;
  padding:38px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line);
  box-shadow:0 30px 95px rgba(0,0,0,.48);
}
.login-logo{
  width:108px;
  height:108px;
  margin:0 auto 20px;
  border-radius:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#15100a;
  font-size:42px;
  font-weight:1000;
}
.login-card h1{font-size:40px;font-weight:1000}
.login-card p{color:var(--muted);font-weight:800;margin:8px 0 22px}
.pin-wrap{display:flex;gap:12px;justify-content:center;margin:22px 0;direction:ltr!important}
.pin-input{
  width:58px;
  height:66px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:#101219;
  color:#fff;
  font-size:32px;
  font-weight:1000;
  text-align:center;
  outline:none;
  direction:ltr!important;
}
.hidden-pin{position:absolute;opacity:0;pointer-events:none}
.alert{border-radius:16px;background:rgba(255,95,125,.13);border:1px solid rgba(255,95,125,.25);color:#ffb2bd;padding:12px;margin-bottom:12px;font-weight:900}

@keyframes floatIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:680px){
  .app{padding:10px 9px 94px}
  .appbar{margin:-10px -9px 12px;padding:9px}
  .appbar-inner{grid-template-columns:1fr auto;align-items:start}
  .profile-pill{padding:7px 8px;border-radius:20px}
  .avatar{width:42px;height:42px;min-width:42px;border-radius:15px;font-size:18px}
  .profile-name{max-width:calc(100vw - 206px);font-size:14px}
  .profile-role{font-size:11px}
  .action-dock{grid-template-columns:repeat(2,42px);gap:6px}
  .dock-btn{width:42px;height:42px;border-radius:15px}
  .dock-btn.logout{grid-column:2}
  .app-label{align-items:flex-end}
  .app-label h1{font-size:20px}
  .app-label span{font-size:11px}
  .hero-grid{grid-template-columns:1fr}
  .hero-card{padding:18px;border-radius:27px;min-height:178px}
  .hero-card h2{font-size:29px}
  .hero-card p{font-size:14px}
  .total-card{min-height:152px;border-radius:27px}
  .total-card strong{font-size:32px}
  .metrics{grid-template-columns:1fr 1fr}
  .metric{min-height:96px;padding:14px;border-radius:22px}
  .metric strong{font-size:22px}
  .panel-title{font-size:20px}
  .request{grid-template-columns:1fr}
  .amount{text-align:right;font-size:24px}
  .pin-input{width:55px;height:64px}
}


.hero-actions,
.hero-actions a,
.hero-actions button,
.bottom-nav,
.bottom-nav a,
.bottom-nav button,
.action-dock,
.action-dock a,
.action-dock button,
.req-actions,
.req-actions form,
.req-actions button{
  position:relative;
  z-index:20;
  pointer-events:auto;
}

a.btn,
button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.dock-btn{
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}



/* Receipt Professional Clean v2 */
.receipt-view{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:14px!important;
  padding:14px!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,rgba(53,230,157,.12),rgba(255,255,255,.035))!important;
  border:1px solid rgba(53,230,157,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.20)!important;
}
.receipt-view:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#35e69d;
  box-shadow:0 0 16px rgba(53,230,157,.9);
  flex:0 0 auto;
}
.receipt-status-text{
  color:#dce5f4;
  font-size:14px;
  font-weight:1000;
  margin-inline-start:auto;
}
.receipt-download-btn{
  min-height:40px!important;
  padding:9px 14px!important;
  border-radius:14px!important;
  font-size:13px!important;
  white-space:nowrap!important;
}
.request.has-receipt{
  border-color:rgba(53,230,157,.20)!important;
}


/* Receipt Role Logic v3 */
.receipt-view{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:16px!important;
  padding:14px 15px!important;
  border-radius:22px!important;
  background:
    linear-gradient(135deg,rgba(53,230,157,.14),rgba(53,230,157,.045)),
    radial-gradient(circle at 10% 20%,rgba(53,230,157,.18),transparent 36%)!important;
  border:1px solid rgba(53,230,157,.30)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 14px 34px rgba(0,0,0,.24)!important;
}
.receipt-view:before{
  content:"✓";
  width:32px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:rgba(53,230,157,.18)!important;
  color:#35e69d!important;
  font-size:18px!important;
  font-weight:1000!important;
  box-shadow:0 0 18px rgba(53,230,157,.35)!important;
  flex:0 0 auto!important;
}
.receipt-status-text{
  color:#eef7ff!important;
  font-size:14px!important;
  font-weight:1000!important;
  margin-inline-start:auto!important;
  line-height:1.35!important;
}
.receipt-download-btn{
  min-height:42px!important;
  padding:9px 14px!important;
  border-radius:15px!important;
  font-size:13px!important;
  white-space:nowrap!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#fff!important;
}
@media(max-width:680px){
  .receipt-view{
    padding:12px!important;
    gap:10px!important;
  }
  .receipt-status-text{
    font-size:13px!important;
  }
  .receipt-download-btn{
    min-height:40px!important;
    padding:8px 11px!important;
    font-size:12px!important;
  }
}


/* Receipt Smart Logic v4 */
.receipt-view{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-top:18px!important;
  padding:15px 16px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:
    linear-gradient(135deg,rgba(53,230,157,.12),rgba(53,230,157,.035)),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))!important;
  border:1px solid rgba(53,230,157,.24)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 40px rgba(0,0,0,.24)!important;
}
.receipt-view::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#35e69d,#6bbcff);
}
.receipt-view::after{
  content:"✓";
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(53,230,157,.16);
  color:#35e69d;
  font-size:18px;
  font-weight:1000;
  box-shadow:0 0 18px rgba(53,230,157,.35);
  flex:0 0 auto;
}
.receipt-status-text{
  color:#eef6ff!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1.4!important;
  margin-inline-end:auto!important;
}
.receipt-download-btn{
  min-height:42px!important;
  padding:9px 15px!important;
  border-radius:15px!important;
  font-size:13px!important;
  white-space:nowrap!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#fff!important;
  transition:.2s ease!important;
}
.receipt-download-btn:hover{
  transform:translateY(-1px)!important;
  background:rgba(255,255,255,.10)!important;
}
.request.has-receipt{
  border-color:rgba(53,230,157,.18)!important;
}
@media(max-width:680px){
  .receipt-view{
    gap:10px!important;
    padding:13px!important;
  }
  .receipt-status-text{
    font-size:12.5px!important;
  }
  .receipt-download-btn{
    min-height:38px!important;
    padding:8px 11px!important;
    font-size:12px!important;
  }
}


/* Attach Old Receipts v5 */
.receipt-view{
  position:relative!important;
}
.receipt-view .receipt-download-btn{
  transition:.22s ease!important;
}
.receipt-view .receipt-download-btn:hover{
  transform:translateY(-1px)!important;
}
.receipt-view:has(a[href*="receipt-center"]) {
  background:
    linear-gradient(135deg,rgba(255,184,77,.10),rgba(255,184,77,.03)),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))!important;
  border:1px solid rgba(255,184,77,.20)!important;
}
.receipt-view:has(a[href*="receipt-center"])::before{
  background:linear-gradient(180deg,#ffb84d,#ffd980)!important;
}
.receipt-view:has(a[href*="receipt-center"])::after{
  content:"!";
  background:rgba(255,184,77,.14)!important;
  color:#ffcf73!important;
  box-shadow:0 0 18px rgba(255,184,77,.25)!important;
}


/* Finance Categories Engine v1 */
.category-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  background:rgba(239,202,114,.12);
  color:#ffe2a2;
  border:1px solid rgba(239,202,114,.25);
}
.category-badge.asset{background:rgba(107,188,255,.12);color:#9bd2ff;border-color:rgba(107,188,255,.25)}
.category-badge.obligation{background:rgba(255,184,77,.12);color:#ffcf73;border-color:rgba(255,184,77,.25)}
.category-badge.advance{background:rgba(190,133,255,.12);color:#d4b8ff;border-color:rgba(190,133,255,.25)}
.category-badge.expense{background:rgba(239,202,114,.12);color:#ffe2a2;border-color:rgba(239,202,114,.25)}
.category-badge.other{background:rgba(255,255,255,.08);color:#dce5f4;border-color:rgba(255,255,255,.12)}
.finance-admin-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.finance-category-card{
  border-radius:18px;
  padding:13px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.finance-category-card strong{display:block;font-weight:1000;margin-bottom:4px}
.finance-category-card span{color:#9da7b8;font-size:12px;font-weight:850}
@media(max-width:680px){.finance-admin-grid{grid-template-columns:1fr}}


/* Finance Assets & Advances Engine v1 */
.finance-os-section{margin-top:16px}
.finance-os-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.finance-os-card{position:relative;overflow:hidden;border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.18)}
.finance-os-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#efca72,#35e69d);border-radius:99px}
.finance-os-card h3{font-size:20px;margin:0 0 8px;font-weight:1000}
.finance-os-card .muted{color:#9da7b8;font-size:13px;font-weight:850}
.finance-os-card .big{display:block;margin-top:12px;font-size:26px;font-weight:1000}
.finance-progress{height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:12px}
.finance-progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#35e69d,#6bbcff)}
.finance-form-grid{display:grid;gap:10px}
.finance-mini-badge{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(53,230,157,.12);color:#35e69d;border:1px solid rgba(53,230,157,.23);font-size:12px;font-weight:1000}
@media(max-width:680px){.finance-os-grid{grid-template-columns:1fr}.finance-os-card h3{font-size:18px}.finance-os-card .big{font-size:22px}}

/* Finance OS Structured v2 */
.finance-dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.finance-control-card{position:relative;overflow:hidden;border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.18)}.finance-control-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#efca72,#35e69d);border-radius:99px}.finance-control-card h3{font-size:20px;margin:0 0 8px;font-weight:1000}.finance-control-card .muted{color:#9da7b8;font-size:13px;font-weight:850}.finance-control-card .big{display:block;margin-top:12px;font-size:26px;font-weight:1000}.finance-mini-badge{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(53,230,157,.12);color:#35e69d;border:1px solid rgba(53,230,157,.23);font-size:12px;font-weight:1000}.finance-progress{height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:12px}.finance-progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#35e69d,#6bbcff)}.finance-form-grid{display:grid;gap:10px}@media(max-width:680px){.finance-dashboard-grid{grid-template-columns:1fr}.finance-control-card h3{font-size:18px}.finance-control-card .big{font-size:22px}}


/* Finance OS Logic v3 */
.finance-info-line{display:flex;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:8px;margin-top:8px;color:#9da7b8;font-size:13px;font-weight:900}
.finance-info-line b{color:#fff}
.finance-card-note{margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(239,202,114,.08);border:1px solid rgba(239,202,114,.18);color:#ffe2a2;font-weight:900;font-size:12px}


/* Payment Story v6 */
.finance-pay-box{margin-top:12px}
.finance-pay-box summary{list-style:none;cursor:pointer}
.finance-pay-box summary::-webkit-details-marker{display:none}
.finance-info-line{display:flex;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:8px;margin-top:8px;color:#9da7b8;font-size:13px;font-weight:900}
.finance-info-line b{color:#fff;text-align:left}
.finance-card-note{margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(239,202,114,.08);border:1px solid rgba(239,202,114,.18);color:#ffe2a2;font-weight:900;font-size:12px}


/* ==================================================
   HAFEZ Finance OS V11 - Clean Dashboard System
   Academic-inspired: dashboard -> modules -> tables
   ================================================== */
:root{
  --hc-bg:#08090d;
  --hc-panel:#111620;
  --hc-panel2:#151b27;
  --hc-line:rgba(255,255,255,.10);
  --hc-text:#f8fafc;
  --hc-muted:#9aa4b2;
  --hc-gold:#d7b76b;
  --hc-green:#35e69d;
  --hc-blue:#7db7ff;
  --hc-red:#ff6f8d;
}
.hc-v11{
  min-height:100vh;
  background:
    radial-gradient(circle at 85% -10%, rgba(215,183,107,.14), transparent 36%),
    radial-gradient(circle at 0% 5%, rgba(125,183,255,.08), transparent 28%),
    linear-gradient(180deg,#0a0b10,#050608 100%) !important;
  color:var(--hc-text);
}
.hc-wrap{width:min(1180px,100%);margin:auto;padding:14px 14px 96px}
.hc-header{
  position:sticky;top:0;z-index:20;
  margin:-14px -14px 16px;padding:14px;
  background:rgba(8,9,13,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07)
}
.hc-header-inner{width:min(1180px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hc-brand{display:flex;align-items:center;gap:12px;min-width:0}
.hc-logo{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;font-weight:1000;color:#090a0d;
  background:linear-gradient(135deg,#f0d68f,#90681f);
  box-shadow:0 14px 34px rgba(0,0,0,.30)
}
.hc-brand h1{font-size:21px;margin:0;line-height:1.1;font-weight:1000;letter-spacing:-.2px}
.hc-brand span{display:block;color:var(--hc-muted);font-size:12px;font-weight:800;margin-top:3px}
.hc-user{display:flex;gap:8px;align-items:center}
.hc-pill,.hc-btn{
  min-height:38px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  color:#fff;font-weight:900;font-size:12px;text-decoration:none
}
.hc-btn.gold{background:linear-gradient(135deg,#f0d68f,#936a22);color:#101114;border:0}
.hc-hero{
  border-radius:30px;padding:22px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(135deg,rgba(215,183,107,.14),rgba(255,255,255,.045) 44%,rgba(125,183,255,.07));
  box-shadow:0 18px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06)
}
.hc-kicker{
  display:inline-flex;padding:7px 12px;border-radius:999px;
  background:rgba(215,183,107,.11);border:1px solid rgba(215,183,107,.22);
  color:#f2d99c;font-size:12px;font-weight:1000
}
.hc-hero h2{font-size:32px;font-weight:1000;margin:12px 0 6px;letter-spacing:-.5px}
.hc-hero p{color:var(--hc-muted);font-weight:800;line-height:1.8;margin:0;max-width:760px}
.hc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.hc-kpi{
  border-radius:24px;padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.032));
  border:1px solid var(--hc-line)
}
.hc-kpi label{display:block;color:var(--hc-muted);font-size:12px;font-weight:900;margin-bottom:8px}
.hc-kpi strong{display:block;font-size:24px;font-weight:1000}
.hc-kpi small{display:block;margin-top:4px;color:var(--hc-muted);font-size:11px;font-weight:800}
.hc-section{margin-top:18px}
.hc-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.hc-section-title{font-size:22px;font-weight:1000}
.hc-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hc-module{
  min-height:132px;border-radius:26px;padding:17px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--hc-line);text-decoration:none;color:#fff;
  transition:.18s ease
}
.hc-module:hover{transform:translateY(-2px);border-color:rgba(215,183,107,.28)}
.hc-icon{
  width:44px;height:44px;border-radius:16px;display:grid;place-items:center;
  background:rgba(215,183,107,.10);border:1px solid rgba(215,183,107,.22);color:#e4c57f
}
.hc-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-module h3{font-size:21px;margin:12px 0 4px;font-weight:1000}
.hc-module p{margin:0;color:var(--hc-muted);font-size:13px;font-weight:800;line-height:1.6}
.hc-card{
  border-radius:26px;background:rgba(255,255,255,.052);border:1px solid var(--hc-line);
  overflow:hidden
}
.hc-table-wrap{overflow:auto}
.hc-table{width:100%;border-collapse:collapse;min-width:720px}
.hc-table th,.hc-table td{padding:13px 14px;text-align:right;border-bottom:1px solid rgba(255,255,255,.075);font-weight:850}
.hc-table th{font-size:12px;color:#d7deea;background:rgba(255,255,255,.035)}
.hc-table td{font-size:13px;color:#fff}
.hc-status{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:1000;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.hc-status.new{color:#f5d889;background:rgba(215,183,107,.11);border-color:rgba(215,183,107,.22)}
.hc-status.transferred,.hc-status.done{color:var(--hc-green);background:rgba(53,230,157,.10);border-color:rgba(53,230,157,.22)}
.hc-status.rejected{color:var(--hc-red);background:rgba(255,111,141,.10);border-color:rgba(255,111,141,.22)}
.hc-actions{display:flex;gap:8px;flex-wrap:wrap}
.hc-nav{display:flex;gap:8px;flex-wrap:wrap}
.hc-nav a{
  padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);font-weight:900;font-size:12px;color:#fff;text-decoration:none
}
.hc-empty{padding:20px;border-radius:22px;background:rgba(215,183,107,.07);border:1px solid rgba(215,183,107,.18);color:#f1d58e;font-weight:1000;text-align:center}
.hc-form{padding:16px;display:grid;gap:10px}
.hc-form .input,.hc-form .select{width:100%}
body.hc-v11 .appbar, body.hc-v11 .hero-grid, body.hc-v11 .metrics, body.hc-v11 .panel:not(.hc-keep){display:none!important}
@media(max-width:850px){.hc-kpis{grid-template-columns:repeat(2,1fr)}.hc-modules{grid-template-columns:repeat(2,1fr)}.hc-hero h2{font-size:27px}}
@media(max-width:560px){.hc-wrap{padding:12px 12px 90px}.hc-header{margin:-12px -12px 14px}.hc-kpis{gap:9px}.hc-kpi{padding:13px}.hc-kpi strong{font-size:20px}.hc-modules{grid-template-columns:1fr}.hc-user .hc-pill{display:none}.hc-brand h1{font-size:18px}.hc-hero{padding:18px;border-radius:26px}}


/* ==================================================
   V12 fixes: fixed nav, back button, mobile cards
   ================================================== */
.hc-subnav{
  position:sticky;
  top:76px;
  z-index:19;
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:8px 0 12px;
  margin-bottom:10px;
  background:linear-gradient(180deg,rgba(8,9,13,.96),rgba(8,9,13,.82));
  scrollbar-width:none;
}
.hc-subnav::-webkit-scrollbar{display:none}
.hc-subnav a{
  white-space:nowrap;
  padding:10px 13px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  font-weight:950;
  color:#fff;
  text-decoration:none;
  font-size:13px;
}
.hc-subnav a.active{
  background:linear-gradient(135deg,rgba(215,183,107,.24),rgba(255,255,255,.055));
  border-color:rgba(215,183,107,.34);
}
.hc-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  color:#fff;
  font-weight:1000;
  text-decoration:none;
  font-size:12px;
}
.hc-finance-list{display:grid;gap:12px}
.hc-finance-item{
  border-radius:24px;
  padding:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}
.hc-finance-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.hc-finance-title{font-size:20px;font-weight:1000;line-height:1.35}
.hc-finance-meta{display:grid;gap:7px}
.hc-rowline{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.075);padding-top:9px;color:#fff;font-weight:900}
.hc-rowline span:first-child{color:var(--hc-muted);font-weight:900}
.hc-progress{height:10px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:12px}
.hc-progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hc-green),var(--hc-blue));width:0}
@media(max-width:700px){
  .hc-header{position:sticky;top:0}
  .hc-subnav{top:74px}
  .hc-table-wrap{overflow:visible}
  .hc-table{min-width:0}
  .hc-table thead{display:none}
  .hc-table, .hc-table tbody, .hc-table tr, .hc-table td{display:block;width:100%}
  .hc-table tr{
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    margin:10px;
    padding:10px;
    background:rgba(255,255,255,.035)
  }
  .hc-table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    padding:10px 4px;
    text-align:right;
  }
  .hc-table td:last-child{border-bottom:0}
  .hc-table td:before{
    content:attr(data-label);
    color:var(--hc-muted);
    font-weight:1000;
    flex:0 0 42%;
  }
}


/* ==================================================
   V13 Executive Mobile Fix
   - unified header/back
   - no ugly tables on mobile
   - clean archive/payment/approval cards
   ================================================== */
.hc-header{
  left:0; right:0;
}
.hc-header-inner{
  min-height:58px;
}
.hc-user{flex-wrap:nowrap}
.hc-back,.hc-btn{
  white-space:nowrap;
}
.hc-subnav{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hc-page-title{
  font-size:30px;
  font-weight:1000;
  letter-spacing:-.4px;
  margin:18px 0 12px;
}
.hc-muted-note{
  color:var(--hc-muted);
  font-size:13px;
  font-weight:800;
  line-height:1.7;
  margin-top:6px;
}
.hc-clean-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.hc-clean-card{
  border-radius:26px;
  padding:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.032));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 42px rgba(0,0,0,.22);
}
.hc-clean-card h3{
  margin:0 0 14px;
  font-size:24px;
  line-height:1.35;
  font-weight:1000;
}
.hc-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.hc-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight:1000;
}
.hc-action-btn.gold{
  color:#101114;
  border:0;
  background:linear-gradient(135deg,#f0d68f,#9f7429);
}
.hc-action-btn.green{
  color:#33e69d;
  background:rgba(53,230,157,.11);
  border-color:rgba(53,230,157,.25);
}
.hc-mini-list{
  display:grid;
  gap:12px;
}
.hc-mini-card{
  border-radius:24px;
  padding:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
.hc-mini-card .title{
  font-size:20px;
  font-weight:1000;
  line-height:1.45;
  margin-bottom:10px;
}
.hc-pairs{
  display:grid;
  gap:0;
}
.hc-pair{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.075);
  font-weight:900;
}
.hc-pair:first-child{border-top:0}
.hc-pair .k{color:var(--hc-muted);min-width:110px}
.hc-pair .v{color:#fff;text-align:left;direction:rtl}
.hc-empty-clean{
  border-radius:24px;
  padding:24px 18px;
  border:1px dashed rgba(215,183,107,.30);
  background:rgba(215,183,107,.065);
  color:#f2d99c;
  font-weight:1000;
  text-align:center;
}
.hc-form-panel{
  border-radius:26px;
  padding:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.hc-form-panel .input,.hc-form-panel .select{
  margin-bottom:10px;
}
@media(max-width:700px){
  .hc-brand h1{font-size:15px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc-logo{width:44px;height:44px;border-radius:14px}
  .hc-user .hc-pill{display:none}
  .hc-header-inner{gap:8px}
  .hc-back,.hc-btn{min-height:36px;padding:8px 10px;font-size:12px}
  .hc-subnav{
    top:73px;
    margin-left:-12px;
    margin-right:-12px;
    padding:9px 12px 12px;
  }
  .hc-subnav a{
    font-size:13px;
    padding:10px 14px;
  }
  .hc-hero{
    display:none!important;
  }
  .hc-page-title{
    font-size:26px;
    margin-top:14px;
  }
  .hc-kpis{
    grid-template-columns:repeat(2,1fr)!important;
  }
  .hc-clean-grid{grid-template-columns:1fr}
  .hc-clean-card{padding:16px;border-radius:24px}
  .hc-clean-card h3{font-size:21px}
  .hc-card-actions{grid-template-columns:1fr}
  .hc-pair{font-size:14px}
  .hc-pair .k{min-width:120px}
  .hc-table-wrap{overflow:visible!important}
  .hc-table{display:block!important;min-width:0!important;width:100%!important}
  .hc-table thead{display:none!important}
  .hc-table tbody,.hc-table tr,.hc-table td{display:block!important;width:auto!important}
  .hc-table tr{
    margin:10px 0!important;
    padding:14px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:rgba(255,255,255,.045)!important;
  }
  .hc-table td{
    display:flex!important;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding:10px 0!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    text-align:right!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  .hc-table td:last-child{border-bottom:0!important}
  .hc-table td:before{
    content:attr(data-label);
    color:var(--hc-muted);
    font-weight:1000;
    flex:0 0 110px;
    text-align:right;
  }
}