/* ===== معرض أحمد الكبيسي — الأنماط المستخرجة من التصميم الأصلي ===== */
body{margin:0;background:#F3F1EC;font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#15181D;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#7A5518;text-decoration:none}a:hover{color:#15181D}
input,textarea,button,select{font-family:inherit}
.rx{font-family:'Readex Pro','IBM Plex Sans Arabic',sans-serif}
.ltr{direction:ltr;text-align:right}
.muted{color:#6B6A66}
.hidden{display:none !important}

/* ---- layout ---- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;background:#F3F1EC}
.sidebar{background:#101317;color:#C9CCD1;display:flex;flex-direction:column;padding:28px 20px;gap:36px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:10px;background:#C99A45;color:#101317;display:grid;place-items:center;font-family:'Readex Pro';font-weight:700;font-size:20px}
.brand-name{font-family:'Readex Pro';font-weight:600;color:#fff;font-size:16px;display:block}
.brand-sub{font-size:12px;color:#8A9099;display:block}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;color:#C9CCD1;font-size:15px;cursor:pointer}
.nav a:hover{background:#181C22;color:#fff}
.nav a.active{background:#1D2229;color:#fff;font-weight:600}
.nav a.active .dot{width:6px;height:6px;border-radius:50%;background:#C99A45}
.nav .sep{height:1px;background:#22272E;margin:8px 4px}
.side-user{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;background:#181C22;font-size:13px}
.side-user b{color:#fff;font-weight:600;font-size:14px}
.side-user span{color:#8A9099;font-size:12px}
.side-user .links{display:flex;gap:12px;margin-top:4px}
.side-user .links a{color:#C99A45;font-size:12.5px}
.side-user .links a:hover{color:#fff}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:12.5px;line-height:1.7;color:#8A9099;border-top:1px solid #22272E;padding-top:20px}
.side-foot .co{color:#C9CCD1;font-weight:500}
.side-foot .ph{direction:ltr;text-align:right;font-family:'Readex Pro';letter-spacing:.3px}
.main{padding:36px 40px 64px;min-width:0}
.wrap{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.wrap.narrow{max-width:880px;gap:20px}

/* ---- header ---- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head .kicker{font-size:14px;color:#6B6A66;display:block;margin-bottom:6px}
.page-head h1{margin:0;font-family:'Readex Pro';font-size:34px;font-weight:600;letter-spacing:-.3px}

/* ---- buttons ---- */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;gap:10px;align-items:center;justify-content:center;border-radius:12px;font-size:15px;font-weight:600;padding:13px 22px;line-height:1;white-space:nowrap}
.btn-dark{background:#15181D;color:#fff}.btn-dark:hover{background:#2A2F37;color:#fff}
.btn-dark .plus{color:#C99A45;font-size:20px;line-height:1}
.btn-gold{background:#C99A45;color:#15181D;font-weight:700}.btn-gold:hover{background:#D8AB58;color:#15181D}
.btn-outline{border:1px solid #E4E0D7;background:#fff;color:#15181D;font-weight:500}.btn-outline:hover{border-color:#15181D;color:#15181D}
.btn-link{all:unset;cursor:pointer;font-size:14px;color:#6B6A66}.btn-link:hover{color:#15181D}
.btn-text{all:unset;cursor:pointer;font-size:14px;color:#7A5518;font-weight:600}.btn-text:hover{color:#15181D}
.btn-sm{padding:9px 14px;font-size:13.5px;border-radius:9px}
.btn-danger{border:1px solid #F0CFC6;background:#fff;color:#A8412B;font-weight:500}.btn-danger:hover{border-color:#A8412B;color:#A8412B}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:#fff;border:1px solid #E4E0D7;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:18px}
.card.dark{background:#15181D;color:#fff;border-color:#15181D;min-height:150px}
.card .lbl{font-size:14px;color:#6B6A66}.card.dark .lbl{color:#A9AEB6}
.card .big{font-family:'Readex Pro';font-size:48px;font-weight:600;line-height:1}
.card .val{font-family:'Readex Pro';font-size:36px;font-weight:600;line-height:1;direction:ltr;text-align:right}
.card .val.red{color:#A8412B}
.card .sub{font-size:13px;color:#6B6A66}.card.dark .sub{color:#C99A45}

/* ---- table section ---- */
.section{background:#fff;border:1px solid #E4E0D7;border-radius:18px;overflow:hidden}
.section-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #EEEBE4}
.section-head h2{margin:0;font-family:'Readex Pro';font-size:18px;font-weight:600}
.scroll{overflow-x:auto}
.grid{min-width:760px}
.grid-cols{grid-template-columns:120px 1.4fr 1.6fr 130px 110px 100px}
.grid-head{display:grid;gap:12px;padding:12px 24px;font-size:12.5px;color:#6B6A66;background:#FAF9F6}
.grid-row{display:grid;gap:12px;padding:16px 24px;border-top:1px solid #EEEBE4;align-items:center;font-size:14.5px;cursor:pointer;color:#15181D}
.grid-row:hover{background:#FBF7EF;color:#15181D}
.grid-row .no{direction:ltr;text-align:right;font-family:'Readex Pro';font-size:13px;color:#6B6A66}
.grid-row .car{font-weight:600}
.grid-row .parties{color:#3A3C40}
.grid-row .amt{direction:ltr;text-align:right;font-family:'Readex Pro';font-weight:500}
.grid-row .date{direction:ltr;text-align:right;font-size:13px;color:#6B6A66}
.badge{padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;display:inline-block}
.badge-paid{background:#E3F1E8;color:#23623F}
.badge-due{background:#F8E6E0;color:#A8412B}
.badge-gray{background:#EEEBE4;color:#6B6A66}
.badge-gold{background:#F4EAD6;color:#7A5518}
.empty{padding:48px 24px;text-align:center;color:#6B6A66;border-top:1px solid #EEEBE4}

/* ---- search / filters ---- */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.search{flex:1 1 320px;height:48px;border:1px solid #E4E0D7;border-radius:12px;padding:0 16px;font-size:15px;background:#fff;outline:none}
.search:focus{border-color:#C99A45;box-shadow:0 0 0 3px #F4EAD6}
.chips{display:flex;gap:4px;background:#fff;border:1px solid #E4E0D7;border-radius:12px;padding:4px}
.chips a,.chips button{all:unset;cursor:pointer;padding:9px 16px;border-radius:9px;color:#3A3C40;font-size:14px}
.chips a:hover,.chips button:hover{background:#F3F1EC;color:#3A3C40}
.chips a.active,.chips button.active{background:#15181D;color:#fff;font-weight:600}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;padding:14px;border-top:1px solid #EEEBE4;font-size:13.5px;color:#6B6A66}
.pager a{padding:6px 12px;border-radius:8px;border:1px solid #E4E0D7;background:#fff;color:#15181D}
.pager a.active{background:#15181D;color:#fff;border-color:#15181D}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;color:#5E5D59;font-weight:500}
.field input,.field select,.field textarea{height:46px;border:1px solid #E4E0D7;border-radius:10px;padding:0 14px;font-size:15px;background:#FCFBF9;outline:none;color:#15181D;width:100%}
.field textarea{height:auto;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#C99A45;background:#fff;box-shadow:0 0 0 3px #F4EAD6}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 16px}
.money-in{height:52px !important;font-size:20px !important;font-family:'Readex Pro' !important;font-weight:500;direction:ltr;text-align:right}
.alert-err{background:#F8E6E0;color:#A8412B;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:500}
.alert-ok{background:#E3F1E8;color:#23623F;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:500}
.alert-info{background:#FBF7EF;border:1px solid #EFE3CC;color:#7A5518;border-radius:10px;padding:12px 16px;font-size:14px}
.pill-group{display:flex;gap:8px;flex-wrap:wrap}
.pill{all:unset;cursor:pointer;padding:11px 22px;border-radius:10px;border:1.5px solid #E4E0D7;font-size:14.5px;color:#15181D}
.pill:hover{border-color:#15181D}
.pill.active{border-color:#15181D;background:#15181D;color:#fff;font-weight:600}
.check{display:flex;gap:12px;align-items:center;cursor:pointer;font-size:14.5px}
.check input{width:18px;height:18px;accent-color:#15181D}

/* ---- wizard ---- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.step{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:10px}
.step .bar{height:4px;border-radius:4px;background:#DDD8CD;display:block}
.step.active .bar{background:#C99A45}
.step.done .bar{background:#15181D}
.step .t{display:flex;gap:8px;align-items:baseline;font-size:13.5px}
.step .t .n{font-family:'Readex Pro';color:#8C8A84}
.step .t .l{font-weight:600;color:#15181D}
.wizard{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.panel{grid-column:span 2;min-width:0;background:#fff;border:1px solid #E4E0D7;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:24px}
.panel .desc{margin:0;color:#6B6A66;font-size:14.5px;text-wrap:pretty}
.holder-box{border-top:1px dashed #E4E0D7;padding-top:20px;display:flex;flex-direction:column;gap:18px}
.words-box{background:#FBF7EF;border:1px solid #EFE3CC;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.words-box .k{font-size:12.5px;color:#7A5518;font-weight:600}
.words-box .v{font-size:15.5px;line-height:1.7}
.terms{display:flex;flex-direction:column;gap:12px}
.term{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:14.5px;line-height:1.75}
.term .n{font-family:'Readex Pro';color:#7A5518;font-weight:600}
.panel-foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #EEEBE4;padding-top:20px}
.summary{background:#15181D;color:#fff;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:18px;position:sticky;top:24px}
.summary .head{display:flex;justify-content:space-between;align-items:center}
.summary .head b{font-family:'Readex Pro';font-weight:600;font-size:16px}
.summary .head span{direction:ltr;font-family:'Readex Pro';font-size:12.5px;color:#A9AEB6}
.summary .blk{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;border-bottom:1px solid #2A2F37}
.summary .k{font-size:12.5px;color:#A9AEB6}
.summary .car{font-size:18px;font-weight:600}
.summary .meta{font-size:13px;color:#C99A45}
.summary .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid #2A2F37}
.summary .two div{display:flex;flex-direction:column;gap:4px}
.summary .two b{font-size:14.5px;font-weight:500}
.summary .money{display:flex;flex-direction:column;gap:10px;font-size:14px}
.summary .money div{display:flex;justify-content:space-between}
.summary .money .rx{direction:ltr}
.summary .money .tot{padding-top:10px;border-top:1px solid #2A2F37}
.summary .money .tot .rx{font-weight:600;color:#C99A45;font-size:18px}

/* ---- contract paper ---- */
.view-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.paper{background:#fff;border:1px solid #E4E0D7;border-radius:6px;box-shadow:0 24px 60px -30px rgba(21,24,29,.25);padding:48px 52px;display:flex;flex-direction:column;gap:26px;font-size:14.5px;line-height:1.8}
.paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:22px;border-bottom:3px solid #15181D}
.paper-head .shop{font-family:'Readex Pro';font-size:30px;font-weight:700;line-height:1.2;display:block}
.paper-head .co{font-size:14px;color:#3A3C40;display:block}
.paper-head .addr{font-size:13px;color:#6B6A66;display:block}
.paper-head .meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;color:#6B6A66;text-align:left}
.paper-head .meta .no{direction:ltr;font-family:'Readex Pro';font-size:15px;color:#15181D;font-weight:600}
.paper-title{display:flex;align-items:center;gap:16px}
.paper-title span{flex:1;height:1px;background:#C99A45}
.paper-title h2{margin:0;font-family:'Readex Pro';font-size:26px;font-weight:700;letter-spacing:1px}
.parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.party{border:1px solid #D9D4C8;border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.party .t{font-family:'Readex Pro';font-weight:600;color:#7A5518;font-size:14px}
.party .n{font-size:17px;font-weight:600}
.party .a{font-size:13.5px;color:#3A3C40}
.party .p{direction:ltr;text-align:right;font-size:13.5px;color:#3A3C40}
.paper p{margin:0;text-wrap:pretty}
.paper .num{font-family:'Readex Pro';color:#7A5518}
.car-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid #D9D4C8;border-radius:10px;overflow:hidden}
.car-grid div{padding:10px 14px;border-bottom:1px solid #EEEBE4;border-left:1px solid #EEEBE4;display:flex;flex-direction:column}
.car-grid .k{font-size:12px;color:#6B6A66}
.car-grid .v{font-weight:600}
.holder-line{background:#FAF9F6;border-radius:8px;padding:12px 16px}
.paper ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.paper ol li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;text-wrap:pretty}
.paper ol li .n{font-family:'Readex Pro';color:#7A5518;font-weight:600}
.paper .closing{font-size:13.5px;color:#3A3C40}
.signs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end;padding-top:28px}
.sign{display:flex;flex-direction:column;gap:8px;align-items:center}
.sign span{width:100%;height:1px;background:#15181D;display:block}
.sign b{font-weight:600;font-size:14px}
.stamp{display:flex;justify-content:center}
.stamp div{width:96px;height:96px;border-radius:50%;border:1.5px dashed #C99A45;display:grid;place-items:center;font-size:12px;color:#7A5518;text-align:center;line-height:1.4}
.pay-box{background:#fff;border:1px solid #E4E0D7;border-radius:14px;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.pay-box h3{margin:0;font-family:'Readex Pro';font-size:16px;font-weight:600}
.pay-list{display:flex;flex-direction:column}
.pay-row{display:grid;grid-template-columns:130px 140px 1fr 1fr;gap:12px;padding:10px 0;border-top:1px solid #EEEBE4;font-size:13.5px}
.pay-row.h{border-top:none;color:#6B6A66;font-size:12.5px}
.watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.watermark span{font-family:'Readex Pro';font-size:80px;font-weight:700;color:rgba(168,65,43,.12);transform:rotate(-20deg);border:6px solid rgba(168,65,43,.12);padding:10px 40px;border-radius:20px}

/* ---- data tables (users / reports) ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:right;padding:12px 16px;font-size:12.5px;color:#6B6A66;background:#FAF9F6;font-weight:500;white-space:nowrap}
table.tbl td{padding:13px 16px;border-top:1px solid #EEEBE4;vertical-align:middle}
table.tbl tr:hover td{background:#FBF7EF}
table.tbl td.ltr,table.tbl th.ltr{direction:ltr;text-align:right;font-family:'Readex Pro'}
table.tbl tfoot td{background:#15181D;color:#fff;font-weight:600;border-top:2px solid #15181D}
table.tbl tfoot td.ltr{color:#C99A45}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- reports ---- */
.rpt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rpt-card{background:#fff;border:1px solid #E4E0D7;border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;color:#15181D}
.rpt-card:hover{border-color:#C99A45;box-shadow:0 0 0 3px #F4EAD6;color:#15181D}
.rpt-card.active{background:#15181D;color:#fff;border-color:#15181D}
.rpt-card b{font-family:'Readex Pro';font-weight:600;font-size:15px}
.rpt-card span{font-size:12.5px;color:#6B6A66;line-height:1.6}
.rpt-card.active span{color:#A9AEB6}
.rpt-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid #E4E0D7;border-radius:14px;padding:16px 20px}
.rpt-filters .field{min-width:150px}
.rpt-filters .field input,.rpt-filters .field select{height:42px}
.rpt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px;border-bottom:3px solid #15181D}
.rpt-head .t{font-family:'Readex Pro';font-size:22px;font-weight:700;display:block}
.rpt-head .s{font-size:13.5px;color:#6B6A66;display:block;margin-top:4px}
.rpt-head .meta{text-align:left;font-size:12.5px;color:#6B6A66;line-height:1.8}
.rpt-head .meta b{color:#15181D;font-family:'Readex Pro';font-size:15px;display:block}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:20px 24px;border-bottom:1px solid #EEEBE4;background:#FAF9F6}
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi .k{font-size:12.5px;color:#6B6A66}
.kpi .v{font-family:'Readex Pro';font-size:22px;font-weight:600;direction:ltr;text-align:right}
.chart{display:flex;align-items:flex-end;gap:8px;height:180px;padding:24px 24px 8px;border-bottom:1px solid #EEEBE4}
.chart .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%;justify-content:flex-end}
.chart .bar i{display:block;width:100%;max-width:56px;background:#15181D;border-radius:6px 6px 0 0;min-height:2px}
.chart .bar i.gold{background:#C99A45}
.chart .bar .lbl{font-size:11px;color:#6B6A66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-family:'Readex Pro'}
.chart .bar .val{font-size:11px;font-family:'Readex Pro';color:#15181D;direction:ltr}
.rpt-foot{padding:14px 24px;font-size:12px;color:#6B6A66;display:flex;justify-content:space-between;border-top:1px solid #EEEBE4}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#F3F1EC}
.login-side{background:#101317;color:#C9CCD1;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login-side h2{font-family:'Readex Pro';color:#fff;font-size:34px;font-weight:600;margin:0;line-height:1.3}
.login-side p{color:#8A9099;font-size:15px;line-height:1.8;max-width:420px}
.login-box{display:flex;align-items:center;justify-content:center;padding:48px}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid #E4E0D7;border-radius:18px;padding:36px;display:flex;flex-direction:column;gap:22px}
.login-card h1{margin:0;font-family:'Readex Pro';font-size:26px;font-weight:600}
.login-card .btn{width:100%;height:50px}
@media (max-width:900px){.login-wrap{grid-template-columns:1fr}.login-side{display:none}}

/* ---- responsive ---- */
/* ---- mobile top bar + drawer (hidden on desktop) ---- */
.topbar,.backdrop,.login-brand,.drawer-close{display:none}
.menu-btn{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:#1D2229;flex:none}
.menu-btn:focus-visible,.top-new:focus-visible,.drawer-close:focus-visible{outline:2px solid #C99A45;outline-offset:2px}
.top-new{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#C99A45;color:#101317;font-size:26px;font-weight:600;line-height:1;flex:none}
.top-new:hover{color:#101317}
img{max-width:100%}

/* ======== tablet & phone ======== */
@media (max-width:980px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;background:#101317;color:#fff;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));box-shadow:0 6px 20px -12px rgba(0,0,0,.5)}
  .topbar .brand{flex:1;min-width:0;gap:10px;color:#fff}
  .topbar .brand>div{min-width:0}
  .topbar .brand-mark{width:36px;height:36px;font-size:17px;border-radius:9px;flex:none}
  .topbar .brand-name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .brand-sub{font-size:11px}
  .sidebar{position:fixed;top:0;bottom:0;right:0;height:100vh;height:100dvh;width:min(300px,86vw);z-index:60;transform:translateX(105%);transition:transform .28s ease,visibility .28s;overflow-y:auto;gap:26px;padding:22px 18px;padding-top:max(22px,env(safe-area-inset-top));box-shadow:-20px 0 50px rgba(0,0,0,.35);visibility:hidden}
  body.nav-open .sidebar{transform:none;visibility:visible}
  .backdrop{position:fixed;inset:0;z-index:55;background:rgba(10,12,15,.55);opacity:0;pointer-events:none;transition:opacity .25s;display:block}
  body.nav-open .backdrop{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .drawer-close{display:grid;margin-inline-start:auto;width:38px;height:38px;border-radius:10px;place-items:center;background:#1D2229;color:#C9CCD1;cursor:pointer;border:0;font-size:20px;flex:none}
  .nav a{padding:14px}
  .main{padding:22px 16px 56px;padding-bottom:max(56px,env(safe-area-inset-bottom))}
  .wrap{gap:20px}
  .page-head h1{font-size:28px}
  .panel{grid-column:span 1}
  .wizard{grid-template-columns:1fr}
  .summary{position:static}
  .steps .t .l{font-size:12px}
  .rpt-cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ======== phone ======== */
@media (max-width:720px){
  body{-webkit-text-size-adjust:100%}
  .page-head{align-items:stretch}
  .page-head>div{flex:1 1 100%}
  .page-head h1{font-size:25px}
  .page-head .kicker{font-size:13px;margin-bottom:4px}
  .page-head>.btn,.page-head>.actions{flex:1 1 100%}
  .page-head>.btn-link{display:none}
  .page-head>.actions .btn{flex:1}
  .btn{padding:14px 18px;min-height:48px}
  .btn-sm{min-height:0;padding:9px 14px}

  /* stat cards */
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .cards .card.dark{grid-column:1/-1;min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .card{padding:18px;gap:10px;border-radius:16px;min-width:0}
  .card .big{font-size:40px}
  .card .val{font-size:22px}
  .card .lbl{font-size:13px}
  .card .sub{font-size:12px}
  .cards .card.dark .sub{flex:1 1 100%}

  /* contract rows -> cards */
  .section{border-radius:16px}
  .section-head{padding:16px}
  .grid{min-width:0}
  .grid-head{display:none}
  .grid-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"car amt" "parties parties" "no st";gap:4px 12px;padding:14px 16px;font-size:14px}
  .grid-row .car{grid-area:car;font-size:15px;min-width:0}
  .grid-row .amt{grid-area:amt;font-size:15px}
  .grid-row .parties{grid-area:parties;font-size:13.5px;color:#5E5D59}
  .grid-row .no{grid-area:no;text-align:right}
  .grid-row .st{grid-area:st;justify-self:end}
  .grid-row .date{display:none}
  .grid-row .no::after{content:"  ·  " attr(data-date)}
  .pager{flex-wrap:wrap}

  /* search & filter chips */
  .toolbar{gap:10px}
  .search{flex:1 1 100%;font-size:16px}
  .toolbar>.btn{flex:0 0 auto}
  .chips{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips a,.chips button{white-space:nowrap;padding:10px 14px}

  /* forms: 16px prevents iOS zoom on focus */
  .field input,.field select,.field textarea{font-size:16px;height:50px}
  .field textarea{height:auto}
  .fields{grid-template-columns:1fr 1fr;gap:14px 12px}
  .fields>.field.wide{grid-column:1/-1}

  /* wizard */
  .steps{gap:5px}
  .step .t{flex-direction:column;gap:2px;align-items:center;text-align:center}
  .step .t .l{font-size:11px}
  .step:not(.active) .t .l{color:#8C8A84;font-weight:500}
  .panel{padding:18px;gap:18px;border-radius:16px}
  .panel .desc{font-size:13.5px}
  .pill{padding:11px 16px;font-size:14px}
  .words-box .v{font-size:14.5px}
  .panel-foot{position:sticky;bottom:0;z-index:5;margin:0 -18px -18px;padding:12px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:0 0 16px 16px;box-shadow:0 -8px 20px -14px rgba(0,0,0,.3)}
  .panel-foot .btn{flex:1}
  .summary{padding:18px;gap:14px;border-radius:16px}
  .summary .car{font-size:16px}
  .term{font-size:13.5px;grid-template-columns:22px minmax(0,1fr)}

  /* contract view */
  .view-bar{gap:10px}
  .view-bar .actions{width:100%}
  .view-bar .actions>*{flex:1 1 calc(50% - 8px)}
  .view-bar .actions form .btn{width:100%}
  .paper{padding:22px 16px;gap:18px;font-size:14px;line-height:1.75;border-radius:14px}
  .paper-head{flex-direction:column;gap:10px;padding-bottom:16px}
  .paper-head .shop{font-size:22px}
  .paper-head .meta{align-items:flex-start;text-align:right}
  .paper-title h2{font-size:21px}
  .parties{grid-template-columns:1fr;gap:12px}
  .car-grid{grid-template-columns:1fr 1fr}
  .signs{grid-template-columns:1fr 1fr;gap:24px 16px;padding-top:18px}
  .watermark span{font-size:48px}
  .pay-box{padding:16px;border-radius:14px}
  .pay-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 0}
  .pay-row.h{display:none}
  .pay-row>span:nth-child(3),.pay-row>span:nth-child(4){font-size:12.5px;color:#6B6A66}

  /* users table -> cards */
  table.tbl.stack thead{display:none}
  table.tbl.stack,table.tbl.stack tbody,table.tbl.stack tr,table.tbl.stack td{display:block;width:100%}
  table.tbl.stack tr{padding:12px 16px;border-top:1px solid #EEEBE4}
  table.tbl.stack tr:first-child{border-top:0}
  table.tbl.stack td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;white-space:normal}
  table.tbl.stack td::before{content:attr(data-label);color:#6B6A66;font-size:12.5px;font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:400}
  table.tbl.stack td:first-child{font-size:16px}
  table.tbl.stack td:first-child::before,table.tbl.stack td:last-child::before{content:none}
  table.tbl.stack td:last-child{padding-top:8px}
  table.tbl.stack td:last-child .btn{width:100%}
  table.tbl.stack tr:hover td{background:none}

  /* reports */
  .rpt-cards{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .rpt-cards::-webkit-scrollbar{display:none}
  .rpt-card{flex:0 0 auto;scroll-snap-align:start;padding:12px 16px;border-radius:12px}
  .rpt-card span{display:none}
  .rpt-card b{font-size:14px;white-space:nowrap}
  .rpt-filters{padding:14px;gap:10px}
  .rpt-filters .field{min-width:0;flex:1 1 calc(50% - 10px)}
  .rpt-filters .chips{flex:1 1 100%}
  .rpt-filters>.btn{flex:1 1 100%}
  .rpt-head{flex-direction:column;gap:12px;padding:16px}
  .rpt-head .t{font-size:18px}
  .rpt-head .meta{text-align:right}
  .kpis{grid-template-columns:1fr 1fr;padding:14px 16px}
  .kpi .v{font-size:18px}
  .chart{height:150px;padding:18px 12px 6px;gap:4px;overflow-x:auto}
  .chart .bar{min-width:34px}
  table.tbl{font-size:13px}
  table.tbl th,table.tbl td{padding:10px 12px;white-space:nowrap}
  .rpt-foot{flex-direction:column;gap:4px;padding:12px 16px}

  /* login */
  .login-box{padding:20px 16px;align-items:flex-start;padding-top:max(28px,env(safe-area-inset-top))}
  .login-card{padding:24px 20px;gap:18px}
  .login-brand{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #EEEBE4}
  .login-brand .brand-name{color:#15181D}
}

@media (max-width:380px){
  .cards{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .car-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .steps .t .l{display:none}
  .page-head h1{font-size:23px}
  .view-bar .actions>*{flex-basis:100%}
}

@media (hover:none){
  .grid-row:hover,table.tbl tr:hover td{background:inherit}
  .grid-row:active{background:#FBF7EF}
}

/* ---- print ---- */
@media print{
  [data-noprint],.topbar,.backdrop,.sidebar,.view-bar,.toolbar,.rpt-cards,.rpt-filters,.pager,.actions{display:none !important}
  .app{display:block !important;background:#fff !important}
  .main{padding:0 !important}
  .paper,.section{box-shadow:none !important;border:none !important;max-width:none !important;border-radius:0 !important}
  .card,.section,.paper{break-inside:avoid}
  body{background:#fff}
  .chart .bar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.tbl tfoot td,.badge,.kpis{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:12mm}
}