:root{
  --navy:#082d41;
  --navy-2:#0c3a52;
  --gold:#c99237;
  --gold-deep:#a96f18;
  --bg:#f4f7f9;
  --panel:#ffffff;
  --line:#d9e3e9;
  --line-soft:#e9eef2;
  --text:#173449;
  --muted:#7f919d;
  --green:#35a168;
  --amber:#ef9b32;
  --red:#d75b5b;
  --shadow:0 14px 36px rgba(16,49,68,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

.ops-shell{min-height:100vh;background:var(--bg)}
.ops-sidebar{
  position:fixed;inset-block:0;inset-inline-start:0;width:300px;background:var(--navy);
  color:#fff;padding:44px 24px 30px;z-index:30;overflow:hidden
}
.brand{text-align:center}
.brand-mark{width:94px;height:58px;margin:0 auto 12px;color:var(--gold)}
.brand-mark svg{width:100%;height:100%}
.brand-ar{font-weight:800;font-size:14px}
.brand-en{margin-top:4px;color:#c3d1da;font-size:11px}
.sidebar-separator{height:1px;background:rgba(255,255,255,.13);margin:30px 0}
.sidebar-kicker{color:#8fa6b5;font-size:11px;margin-bottom:14px;padding-inline:14px}
.nav-list{display:grid;gap:10px}
.nav-item{
  border:0;width:100%;background:transparent;color:#fff;border-radius:16px;padding:14px 15px;
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;text-align:start
}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:var(--gold);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.nav-icon{width:26px;height:26px;display:grid;place-items:center;color:#fff}
.nav-icon svg{width:20px;height:20px}
.nav-item b{display:block;font-size:15px}
.nav-item small{display:block;margin-top:5px;color:#b5c6d0;font-size:10px}
.nav-item.active small{color:#fff6e7}
.sidebar-watermark{position:absolute;inset-inline-start:-8px;bottom:-25px;width:150px;height:150px;color:#7891a0;opacity:.34}
.sidebar-watermark svg{width:100%;height:100%}

.ops-main{min-height:100vh;margin-inline-start:300px}
.topbar{
  height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:16px;padding:0 28px;position:sticky;top:0;z-index:20
}
.account{display:flex;align-items:center;gap:10px;min-width:185px}
.account-avatar{width:48px;height:48px;border:0;border-radius:50%;background:#b98a44;color:#fff;font-weight:800}
.account-meta{display:grid;gap:3px;text-align:start}
.account-meta b{font-size:12px}.account-meta small{font-size:9px;color:var(--muted)}
.chev{color:#768995}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-button,.lang-button{
  width:50px;height:50px;border:1px solid var(--line);background:#fff;border-radius:50%;color:#173449;
  display:grid;place-items:center;font-weight:800
}
.icon-button span{display:grid;place-items:center}
.icon-button svg{width:20px;height:20px}
.global-search{
  height:50px;max-width:550px;flex:1;margin-inline:auto;border:1px solid #e3e9ed;background:#f4f6f8;
  border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 16px;color:#93a1aa
}
.global-search span{display:grid;place-items:center}
.global-search svg{width:16px;height:16px}
.global-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}
.primary-cta{
  height:50px;border:0;border-radius:28px;background:var(--gold);color:#fff;font-weight:800;
  padding:0 22px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 20px rgba(201,146,55,.2)
}
.primary-cta svg{width:18px;height:18px}

.workspace{padding:28px 28px 70px;max-width:1550px;margin:auto}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.page-head h1{margin:7px 0 7px;font-size:30px}
.page-head p{margin:0;color:var(--muted);font-size:12px}
.version-pill{
  display:inline-flex;border:1px solid #d8e2e7;border-radius:999px;padding:7px 11px;background:#fff;
  color:#607684;font-size:10px;font-weight:700
}

.summary-strip{
  display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;margin-bottom:12px
}
.summary-strip>div{min-height:62px;display:flex;align-items:center;justify-content:center;gap:10px;border-inline-start:1px solid var(--line)}
.summary-strip>div:first-child{border-inline-start:0}
.summary-strip b{font-size:21px}.summary-strip span{font-size:10px;color:var(--muted)}
.security-strip{
  min-height:44px;border:1px solid #d4e3e8;background:#f9fcfd;border-radius:12px;
  display:flex;align-items:center;gap:8px;padding:0 14px;color:#416071;margin-bottom:14px
}
.security-strip strong{font-size:11px;color:#2e7652}
.security-strip span:last-child{font-size:10px;color:#79909b}
.mini-lock{display:grid;place-items:center}.mini-lock svg{width:14px;height:14px}

.integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.integration-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 2px 7px rgba(26,52,66,.02)}
.integration-card.payment-card.open{grid-column:1/-1}
.card-toggle{
  border:0;background:#fff;width:100%;min-height:108px;display:flex;align-items:center;gap:14px;padding:16px;text-align:start;color:var(--text)
}
.card-identity{display:flex;align-items:center;gap:12px;min-width:210px}
.card-icon{width:42px;height:42px;border-radius:12px;background:#f2f6f8;color:#2b6686;display:grid;place-items:center}
.card-icon svg{width:20px;height:20px}
.card-identity b{display:block;font-size:15px}.card-identity small{display:block;margin-top:4px;color:#8798a3;font-size:9px}
.card-badges{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;padding:5px 9px;border-radius:999px;border:1px solid var(--line);font-size:9px;font-weight:800}
.pill.neutral{background:#f4f6f7;color:#71828b}
.card-arrow{width:30px;height:30px;border-radius:9px;background:#f3f6f8;display:grid;place-items:center;color:#335c72}

.payment-compact-status{margin-inline-start:auto;display:flex;align-items:center;gap:20px}
.provider-line{display:flex;align-items:center;gap:6px;font-size:11px}.provider-line strong{color:#9b6a1e}
.dots{display:flex;gap:13px;flex-wrap:wrap;justify-content:flex-end}
.dot-state{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.dot-state i{width:9px;height:9px;border-radius:50%;background:#9ca8af}
.dot-state b{font-size:10.5px}.dot-state.warn i{background:var(--amber)}.dot-state.muted i{background:#9ca8af}.dot-state.good i{background:var(--green)}

.payment-console{border-top:1px solid var(--line-soft);padding:16px;background:#fff}
.console-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff}
.console-head h2{margin:0;font-size:20px}.console-head p{margin:3px 0 0;color:var(--muted);font-size:10px}
.status-chip{padding:6px 10px;border-radius:999px;font-size:9px;font-weight:800}.status-chip.warn{background:#fff7e7;color:#9a691f;border:1px solid #ebcf9c}
.integration-control{
  margin-top:12px;border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.integration-control b{display:block;font-size:14px}.integration-control small{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.safe-switch{border:0;background:transparent;display:flex;align-items:center;gap:8px;color:#657984}
.safe-switch>span{width:46px;height:25px;border-radius:99px;background:#a9b4bb;padding:3px;display:block}
.safe-switch>span i{display:block;width:19px;height:19px;border-radius:50%;background:#fff}
.safe-switch b{font-size:10px}.safe-switch.locked{opacity:.9}

.console-grid{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:12px;margin-top:12px}
.console-panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfcfd;align-self:start}
.console-panel header{padding:12px 13px;background:#fff;border-bottom:1px solid var(--line-soft)}
.console-panel h3{margin:0;font-size:16px}.console-panel header p{margin:3px 0 0;color:var(--muted);font-size:9px}
.row{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:11px}
.row:last-child{border-bottom:0}.row>span:first-child{font-weight:800}.row>b{font-size:10px}.gold{color:#9b6b20}
.mini-state{padding:5px 8px;border-radius:999px;font-size:8.7px;font-weight:800;border:1px solid var(--line)}
.mini-state.good{background:#eff9f3;color:#27734d;border-color:#c9e5d3}.mini-state.warn{background:#fff8ea;color:#98671f;border-color:#ebd2a3}.mini-state.muted{background:#f2f4f5;color:#72818a}.mini-state.neutral{background:#fff;color:#536c7a}

.bottom-grid{display:grid;grid-template-columns:.86fr 1.7fr;gap:12px;margin-top:12px;align-items:start}
.console-side{display:flex;flex-direction:column;gap:9px}
.warning-box{border:1px solid #ead1a1;background:#fff9ef;border-radius:12px;padding:13px 14px;color:#78521c}
.warning-box b{font-size:13px}.warning-box p{margin:4px 0 0;font-size:10px;line-height:1.55}
.console-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:38px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 14px;color:var(--text);font-weight:800;font-size:10px}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#fff}

.modal-backdrop{position:fixed;inset:0;background:rgba(9,28,40,.48);display:grid;place-items:center;z-index:60;padding:20px}
.modal{width:min(780px,95vw);background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.modal-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.modal-head h2{margin:0;font-size:22px}.modal-head p{margin:4px 0 0;color:var(--muted);font-size:10px}
.modal-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px;color:#23485e}
.modal-body{padding:20px}
.source-strip{border:1px solid #d7e5ea;background:#f8fbfc;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.source-strip b{font-size:10px}.source-strip span{font-size:10px;color:#246181}.source-strip strong{margin-inline-start:auto;font-size:9px;color:#2f7954}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.modal-grid .full{grid-column:1/-1}
.modal-grid label{display:grid;gap:6px}.modal-grid label>span{font-size:10px;font-weight:800;color:#607683}
.modal-grid input{height:46px;border:1px solid var(--line);border-radius:10px;background:#f8fafb;padding:0 12px;color:#264a60}
.modal-note{margin-top:14px;border:1px solid #ead1a1;background:#fff9ef;border-radius:11px;padding:12px 13px;color:#77531d}
.modal-note b{font-size:12px}.modal-note p{margin:4px 0 0;font-size:10px;line-height:1.55}
.modal-actions{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-start}

.toast{position:fixed;left:24px;bottom:24px;z-index:100;background:#173449;color:#fff;border-radius:10px;padding:11px 14px;font-size:10px;box-shadow:var(--shadow)}

@media(max-width:1200px){
  .ops-sidebar{width:250px}.ops-main{margin-inline-start:250px}
  .integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console-grid{grid-template-columns:1fr 1fr}.console-grid .console-panel:last-child{grid-column:1/-1}
  .payment-compact-status{flex-direction:column;align-items:flex-end;gap:7px}
}
@media(max-width:840px){
  .ops-sidebar{display:none}.ops-main{margin-inline-start:0}.topbar{padding:0 14px}
  .account-meta,.global-search{display:none}.primary-cta{margin-inline-start:auto}
  .workspace{padding:18px 14px 50px}.summary-strip{grid-template-columns:repeat(2,1fr)}
  .integration-grid{grid-template-columns:1fr}.console-grid,.bottom-grid{grid-template-columns:1fr}
  .console-grid .console-panel:last-child{grid-column:auto}
  .payment-compact-status{display:none}.card-identity{min-width:0}
  .modal-grid{grid-template-columns:1fr}.modal-grid .full{grid-column:auto}
}