/* =========================================================================
   Prompt Engineer — Mobile UI (Android-style light dashboard)
   Light indigo/blue theme inspired by the reference mock-up:
   soft cards, pastel icon tiles, gradient hero card, bottom navigation.
   ========================================================================= */
:root{
  --bg:#EFF1F9;
  --card:#ffffff;
  --ink:#17203a;
  --muted:#5f6880;          /* 5.56:1 on white, 4.88:1 on page bg */
  --line:#e7ebf6;
  --primary:#3d63f5;
  --primary-link:#2f4fd8;   /* link/text blue: 6.5:1 on white */
  --primary2:#6c8bff;
  --grad:linear-gradient(135deg,#3550e0,#4260f5); /* white text ≥4.8:1 */
  --pink:#f4566f;           /* accent/icons on pastel */
  --pink-deep:#d1354f;      /* button bg: white text 4.85:1 */
  --pink-soft:#ffe9ee;
  --blue-soft:#e9edff;
  --green:#15803d;
  --green-soft:#e8f8ee;
  --amber:#f59e0b;
  --amber-soft:#fff4e2;
  --shadow:0 10px 28px rgba(23,32,84,.07);
  --shadow-sm:0 4px 14px rgba(23,32,84,.06);
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Tajawal",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(600px 320px at 90% -5%, rgba(108,139,255,.18), transparent 70%),
    radial-gradient(520px 300px at -10% 25%, rgba(244,86,111,.10), transparent 70%);
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--primary);text-decoration:none}
::selection{background:rgba(61,99,245,.22)}

/* thin themed scrollbar */
*{scrollbar-width:thin;scrollbar-color:#c9d2ee transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9d2ee;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--primary);background-clip:content-box}

.app{
  position:relative;z-index:1;
  max-width:480px;margin:0 auto;min-height:100vh;
  padding-bottom:96px;
  background:linear-gradient(180deg,#f7f8fd, #eff1f9);
  box-shadow:0 0 60px rgba(23,32,84,.10);
}
@media(max-width:520px){ .app{box-shadow:none} }

/* ---------------- Top app bar ---------------- */
.appbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:rgba(247,248,253,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(231,235,246,.9);
}
.icon-btn{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--shadow-sm);color:var(--ink);font-size:18px;
  transition:transform .15s, background .2s;flex:0 0 auto;
}
.icon-btn:active{transform:scale(.94)}
.appbar h1{font-size:16.5px;font-weight:800;margin:0;flex:1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{
  width:40px;height:40px;border-radius:14px;object-fit:contain;
  background:#fff;box-shadow:var(--shadow-sm);padding:3px;flex:0 0 auto;
}

/* ---------------- Drawer ---------------- */
.scrim{
  position:fixed;inset:0;background:rgba(15,22,46,.45);z-index:40;
  opacity:0;visibility:hidden;transition:.25s;backdrop-filter:blur(2px);
}
.scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:50;width:290px;max-width:86vw;
  background:#fff;transform:translateX(-102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding:18px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;
  box-shadow:8px 0 40px rgba(23,32,84,.18);
}
html[dir="rtl"] .drawer{left:auto;right:0;transform:translateX(102%)}
.drawer.open{transform:translateX(0)!important}
.drawer .d-head{display:flex;align-items:center;gap:11px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.drawer .d-head img{width:44px;height:44px;border-radius:14px;background:#f3f5fc;padding:4px}
.drawer .d-head b{display:block;font-size:15px}
.drawer .d-head span{font-size:12px;color:var(--muted)}
.d-label{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;margin-top:6px}
.d-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  padding:11px 13px;border-radius:14px;background:#f7f9ff;font-weight:700;font-size:14px;
  transition:.18s;color:var(--ink);
}
.d-item:hover{background:var(--blue-soft)}
.d-item .di{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:#fff;box-shadow:var(--shadow-sm);font-size:14px;flex:0 0 auto}
.d-foot{margin-top:auto;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7}

/* language segmented control (ع in a white box) */
.lang-seg{display:flex;gap:6px;background:#f2f5fd;padding:5px;border-radius:15px;border:1px solid var(--line)}
.lang-seg button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px;border-radius:11px;font-weight:800;font-size:13.5px;color:var(--muted);transition:.18s;
}
.lang-seg button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.ar-box{
  width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;
  background:#ffffff;color:#0a0a0a;border:1.6px solid #000000;border-radius:5px;
  font-size:12px;font-weight:800;line-height:1;
}
.globe{font-size:15px;line-height:1}

/* ---------------- Panels / tabs ---------------- */
.panel{display:none;padding:16px 14px 6px;animation:fade .25s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* greeting */
.hello{font-size:13px;color:var(--muted);font-weight:600}
.greet{font-size:23px;font-weight:800;margin:2px 0 14px;letter-spacing:-.3px}

/* ---------------- Hero card (gradient) ---------------- */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#3550e0 0%,#4260f5 55%,#4a66f7 100%);
  color:#fff;padding:18px 18px 16px;box-shadow:0 16px 34px rgba(53,80,224,.34);
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none;
}
.hero::before{width:190px;height:190px;right:-70px;top:-80px}
.hero::after{width:130px;height:130px;right:-30px;bottom:-70px;background:rgba(255,255,255,.10)}
.hero .h-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.hero .h-brand{font-size:14.5px;font-weight:800;letter-spacing:.2px}
.hero .h-ver{font-size:11px;font-weight:800;background:rgba(9,20,72,.45);
  border:1px solid rgba(255,255,255,.35);padding:3px 9px;border-radius:999px}
.hero .h-score{display:flex;align-items:flex-end;gap:8px;margin:12px 0 4px;position:relative;z-index:1}
.hero .h-score b{font-size:38px;font-weight:800;line-height:1}
.hero .h-score span{font-size:12.5px;opacity:1;padding-bottom:5px}
.hero .h-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;position:relative;z-index:1}
.hero .h-bar i{display:block;height:100%;border-radius:99px;background:#fff;width:0;transition:width .5s ease}
.hero .h-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;position:relative;z-index:1}
.hero .h-stat{background:rgba(9,20,72,.32);border:1px solid rgba(255,255,255,.24);
  border-radius:13px;padding:8px 6px;text-align:center}
.hero .h-stat b{display:block;font-size:15.5px;font-weight:800;line-height:1.2}
.hero .h-stat span{font-size:10.5px;opacity:1}

/* ---------------- Quick actions ---------------- */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 2px 4px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .15s}
.qa button:active{transform:translateY(2px) scale(.97)}
.qa .qa-ic{
  width:100%;max-width:56px;height:50px;border-radius:16px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--primary);font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(61,99,245,.10);transition:.18s;
}
.qa button:nth-child(2) .qa-ic{background:var(--pink-soft);color:var(--pink);box-shadow:inset 0 0 0 1px rgba(244,86,111,.14)}
.qa button:nth-child(3) .qa-ic{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1px rgba(22,163,74,.14)}
.qa button:nth-child(4) .qa-ic{background:var(--amber-soft);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(245,158,11,.16)}
.qa button:active .qa-ic{filter:brightness(.97)}
.qa .qa-t{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center;line-height:1.3}

/* ---------------- Section cards (accordion) ---------------- */
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 10px}
.sec-h b{font-size:15.5px;font-weight:800}
.sec-h span{font-size:12px;color:var(--muted);font-weight:600}
.scard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);margin-bottom:11px;overflow:hidden;
}
.scard.open{box-shadow:var(--shadow);border-color:#dfe6ff}
.scard .s-head{
  display:flex;align-items:center;gap:11px;width:100%;text-align:start;padding:13px 13px;
}
.s-ic{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:17px;
  background:var(--blue-soft);color:var(--primary);flex:0 0 auto;
}
.scard:nth-child(3n+2) .s-ic{background:var(--pink-soft);color:var(--pink)}
.scard:nth-child(3n+3) .s-ic{background:var(--green-soft);color:var(--green)}
.s-title{flex:1;min-width:0}
.s-title b{display:block;font-size:14.5px;font-weight:800}
.s-title span{font-size:11.5px;color:var(--muted);display:block;line-height:1.4}
.s-done{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  background:#eef1fa;color:#5f6880;flex:0 0 auto;transition:.2s}
.s-done.on{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1.5px rgba(22,163,74,.35)}
.s-chev{color:#7c86a5;font-size:12px;transition:transform .25s;flex:0 0 auto}
.scard.open .s-chev{transform:rotate(90deg);color:var(--primary)}
.s-body{display:none;padding:2px 13px 15px;border-top:1px dashed var(--line)}
.scard.open .s-body{display:block}

/* ---------------- Form controls ---------------- */
.f{margin-top:12px}
label.lb{display:block;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:6px}
input[type=text],textarea,select{
  width:100%;background:#f7f9fe;border:1.5px solid var(--line);border-radius:14px;
  padding:12px 13px;font-size:14.5px;outline:none;transition:border-color .16s,box-shadow .16s,background .2s;
  color:var(--ink);
}
textarea{min-height:92px;resize:vertical;line-height:1.65}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236c7592' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:left 14px center;padding-inline-start:14px;padding-inline-end:34px}
html[dir="ltr"] select{background-position:right 14px center}
input::placeholder,textarea::placeholder{color:#5f6880;opacity:1}
input:focus,textarea:focus,select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(61,99,245,.13)}
.hint{font-size:12px;color:var(--muted);background:#f7f9ff;border:1px dashed var(--line);
  border-radius:12px;padding:9px 11px;margin-top:9px;line-height:1.6}

/* chips (tone / format) */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{
  padding:8px 12px;border-radius:999px;background:#f7f9fe;border:1.5px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:.16s;user-select:none;
}
.chips label:hover{border-color:#c9d4ff;color:var(--ink)}
.chips input:checked + label{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 14px rgba(61,99,245,.28);
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* toggles */
.tg{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:start;
  background:#f7f9fe;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;margin-top:9px;
  transition:.18s;
}
.tg .tg-t{flex:1;min-width:0}
.tg .tg-t b{display:block;font-size:13.5px;font-weight:800}
.tg .tg-t span{font-size:11.5px;color:var(--muted);line-height:1.5;display:block}
.tg .sw{
  width:42px;height:24px;border-radius:99px;background:#dfe4f3;position:relative;
  transition:background .2s;flex:0 0 auto;margin-top:2px;
}
.tg .sw::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(23,32,84,.25);transition:transform .2s;
}
.tg.on{background:#fff;border-color:#cfd9ff;box-shadow:var(--shadow-sm)}
.tg.on .sw{background:var(--grad)}
.tg.on .sw::after{transform:translateX(18px)}

/* ---------------- Output card ---------------- */
.out{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-top:16px;overflow:hidden;
}
.out-h{display:flex;align-items:center;gap:8px;padding:13px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#f4f7ff,#ffffff)}
.out-h b{font-size:14.5px;font-weight:800;flex:1}
.tag{font-size:10.5px;font-weight:800;background:var(--grad);color:#fff;padding:3px 9px;border-radius:999px}
pre.out-p{
  margin:0;padding:14px;max-height:330px;overflow:auto;font-size:13px;line-height:1.75;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  background:#fbfcff;white-space:pre-wrap;word-break:break-word;color:#243056;
}
.out-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:9px;padding:12px 13px 14px}
.btn{
  height:46px;border-radius:15px;font-weight:800;font-size:14px;display:flex;align-items:center;
  justify-content:center;gap:7px;transition:.18s;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 10px 22px rgba(61,99,245,.30)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.pink{background:var(--pink-deep);color:#fff;box-shadow:0 10px 22px rgba(209,53,79,.30)}
.btn.pink:hover{filter:brightness(1.05)}
.btn.ghost{background:#f2f5ff;color:var(--primary);box-shadow:inset 0 0 0 1.5px #dbe3ff}
.btn.small{height:40px;font-size:13px;border-radius:13px}
.stats{display:flex;flex-wrap:wrap;gap:12px;padding:10px 14px 13px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--muted);font-weight:600}
.stats b{color:var(--ink)}

/* ---------------- Quality tab ---------------- */
.ring-wrap{display:flex;flex-direction:column;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 16px}
.ring{
  width:150px;height:150px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--amber) 0%, #edf0fa 0);
}
.ring .inner{
  width:118px;height:118px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:inset 0 2px 10px rgba(23,32,84,.06);text-align:center;
}
.ring .inner b{font-size:32px;font-weight:800;line-height:1}
.ring .inner span{font-size:11px;color:var(--muted);font-weight:700}
.score-tip{margin-top:12px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);
  background:#f7f9ff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;line-height:1.6}
.chk{
  display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1.5px solid var(--line);
  border-radius:15px;padding:11px 12px;margin-top:9px;transition:.18s;
}
.chk .ic{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:#eef1fa;color:#a8b1cc;flex:0 0 auto;font-weight:800;
}
.chk .t{font-size:13.5px;font-weight:800}
.chk .d{font-size:11.5px;color:var(--muted);line-height:1.5}
.chk.done{background:var(--green-soft);border-color:#c9edd7}
.chk.done .ic{background:var(--green);color:#fff}
.chk.done .d{display:none}

/* ---------------- Presets tab ---------------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:13px 12px;text-align:start;transition:.18s;
}
.pcard:active{transform:scale(.97)}
.pcard:hover{border-color:#cfd9ff;box-shadow:var(--shadow)}
.pcard b{display:block;font-size:13.5px;font-weight:800;line-height:1.5}

/* ---------------- Image tab ---------------- */
.note{background:var(--blue-soft);border:1px solid #d9e1ff;color:#2b3a7a;font-size:12.5px;
  border-radius:13px;padding:10px 12px;margin-bottom:12px;line-height:1.6;font-weight:600}

/* ---------------- Tools tab ---------------- */
.ai-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:14px 13px;margin-bottom:11px;
}
.ai-top{display:flex;align-items:center;gap:10px}
.ai-ic{width:40px;height:40px;border-radius:13px;background:var(--blue-soft);display:grid;
  place-items:center;font-size:19px;flex:0 0 auto}
.ai-top b{font-size:14.5px;font-weight:800;flex:1}
.ai-d{font-size:12.5px;color:var(--muted);margin:8px 0 10px;line-height:1.6}
.ai-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ai-links a,.ai-links button{
  display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:13px;
  font-size:12.5px;font-weight:800;transition:.16s;text-align:center;
}
.ai-links .off{background:var(--blue-soft);color:var(--primary-link);box-shadow:inset 0 0 0 1.5px #d5ddff}
.ai-links .oss{background:var(--green-soft);color:#0f7a3f;box-shadow:inset 0 0 0 1.5px #cceedd}
.ai-links button.both{grid-column:1/-1;background:var(--grad);color:#fff}
.ai-links a:hover,.ai-links button:hover{filter:brightness(.98)}

/* ---------------- Bottom navigation ---------------- */
.bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(480px,100%);z-index:35;display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  box-shadow:0 -8px 30px rgba(23,32,84,.10);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bnav button{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;border-radius:14px;
  color:var(--muted);transition:.18s;
}
.bnav .bn-ic{
  width:38px;height:30px;border-radius:12px;display:grid;place-items:center;font-size:17px;transition:.18s;
}
.bnav .bn-t{font-size:10.5px;font-weight:800;line-height:1.2}
.bnav button.active{color:var(--primary)}
.bnav button.active .bn-ic{background:var(--blue-soft)}
.bnav button:active{transform:scale(.95)}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);z-index:60;
  background:#17203a;color:#fff;font-size:13px;font-weight:700;padding:11px 18px;border-radius:999px;
  box-shadow:0 14px 30px rgba(23,32,84,.35);opacity:0;visibility:hidden;transition:.25s;
  max-width:86vw;text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* section scroll offset under sticky bar */
[id^="m-"]{scroll-margin-top:76px}