/* رعايتي — brand: deep teal #056777 / #007b81, mint accent #d7fa76, Cairo. */
:root{--teal:#056777;--teal-2:#007b81;--teal-3:#00666e;--mint:#dcf5f1;--mint-2:#e7f7f2;--line:#d5e9e8;--ink:#153d47;--muted:#5d7a80;--bg:#ecf7f6;--warn:#f0a741;--danger:#a73144;--ok:#198356;
  font-family:Cairo,Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:var(--teal-2)}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--warn);outline-offset:2px}
.icon{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Shell */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.side{background:#fff;border-left:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow:auto}
.brand{display:flex;align-items:center;gap:9px;color:var(--teal);font-size:26px;font-weight:800;text-decoration:none;margin:0 6px 18px}
.brand svg{width:40px;height:40px;padding:5px;border-radius:13px;background:linear-gradient(145deg,#087783,#005f73);color:#fff;box-shadow:0 5px 12px #06748036}
.side a.nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#365e66;text-decoration:none;font-weight:700;font-size:15px}
.side a.nav-link:hover{background:#f1fcf9}.side a.nav-link.active{background:var(--mint);color:var(--teal-2)}
.side .group{font-size:12px;color:#84a0a4;font-weight:700;margin:14px 12px 4px}
.side form{margin-top:auto}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 26px;background:#ffffffcc;backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;min-height:66px}
.topbar .brand{display:none;margin:0;font-size:23px}.topbar .brand svg{width:34px;height:34px}
.topbar .who{font-size:14px;color:var(--muted)}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-button{border:0;background:transparent;color:#426589;border-radius:12px;width:42px;height:42px;display:grid;place-items:center;position:relative;text-decoration:none}
.icon-button:hover{background:#eefaf7;color:var(--teal-2)}
.badge-dot{position:absolute;top:4px;right:4px;min-width:17px;height:17px;border-radius:9px;background:#dc3545;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.view{width:100%;max-width:860px;margin:0 auto;padding:24px 26px 40px}
.nav{display:none}
.foot-links{text-align:center;font-size:12px;color:var(--muted);padding:12px 0 24px}.foot-links a{color:var(--muted);margin:0 6px}

@media(max-width:860px){
  .app{display:block}.side{display:none}
  .topbar{padding:10px 16px;min-height:60px}.topbar .brand{display:flex}.topbar .who{display:none}
  .view{padding:16px 16px 100px}
  .nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #e4edf0;padding:4px 6px calc(6px + env(safe-area-inset-bottom));z-index:10}
  .nav a{color:#5f7893;font-size:11px;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:10px}
  .nav a.active{color:var(--teal-2);font-weight:800}.nav .icon{width:21px;height:21px}
  .foot-links{padding-bottom:90px}
}

/* Type */
h1,h2,h3{color:#0f3a44;margin:0}
.view>h2,.page-title{font-size:24px;line-height:1.45;margin-bottom:4px}
.muted{color:var(--muted)}.small{font-size:13px}.eyebrow{color:#2c8a8c;font-size:13px;font-weight:700}
.section-heading{font-size:17px;font-weight:800;margin:26px 0 12px;display:flex;justify-content:space-between;align-items:center}
.section-heading a{font-size:13px;color:var(--teal-2);text-decoration:none}
.page-back{color:var(--teal-2);font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;text-decoration:none}

/* Hero banners */
.top-hello,.wallet{background:linear-gradient(128deg,#006b78 4%,#0c9ca3 68%,#3db9af);color:#fff;border-radius:23px;position:relative;overflow:hidden}
.top-hello{padding:24px 22px 22px;min-height:180px}
.top-hello:before{content:'♡';position:absolute;left:0;bottom:-97px;font:280px Arial;color:#ffffff12;pointer-events:none}
.top-hello h2{color:#fff;font-size:24px}.top-hello p{margin:4px 0 16px;color:#eafffb;font-size:14px}
.top-hello .banner-title{font-size:17px;font-weight:800}
.white-cta{display:inline-block;border:0;background:#fff;color:#006c73;border-radius:10px;padding:9px 18px;font-size:14px;font-weight:800;position:relative;text-decoration:none}
.health-hero{background:linear-gradient(120deg,#09657b,#14a5a1);color:#fff;border-radius:20px;padding:18px;margin-top:16px}
.health-hero strong{display:block;font-size:19px}.health-hero span{font-size:12px;color:#eaf8ff}
.health-hero a{display:inline-block;background:#fff;color:#006c73;border-radius:10px;padding:8px 12px;font-weight:800;margin-top:12px;text-decoration:none;font-size:14px}
.health-hero .icon{width:38px;height:38px}

/* Grids & tiles */
.service-grid,.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.service,.tile{border:1px solid var(--line);background:#fff;box-shadow:0 3px 11px #1c5c9f08;border-radius:15px;color:#194d5a;font-size:14px;font-weight:800;text-decoration:none}
.service{min-height:84px;display:flex;align-items:center;gap:10px;padding:12px}
.tile{display:block;padding:14px;min-height:100px}.tile small{display:block;color:var(--muted);font-weight:600;font-size:12px;margin-top:3px}
.service:hover,.tile:hover,.list-row:hover{border-color:#6dcbc4;background:#f1fcf9}
.icon-wrap{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mint);color:#027c83;flex:none}
.tile .icon-wrap{margin-bottom:8px}
.vitals-card{border-radius:17px;background:var(--mint-2);border:1px solid #bce6dd;padding:17px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink);margin-top:18px}
.vitals-card strong{font-size:16px}.vitals-card span{display:block;color:#5d7790;font-size:12px}
.vitals-symbols{display:flex;gap:7px;color:#058689}

/* Cards & rows */
.card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;margin:12px 0;box-shadow:0 3px 12px #245b9709}
.card h3{font-size:16px;margin:0 0 3px}.card p{margin:5px 0;font-size:14px;color:#557079}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pill{border-radius:100px;background:var(--mint-2);color:#057176;font-size:12px;font-weight:700;padding:3px 10px;white-space:nowrap}
.pill.warn{background:#fff3d7;color:#7a5316}.pill.bad{background:#fde8eb;color:#a1283c}.pill.ok{background:#ddf5e9;color:#146c45}.pill.grey{background:#eef2f3;color:#5a6b70}
.list-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid #dfedeb;padding:14px 13px;border-radius:14px;color:#214a55;text-align:right;margin:9px 0;font-size:14px;font-weight:700;text-decoration:none}
.list-row .icon{color:#058689}.list-row .grow{flex:1;min-width:0}
.list-row small,.meta{display:block;font-size:12px;color:#738f96;font-weight:500}
.person{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:#027c83}
.summary-list{margin:12px 0;padding:0;list-style:none}
.summary-list li{border-bottom:1px solid #e5f0ee;padding:9px 0;display:flex;justify-content:space-between;gap:12px;font-size:14px}
.summary-list li:last-child{border:0}.summary-list li span:first-child{color:var(--muted)}
.empty{background:#f5fbfa;border:1px dashed #bfdcd8;border-radius:16px;text-align:center;padding:26px 20px;margin:14px 0;color:#54718b;font-size:14px}
.notice,.info-strip{background:#effaf6;border:1px solid #cce9df;padding:11px 14px;border-radius:13px;color:#316b69;font-size:13px;line-height:1.75;margin:12px 0}
.notice.warn{background:#fff8e8;border-color:#f4ddab;color:#6f4d12}.notice.bad{background:#fdf0f2;border-color:#f3c5cd;color:#8e2336}
.divider{border:0;border-top:1px solid #e6f0ee;margin:15px 0}

/* Buttons */
.primary,.secondary,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;font-size:14px;font-weight:800;text-decoration:none}
.primary{border:0;background:var(--teal-2);color:#fff;padding:11px 18px;min-height:46px}.primary:hover{background:var(--teal-3)}
.secondary{border:1px solid #a8d9d5;background:#fff;color:#006c73;padding:10px 14px;min-height:44px}
.ghost{background:none;border:0;color:var(--teal-2);padding:8px}.ghost.danger{color:var(--danger)}
.full{width:100%;margin-top:12px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.tabs{display:flex;background:var(--mint-2);padding:4px;border-radius:13px;gap:4px;margin:16px 0 6px}
.tabs a{flex:1;text-align:center;border-radius:10px;padding:8px 10px;color:#59738e;font-size:14px;font-weight:700;text-decoration:none}
.tabs a.active{background:#fff;color:#007279;box-shadow:0 2px 8px #154b8519}
.chips{display:flex;gap:7px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.chips a{white-space:nowrap;border:1px solid #c9e3e0;background:#fff;color:#356c6c;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;text-decoration:none}
.chips a.active{background:#e0f7ed;border-color:#0b9a8e;color:#006b71}

/* Forms */
.formlabel,form label:not(.choice):not(.upload-box){display:block;font-weight:700;font-size:14px;margin:15px 0 6px}
.field{border:1px solid #c9e0de;background:#fff;border-radius:12px;padding:11px 12px;color:#174367;width:100%;min-height:48px;font-size:15px}
textarea.field{resize:vertical;min-height:90px}
.errorlist{list-style:none;margin:6px 0 0;padding:0;color:var(--danger);font-size:13px;font-weight:700}
.helptext{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.choices{display:flex;gap:9px;margin:6px 0}
.choice{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;background:#fff;border:1px solid #c9e3e0;color:#356c6c;border-radius:12px;font-weight:700;cursor:pointer}
.choice:has(input:checked){background:#e0f7ed;border:2px solid #0b9a8e;color:#006b71}.choice input{accent-color:var(--teal-2)}
.check{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin:16px 0 4px}.check input{width:19px;height:19px;accent-color:var(--teal-2);margin-top:3px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slot-grid label{margin:0!important;cursor:pointer}
.slot-grid span{display:block;text-align:center;padding:11px 2px;background:#fff;border:1px solid #d1e6e3;color:#224b55;border-radius:11px;font-size:14px;font-weight:700}
.slot-grid input{position:absolute;opacity:0}.slot-grid input:checked+span{border:2px solid var(--teal-2);background:#e9f8f5;color:#006b71}
.slot-grid input:focus-visible+span{outline:3px solid var(--warn)}
.upload-box{display:block;text-align:center;border:2px dashed #9ccec7;background:#f5fcfa;border-radius:17px;padding:18px 12px;color:#11747a;font-size:14px;font-weight:800;cursor:pointer;margin-top:6px}
.upload-box input{display:block;margin:10px auto 0;font-size:13px;max-width:100%}
.upload-box small{display:block;color:#608080;font-size:12px;font-weight:500;margin-top:4px}
.price-box{background:#eff9ee;border:1px solid #c9e6c2;border-radius:14px;padding:13px;margin:14px 0;color:#315c41}
.price-box strong{display:block}.price-box small{color:#587864}

/* Status */
.messages{list-style:none;margin:0 0 14px;padding:0}
.messages li{border-radius:12px;padding:11px 13px;font-size:14px;font-weight:700;margin-bottom:8px;background:#e9f9f0;border:1px solid #b9e7c9;color:#226b48}
.messages li.error{background:#fdf0f2;border-color:#f3c5cd;color:#8e2336}
.steps{list-style:none;margin:16px 0;padding:0;display:flex;gap:6px}
.steps li{flex:1;text-align:center;font-size:12px;font-weight:700;color:#8aa3a7;position:relative;padding-top:24px}
.steps li:before{content:'';position:absolute;top:4px;right:50%;transform:translateX(50%);width:14px;height:14px;border-radius:50%;background:#d9e8e6;border:3px solid #fff;box-shadow:0 0 0 1px #c7dcd9}
.steps li.done{color:var(--teal-2)}.steps li.done:before{background:var(--teal-2);box-shadow:0 0 0 1px var(--teal-2)}
.success{text-align:center;padding:30px 5px}
.success-badge{background:#ddf5e9;border-radius:50%;width:78px;height:78px;display:grid;place-items:center;margin:0 auto 18px;color:#047b74}
.success-badge .icon{width:36px;height:36px}

/* Vitals */
.big-value{display:flex;align-items:baseline;gap:8px;margin:8px 0}
.big-value strong{font-size:42px;color:#0c6577;line-height:1.2}.big-value span{font-size:14px;color:#56748d}
.chart-wrap{background:#f4fbfa;border-radius:13px;padding:10px;margin:12px 0 6px}.chart-wrap svg{display:block;width:100%;height:auto}
.chart-axis{display:flex;justify-content:space-between;color:#6c8c90;font-size:11px;padding:2px 3px}

/* Insurance card */
.ins-card{background:linear-gradient(135deg,#04525e,#0b8d94 60%,#2fb3a6);color:#fff;border-radius:22px;padding:22px;position:relative;overflow:hidden;box-shadow:0 18px 40px #05677733;max-width:460px}
.ins-card:after{content:'✚';position:absolute;left:18px;top:6px;font-size:120px;color:#ffffff14}
.ins-card .org{font-size:13px;opacity:.9}.ins-card h3{color:#fff;font-size:22px;margin:16px 0 2px}
.ins-card .num{font-size:20px;letter-spacing:2px;direction:ltr;text-align:right;margin:14px 0 4px;font-weight:800}
.ins-card dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:12px 0 0;font-size:13px}.ins-card dt{opacity:.75}.ins-card dd{margin:0;font-weight:700}
.qr{background:#fff;border-radius:16px;padding:12px;display:inline-block;margin-top:14px}.qr svg{display:block;width:150px;height:150px}

/* Auth & landing */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-brand{background:linear-gradient(150deg,#035f6b,#0c9ca3 70%,#3db9af);color:#fff;padding:48px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-brand:after{content:'♡';position:absolute;left:-30px;bottom:-140px;font:420px Arial;color:#ffffff10}
.auth-brand .brand{color:#fff;font-size:38px}.auth-brand .brand svg{width:56px;height:56px;background:#ffffff22;box-shadow:none}
.auth-brand h1{color:#fff;font-size:clamp(28px,3.2vw,44px);line-height:1.35;margin:26px 0 12px}
.auth-brand p{color:#e2fbf6;font-size:16px;line-height:1.9;max-width:460px}
.auth-brand ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.auth-brand li{display:flex;gap:10px;align-items:center;font-weight:700}.auth-brand li .icon{color:#d7fa76}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 22px;background:#fff}
.auth-form .box{width:100%;max-width:420px}
.auth-form h2{font-size:26px;margin-bottom:6px}
.org-line{display:inline-flex;align-items:center;gap:8px;background:#ffffff1f;border:1px solid #ffffff38;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700}
@media(max-width:860px){.auth{display:block}.auth-brand{padding:30px 22px 36px}.auth-brand ul{display:none}.auth-brand h1{font-size:26px;margin-top:16px}}
.landing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:22px 0}
@media print{.side,.topbar,.nav,.foot-links,.no-print{display:none!important}.app{display:block}.view{padding:0}}
.bar{height:7px;border-radius:9px;background:#e4f1ef;overflow:hidden;margin:8px 0 2px}.bar i{display:block;height:100%;background:var(--teal-2);border-radius:9px}
.bar.watch i{background:var(--warn)}
.week-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0}
.week-grid .card{margin:0}.week-grid .big-value strong{font-size:28px}
.doses{display:flex;gap:7px;flex-wrap:wrap}.doses form{margin:0}
.dose{min-width:46px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--muted);font-weight:800}
.dose.taken{background:var(--teal-2);border-color:var(--teal-2);color:#fff}
.keybox{display:flex;gap:8px;align-items:center;background:#f3faf9;border:1px dashed #9fd3cd;border-radius:12px;padding:10px 12px;margin:8px 0;font:600 13px ui-monospace,Menlo,monospace;direction:ltr;word-break:break-all}
.keybox span{flex:1}.keybox button{flex:none}
details.howto summary{cursor:pointer;font-weight:800;color:var(--teal-2);font-size:14px;margin:6px 0}
details.howto ol{font-size:14px;line-height:1.9;color:#3f6168;padding-inline-start:20px}