/* The phone, drawn in HTML — styled after the shipped app (cream ground,
 * white tiles, the splash green, emoji icons).
 *
 * EVERY SIZE IS IN UNITS OF THE PHONE'S OWN WIDTH, so a page sets one width
 * and the whole screen scales: --u is one CSS pixel of a 390-wide phone.
 * The status bar is kept clean on purpose — no stray notification icons. */

.gp {
  --u: calc(100cqi / 390);
  --gp-ground: #F5F0E6;
  --gp-card: #FFFFFF;
  --gp-ink: #173A2A;
  --gp-muted: #56655C;
  --gp-green: #2E7D5B;
  --gp-mint: #DCEFE2;
  --gp-red: #B3452E;
  --gp-shade: #EAE4D7;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 390 / 844;
  width: 100%;
  border-radius: 14% / 6.4%;
  padding: 3%;
  background: linear-gradient(145deg, #2a2d2b, #0d0f0e 55%, #232624);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 1.5px 0 rgba(255, 255, 255, .12) inset,
    0 40px 80px -30px rgba(10, 30, 20, .55),
    0 18px 36px -24px rgba(10, 30, 20, .5);
  font-family: 'Rubik', 'Heebo', 'Noto Sans Arabic', system-ui, sans-serif;
  color: var(--gp-ink);
  text-align: start;
  isolation: isolate;
}

.gp::after { /* the camera pill */
  content: "";
  position: absolute;
  top: 4.2%;
  left: 50%;
  width: 28%;
  height: 3.4%;
  translate: -50% 0;
  border-radius: 999px;
  background: #050605;
  z-index: 3;
}

.gp-body {
  position: relative;
  height: 100%;
  border-radius: 11% / 5.2%;
  overflow: hidden;
  background: var(--gp-ground);
}

.gp-scroll {
  height: calc(100% - 46 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  overflow: hidden;
}

/* ---- status bar ---- */
.gp-status {
  height: calc(46 * var(--u));
  padding: calc(14 * var(--u)) calc(30 * var(--u)) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight: 600;
  font-size: calc(15 * var(--u));
  direction: ltr;
}
.gp-sicons { display: flex; gap: calc(5 * var(--u)); align-items: center; }
.gp-sicons i { display: block; background: currentColor; border-radius: calc(2 * var(--u)); }
.gp-sig { width: calc(16 * var(--u)); height: calc(10 * var(--u)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.gp-wifi { width: calc(14 * var(--u)); height: calc(10 * var(--u)); clip-path: polygon(50% 100%, 0 20%, 50% 0, 100% 20%); }
.gp-bat { width: calc(24 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)) !important; }

/* ---- headers ---- */
.gp-head1, .gp-head2 {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  margin-block: calc(6 * var(--u)) calc(14 * var(--u));
}
.gp-burger {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  border-radius: 50%;
  background: var(--gp-card);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  font-size: calc(18 * var(--u));
}
.gp-hello, .gp-title {
  font-weight: 700;
  font-size: calc(27 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.gp-title { font-size: calc(25 * var(--u)); padding-top: calc(5 * var(--u)); }
.gp-sub {
  margin-top: calc(4 * var(--u));
  font-size: calc(13 * var(--u));
  color: var(--gp-muted);
  line-height: 1.3;
}

/* ---- dashboard ---- */
.gp-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--u));
}
.gp-tile {
  position: relative;
  background: var(--gp-card);
  border-radius: calc(24 * var(--u));
  padding: calc(16 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  text-align: center;
  box-shadow: 0 2px 10px rgba(40, 50, 40, .07);
}
.gp-ti {
  position: absolute;
  top: calc(10 * var(--u));
  inset-inline-end: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  color: var(--gp-muted);
}
.gp-tile-icon { font-size: calc(24 * var(--u)); line-height: 1; }
.gp-tile-num {
  margin-top: calc(8 * var(--u));
  font-weight: 700;
  font-size: calc(24 * var(--u));
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gp-tile-label { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--gp-muted); line-height: 1.25; }

.gp-card {
  background: var(--gp-card);
  border-radius: calc(24 * var(--u));
  box-shadow: 0 2px 10px rgba(40, 50, 40, .07);
}
.gp-week { margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); }
.gp-ctitle { font-weight: 700; font-size: calc(16 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.gp-bars { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); height: calc(128 * var(--u)); }
.gp-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: calc(3 * var(--u)); }
.gp-bar i { display: block; width: 100%; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); background: var(--gp-green); max-height: calc(78 * var(--u)); }
.gp-bar.is-zero i { background: #BFDCCB; }
.gp-bar.is-today i { background: var(--gp-ink); }
.gp-bar-v { font-size: calc(9.5 * var(--u)); font-weight: 700; white-space: nowrap; }
.gp-bar-d { font-size: calc(10.5 * var(--u)); color: var(--gp-muted); }
.gp-bar.is-today .gp-bar-d { color: var(--gp-ink); font-weight: 700; }

.gp-fab {
  position: absolute;
  bottom: calc(22 * var(--u));
  inset-inline-end: calc(20 * var(--u));
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1B3A2B;
  color: #fff;
  font-size: calc(30 * var(--u));
  box-shadow: 0 8px 20px -6px rgba(20, 50, 35, .6);
}

/* ---- calendar ---- */
.gp-month { font-weight: 700; font-size: calc(17 * var(--u)); text-align: center; margin-bottom: calc(8 * var(--u)); }
.gp-wds, .gp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(5 * var(--u)); }
.gp-wd { text-align: center; font-size: calc(11 * var(--u)); color: var(--gp-muted); font-weight: 600; padding-bottom: calc(4 * var(--u)); }
.gp-day {
  aspect-ratio: 1;
  border-radius: calc(11 * var(--u));
  background: var(--gp-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  box-shadow: 0 1px 3px rgba(40, 50, 40, .06);
  font-size: calc(12.5 * var(--u));
}
.gp-day b { font-weight: 600; line-height: 1; }
.gp-day i {
  display: grid;
  place-items: center;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--gp-green);
  color: #fff;
  font-style: normal;
  font-size: calc(8.5 * var(--u));
  font-weight: 700;
}
.gp-day.is-off { background: var(--gp-shade); box-shadow: none; }
.gp-day.is-blank { background: none; box-shadow: none; }
.gp-day.is-today { background: #1B3A2B; color: #fff; }
.gp-day.is-today i { background: #fff; color: #1B3A2B; }

.gp-dayline { margin-block: calc(14 * var(--u)) calc(10 * var(--u)); font-weight: 700; font-size: calc(14 * var(--u)); }

.gp-job {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  background: var(--gp-card);
  border-radius: calc(20 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  margin-bottom: calc(10 * var(--u));
  box-shadow: 0 2px 10px rgba(40, 50, 40, .07);
}
.gp-job.is-done { opacity: .62; }
.gp-time {
  flex: none;
  font-weight: 700;
  font-size: calc(15 * var(--u));
  padding-inline-end: calc(12 * var(--u));
  border-inline-end: calc(2 * var(--u)) solid var(--gp-mint);
  font-variant-numeric: tabular-nums;
}
.gp-job-main { flex: 1; min-width: 0; }
.gp-job-client { font-weight: 700; font-size: calc(15 * var(--u)); }
.gp-job-task { color: var(--gp-green); font-size: calc(13 * var(--u)); margin-top: calc(2 * var(--u)); }
.gp-job-meta { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(10 * var(--u)); margin-top: calc(5 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--gp-muted); }
.gp-nav { color: var(--gp-ink); font-weight: 700; }
.gp-done {
  flex: none;
  background: var(--gp-mint);
  color: var(--gp-green);
  font-weight: 700;
  font-size: calc(11.5 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
}

/* ---- expenses ---- */
.gp-exp {
  display: flex;
  gap: calc(12 * var(--u));
  background: var(--gp-card);
  border-radius: calc(22 * var(--u));
  padding: calc(14 * var(--u));
  margin-bottom: calc(11 * var(--u));
  box-shadow: 0 2px 10px rgba(40, 50, 40, .07);
}
.gp-exp-icon { font-size: calc(26 * var(--u)); line-height: 1.2; }
.gp-exp-main { flex: 1; min-width: 0; }
.gp-exp-cat { font-weight: 700; font-size: calc(16 * var(--u)); }
.gp-exp-date, .gp-exp-note { font-size: calc(12.5 * var(--u)); color: var(--gp-muted); margin-top: calc(2 * var(--u)); }
.gp-exp-extra { font-size: calc(11.5 * var(--u)); margin-top: calc(4 * var(--u)); line-height: 1.3; }
.gp-exp-note { color: var(--gp-ink); }
.gp-exp-amt { text-align: end; flex: none; }
.gp-exp-amt b { display: block; color: var(--gp-red); font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums; }
.gp-exp-amt small { display: block; font-size: calc(10 * var(--u)); color: var(--gp-muted); margin-top: calc(2 * var(--u)); }

/* ---- quote ---- */
.gp-quote { padding: calc(18 * var(--u)); border-inline-end: calc(4 * var(--u)) solid #A3701F; }
.gp-qtop { display: flex; justify-content: space-between; align-items: center; }
.gp-pill { background: #F6E7C8; color: #7A5410; font-weight: 700; font-size: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); }
.gp-qno { color: var(--gp-muted); font-size: calc(12 * var(--u)); font-weight: 600; }
.gp-qclient { font-weight: 700; font-size: calc(20 * var(--u)); margin-top: calc(12 * var(--u)); }
.gp-qdesc { font-size: calc(13 * var(--u)); color: var(--gp-muted); margin-top: calc(3 * var(--u)); line-height: 1.35; padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid var(--gp-shade); }
.gp-qrow { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(8 * var(--u)); margin-block: calc(12 * var(--u)) calc(14 * var(--u)); }
.gp-qvalid { font-size: calc(12 * var(--u)); color: var(--gp-muted); }
.gp-qamt { text-align: end; }
.gp-qamt b { display: block; font-size: calc(24 * var(--u)); font-variant-numeric: tabular-nums; }
.gp-qamt small { font-size: calc(10.5 * var(--u)); color: var(--gp-muted); }
.gp-btn {
  text-align: center;
  font-weight: 700;
  font-size: calc(14 * var(--u));
  padding: calc(11 * var(--u));
  border-radius: 999px;
  border: 1px solid var(--gp-shade);
  margin-top: calc(9 * var(--u));
}
.gp-btn--ok { background: var(--gp-mint); border-color: transparent; color: var(--gp-green); }
.gp-btn--soft { background: #E4F1E8; border-color: transparent; }

/* ---- owed ---- */
.gp-owed { padding: calc(6 * var(--u)) calc(16 * var(--u)); }
.gp-orow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: calc(10 * var(--u));
  align-items: center;
  padding-block: calc(13 * var(--u));
  border-bottom: 1px solid var(--gp-shade);
  font-size: calc(13.5 * var(--u));
}
.gp-orow:last-child { border-bottom: 0; }
.gp-oname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-ostate { color: var(--gp-muted); font-size: calc(12 * var(--u)); }
.gp-ostate.is-late { color: var(--gp-red); font-weight: 600; }
.gp-oamt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- lock screen ---- */
.gp--lock .gp-body {
  background:
    radial-gradient(120% 70% at 50% 0%, #FDE6C4 0%, transparent 60%),
    linear-gradient(180deg, #F3C99A 0%, #B9D6C2 55%, #6E9C84 100%);
  color: #10271C;
}
.gp--night .gp-body {
  background:
    radial-gradient(90% 50% at 70% 10%, rgba(120, 150, 210, .35), transparent 60%),
    linear-gradient(180deg, #1B2745 0%, #0E1A2C 60%, #081018 100%);
  color: #EEF3F6;
}
.gp-lock { text-align: center; padding-top: calc(28 * var(--u)); }
.gp-ltime {
  font-size: calc(92 * var(--u));
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.gp-ldate { font-size: calc(17 * var(--u)); font-weight: 500; margin-top: calc(8 * var(--u)); opacity: .85; }
.gp-notes { margin-top: calc(170 * var(--u)); text-align: start; }
.gp-note {
  display: flex;
  gap: calc(11 * var(--u));
  padding: calc(13 * var(--u)) calc(14 * var(--u));
  border-radius: calc(22 * var(--u));
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #10271C;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45);
}
.gp--night .gp-note { background: rgba(240, 245, 250, .16); color: #F3F6F8; }
.gp-note img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); flex: none; }
.gp-note-main { flex: 1; min-width: 0; }
.gp-note-head { display: flex; justify-content: space-between; font-size: calc(12 * var(--u)); opacity: .75; }
.gp-note-head b { font-weight: 700; }
.gp-note-t { font-weight: 700; font-size: calc(14.5 * var(--u)); margin-top: calc(2 * var(--u)); }
.gp-note-b { font-size: calc(13.5 * var(--u)); line-height: 1.35; margin-top: calc(2 * var(--u)); }