/* Dr Hariz PWA & App Menu — tuned for the dark drhariz.com theme */

.dh-app{
	--dh-accent:#5b83ff;
	--dh-ground:#101010;
	--dh-card:#191b21;
	--dh-card-hover:#21242c;
	--dh-chip:#24272f;
	--dh-line:#2a2d36;
	--dh-ink:#f2f4f8;
	--dh-ink-2:#c2c8d6;
	--dh-ink-3:#8a93a6;
	max-width:560px;
	margin:0 auto !important;
	padding:8px 16px 48px !important;
	color:var(--dh-ink) !important;
	font-family:inherit;
	-webkit-font-smoothing:antialiased;
}

.dh-app *{box-sizing:border-box}
.dh-app a{text-decoration:none !important;box-shadow:none !important}
.dh-app h1,
.dh-app h2{margin:0 !important;font-family:inherit !important;text-transform:none}

/* header */
.dh-app__bar{display:flex;align-items:center;gap:12px;padding:12px 2px 20px}
.dh-app__avatar{
	width:46px !important;height:46px !important;border-radius:14px !important;
	object-fit:cover;flex:none;background:var(--dh-chip);
}
.dh-app__id{min-width:0}
.dh-app__id h1{
	font-size:19px !important;line-height:1.2 !important;font-weight:700 !important;
	letter-spacing:-.01em !important;color:var(--dh-ink) !important;
}
.dh-app__id p{
	margin:3px 0 0 !important;font-size:12.5px !important;line-height:1.3 !important;
	color:var(--dh-ink-3) !important;
}
.dh-lang{
	margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:2px;
	border:1px solid var(--dh-line) !important;background:transparent !important;
	border-radius:999px !important;box-shadow:none !important;
	padding:4px !important;cursor:pointer;font-size:11px !important;font-weight:700;
	letter-spacing:.04em;font-family:inherit;line-height:1;
}
.dh-lang span{
	padding:5px 10px;border-radius:999px;line-height:1;color:var(--dh-ink-3) !important;
}
.dh-lang .dh-lang__on{background:var(--dh-accent);color:#fff !important}
.dh-app[data-lang="ms"] .dh-lang .dh-lang__on{background:transparent;color:var(--dh-ink-3) !important}
.dh-app[data-lang="ms"] .dh-lang .dh-lang__off{background:var(--dh-accent);color:#fff !important}
.dh-lang:focus-visible{outline:2px solid var(--dh-accent);outline-offset:2px}

/* quick row */
.dh-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.dh-quick__item{
	display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
	background:var(--dh-card);border:1px solid var(--dh-line);border-radius:14px;padding:12px 5px;
	color:var(--dh-ink-2) !important;font-size:10.5px !important;font-weight:600;line-height:1.25;
	transition:transform .12s ease,background .12s ease;
}
.dh-quick__item:hover{background:var(--dh-card-hover);color:var(--dh-ink) !important}
.dh-quick__item:active{transform:scale(.97)}
.dh-quick__glyph{width:26px;height:26px;color:var(--dh-accent);display:grid;place-items:center}
.dh-quick__glyph svg{width:24px;height:24px}

/* sections */
.dh-sec{margin-top:26px;scroll-margin-top:80px}
.dh-sec__title{
	margin:0 2px 10px !important;font-size:11px !important;font-weight:600 !important;
	letter-spacing:.16em !important;line-height:1.4 !important;
	text-transform:uppercase !important;color:var(--dh-ink-3) !important;
}
.dh-rows{display:flex;flex-direction:column;gap:8px}

.dh-row{
	display:flex;align-items:center;gap:12px;padding:12px 13px;
	background:var(--dh-card);border:1px solid var(--dh-line);border-radius:14px;
	color:var(--dh-ink) !important;
	transition:background .12s ease,border-color .12s ease,transform .12s ease;
}
.dh-row:hover{background:var(--dh-card-hover);border-color:#363a45}
.dh-row:active{transform:scale(.995)}
.dh-row:focus-visible{outline:2px solid var(--dh-accent);outline-offset:2px}
.dh-row__glyph{
	width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
	background:var(--dh-chip);color:var(--dh-accent);
}
.dh-row__glyph svg{width:21px;height:21px}
.dh-row__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.dh-row__title{
	font-size:14px !important;font-weight:600 !important;line-height:1.3 !important;
	color:var(--dh-ink) !important;
}
.dh-row__desc{font-size:11.5px !important;line-height:1.4 !important;color:var(--dh-ink-3) !important}
.dh-row__chev{margin-left:auto;color:var(--dh-ink-3);font-size:20px;line-height:1;flex:none}

.dh-foot{
	margin:30px 2px 0 !important;font-size:11.5px !important;
	color:var(--dh-ink-3) !important;text-align:center;
}

/* install pill (bottom left, clear of the chat bubble) */
.dh-install{
	position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9998;
	display:none;align-items:center;gap:8px;border:0;cursor:pointer;
	background:#3b6df0 !important;color:#fff !important;border-radius:999px !important;
	padding:12px 18px !important;font-size:14px !important;font-weight:600;
	font-family:inherit;line-height:1;
	box-shadow:0 14px 30px -12px rgba(59,109,240,.8);
}
.dh-install.is-on{display:inline-flex}
.dh-install svg{width:18px;height:18px}
html.dh-standalone .dh-install{bottom:calc(78px + env(safe-area-inset-bottom))}

.dh-sheet{
	position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:9999;
	background:#191b21;border:1px solid #2a2d36;border-radius:18px;padding:16px;
	box-shadow:0 22px 44px -20px rgba(0,0,0,.8);display:none;
	font-family:inherit;color:#f2f4f8;max-width:420px;margin:0 auto;
}
.dh-sheet.is-on{display:block}
.dh-sheet h3{margin:0 0 8px !important;font-size:15px !important;font-weight:700 !important;color:#f2f4f8 !important}
.dh-sheet ol{margin:0 !important;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.dh-sheet li{font-size:13px;color:#c2c8d6;line-height:1.5}
.dh-sheet button{
	margin-top:14px;border:0;background:#24272f !important;color:#c2c8d6 !important;
	border-radius:999px !important;padding:9px 16px !important;font-size:13px !important;
	font-weight:600;cursor:pointer;font-family:inherit;
}

/* bottom tab bar, installed app only */
.dh-tabbar{
	position:fixed;left:0;right:0;bottom:0;z-index:9997;display:none;
	background:#141519;border-top:1px solid #2a2d36;
	padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
html.dh-standalone .dh-tabbar{display:flex}
html.dh-standalone body{padding-bottom:78px !important}
.dh-tabbar a{
	flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
	text-decoration:none !important;color:#8a93a6 !important;font-size:10px;font-weight:600;
	padding:4px 2px;line-height:1.2;
}
.dh-tabbar a.is-on{color:#5b83ff !important}
.dh-tabbar svg{width:21px;height:21px}

/* light-theme variant, in case the site background changes */
.dh-app.dh-app--light{
	--dh-accent:#3b6df0;
	--dh-ground:#ffffff;
	--dh-card:#eef2fa;
	--dh-card-hover:#e4ebfa;
	--dh-chip:#ffffff;
	--dh-line:#dde4f2;
	--dh-ink:#101728;
	--dh-ink-2:#4e5a75;
	--dh-ink-3:#8490ab;
}

@media (prefers-reduced-motion:reduce){
	.dh-app *,.dh-install{transition:none !important}
}