@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

/* Mr Pharmacist — MEDCORE exact material map v109
   Reference: current MEDCORE shell + Profile & Settings material.
   Visual/layout layer only. No routes, API, data, account or subscription logic. */

:root{
  --mrph-mc-navy:#0a1828;
  --mrph-mc-navy-2:#11273d;
  --mrph-mc-ink:#172333;
  --mrph-mc-muted:#657386;
  --mrph-mc-paper:#f5f8fb;
  --mrph-mc-panel:#fff;
  --mrph-mc-line:#dce5ee;
  --mrph-mc-accent:#147a83;
  --mrph-mc-accent-soft:#e4f4f2;
  --mrph-mc-danger:#b8424c;
  --mrph-mc-shadow:0 14px 44px rgba(14,35,56,.08);
}

html,body.app-body{
  min-height:100%;
  font-family:"DM Sans","Noto Sans Arabic",system-ui,sans-serif!important;
  color:var(--mrph-mc-ink)!important;
  background:var(--mrph-mc-paper)!important;
}
body.app-body::before{display:none!important;content:none!important}

/* Shell geometry copied from MEDCORE. */
body.app-body .app-shell{
  display:grid!important;
  grid-template-columns:250px minmax(0,1fr)!important;
  min-height:100vh!important;
  background:var(--mrph-mc-paper)!important;
}
[dir="rtl"] body.app-body .app-shell{grid-template-columns:minmax(0,1fr) 250px!important}
[dir="rtl"] body.app-body .sidebar{grid-column:2!important}
[dir="rtl"] body.app-body .main{grid-column:1!important;grid-row:1!important}

body.app-body .sidebar{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  padding:22px 14px!important;
  overflow-y:auto!important;
  display:flex!important;
  flex-direction:column!important;
  color:#dce7f1!important;
  background:var(--mrph-mc-navy)!important;
  border:0!important;
  box-shadow:none!important;
}
body.app-body .brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:7px 9px 25px!important;
}
body.app-body .logo-mark{
  width:35px!important;
  height:35px!important;
  flex:0 0 35px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,#4ec2bc,#147a83)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(20,122,131,.28)!important;
  font-family:"DM Sans","Noto Sans Arabic",system-ui,sans-serif!important;
  font-size:.82rem!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
}
body.app-body .logo-mark::after{display:none!important;content:none!important}
body.app-body .brand-title{
  display:block!important;
  color:#f7fbff!important;
  font-size:.83rem!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}
body.app-body .brand-subtitle{
  margin-top:3px!important;
  color:#8aa0b7!important;
  font-size:.65rem!important;
  font-weight:500!important;
  letter-spacing:.14em!important;
}
body.app-body .nav-group{display:grid!important;gap:4px!important;margin:0!important}
body.app-body .nav-group + .nav-group{margin-top:6px!important}
body.app-body .nav-title{
  padding:0 12px 7px!important;
  color:#8aa0b7!important;
  font-size:.67rem!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
}
body.app-body .nav-item,
body.app-body .sidebar a[href="/admin.html"],
body.app-body .sidebar [data-action="logout"]{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:11px 12px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#c9d9e7!important;
  box-shadow:none!important;
  font-size:.9rem!important;
  font-weight:500!important;
  text-align:left!important;
  transform:none!important;
  filter:none!important;
}
body.app-body .nav-item:hover,
body.app-body .nav-item.active,
body.app-body .sidebar a[href="/admin.html"]:hover,
body.app-body .sidebar [data-action="logout"]:hover{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
}
body.app-body .nav-left{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
body.app-body .nav-icon,
body.app-body .mrph-suite-mark{
  width:auto!important;
  height:auto!important;
  display:inline-block!important;
  flex:0 0 auto!important;
  border-radius:0!important;
  background:transparent!important;
  color:#20838a!important;
  box-shadow:none!important;
  font-size:.75rem!important;
}
body.app-body .sidebar-card{
  margin-top:auto!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}

body.app-body .main{
  min-width:0!important;
  padding:0!important;
  color:var(--mrph-mc-ink)!important;
  background:var(--mrph-mc-paper)!important;
}
body.app-body .topbar{
  position:sticky!important;
  top:0!important;
  z-index:15!important;
  height:88px!important;
  min-height:88px!important;
  margin:0!important;
  padding:16px clamp(20px,3vw,42px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border:0!important;
  border-bottom:1px solid var(--mrph-mc-line)!important;
  background:color-mix(in srgb,var(--mrph-mc-panel) 92%,transparent)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
body.app-body .topbar-left{display:flex!important;align-items:center!important;gap:14px!important;min-width:0!important}
body.app-body .page-kicker{
  margin:0 0 6px!important;
  color:var(--mrph-mc-accent)!important;
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  line-height:1!important;
}
body.app-body .page-title{
  margin:0!important;
  color:var(--mrph-mc-ink)!important;
  font-size:1.35rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}
body.app-body .topbar-actions{display:flex!important;align-items:center!important;gap:8px!important}
body.app-body .topbar .chip{display:none!important}
body.app-body .topbar .btn-ghost,
body.app-body .topbar .language-button,
body.app-body .topbar .btn-icon{
  min-height:34px!important;
  padding:7px 11px!important;
  border:1px solid var(--mrph-mc-line)!important;
  border-radius:9px!important;
  background:var(--mrph-mc-panel)!important;
  color:var(--mrph-mc-ink)!important;
  box-shadow:none!important;
  transform:none!important;
}
body.app-body #view{
  width:100%!important;
  max-width:1550px!important;
  margin:0 auto!important;
  padding:clamp(20px,3vw,42px)!important;
}

/* MEDCORE base material system. */
body.app-body :where(.card,.panel,.stat,.level-card,.question-card,.news-card,.rx-card,.library-card,.lecture-card,.subject-card,.membership-card,.account-card,.profile-card,.portfolio-card,.exam-card,.catalog-card,.attempt-card,.result-card,.youtube-card){
  border:1px solid var(--mrph-mc-line)!important;
  border-radius:16px!important;
  background:var(--mrph-mc-panel)!important;
  color:var(--mrph-mc-ink)!important;
  box-shadow:var(--mrph-mc-shadow)!important;
}
body.app-body .card::before{display:none!important;content:none!important}
body.app-body :where(.card,.panel,.stat) :where(h1,h2,h3,h4){color:var(--mrph-mc-ink)!important}
body.app-body :where(.card,.panel,.stat) p,
body.app-body .section-note{color:var(--mrph-mc-muted)!important}
body.app-body .section-title{color:var(--mrph-mc-ink)!important;font-weight:700!important;letter-spacing:0!important}

body.app-body :where(input,select,textarea,.input){
  width:100%!important;
  border:1px solid var(--mrph-mc-line)!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--mrph-mc-ink)!important;
  padding:11px 12px!important;
  outline:none!important;
  box-shadow:none!important;
  transition:border .15s,box-shadow .15s!important;
}
body.app-body :where(input,select,textarea,.input):focus{
  border-color:var(--mrph-mc-accent)!important;
  box-shadow:0 0 0 3px rgba(20,122,131,.16)!important;
}
body.app-body :where(input,select,textarea,.input):disabled{
  cursor:default!important;
  background:#f3f7f8!important;
  color:#596f76!important;
  opacity:1!important;
}
body.app-body :where(.btn,.button,.primary,.secondary,.danger-button){
  border:1px solid transparent!important;
  border-radius:10px!important;
  padding:11px 14px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
body.app-body :where(.btn-cyan,.primary){background:var(--mrph-mc-accent)!important;color:#fff!important}
body.app-body :where(.btn-ghost,.secondary){background:transparent!important;color:var(--mrph-mc-ink)!important;border-color:var(--mrph-mc-line)!important}
body.app-body :where(.btn-danger,.danger-button){background:rgba(184,66,76,.12)!important;color:var(--mrph-mc-danger)!important;border-color:rgba(184,66,76,.35)!important}
body.app-body :where(.chip,.level-status,.status-dot){border:0!important;border-radius:999px!important;background:var(--mrph-mc-accent-soft)!important;color:var(--mrph-mc-accent)!important;box-shadow:none!important}

body.app-body .hero{
  border:0!important;
  border-radius:20px!important;
  background:linear-gradient(110deg,var(--mrph-mc-navy),var(--mrph-mc-navy-2))!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.app-body .hero::after{display:none!important;content:none!important}
body.app-body .hero p{color:#bfd1e1!important}
body.app-body .hero-panel,
body.app-body .hero-stat{border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.09)!important;box-shadow:none!important;backdrop-filter:none!important}

/* Remove the extra glossy layer added by older Mr Pharmacist polish. */
html[data-mrph-khalid-touch-feel="v99"] body.app-body .mrph-kt-feel-host::after{display:none!important;content:none!important}
html[data-mrph-khalid-touch-feel="v99"] body.app-body :where(.card,.panel,.stat,.level-card,.question-card,.news-card,.rx-card,.library-card,.lecture-card,.subject-card,.membership-card,.account-card,.profile-card,.portfolio-card,.exam-card,.catalog-card,.attempt-card,.result-card,.youtube-card){
  transform:none!important;
  filter:none!important;
}
html[data-mrph-khalid-touch-feel="v99"] body.app-body :where(.card,.panel,.stat,.level-card,.question-card,.news-card,.rx-card,.library-card,.lecture-card,.subject-card,.membership-card,.account-card,.profile-card,.portfolio-card,.exam-card,.catalog-card,.attempt-card,.result-card,.youtube-card):hover{
  border-color:var(--mrph-mc-line)!important;
  box-shadow:var(--mrph-mc-shadow)!important;
  transform:none!important;
  filter:none!important;
}

/* Profile page: same geometry/material as current MEDCORE Profile & Settings. */
body.app-body #view.mrph-medcore-profile-view{padding-top:0!important}
.mrph-medcore-profile-workspace{max-width:1280px;margin:0 auto;padding-bottom:28px}
.mrph-medcore-profile-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin:0 0 22px;
  padding:30px 32px;
  border:1px solid rgba(22,119,128,.2);
  border-radius:24px;
  background:linear-gradient(128deg,#092438,#0e5361 64%,#1d818b);
  box-shadow:0 18px 42px rgba(5,31,48,.15);
  color:#fff;
}
.mrph-medcore-profile-hero .eyebrow{margin:0 0 6px;color:#9fe3de!important;font-size:.72rem;font-weight:700;letter-spacing:.12em}
.mrph-medcore-profile-hero h2{margin:4px 0 8px;color:#fff!important;font-size:clamp(1.8rem,4vw,2.45rem);font-weight:700;letter-spacing:-.04em}
.mrph-medcore-profile-hero p:not(.eyebrow){max-width:680px;margin:0;color:#d2eeec!important;line-height:1.55}
.mrph-medcore-profile-hero-status{display:grid;gap:6px;min-width:210px;padding:17px 18px;border:1px solid rgba(235,255,253,.25);border-radius:17px;background:rgba(255,255,255,.1);text-align:right}
.mrph-medcore-profile-hero-status span{color:#b9efeb;font-size:.67rem;font-weight:900;letter-spacing:.16em}
.mrph-medcore-profile-hero-status b{color:#fff;font-size:.9rem}
.mrph-medcore-profile-hero-status small{color:#d9f5f2;font-size:.76rem;line-height:1.4}
.mrph-medcore-profile-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px;align-items:start}
.mrph-medcore-profile-surface{border:1px solid #d8e7e9;border-radius:22px;background:linear-gradient(145deg,#fff,#fbfefe);box-shadow:0 12px 30px rgba(4,35,47,.055);padding:28px;color:#172333}
.mrph-medcore-profile-security{background:linear-gradient(145deg,#fff,#f8fcfc)}
.mrph-medcore-profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.mrph-medcore-profile-head .eyebrow{margin:0 0 6px;color:#147a83!important;font-size:.72rem;font-weight:700;letter-spacing:.12em}
.mrph-medcore-profile-head h3{margin:3px 0 7px;color:#163b47!important;font-size:1.28rem;font-weight:700;letter-spacing:-.02em}
.mrph-medcore-profile-head p:not(.eyebrow){max-width:530px;margin:0;color:#71868c!important;font-size:.84rem;line-height:1.5}
.mrph-medcore-profile-avatar,.mrph-medcore-profile-seal{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:17px;font-weight:900}
.mrph-medcore-profile-avatar{background:linear-gradient(145deg,#167f88,#45aaa8);box-shadow:0 10px 20px rgba(18,127,135,.22);color:#fff;font-size:1.15rem}
.mrph-medcore-profile-seal{border:1px solid #bfe6e1;background:#eaf8f6;color:#17736e;font-size:1.15rem}
.mrph-medcore-account-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:19px;padding:15px 16px;border:1px solid #dce9eb;border-radius:15px;background:#f7fbfb}
.mrph-medcore-account-summary>div{display:grid;gap:3px;min-width:0}
.mrph-medcore-account-summary small{color:#768b90;font-size:.67rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.mrph-medcore-account-summary b{overflow:hidden;color:#174652;font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}
.mrph-medcore-account-summary span{overflow:hidden;color:#71868c;font-size:.77rem;text-overflow:ellipsis;white-space:nowrap}
.mrph-medcore-account-summary em{flex:0 0 auto;padding:6px 9px;border-radius:8px;background:#e7f5f3;color:#176f77;font-size:.68rem;font-style:normal;font-weight:900;letter-spacing:.05em}
.mrph-medcore-profile-form{display:grid;gap:14px}
.mrph-medcore-profile-form .form-row{display:grid;gap:8px}
.mrph-medcore-profile-form .form-row label{color:#365159!important;font-size:.78rem!important;font-weight:850!important}
.mrph-medcore-profile-form :where(input,textarea,.input){border:1px solid #cddde1!important;border-radius:12px!important;background:#fbfefe!important;box-shadow:none!important}
.mrph-medcore-profile-form :where(input,textarea,.input):focus{border-color:#21828a!important;box-shadow:0 0 0 4px rgba(31,131,139,.1)!important}
.mrph-medcore-profile-form textarea{min-height:86px!important;resize:vertical!important}
.mrph-medcore-profile-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:6px;padding-top:18px;border-top:1px solid #e0ebed}
.mrph-medcore-profile-footer p{display:flex;align-items:flex-start;gap:7px;max-width:290px;margin:0;color:#70868c!important;font-size:.77rem;line-height:1.45}
.mrph-medcore-profile-footer p i{color:#1a9690;font-size:.72rem;font-style:normal}
.mrph-medcore-profile-save{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;white-space:nowrap!important;background:#147a83!important;color:#fff!important}
.mrph-medcore-profile-save b{font-size:1.05rem}
.mrph-medcore-certificate-note{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:15px;border:1px solid #cce2e5;border-radius:14px;background:#effaf8}
.mrph-medcore-certificate-note>span{display:grid;place-items:center;flex:0 0 auto;width:29px;height:29px;border-radius:9px;background:#dff3f0;color:#16757c;font-size:.95rem}
.mrph-medcore-certificate-note b{display:block;color:#34525b;font-size:.83rem}
.mrph-medcore-certificate-note p{margin:4px 0 0;color:#71868c!important;font-size:.78rem;line-height:1.45}
.mrph-medcore-certificates-body{padding-top:2px}
.mrph-medcore-certificates-body .empty-state{min-height:0!important;padding:30px 10px!important;text-align:center!important;color:#657386!important;border:1px dashed #dce5ee!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important}
.mrph-medcore-certificates-body .empty-icon{width:52px!important;height:52px!important;margin:0 auto 12px!important;border:1px solid #bfe6e1!important;border-radius:17px!important;background:#eaf8f6!important;color:#17736e!important;box-shadow:none!important}
.mrph-medcore-certificates-body .empty-state h3{margin:0 0 6px!important;color:#163b47!important;font-size:1rem!important;font-weight:700!important}
.mrph-medcore-certificates-body .empty-state p{margin:0!important;color:#71868c!important;font-size:.78rem!important;line-height:1.45!important}
.mrph-medcore-certificates-body .answer-box{margin:0 0 10px;padding:15px;border:1px solid #dce9eb;border-radius:14px;background:#f7fbfb;box-shadow:none!important}
.mrph-medcore-certificates-body .answer-box strong{color:#174652}
.mrph-medcore-certificates-body .answer-box p{color:#71868c!important}

/* Google account-link button stays functional but adopts MEDCORE secondary control material. */
.mrph-medcore-profile-form .mrph-google-link-button{width:100%!important;margin-top:0!important;border:1px solid #dce5ee!important;border-radius:10px!important;background:transparent!important;color:#172333!important;box-shadow:none!important}

@media(max-width:1050px){
  body.app-body .app-shell{grid-template-columns:230px minmax(0,1fr)!important}
  .mrph-medcore-profile-grid{grid-template-columns:1fr}
  .mrph-medcore-profile-hero{align-items:flex-start;flex-direction:column}
  .mrph-medcore-profile-hero-status{width:100%;text-align:left}
}
@media(max-width:760px){
  body.app-body .app-shell{display:block!important}
  body.app-body .sidebar{position:fixed!important;width:min(86vw,300px)!important;padding:22px 14px!important}
  body.app-body #view{padding:20px!important}
}
@media(max-width:620px){
  .mrph-medcore-profile-workspace{padding-bottom:12px}
  .mrph-medcore-profile-hero,.mrph-medcore-profile-surface{padding:21px 17px;border-radius:19px}
  .mrph-medcore-profile-head{gap:12px}
  .mrph-medcore-profile-hero-status{min-width:0}
  .mrph-medcore-profile-footer{align-items:stretch;flex-direction:column}
  .mrph-medcore-profile-footer p{max-width:none}
  .mrph-medcore-profile-save{width:100%!important}
  .mrph-medcore-account-summary{align-items:flex-start;flex-direction:column}
  .mrph-medcore-account-summary em{align-self:flex-start}
}