/* Phase 33 — Clean PWA Mobile-first responsive web app style
   هدف الملف: إعادة ضبط الواجهة بدون ميلان، بدون توسيع ويب، وبدون طبقات ستايل متضاربة. */
:root{
  color-scheme: light;
  --app-max: 430px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #f7f1e6;
  --bg-2: #fffaf0;
  --paper: #fffdf8;
  --card: #fffaf0;
  --card-2: #ffffff;
  --ink: #16372e;
  --muted: #677a72;
  --soft: #8a9a93;
  --line: #e6d9c4;
  --teal: #0f3d31;
  --teal-2: #155944;
  --teal-3: #0b6b61;
  --gold: #c6a15b;
  --gold-2: #e5c978;
  --cream: #fbf4e7;
  --red: #b42318;
  --green: #047857;
  --orange: #b7791f;
  --shadow: 0 16px 42px rgba(45,55,45,.12);
  --shadow-soft: 0 8px 22px rgba(45,55,45,.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font);-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);color:var(--ink);direction:rtl;}
html{overflow:hidden}
body{overflow:hidden;width:100vw;min-height:100dvh;background:
  radial-gradient(circle at 72% -8%, rgba(15,61,49,.17), transparent 285px),
  radial-gradient(circle at 7% 102%, rgba(198,161,91,.22), transparent 300px),
  linear-gradient(180deg,#fbf7ed 0%,#f7f1e6 50%,#f1eadc 100%);
}
button,input,select,textarea{font:inherit;-webkit-tap-highlight-color:transparent}
button{border:0;cursor:pointer} button:disabled{opacity:.65;cursor:wait}
a{color:inherit;text-decoration:none}

/* App shell: mobile-first, centered on laptop, never tilted/offscreen */
.app,.phone-shell{
  width:100%;
  max-width:var(--app-max);
  min-width:0;
  height:100dvh;
  min-height:100dvh;
  margin:0 auto !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg,rgba(255,250,240,.97),rgba(247,241,230,.98)),
    var(--bg);
  color:var(--ink);
  transform:none!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  box-shadow:none;
}
@media (min-width: 520px){
  body{display:grid;place-items:center;padding:16px;background:
    radial-gradient(circle at 50% -12%,rgba(15,61,49,.18),transparent 390px),
    linear-gradient(135deg,#ece5d7,#fbf7ed 52%,#efe4d2);}
  .app,.phone-shell{height:min(940px,calc(100dvh - 32px));min-height:0;border-radius:34px;box-shadow:0 30px 90px rgba(25,30,28,.22),0 0 0 1px rgba(255,255,255,.75) inset;}
}

/* Login */
.phone-shell{padding:calc(12px + var(--safe-top)) 16px calc(14px + var(--safe-bottom));}
.mobile-status{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:var(--teal);font-size:12px;font-weight:900;opacity:.82;flex:0 0 auto;}
.status-icons{display:flex;gap:5px;align-items:center;direction:ltr}.bar{width:17px;height:8px;border:1.7px solid currentColor;border-radius:4px;position:relative}.bar:after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:3px;border-radius:2px;background:currentColor}.dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:10px 0 0 currentColor,20px 0 0 currentColor}
.phone-shell .hero{padding:12px 0 10px;flex:0 0 auto;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)!important;}
.brand-row{display:flex;align-items:center;justify-content:center;gap:13px;text-align:right}.brand-text p{margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:950}.brand-text h1{margin:0;font-size:27px;line-height:1.05;letter-spacing:-.04em;color:var(--ink)}
.logo,.mark{display:grid;place-items:center;font-weight:1000;letter-spacing:-.04em;background:linear-gradient(145deg,var(--teal),var(--teal-2));color:var(--gold-2);box-shadow:var(--shadow-soft);}
.logo{width:72px;height:72px;border-radius:24px;font-size:34px}.mark{width:46px;height:46px;border-radius:17px;font-size:25px;flex:0 0 auto}
.hero-copy{margin:14px auto 0;color:#31584b;font-size:14px;line-height:1.7;font-weight:750;max-width:350px;text-align:center}.color-strip{display:grid;grid-template-columns:1.15fr .9fr .75fr;gap:8px;margin-top:13px}.chip{min-height:43px;border-radius:17px;display:grid;place-items:center;font-size:12px;font-weight:1000;border:1px solid var(--line);background:var(--card);color:var(--teal)}.color-strip .chip:nth-child(1){background:linear-gradient(135deg,var(--teal),var(--teal-2));color:var(--gold-2)}.color-strip .chip:nth-child(2){background:#fffaf0;color:var(--teal)}.color-strip .chip:nth-child(3){background:#fff8e1;color:#8a5e13}
.auth-card{flex:1 1 auto;min-height:0;margin-top:8px;padding:14px;border-radius:28px;background:rgba(255,250,240,.92);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border-radius:22px;background:#f7f1e6;border:1px solid var(--line);flex:0 0 auto}.tab{height:48px;border-radius:17px;background:transparent;color:var(--muted);font-weight:1000}.tab.is-active{color:var(--gold-2);background:linear-gradient(145deg,var(--teal),var(--teal-2));box-shadow:0 10px 22px rgba(15,61,49,.18)}.forms{min-height:0;overflow:auto;padding:2px 1px 0;margin-top:12px;-webkit-overflow-scrolling:touch}.form{display:grid;gap:11px}.form.is-hidden{display:none!important}.field{display:grid;gap:7px;color:var(--ink);font-size:13px;font-weight:950}.input-wrap{height:55px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:none;display:block}.input-wrap:focus-within{border-color:#c6a15b;box-shadow:0 0 0 4px rgba(198,161,91,.15)}input,select,textarea{width:100%;border:0;outline:0;background:transparent;color:var(--ink);padding:0 15px;font-size:15px;font-weight:700;direction:rtl}input{height:100%}input[type=email],input[inputmode=email],input[name=email]{direction:ltr;text-align:left}input::placeholder,textarea::placeholder{color:#a8a093;font-weight:700}.remember-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:950}.remember-row input{width:22px;height:22px;min-height:22px;padding:0;accent-color:var(--teal);flex:0 0 auto}.remember-row small{display:block;margin-top:2px;color:var(--muted);font-size:10.5px;font-weight:800}.primary{height:57px;border-radius:20px;color:#fff;font-weight:1000;font-size:15px;background:linear-gradient(135deg,var(--teal),var(--teal-2));box-shadow:0 12px 24px rgba(15,61,49,.20);margin-top:2px}.note{margin:0;color:var(--muted);font-size:12px;line-height:1.55;font-weight:750;text-align:center}.message{min-height:22px;margin:10px 0 0;color:var(--orange);font-size:13px;font-weight:950;text-align:center;line-height:1.5;flex:0 0 auto}.message[data-type="ok"]{color:var(--green)}.message[data-type="bad"]{color:var(--red)}.footer{padding-top:10px;text-align:center;color:var(--muted);font-size:11px;font-weight:900;flex:0 0 auto}.footer strong{color:var(--teal)}

/* Site shell */
.app{padding:0}.top{flex:0 0 auto;padding:calc(12px + var(--safe-top)) 14px 10px;background:linear-gradient(180deg,#fffaf0,#f4ecdd);border-bottom:1px solid var(--line);z-index:20}.head{display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.eyebrow{margin:0;color:var(--muted);font-size:12px;font-weight:900}.brand h1,.titlebar h2,.section-head h2{margin:0;color:var(--ink);letter-spacing:-.03em}.brand h1{font-size:18px}.icon,.round{display:grid;place-items:center;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--teal);font-weight:1000;box-shadow:var(--shadow-soft)}.icon{min-width:46px;height:44px;padding:0 10px}.round{width:46px;height:46px;font-size:24px}.main{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(88px + var(--safe-bottom));scroll-behavior:smooth}.screen{display:none}.screen.active{display:block;animation:fadeIn .18s ease}.hero{border-radius:28px;padding:18px;background:linear-gradient(145deg,var(--teal),var(--teal-2) 70%,#2a735d);color:#fff;border:1px solid rgba(198,161,91,.28);box-shadow:var(--shadow);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto -70px -115px -70px;height:220px;background:radial-gradient(ellipse at center,rgba(229,201,120,.28),transparent 65%);pointer-events:none}.hero-row{display:flex;gap:8px;justify-content:space-between;align-items:center}.pill,.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:950;background:rgba(255,255,255,.13);color:inherit;border:1px solid rgba(255,255,255,.18)}.hero h2{margin:15px 0 6px;font-size:17px;color:#fff}.amount{font-size:34px;font-weight:1000;letter-spacing:-.04em;color:#fff}.amount small{font-size:13px;font-weight:900}.metrics,.home-money-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.metric{border-radius:20px;padding:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}.metric span{display:block;font-size:11px;color:rgba(255,255,255,.78);font-weight:850}.metric strong{display:block;margin-top:5px;color:#fff;font-size:16px;font-weight:1000}.card,.operation-card,.installment-card,.kpi-tile,.settings-card,.report-card,.legacy-card,.finance-card,.alert-card,.mini-card,.row,.item{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft);color:var(--ink)}.card{padding:14px;margin-top:13px}.section-head,.titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.titlebar{margin:0 0 13px}.text-btn,.mini{background:transparent;color:var(--teal);font-weight:1000}.grid,.mini-dashboard,.alert-grid,.section-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action{min-height:86px;border-radius:21px;background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;gap:7px;font-weight:1000;box-shadow:var(--shadow-soft)}.action i{width:34px;height:34px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,var(--teal),var(--teal-2));color:var(--gold-2);font-style:normal}.mini-card,.alert-card,.kpi-tile{min-height:74px;padding:12px;text-align:right}.mini-card span,.alert-card span,.kpi-tile span{display:block;color:var(--muted);font-size:12px;font-weight:900}.mini-card strong,.alert-card strong,.kpi-tile strong{display:block;margin-top:5px;font-size:20px;color:var(--ink);font-weight:1000}.bad strong,.kpi-tile.bad strong{color:var(--red)}.good strong,.kpi-tile.good strong{color:var(--green)}.section-stats{grid-template-columns:1fr 1fr;margin-bottom:12px}.section-stats .main{grid-column:1/-1;background:linear-gradient(145deg,var(--teal),var(--teal-2));color:#fff}.section-stats .main span,.section-stats .main strong{color:#fff}.search{height:48px;border-radius:18px;background:#fff;border:1px solid var(--line);padding:0 14px;margin:0 0 12px;color:var(--ink)}.chipline{display:flex;gap:8px;overflow:auto;padding-bottom:8px;margin-bottom:8px}.chipline .chip,.typepick{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:999px;background:#fff;color:var(--muted);border:1px solid var(--line);font-weight:950}.chipline .chip.active,.typepick.active{background:linear-gradient(145deg,var(--teal),var(--teal-2));color:#fff;border-color:var(--teal)}.op-list,[data-list]{display:grid;gap:10px}.operation-card,.installment-card{padding:13px}.operation-card h3,.installment-card h3{margin:0 0 7px;font-size:15px}.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:850}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:9px}.secondary{height:46px;border-radius:17px;background:#fff;border:1px solid var(--line);color:var(--teal);font-weight:1000}.empty{border:1px dashed var(--line);border-radius:20px;padding:18px;color:var(--muted);background:#fffaf0;text-align:center;font-weight:850}.nav{position:absolute;left:10px;right:10px;bottom:calc(10px + var(--safe-bottom));height:70px;border-radius:26px;background:rgba(255,250,240,.96);border:1px solid var(--line);box-shadow:0 -12px 32px rgba(45,55,45,.14);display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:7px;z-index:30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.nav button{border-radius:20px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:950}.nav button i{font-style:normal;font-size:18px;line-height:1}.nav button.active{background:linear-gradient(145deg,var(--teal),var(--teal-2));color:#fff;box-shadow:0 8px 18px rgba(15,61,49,.20)}.nav button.active b,.nav button.active i{color:#fff}.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--app-max);max-height:min(88dvh,780px);overflow:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#fffaf0,#f4ecdd);border:1px solid var(--line);border-bottom:0;border-radius:30px 30px 0 0;box-shadow:0 -26px 70px rgba(25,30,28,.23);padding:14px 14px calc(18px + var(--safe-bottom));z-index:60;color:var(--ink)}.dialog:not([open]){display:none}.dialog::backdrop{background:rgba(15,32,29,.42);backdrop-filter:blur(4px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.sheet-head h2{margin:0;font-size:18px}.x{min-width:54px;height:40px;border-radius:16px;background:#f7f1e6;border:1px solid var(--line);color:var(--teal);font-weight:1000}.formgrid{display:grid;gap:11px}.hidden{display:none!important}.toast{position:absolute;left:18px;right:18px;bottom:calc(90px + var(--safe-bottom));z-index:80;border-radius:18px;padding:12px 14px;background:var(--teal);color:#fff;font-weight:950;box-shadow:var(--shadow);text-align:center}.toast.err{background:var(--red)}.logout-row span{background:var(--red)!important;color:#fff!important;border-radius:14px;padding:6px 10px}.print-only{display:none!important}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-height:700px){.brand h1{font-size:16px}.main{padding-top:10px}.hero{padding:14px}.amount{font-size:29px}.card{margin-top:10px;padding:12px}.nav{height:64px;border-radius:23px}.phone-shell .logo{width:60px;height:60px}.hero-copy{display:none}.color-strip{margin-top:8px}.auth-card{border-radius:24px}.input-wrap{height:51px}.primary{height:53px}}


/* Phase 32 HARD INLINE GUARANTEE — يمنع الأبيض/الأسود والميلان والتمدد يساراً */
html,body{width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;overflow:hidden !important;direction:rtl !important;background:#f7f1e6 !important;color:#16372e !important;}
body{position:fixed !important;inset:0 !important;display:block !important;min-width:0 !important;}
.app,.phone-shell{box-sizing:border-box !important;width:100% !important;max-width:430px !important;min-width:0 !important;margin-inline:auto !important;margin-left:auto !important;margin-right:auto !important;left:auto !important;right:auto !important;transform:none !important;translate:none !important;rotate:none !important;scale:none !important;overflow:hidden !important;background:linear-gradient(180deg,#fffaf0,#f7f1e6) !important;color:#16372e !important;}
.app *,.phone-shell *{box-sizing:border-box;max-width:100%;}
.app img,.phone-shell img{max-width:100%;height:auto;display:block;}
.main,.forms{overflow-x:hidden !important;}
.screen,.card,.hero,.sheet,.nav,.top,.auth-card{transform:none !important;left:auto !important;right:auto !important;max-width:100% !important;}
@media (min-width:520px){body{display:grid !important;place-items:center !important;padding:16px !important}.app,.phone-shell{height:min(940px,calc(100dvh - 32px)) !important;border-radius:34px !important;}}
@media (max-width:519px){body{padding:0 !important}.app,.phone-shell{height:100dvh !important;min-height:100dvh !important;border-radius:0 !important;}}


/* Phase 33 — Bottom nav full-width + click safety */
.nav{
  position:absolute !important;
  inset-inline:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  height:calc(78px + var(--safe-bottom)) !important;
  border-radius:24px 24px 0 0 !important;
  padding:8px 8px calc(8px + var(--safe-bottom)) !important;
  transform:none !important;
  pointer-events:auto !important;
  z-index:100 !important;
}
.nav button{pointer-events:auto !important;touch-action:manipulation !important;}
.main{padding-bottom:calc(96px + var(--safe-bottom)) !important;}
.sheet{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:100% !important;max-width:var(--app-max) !important;}