/* Ezba — app styles. Black #0A0A0A + gold #C9A84C. Mobile first. */
:root{
  --ez-bg:#0A0A0A;
  --ez-bg2:#121212;
  --ez-card:#171717;
  --ez-card2:#1E1E1E;
  --ez-line:#2A2A2A;
  --ez-gold:#C9A84C;
  --ez-gold2:#E2C674;
  --ez-gold-soft:rgba(201,168,76,.12);
  --ez-text:#F3EFE6;
  --ez-muted:#9C968A;
  --ez-ok:#4CAF7A;
  --ez-warn:#E0A43A;
  --ez-bad:#E05A4C;
  --ez-radius:16px;
  --ez-nav-h:68px;
  --ez-safe-b:env(safe-area-inset-bottom,0px);
  --ez-safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark; /* native pickers, scrollbars and icons in dark mode */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ez-bg)}
body.ez{
  margin:0;min-height:100vh;min-height:100dvh;
  background:var(--ez-bg);color:var(--ez-text);
  font:16px/1.6 "Cairo",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
body.ez-en{font-family:"Montserrat",system-ui,sans-serif;font-size:15px}
a{color:var(--ez-gold);text-decoration:none}
img{max-width:100%;display:block}
.ez-ic{width:22px;height:22px;flex:none}

/* Headings */
.ez-h1{font-size:1.45rem;font-weight:800;margin:.2rem 0 .4rem;line-height:1.3}
.ez-h2{font-size:1.05rem;font-weight:700;margin:1.6rem 0 .7rem;color:var(--ez-gold)}
body.ez-en .ez-h1,body.ez-en .ez-h2,body.ez-en .ez-hero-title,body.ez-en .ez-top-name,body.ez-en .ez-stat-n{
  font-family:"Bebas Neue","Montserrat",sans-serif;font-weight:400;letter-spacing:.04em
}
body.ez-en .ez-h1{font-size:1.9rem}
body.ez-en .ez-h2{font-size:1.35rem}
.ez-muted{color:var(--ez-muted);margin:.2rem 0 1rem}
.ez-hello{color:var(--ez-gold);margin:0;font-weight:600}

/* Header */
.ez-top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + var(--ez-safe-t)) 16px 10px;
  background:rgba(10,10,10,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ez-line);
}
.ez-top-brand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ez-text)}
.ez-top-name{font-weight:800;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ez-en .ez-top-name{font-size:1.45rem}
.ez-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;background:linear-gradient(145deg,var(--ez-gold2),var(--ez-gold));
  color:#0A0A0A;font-family:"Cairo",sans-serif;font-weight:800;font-size:1.1em;line-height:1;
  box-shadow:0 0 0 3px var(--ez-gold-soft);
}
.ez-logo{border-radius:50%;object-fit:cover;flex:none}
.ez-lang{
  flex:none;padding:6px 14px;border:1px solid var(--ez-line);border-radius:999px;
  color:var(--ez-text);font-size:.85rem;font-weight:600;font-family:"Montserrat","Cairo",sans-serif
}
body.ez-en .ez-lang{font-family:"Cairo",sans-serif}
.ez-lang:active{border-color:var(--ez-gold)}

/* Main area */
.ez-main{padding:18px 16px 28px;max-width:640px;margin:0 auto}
body.has-nav .ez-main{padding-bottom:calc(var(--ez-nav-h) + var(--ez-safe-b) + 28px)}

/* Bottom navigation */
.ez-nav{
  position:fixed;inset-inline:0;bottom:0;z-index:30;
  display:flex;align-items:stretch;justify-content:space-around;
  height:calc(var(--ez-nav-h) + var(--ez-safe-b));padding-bottom:var(--ez-safe-b);
  background:rgba(14,14,14,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--ez-line);
}
.ez-nav-i{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ez-muted);font-size:.72rem;font-weight:600;min-width:0
}
.ez-nav-i.is-on{color:var(--ez-gold)}
.ez-nav-t{white-space:nowrap}
.ez-nav-i.is-add .ez-nav-ic{
  width:50px;height:50px;margin-top:-22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--ez-gold2),var(--ez-gold));color:#0A0A0A;
  box-shadow:0 6px 18px rgba(201,168,76,.35),0 0 0 5px var(--ez-bg)
}
.ez-nav-i.is-add .ez-ic{width:26px;height:26px;stroke-width:2.4}
.ez-nav-i.is-add{color:var(--ez-text)}

/* Buttons */
.ez-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 22px;border-radius:14px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:1rem;text-align:center
}
.ez-btn-gold{background:linear-gradient(145deg,var(--ez-gold2),var(--ez-gold));color:#0A0A0A}
.ez-btn-gold:active{filter:brightness(.92)}
.ez-btn-line{background:transparent;color:var(--ez-text);border:1px solid var(--ez-line)}
.ez-btn-wide{width:100%}
.ez-link{display:inline-block;margin-top:14px;color:var(--ez-muted)}
.ez-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}

/* Landing / bare pages */
body.is-landing{
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%,rgba(201,168,76,.18),transparent 70%),
    var(--ez-bg);
}
body.is-bare .ez-main{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}
.ez-hero{width:100%;max-width:420px;text-align:center;padding:40px 4px;position:relative}
.ez-hero-mark{display:flex;justify-content:center;margin-bottom:18px}
.ez-hero-mark .ez-badge{font-size:2.6rem}
.ez-hero-title{font-size:2.8rem;font-weight:800;margin:0;color:var(--ez-gold);line-height:1.1}
body.ez-en .ez-hero-title{font-size:4rem}
.ez-hero-tag{font-size:1.2rem;font-weight:700;margin:.4rem 0 1rem}
.ez-hero-text{color:var(--ez-muted);margin:0 0 28px}
.ez-hero-foot{color:var(--ez-muted);font-size:.85rem;margin-top:14px}
.ez-lang-float{position:fixed;top:calc(14px + var(--ez-safe-t));inset-inline-end:16px}

/* Notes / banners */
.ez-note{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:14px;margin-bottom:16px;font-size:.92rem;border:1px solid
}
.ez-note-info{background:var(--ez-gold-soft);border-color:rgba(201,168,76,.35);color:var(--ez-gold2)}
.ez-note-warn{background:rgba(224,164,58,.1);border-color:rgba(224,164,58,.4);color:#F0C27A}
.ez-note-bad{background:rgba(224,90,76,.1);border-color:rgba(224,90,76,.4);color:#F29A90}

/* Stats */
.ez-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ez-stat{
  background:var(--ez-card);border:1px solid var(--ez-line);border-radius:var(--ez-radius);
  padding:16px;display:flex;flex-direction:column
}
.ez-stat-n{font-size:2rem;font-weight:800;color:var(--ez-gold);line-height:1.1}
body.ez-en .ez-stat-n{font-size:2.6rem}
.ez-stat-l{color:var(--ez-muted);font-size:.88rem}
.ez-stat-warn .ez-stat-n{color:var(--ez-warn)}

/* Category cards */
.ez-cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ez-cat{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--ez-card2),var(--ez-card));
  border:1px solid var(--ez-line);border-radius:var(--ez-radius);
  padding:18px 16px;min-height:104px;
  display:flex;flex-direction:column;justify-content:space-between;color:var(--ez-text)
}
.ez-cat::after{
  content:"";position:absolute;inset-inline-end:-24px;top:-24px;width:80px;height:80px;border-radius:50%;
  background:var(--ez-gold-soft)
}
.ez-cat:active{border-color:var(--ez-gold)}
.ez-cat-name{font-weight:700;font-size:1.08rem;position:relative}
.ez-cat-n{font-size:1.5rem;font-weight:800;color:var(--ez-gold);position:relative}
.ez-cat-n small{font-size:.8rem;color:var(--ez-muted);font-weight:600}
.ez-cat-dead .ez-cat-n{color:var(--ez-muted)}

/* System check list */
.ez-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ez-checks li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--ez-card);border:1px solid var(--ez-line);border-radius:14px;padding:12px 14px
}
.ez-checks-ic{
  flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center
}
.ez-checks-ic .ez-ic{width:18px;height:18px;stroke-width:2.6}
.ez-checks li.ok .ez-checks-ic{background:rgba(76,175,122,.15);color:var(--ez-ok)}
.ez-checks li.bad .ez-checks-ic{background:rgba(224,90,76,.15);color:var(--ez-bad)}
.ez-checks-t{display:flex;flex-direction:column;min-width:0}
.ez-checks-t small{color:var(--ez-muted);font-size:.82rem;word-break:break-word}

/* Empty / placeholder */
.ez-empty{text-align:center;padding:60px 10px}
.ez-empty-ic{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--ez-gold-soft);color:var(--ez-gold)
}
.ez-empty-ic .ez-ic{width:30px;height:30px}

/* Forms */
.ez-form{display:flex;flex-direction:column;gap:14px;text-align:start}
.ez-field{display:flex;flex-direction:column;gap:6px}
.ez-field>span:first-child{font-size:.88rem;font-weight:600;color:var(--ez-muted)}
.ez-field input,.ez-field select,.ez-field textarea{
  width:100%;min-height:52px;padding:12px 14px;border-radius:14px;
  background:var(--ez-bg2);border:1px solid var(--ez-line);color:var(--ez-text);
  font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s
}
.ez-field textarea{min-height:110px;resize:vertical}
.ez-field input:focus,.ez-field select:focus,.ez-field textarea:focus{
  border-color:var(--ez-gold);box-shadow:0 0 0 3px var(--ez-gold-soft)
}
.ez-pass{position:relative;display:block;direction:ltr} /* password always left-to-right, button on the right */
.ez-pass input{padding-right:84px;padding-left:14px;text-align:left}
.ez-eye{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  min-height:40px;padding:0 12px;border:0;border-radius:10px;
  background:var(--ez-card2);color:var(--ez-gold);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer
}
.ez-form-err{
  margin:0;padding:10px 12px;border-radius:12px;font-size:.9rem;font-weight:600;
  background:rgba(224,90,76,.1);border:1px solid rgba(224,90,76,.4);color:#F29A90
}
.ez-btn[disabled]{opacity:.65;pointer-events:none}
.ez-btn-danger{color:#F29A90;border-color:rgba(224,90,76,.4)}
.ez-btn .ez-ic{width:20px;height:20px}

/* Login */
.ez-login .ez-form{margin-top:18px}
.ez-login .ez-hero-mark{margin-bottom:14px}
.ez-forgot{margin-top:20px;color:var(--ez-muted);text-align:center}
.ez-forgot summary{cursor:pointer;color:var(--ez-gold);font-weight:600;list-style:none}
.ez-forgot summary::-webkit-details-marker{display:none}
.ez-forgot p{margin:10px 0 12px}

/* Cards */
.ez-card{
  background:var(--ez-card);border:1px solid var(--ez-line);border-radius:var(--ez-radius);
  padding:16px;margin-bottom:14px
}
.ez-card-t{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;margin:0 0 12px;color:var(--ez-gold)}
body.ez-en .ez-card-t{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.04em}
.ez-card-t .ez-ic{width:20px;height:20px}
.ez-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.ez-dl dt{color:var(--ez-muted);font-size:.88rem}
.ez-dl dd{margin:0;font-weight:600;text-align:end;word-break:break-word}
.ez-sub-state{display:flex;align-items:center;gap:8px;margin:0;font-weight:700}
.ez-sub-active .ez-sub-state{color:var(--ez-ok)}
.ez-sub-expired .ez-sub-state{color:var(--ez-warn);align-items:flex-start}
.ez-sub .ez-muted{margin:.4rem 0 .8rem}
.ez-seg{display:flex;background:var(--ez-bg2);border:1px solid var(--ez-line);border-radius:14px;padding:4px}
.ez-seg a{flex:1;text-align:center;padding:10px;border-radius:10px;color:var(--ez-muted);font-weight:700}
.ez-seg a.is-on{background:var(--ez-gold);color:#0A0A0A}

/* Utilities */
.ez-small{font-size:.85rem}
.ez-center{text-align:center}
.ez-mt{margin-top:18px}
.ez-mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.ez-hint{color:var(--ez-muted);font-size:.8rem}
.ez-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ez-head-row .ez-h1{margin:0}
.ez-btn-sm{min-height:42px;padding:0 14px;font-size:.92rem;border-radius:12px}
.ez-back{display:inline-flex;align-items:center;gap:6px;color:var(--ez-muted);font-size:.9rem;margin-bottom:10px}
.ez-back::before{content:"→";font-weight:700}
body.ez-en .ez-back::before{content:"←"}
.ez-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ez-row2>*{min-width:0}
.ez-field input[type=date]{min-width:0;max-width:100%;padding-inline:10px;font-size:15px}

/* Date field: shows D/M/Y; the real date input sits invisibly on top and opens the phone calendar */
.ez-date{position:relative;display:block}
.ez-date-show{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:52px;padding:12px 14px;border-radius:14px;
  background:var(--ez-bg2);border:1px solid var(--ez-line);color:var(--ez-text);font-size:16px
}
.ez-date-show .ez-ic{color:var(--ez-gold);width:20px;height:20px}
.ez-date-show.is-empty .ez-date-txt{color:var(--ez-muted)}
.ez-date-txt{font-family:"Montserrat","Cairo",sans-serif;font-weight:500;letter-spacing:.02em}
.ez-field .ez-date input.ez-date-native{
  position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;
  opacity:0;border:0;z-index:1;cursor:pointer
}
.ez-date:focus-within .ez-date-show{border-color:var(--ez-gold);box-shadow:0 0 0 3px var(--ez-gold-soft)}
.ez-date-clear{
  position:absolute;z-index:2;top:50%;transform:translateY(-50%);inset-inline-end:8px;
  width:30px;height:30px;border:0;border-radius:50%;background:var(--ez-card2);
  color:var(--ez-muted);font-size:1.1rem;line-height:1;cursor:pointer
}
/* Clearable dates: the × takes the icon's place once a date is set */
.ez-date.has-clear.is-set .ez-date-show .ez-ic{visibility:hidden}
/* Fallback if the script hasn't run: gold calendar icon */
input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(71%) sepia(41%) saturate(520%) hue-rotate(8deg) brightness(92%);cursor:pointer
}
.ez-static{min-height:52px;padding:14px;border-radius:14px;background:var(--ez-bg);border:1px dashed var(--ez-line);color:var(--ez-muted)}
.ez-sub-t{margin:6px 0 0;font-size:.95rem;color:var(--ez-gold)}
.ez-actions-row{flex-direction:row;flex-wrap:wrap}
.ez-actions-row .ez-btn{flex:1;min-height:46px;font-size:.92rem}

/* Search box */
.ez-searchbox{
  display:flex;align-items:center;gap:8px;margin:16px 0 6px;padding:0 14px;
  background:var(--ez-bg2);border:1px solid var(--ez-line);border-radius:14px;color:var(--ez-muted)
}
.ez-searchbox input{flex:1;min-height:50px;border:0;background:transparent;color:var(--ez-text);font:inherit;font-size:16px;outline:none}
.ez-searchbox:focus-within{border-color:var(--ez-gold)}

/* Lists */
.ez-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ez-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ez-card);border:1px solid var(--ez-line);border-radius:14px;padding:12px 14px;color:var(--ez-text)
}
a.ez-row:active{border-color:var(--ez-gold)}
.ez-row-main{display:flex;flex-direction:column;min-width:0;color:var(--ez-text)}
.ez-row-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-row-main small{color:var(--ez-muted);font-size:.82rem}
.ez-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:end}
.ez-row-side small{color:var(--ez-muted);font-size:.78rem}
.ez-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.ez-chip.ok{background:rgba(76,175,122,.15);color:var(--ez-ok)}
.ez-chip.warn{background:rgba(224,164,58,.15);color:var(--ez-warn)}
.ez-chip.bad{background:rgba(224,90,76,.15);color:#F29A90}
.ez-mini-btn{padding:4px 10px;border:1px solid rgba(201,168,76,.4);border-radius:10px;font-size:.78rem;font-weight:700}

/* Tabs */
.ez-tabs{display:flex;gap:8px;overflow-x:auto;margin:18px -16px 6px;padding:0 16px 4px;scrollbar-width:none}
.ez-tabs::-webkit-scrollbar{display:none}
.ez-tabs a{
  flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--ez-line);
  color:var(--ez-muted);font-weight:600;font-size:.88rem;white-space:nowrap
}
.ez-tabs a b{margin-inline-start:4px;color:var(--ez-text)}
.ez-tabs a.is-on{background:var(--ez-gold);border-color:var(--ez-gold);color:#0A0A0A}
.ez-tabs a.is-on b{color:#0A0A0A}

/* Stats variants */
.ez-stats-3{grid-template-columns:repeat(3,1fr)}
.ez-stats-3 .ez-stat{padding:12px}
.ez-stats-3 .ez-stat-n{font-size:1.6rem}
.ez-stat-bad .ez-stat-n{color:var(--ez-bad)}
.ez-stat-n.ez-stat-money,.ez-stat-n.ez-stat-date{font-size:1.15rem;font-family:"Montserrat","Cairo",sans-serif;font-weight:700;letter-spacing:0}
body.ez-en .ez-stat-n.ez-stat-money,body.ez-en .ez-stat-n.ez-stat-date{font-size:1.15rem}

/* Checkbox + radio segments */
.ez-check{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.ez-check input{width:22px;height:22px;accent-color:var(--ez-gold)}
.ez-first-pay{margin-top:14px}
.ez-pay{display:flex;flex-direction:column;gap:14px}
.ez-seg-radio label{flex:1;position:relative}
.ez-seg-radio input{position:absolute;opacity:0;pointer-events:none}
.ez-seg-radio span{display:block;text-align:center;padding:10px 4px;border-radius:10px;color:var(--ez-muted);font-weight:700;font-size:.9rem;cursor:pointer}
.ez-seg-radio input:checked+span{background:var(--ez-gold);color:#0A0A0A}

/* Payments */
.ez-pays{display:flex;flex-direction:column}
.ez-pay-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--ez-line);color:var(--ez-text)}
.ez-pay-row:last-child{border-bottom:0}
.ez-pay-amt{font-weight:700;color:var(--ez-gold);white-space:nowrap}
.ez-btn-x{
  width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--ez-line);
  background:transparent;color:var(--ez-muted);display:flex;align-items:center;justify-content:center;cursor:pointer
}
.ez-btn-x .ez-ic{width:16px;height:16px}

/* Fold (details) cards */
.ez-fold summary{cursor:pointer;list-style:none;margin:0}
.ez-fold summary::-webkit-details-marker{display:none}
.ez-fold summary::after{content:"+";margin-inline-start:auto;font-size:1.3rem;line-height:1}
.ez-fold[open] summary::after{content:"−"}
.ez-fold[open] summary{margin-bottom:12px}

/* Success card */
.ez-done{text-align:center;border-color:rgba(76,175,122,.4)}
.ez-done .ez-h2{margin-top:6px;color:var(--ez-text)}
.ez-done .ez-dl{text-align:start;margin:12px 0}
.ez-done-ic{
  width:56px;height:56px;margin:4px auto 0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(76,175,122,.15);color:var(--ez-ok)
}
.ez-done-ic .ez-ic{width:28px;height:28px;stroke-width:2.6}

/* Wider screens */
@media (min-width:700px){
  .ez-cats{grid-template-columns:repeat(3,1fr)}
  .ez-nav{max-width:640px;margin:0 auto;border-inline:1px solid var(--ez-line);border-radius:18px 18px 0 0}
}

/* Print: hide app chrome (camel card print styles come in Block 8) */
@media print{
  .ez-top,.ez-nav,.ez-lang{display:none!important}
  body.ez{background:#fff;color:#000}
}